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

        @php
            // Extract current page props from Inertia
            $page = json_decode(json_encode($page ?? []), true);
            $post = $page['props']['post'] ?? null;
            $siteName = $seo['site_name'] ?? config('app.name', 'Titan News');
            $currentUrl = url()->current();

            // Determine Meta Details
            $metaTitle = $post ? $post['title'] : ($seo['og_title'] ?? $siteName);
            $metaDesc = $post ? $post['meta_description'] : ($seo['og_description'] ?? '');
            
            // Image Logic (Ensure Absolute URL)
            $metaImage = $seo['og_image'] ?? null;
            if ($post && !empty($post['image_path'])) {
                $metaImage = str_starts_with($post['image_path'], 'http') 
                    ? $post['image_path'] 
                    : url($post['image_path']);
            } elseif ($metaImage && !str_starts_with($metaImage, 'http')) {
                $metaImage = url($metaImage);
            }
        @endphp

        <!-- Standard SEO Meta Tags -->
        <title inertia>{{ $metaTitle }} | {{ $siteName }}</title>
        <meta name="description" content="{{ $metaDesc }}">
        <meta name="keywords" content="{{ $seo['meta_keywords'] ?? '' }}">

        <!-- PWA TAGS -->
        @if(($pwa['pwa_enabled'] ?? 'false') === 'true')
            <link rel="manifest" href="/manifest.json">
            <meta name="theme-color" content="{{ $pwa['pwa_theme_color'] ?? '#ffffff' }}">
            
            <!-- Standard PWA Mobile Capable -->
            <meta name="mobile-web-app-capable" content="yes"> 
            
            <!-- Apple Specific (Legacy Support) -->
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
            <meta name="apple-mobile-web-app-title" content="{{ $pwa['pwa_name'] ?? $siteName }}">
            
            @if(isset($pwa['pwa_icon']))
                <link rel="apple-touch-icon" href="{{ asset($pwa['pwa_icon']) }}">
            @endif
        @endif

        <!-- Open Graph / Facebook / LinkedIn / Pinterest -->
        <meta property="og:site_name" content="{{ $siteName }}">
        <meta property="og:type" content="{{ $post ? 'article' : 'website' }}">
        <meta property="og:url" content="{{ $currentUrl }}">
        <meta property="og:title" content="{{ $metaTitle }}">
        <meta property="og:description" content="{{ $metaDesc }}">
        @if($metaImage)
            <meta property="og:image" content="{{ $metaImage }}">
            <meta property="og:image:width" content="1200">
            <meta property="og:image:height" content="630">
        @endif

        <!-- Pinterest Rich Pin / Article Tags -->
        @if($post)
            <meta property="article:published_time" content="{{ $post['created_at'] }}">
            <meta property="article:modified_time" content="{{ $post['updated_at'] }}">
            @if(isset($post['category']['name']))
                <meta property="article:section" content="{{ $post['category']['name'] }}">
            @endif
            @if(isset($post['tags']) && is_array($post['tags']))
                @foreach($post['tags'] as $tag)
                    <meta property="article:tag" content="{{ $tag }}">
                @endforeach
            @endif
            @if(isset($post['user']['name']))
                <meta property="article:author" content="{{ $post['user']['name'] }}">
            @endif
        @endif

        <!-- Twitter Card -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:url" content="{{ $currentUrl }}">
        <meta name="twitter:title" content="{{ $metaTitle }}">
        <meta name="twitter:description" content="{{ $metaDesc }}">
        @if($metaImage)
            <meta name="twitter:image" content="{{ $metaImage }}">
        @endif

        <!-- Dynamic Favicon -->
        @if(isset($seo['site_favicon']))
            <link rel="icon" href="{{ asset($seo['site_favicon']) }}">
        @endif

        <!-- CUSTOM HEADER CODE -->
        @if(isset($scripts['header_code']))
            {!! $scripts['header_code'] !!}
        @endif

        <!-- DYNAMIC THEME COLORS -->
        <style id="dynamic-appearance">
            html:root {
                --primary: {{ $appearance['appearance_light_primary_h'] ?? '220.9' }} {{ $appearance['appearance_light_primary_s'] ?? '39.3%' }} {{ $appearance['appearance_light_primary_l'] ?? '11%' }};
                --primary-foreground: {{ $appearance['appearance_light_primary_fg_h'] ?? '210' }} {{ $appearance['appearance_light_primary_fg_s'] ?? '20%' }} {{ $appearance['appearance_light_primary_fg_l'] ?? '98%' }};
                --radius: {{ $appearance['appearance_radius'] ?? '0.5rem' }};
            }
            html.dark {
                --primary: {{ $appearance['appearance_dark_primary_h'] ?? '210' }} {{ $appearance['appearance_dark_primary_s'] ?? '20%' }} {{ $appearance['appearance_dark_primary_l'] ?? '98%' }};
                --primary-foreground: {{ $appearance['appearance_dark_primary_fg_h'] ?? '220.9' }} {{ $appearance['appearance_dark_primary_fg_s'] ?? '39.3%' }} {{ $appearance['appearance_dark_primary_fg_l'] ?? '11%' }};
            }
        </style>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia

        <!-- CUSTOM FOOTER CODE -->
        @if(isset($scripts['footer_code']))
            {!! $scripts['footer_code'] !!}
        @endif
    </body>
</html>