<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>@yield('title', 'Divine Drops — Farm-Fresh Natural Skincare & Haircare')</title>
    <meta name="description" content="@yield('meta_description', 'Divine Drops — farm-fresh, small-batch luxury skincare, haircare, and artisanal perfumes made with Kashmiri saffron and goat milk.')">
    <meta name="keywords" content="@yield('meta_keywords', 'natural skincare, goat milk cream, saffron moisturizer, divine drops, organic beauty')">
    <link rel="canonical" href="@yield('canonical', url()->current())">

    <!-- OpenGraph Social Sharing Meta Tags -->
    <meta property="og:site_name" content="Divine Drops Luxury Skincare">
    <meta property="og:title" content="@yield('og_title', View::getSection('title') ?? 'Divine Drops Luxury Skincare')">
    <meta property="og:description" content="@yield('og_description', View::getSection('meta_description') ?? 'Farm-fresh natural skincare infused with Kashmiri saffron and goat milk.')">
    <meta property="og:image" content="@yield('og_image', asset('images/logo.png'))">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="@yield('og_type', 'website')">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="@yield('og_title', View::getSection('title') ?? 'Divine Drops Luxury Skincare')">
    <meta name="twitter:description" content="@yield('og_description', View::getSection('meta_description') ?? 'Farm-fresh natural skincare infused with Kashmiri saffron and goat milk.')">
    <meta name="twitter:image" content="@yield('og_image', asset('images/logo.png'))">

    @yield('json_ld')

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-dvh flex flex-col justify-between">
    <a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[60] focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:shadow-lift">Skip to content</a>

    @include('partials.header')

    <!-- Flash notifications -->
    @if(session('success'))
        <div class="bg-moss-100 border-b border-moss-300 px-4 py-3 text-center text-sm font-medium text-moss-900">
            ✓ {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-100 border-b border-red-300 px-4 py-3 text-center text-sm font-medium text-red-900">
            ✕ {{ session('error') }}
        </div>
    @endif

    <main id="main" class="flex-1">
        @yield('content')
    </main>

    @include('partials.footer')
</body>
</html>
