<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Dynamic SEO & Meta Tags -->
    @php
        $siteName = \App\Models\Setting::where('key', 'store_name')->value('value') ?? config('app.name', 'DigiShop');
        $siteDesc = \App\Models\Setting::where('key', 'store_description')->value('value') ?? 'Marketplace produk digital terbaik.';
        $appLogo = \App\Models\Setting::where('key', 'app_logo')->value('value');
        $favicon = $appLogo ? Storage::url($appLogo) : asset('favicon.ico');
    @endphp

    <title>@yield('title', $siteName)</title>
    <meta name="description" content="@yield('meta_description', $siteDesc)">
    <meta name="author" content="{{ $siteName }}">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ $favicon }}">

    <!-- Open Graph / Web & Facebook -->
    <meta property="og:type" content="@yield('og_type', 'website')">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:title" content="@yield('title', $siteName)">
    <meta property="og:description" content="@yield('meta_description', $siteDesc)">
    <meta property="og:image" content="@yield('og_image', url($favicon))">

    <!-- Twitter Cards -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="{{ url()->current() }}">
    <meta name="twitter:title" content="@yield('title', $siteName)">
    <meta name="twitter:description" content="@yield('meta_description', $siteDesc)">
    <meta name="twitter:image" content="@yield('og_image', url($favicon))">

    <!-- Canonical URL to prevent duplicate content -->
    <link rel="canonical" href="@yield('canonical', url()->current())">

    <!-- Schema.org JSON-LD -->
    @yield('schema')

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased bg-gray-50 text-gray-900 flex flex-col min-h-screen">
    
    <!-- Navbar -->
    <nav x-data="{ open: false }" class="bg-white border-b border-gray-100 shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- Logo -->
                <div class="flex">
                    <div class="shrink-0 flex items-center">
                        @php
                            $navStoreName = \App\Models\Setting::where('key', 'store_name')->value('value') ?? 'DigiShop';
                            $navStoreDesc = \App\Models\Setting::where('key', 'store_description')->value('value') ?? '';
                        @endphp
                        <a href="{{ route('home') }}" class="flex items-center gap-2.5">
                            <x-heroicon-o-shopping-bag class="w-8 h-8 text-violet-600 flex-shrink-0" />
                            <div class="flex flex-col">
                                <span class="text-lg font-extrabold text-gray-900 leading-tight tracking-tight">{{ $navStoreName }}</span>
                                @if($navStoreDesc)
                                    <span class="text-[11px] font-medium text-violet-500 leading-tight">{{ $navStoreDesc }}</span>
                                @endif
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Navigation Links / Auth -->
                <div class="hidden sm:flex sm:items-center sm:ms-6 gap-4">
                    @auth
                        @if(Auth::user()->hasRole('admin'))
                            <a href="{{ route('admin.dashboard') }}" class="text-sm font-medium text-gray-500 hover:text-violet-600">Admin Panel</a>
                        @endif
                        <a href="{{ route('dashboard') }}" class="text-sm font-medium text-gray-500 hover:text-violet-600">Dashboard</a>
                        <form method="POST" action="{{ route('logout') }}" class="inline">
                            @csrf
                            <button type="submit" class="text-sm font-medium text-gray-500 hover:text-violet-600">Log Out</button>
                        </form>
                    @else
                        <a href="{{ route('login') }}" class="px-4 py-2 text-sm font-medium text-white bg-violet-600 rounded-lg hover:bg-violet-700 transition">Login</a>
                    @endauth
                </div>

                <!-- Hamburger -->
                <div class="-me-2 flex items-center sm:hidden">
                    <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                            <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Responsive Navigation Menu -->
        <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
            <div class="pt-4 pb-1 border-t border-gray-200">
                @auth
                    <div class="px-4 border-b border-gray-100 pb-3">
                        <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                        <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
                    </div>
                    @if(Auth::user()->hasRole('admin'))
                        <x-responsive-nav-link :href="route('admin.dashboard')">Admin Panel</x-responsive-nav-link>
                    @endif
                    <x-responsive-nav-link :href="route('dashboard')">Dashboard</x-responsive-nav-link>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <x-responsive-nav-link :href="route('logout')" onclick="event.preventDefault(); this.closest('form').submit();">Log Out</x-responsive-nav-link>
                    </form>
                @else
                    <x-responsive-nav-link :href="route('login')">Login</x-responsive-nav-link>
                @endauth
            </div>
        </div>
    </nav>

    <!-- Page Content -->
    <main class="flex-grow">
        {{ $slot }}
    </main>

    <!-- Footer -->
    @php
        $s = \App\Models\Setting::all()->pluck('value', 'key');
        $storeName    = $s['store_name']         ?? 'DigiShop';
        $storeDesc    = $s['store_description']  ?? '';
        $storeAbout   = $s['store_about']        ?? '';
        $storeAddress = $s['store_address']      ?? '';
        $storePhone   = $s['store_phone']        ?? '';
        $storeWa      = preg_replace('/[^0-9]/', '', $s['whatsapp_number'] ?? '');
        $socialIg     = $s['social_instagram']   ?? '';
        $socialFb     = $s['social_facebook']    ?? '';
        $socialTt     = $s['social_tiktok']      ?? '';
        $socialYt     = $s['social_youtube']     ?? '';
        $footerLink1Label = $s['footer_link1_label'] ?? '';
        $footerLink1Url   = $s['footer_link1_url']   ?? '';
        $footerLink2Label = $s['footer_link2_label'] ?? '';
        $footerLink2Url   = $s['footer_link2_url']   ?? '';
        $footerLink3Label = $s['footer_link3_label'] ?? '';
        $footerLink3Url   = $s['footer_link3_url']   ?? '';
        $footerLink4Label = $s['footer_link4_label'] ?? '';
        $footerLink4Url   = $s['footer_link4_url']   ?? '';
        $footerLink5Label = $s['footer_link5_label'] ?? '';
        $footerLink5Url   = $s['footer_link5_url']   ?? '';
        $footerLink6Label = $s['footer_link6_label'] ?? '';
        $footerLink6Url   = $s['footer_link6_url']   ?? '';
        $footerExtLabel1  = $s['footer_ext_label1'] ?? '';
        $footerExtUrl1    = $s['footer_ext_url1']   ?? '';
        $footerExtLabel2  = $s['footer_ext_label2'] ?? '';
        $footerExtUrl2    = $s['footer_ext_url2']   ?? '';
        $footerExtLabel3  = $s['footer_ext_label3'] ?? '';
        $footerExtUrl3    = $s['footer_ext_url3']   ?? '';
        $footerExtLabel4  = $s['footer_ext_label4'] ?? '';
        $footerExtUrl4    = $s['footer_ext_url4']   ?? '';
        $footerExtLabel5  = $s['footer_ext_label5'] ?? '';
        $footerExtUrl5    = $s['footer_ext_url5']   ?? '';
        $footerExtLabel6  = $s['footer_ext_label6'] ?? '';
        $footerExtUrl6    = $s['footer_ext_url6']   ?? '';
        $footerPages      = \App\Models\Page::published()->where('show_in_footer', true)->orderBy('title')->get();
    @endphp

    <footer class="bg-white border-t border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-14 pb-8">

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
                
                {{-- KOLOM 1: Identitas Toko --}}
                <div class="lg:col-span-1 space-y-4">
                    <a href="{{ route('home') }}" class="flex items-center gap-3">
                        <x-heroicon-o-shopping-bag class="w-10 h-10 text-violet-600 flex-shrink-0" />
                        <div class="flex flex-col">
                            <span class="text-lg font-extrabold text-slate-900 leading-tight tracking-tight">{{ $storeName }}</span>
                            @if($storeDesc)
                            <span class="text-sm font-medium text-violet-500 leading-snug">{{ $storeDesc }}</span>
                            @endif
                        </div>
                    </a>
                    @if($storeAbout)
                    <p class="text-sm text-slate-400 leading-relaxed">{{ $storeAbout }}</p>
                    @endif
                </div>

                {{-- KOLOM 2: Link Menu (Hanya yang dikonfigurasi admin) --}}
                <div>
                    <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Menu</h3>
                    <ul class="space-y-2.5">
                        @if($footerLink1Label && $footerLink1Url)
                        <li><a href="{{ $footerLink1Url }}" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors">{{ $footerLink1Label }}</a></li>
                        @endif
                        @if($footerLink2Label && $footerLink2Url)
                        <li><a href="{{ $footerLink2Url }}" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors">{{ $footerLink2Label }}</a></li>
                        @endif
                        @if($footerLink3Label && $footerLink3Url)
                        <li><a href="{{ $footerLink3Url }}" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors">{{ $footerLink3Label }}</a></li>
                        @endif
                        @if($footerLink4Label && $footerLink4Url)
                        <li><a href="{{ $footerLink4Url }}" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors">{{ $footerLink4Label }}</a></li>
                        @endif
                        @if($footerLink5Label && $footerLink5Url)
                        <li><a href="{{ $footerLink5Url }}" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors">{{ $footerLink5Label }}</a></li>
                        @endif
                        @if($footerLink6Label && $footerLink6Url)
                        <li><a href="{{ $footerLink6Url }}" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors">{{ $footerLink6Label }}</a></li>
                        @endif
                        @foreach($footerPages as $fp)
                        <li><a href="{{ route('page.show', $fp->slug) }}" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors">{{ $fp->title }}</a></li>
                        @endforeach
                        @if(!$footerLink1Label && !$footerLink2Label && !$footerLink3Label && !$footerLink4Label && !$footerLink5Label && !$footerLink6Label && $footerPages->isEmpty())
                        <li class="text-sm text-slate-400 italic">Belum dikonfigurasi.</li>
                        @endif
                    </ul>
                </div>

                {{-- KOLOM 3: Tautan Eksternal --}}
                <div>
                    <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Tautan</h3>
                    <ul class="space-y-2.5">
                        @if($footerExtLabel1 && $footerExtUrl1)
                        <li><a href="{{ $footerExtUrl1 }}" target="_blank" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors flex items-center gap-1.5"><x-heroicon-o-arrow-top-right-on-square class="w-3.5 h-3.5 flex-shrink-0" />{{ $footerExtLabel1 }}</a></li>
                        @endif
                        @if($footerExtLabel2 && $footerExtUrl2)
                        <li><a href="{{ $footerExtUrl2 }}" target="_blank" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors flex items-center gap-1.5"><x-heroicon-o-arrow-top-right-on-square class="w-3.5 h-3.5 flex-shrink-0" />{{ $footerExtLabel2 }}</a></li>
                        @endif
                        @if($footerExtLabel3 && $footerExtUrl3)
                        <li><a href="{{ $footerExtUrl3 }}" target="_blank" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors flex items-center gap-1.5"><x-heroicon-o-arrow-top-right-on-square class="w-3.5 h-3.5 flex-shrink-0" />{{ $footerExtLabel3 }}</a></li>
                        @endif
                        @if($footerExtLabel4 && $footerExtUrl4)
                        <li><a href="{{ $footerExtUrl4 }}" target="_blank" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors flex items-center gap-1.5"><x-heroicon-o-arrow-top-right-on-square class="w-3.5 h-3.5 flex-shrink-0" />{{ $footerExtLabel4 }}</a></li>
                        @endif
                        @if($footerExtLabel5 && $footerExtUrl5)
                        <li><a href="{{ $footerExtUrl5 }}" target="_blank" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors flex items-center gap-1.5"><x-heroicon-o-arrow-top-right-on-square class="w-3.5 h-3.5 flex-shrink-0" />{{ $footerExtLabel5 }}</a></li>
                        @endif
                        @if($footerExtLabel6 && $footerExtUrl6)
                        <li><a href="{{ $footerExtUrl6 }}" target="_blank" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition-colors flex items-center gap-1.5"><x-heroicon-o-arrow-top-right-on-square class="w-3.5 h-3.5 flex-shrink-0" />{{ $footerExtLabel6 }}</a></li>
                        @endif
                        @if(!$footerExtLabel1 && !$footerExtLabel2 && !$footerExtLabel3 && !$footerExtLabel4 && !$footerExtLabel5 && !$footerExtLabel6)
                        <li class="text-sm text-slate-400 italic">Belum dikonfigurasi.</li>
                        @endif
                    </ul>
                </div>

                {{-- KOLOM 4: Kontak & Sosial Media --}}
                <div>
                    <h3 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-4">Hubungi Kami</h3>
                    <ul class="space-y-3">
                        @if($storeAddress)
                        <li class="flex items-start gap-2.5 text-sm text-slate-500">
                            <x-heroicon-o-map-pin class="w-4 h-4 text-slate-400 flex-shrink-0 mt-0.5" />
                            <span class="leading-relaxed">{{ $storeAddress }}</span>
                        </li>
                        @endif
                        @if($storePhone)
                        <li>
                            <a href="tel:{{ $storePhone }}" class="flex items-center gap-2.5 text-sm text-slate-500 hover:text-violet-600 transition-colors">
                                <x-heroicon-o-phone class="w-4 h-4 text-slate-400 flex-shrink-0" />
                                {{ $storePhone }}
                            </a>
                        </li>
                        @endif
                        @if($storeWa)
                        <li>
                            <a href="https://wa.me/{{ $storeWa }}" target="_blank" class="flex items-center gap-2.5 text-sm text-slate-500 hover:text-green-600 transition-colors">
                                <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.711.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.573-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.393.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.082 21.652c-1.638 0-3.328-.431-4.706-1.189l-5.32 1.398 1.439-5.185c-.86-1.465-1.31-3.236-1.31-5.066 0-5.309 4.319-9.625 9.627-9.625 5.31 0 9.63 4.316 9.63 9.624 0 5.311-4.32 9.625-9.63 9.625l-.01.018v-.006z"/></svg>
                                WhatsApp CS
                            </a>
                        </li>
                        @endif
                    </ul>

                    {{-- Social Media Icons --}}
                    @if($socialIg || $socialFb || $socialTt || $socialYt)
                    <div class="flex items-center gap-3 mt-5">
                        @if($socialIg)
                        <a href="{{ $socialIg }}" target="_blank" title="Instagram" class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-pink-100 hover:text-pink-600 flex items-center justify-center text-slate-500 transition-colors">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                        </a>
                        @endif
                        @if($socialFb)
                        <a href="{{ $socialFb }}" target="_blank" title="Facebook" class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-blue-100 hover:text-blue-600 flex items-center justify-center text-slate-500 transition-colors">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        </a>
                        @endif
                        @if($socialTt)
                        <a href="{{ $socialTt }}" target="_blank" title="TikTok" class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-slate-200 hover:text-slate-900 flex items-center justify-center text-slate-500 transition-colors">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
                        </a>
                        @endif
                        @if($socialYt)
                        <a href="{{ $socialYt }}" target="_blank" title="YouTube" class="w-8 h-8 rounded-lg bg-gray-100 hover:bg-red-100 hover:text-red-600 flex items-center justify-center text-slate-500 transition-colors">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg>
                        </a>
                        @endif
                    </div>
                    @endif
                </div>

            </div>

            {{-- Bottom Bar --}}
            <div class="pt-6 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3">
                <p class="text-xs text-slate-400">&copy; {{ date('Y') }} <strong>{{ $storeName }}</strong>. All rights reserved.</p>
                <p class="text-xs text-slate-300">Powered by <span class="font-semibold text-slate-400">DigiShop</span></p>
            </div>

        </div>
    </footer>
</body>
</html>


