@php
    $sharedBranding = data_get($page ?? [], 'props.branding', []);
    $siteTitle = data_get($sharedBranding, 'site_title', config('branding.site_title', config('app.name', 'Pitchbar')));
    $customFavicon = data_get($sharedBranding, 'favicon_url');
    $initialFavicon = $customFavicon ?: asset('favicon.ico');
    $initialTouchIcon = $customFavicon ?: asset('apple-touch-icon.png');

    // SEO payload — per-page seo[] from the controller, or a sane
    // fallback so every render gets <meta description> + canonical
    // + Open Graph + Twitter Card + JSON-LD even when a page didn't
    // declare its own. Pure-PHP, hot-path safe.
    $seo = data_get($page ?? [], 'props.seo')
        ?: \App\Support\SeoMeta::defaults();
    $seoTitle = (string) ($seo['title'] ?? $siteTitle);
    $seoDescription = (string) ($seo['description'] ?? '');
    $seoCanonical = (string) ($seo['canonical'] ?? '');
    $seoSiteName = (string) ($seo['site_name'] ?? $siteTitle);
    $seoImage = $seo['image_url'] ?? null;
    $seoTwitterCard = (string) ($seo['twitter_card'] ?? 'summary_large_image');
    $seoTwitterHandle = $seo['twitter_handle'] ?? null;
    $seoNoindex = (bool) ($seo['noindex'] ?? false);
    $seoJsonLd = (array) ($seo['json_ld'] ?? []);

    // Resolve locale metadata once per render so <html dir>, lang
    // attributes, and the locale picker can all read from the same
    // source without re-instantiating the catalog lookup three times.
    $_localeEntry = \App\Services\I18n\LocaleCatalog::entryFor(app()->getLocale());
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $_localeEntry['rtl'] ? 'rtl' : 'ltr' }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="application-name" content="{{ $siteTitle }}">
        {{--
            We ship our own translations via /settings/locale + the
            geo-suggested banner. Browser auto-translate (Chrome's
            Google Translate prompt, Edge Translator) competes with
            our React render — once it rewrites the DOM, our useT()
            updates stop applying because the text nodes have been
            replaced. `notranslate` tells the browser to leave the
            page alone.
        --}}
        <meta name="google" content="notranslate">
        <meta name="google" content="notranslate" lang="{{ str_replace('_', '-', app()->getLocale()) }}">

        {{-- SEO --}}
        @if($seoDescription !== '')
            <meta name="description" content="{{ $seoDescription }}">
        @endif
        @if($seoCanonical !== '')
            <link rel="canonical" href="{{ $seoCanonical }}">
        @endif
        @if($seoNoindex)
            <meta name="robots" content="noindex,nofollow">
        @endif

        {{-- Open Graph --}}
        <meta property="og:type" content="website">
        <meta property="og:site_name" content="{{ $seoSiteName }}">
        <meta property="og:title" content="{{ $seoTitle }}">
        @if($seoDescription !== '')
            <meta property="og:description" content="{{ $seoDescription }}">
        @endif
        @if($seoCanonical !== '')
            <meta property="og:url" content="{{ $seoCanonical }}">
        @endif
        @if($seoImage)
            <meta property="og:image" content="{{ $seoImage }}">
            <meta property="og:image:width" content="1200">
            <meta property="og:image:height" content="630">
            <meta property="og:image:alt" content="{{ $seoSiteName }}">
        @endif

        {{-- Twitter Card --}}
        <meta name="twitter:card" content="{{ $seoTwitterCard }}">
        <meta name="twitter:title" content="{{ $seoTitle }}">
        @if($seoDescription !== '')
            <meta name="twitter:description" content="{{ $seoDescription }}">
        @endif
        @if($seoImage)
            <meta name="twitter:image" content="{{ $seoImage }}">
        @endif
        @if($seoTwitterHandle)
            <meta name="twitter:site" content="{{ $seoTwitterHandle }}">
        @endif

        {{-- JSON-LD structured data — Organization on every page,
             plus per-route blocks (SoftwareApplication on home,
             FAQPage from buyer-edited content, BreadcrumbList on
             docs). --}}
        @foreach($seoJsonLd as $jsonLdBlock)
            <script type="application/ld+json">{!! json_encode($jsonLdBlock, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
        @endforeach

        {{-- Inline script to detect system dark mode preference and apply it immediately --}}
        <script>
            (function() {
                const appearance = '{{ $appearance ?? "system" }}';

                if (appearance === 'system') {
                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

                    if (prefersDark) {
                        document.documentElement.classList.add('dark');
                    }
                }
            })();
        </script>

        {{-- Inline style to set the HTML background color based on our theme in app.css --}}
        <style>
            html {
                background-color: oklch(1 0 0);
            }

            html.dark {
                background-color: oklch(0.145 0 0);
            }
        </style>

        <script>
            window.__PITCHBAR_SITE_TITLE__ = @json($siteTitle);
            window.__PITCHBAR_DEFAULT_FAVICON_URL__ = @json($initialFavicon);
            window.__PITCHBAR_DEFAULT_TOUCH_ICON_URL__ = @json($initialTouchIcon);
        </script>

        <link id="app-favicon" rel="icon" href="{{ $initialFavicon }}" sizes="any">
        <link id="app-apple-touch-icon" rel="apple-touch-icon" href="{{ $initialTouchIcon }}">

        {{-- Geist (Vercel's typeface) served via Bunny Fonts — applies to
             admin + customer + auth + marketing because this is the only
             root blade template. --}}
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link
            href="https://fonts.bunny.net/css?family=geist:100,200,300,400,500,600,700,800,900|geist-mono:400,500,600&display=swap"
            rel="stylesheet"
        >

        @fonts

        @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.tsx', "resources/js/pages/{$page['component']}.tsx"])
        <x-inertia::head>
            <title>{{ $seoTitle }}</title>
        </x-inertia::head>
    </head>
    <body class="font-sans antialiased notranslate" translate="no">
        <x-inertia::app />

        @php
            $component = $page['component'] ?? null;
            $isMarketingComponent = $component === 'welcome' || str_starts_with((string) $component, 'marketing/');
            // Auth check is the safety net — even if a future page is
            // mis-categorised as "marketing", the demo widget never
            // mounts for authed admin / customer surfaces. A signed-in
            // workspace owner sitting on /dashboard should never see
            // their own marketing site's demo bot watching them.
            $isAuthenticated = auth()->check();
            // DEMO env gate — the marketing demo widget only mounts when
            // the operator has explicitly turned DEMO mode on. Same flag
            // that surfaces the seeded demo credentials on /login. Default
            // is OFF so a production deployment never accidentally invites
            // chat with a sandbox agent that persists Leads to the demo
            // workspace.
            $demoEnabled = (bool) config('demo.enabled', false);
            $marketingDemoAgentId = ($demoEnabled && $isMarketingComponent && ! $isAuthenticated)
                ? (data_get($page, 'props.demoAgentId') ?: \App\Support\MarketingDemoAgent::id())
                : null;
        @endphp
        @if($marketingDemoAgentId)
            {{--
                The marketing site embeds the live demo agent. data-demo="true"
                tells the widget to render a "Demo" pill so reviewers /
                visitors can tell at a glance this is a sandbox, not a real
                support chat watching them. Auth-gated above so it never
                renders for a signed-in admin/customer (would look like
                surveillance + would persist real Leads in their tenant).
                The ?v=<hash> cache-bust mirrors the customer-side widget
                URL so browsers don't get stuck on a stale bundle.
            --}}
            @php
                $marketingWidgetPath = public_path('widget/widget.js');
                $marketingWidgetVersion = is_file($marketingWidgetPath)
                    ? substr((string) md5_file($marketingWidgetPath), 0, 8)
                    : 'dev';
            @endphp
            <script
                src="{{ rtrim(config('app.url'), '/') }}/widget/widget.js?v={{ $marketingWidgetVersion }}"
                data-agent-id="{{ $marketingDemoAgentId }}"
                data-demo="true"
                defer
            ></script>
        @endif
    </body>
</html>
