<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @php($seo = $seo ?? \App\Support\SeoMeta::make(trim($__env->yieldContent('title', '8Stores'))))
        <title>{{ $seo['title'] }}</title>
        <meta name="description" content="{{ $seo['description'] }}">
        <meta property="og:title" content="{{ $seo['title'] }}">
        <meta property="og:description" content="{{ $seo['description'] }}">
        <meta property="og:type" content="{{ $seo['type'] }}">
        @if ($seo['image'])
            <meta property="og:image" content="{{ url($seo['image']) }}">
        @endif
        <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/site.css') }}">
    </head>
    <body>
        <header class="site-header">
            <a class="brand" href="{{ route('storefront.home') }}">
                @include('partials.brand')
            </a>

            <div class="header-actions">
                @auth('customer')
                    <details class="account-menu">
                        <summary>
                            <span>{{ \Illuminate\Support\Str::of(auth('customer')->user()->name)->substr(0, 1)->upper() }}</span>
                            <strong>{{ auth('customer')->user()->name }}</strong>
                        </summary>
                        <div class="account-menu-panel">
                            <a href="{{ route('customer.account') }}">Account</a>
                            <a href="{{ route('customer.profile.edit') }}">Edit Profile</a>
                            <a href="{{ route('customer.favorites.index') }}">Favorites</a>
                            <a href="{{ route('customer.orders.index') }}">Orders</a>
                            <a href="{{ route('orders.track') }}">Track Order</a>
                            <a href="{{ route('customer.cart.index') }}">Bag</a>
                            <form method="POST" action="{{ route('customer.logout') }}">
                                @csrf
                                <button type="submit">Logout</button>
                            </form>
                        </div>
                    </details>
                @else
                    <a class="header-link" href="{{ route('login') }}">Login</a>
                    <a class="header-link" href="{{ route('orders.track') }}">Track order</a>
                    <a class="header-link strong" href="{{ route('customer.register') }}">Sign up</a>
                @endauth
                <a class="cart-button" href="{{ auth('customer')->check() ? route('customer.cart.index') : route('login') }}">
                    <span>Bag</span>
                    <strong>{{ auth('customer')->user()?->cartItems()->sum('quantity') ?? 0 }}</strong>
                </a>
            </div>
        </header>

        <main>
            @yield('content')
        </main>

        <footer class="site-footer">
            <div>
                <a class="brand" href="{{ route('storefront.home') }}">
                    @include('partials.brand')
                </a>
                <p>Modern shopping, clear orders, and reliable support.</p>
            </div>
            <nav>
                <a href="{{ route('content-pages.show', 'terms-and-conditions') }}">Terms and Conditions</a>
                <a href="{{ route('content-pages.show', 'faqs') }}">FAQs</a>
                <a href="{{ route('content-pages.show', 'privacy-policy') }}">Privacy Policy</a>
            </nav>
        </footer>
        @stack('scripts')
    </body>
</html>
