@extends('layouts.app')

@section('content')

<div class="">
    <main>
        <div class="w-full px-4 pb-60">
            <div
                class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-5">
                <!-- SOL KOLON -->
                <div class="grid gap-4 lg:col-span-3">

                    <div class="grid gap-6">
                        <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                            <li
                                class="col-span-1 flex flex-col divide-y divide-stone-200 border border-stone-300 rounded-lg bg-white text-center shadow">
                                <div class="flex flex-1 flex-col p-6">
                                    <img src="{{ asset('uploads\img\beko-x30tr.webp') }}" alt=""
                                        class="mx-auto shrink-0 rounded-lg bg-stone-300 outline -outline-offset-1 outline-black/5" />
                                    <h3 class="mt-6 text-lg font-medium text-stone-900">BEKO</h3>
                                    <dl class="mt-1 flex grow flex-col justify-between">
                                        <dt class="sr-only">Title</dt>
                                        <dd class="text-base text-stone-500">X30TR</dd>
                                        <dt class="sr-only">Role</dt>
                                        <dd class="mt-3">
                                            <span
                                                class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 inset-ring inset-ring-green-600/20">Aktif</span>
                                        </dd>
                                    </dl>
                                </div>
                                <div>
                                    <div class="-mt-px flex divide-x divide-stone-200">
                                        <div class="flex w-0 flex-1">
                                            <a href="mailto:janecooper@example.com"
                                                class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-stone-900">
                                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon"
                                                    aria-hidden="true" class="size-5 text-stone-400">
                                                    <path
                                                        d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z" />
                                                    <path
                                                        d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z" />
                                                </svg>
                                                Email
                                            </a>
                                        </div>
                                        <div class="-ml-px flex w-0 flex-1">
                                            <a href="tel:+1-202-555-0170"
                                                class="relative inline-flex w-0 flex-1 items-center justify-center gap-x-2 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-stone-900 tracking-tight">
                                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon"
                                                    aria-hidden="true" class="size-5 text-stone-400">
                                                    <path
                                                        d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
                                                        clip-rule="evenodd" fill-rule="evenodd" />
                                                </svg>
                                                0850 210 0 888
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>

                {{-- SAĞ KOLON --}}
                <div class="grid gap-4 lg:col-span-2">

                    {{-- DÖVİZ KURLARI --}}
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div class="flex gap-x-1">
                            <span class="pr-1 text-xs text-stone-500">USD</span><span
                                class="font-semibold tracking-tight">32,45</span> |
                            <span class="pr-1 text-xs text-stone-500">EUR</span><span
                                class="font-semibold tracking-tight">35,20</span> |
                            <span class="pr-1 text-xs text-stone-500">GBP</span><span
                                class="font-semibold tracking-tight">41,15</span>
                            <span class="flex items-center pl-3 text-xs font-light gap-x-1 text-stone-400">
                                <span class="text-sm material-symbols-rounded">
                                    cached
                                </span>
                                25.05.2026
                            </span>
                        </div>
                    </div>

                    <!-- MENÜ MODU -->
                    <div class="grid p-4 bg-white rounded-lg shadow gap-y-4 ring-1 ring-stone-300">
                        <h2 class="flex items-center text-lg leading-6 gap-x-2 font-jbmono-bold text-stone-700">
                            <span class="material-symbols-rounded text-stone-500">
                                text_compare
                            </span>
                            Menü Modu
                        </h2>
                    </div>

                </div>
            </div>
    </main>
</div>

@endsection