{{--
    Voyage template ana iskeleti.
    Tüm sayfalar bu layout'u extend eder; tasarım token'ları SiteSnapshot'tan
    CSS custom property olarak üretilir. Ziyaretçi ve panel önizlemesi aynı dosya.
--}}
@php
    /** @var \App\Services\Site\SiteSnapshot $snapshot */
    $tokens = $snapshot->tokens();
    $brand = $agency->brand_colors ?? [];
    $primary = $brand['primary'] ?? data_get($tokens, 'colors.primary');
    $accent = $brand['accent'] ?? data_get($tokens, 'colors.accent');
    $meta = $page['meta'] ?? [];
    $seo = $snapshot->seoDefaults();
    $metaTitle = $meta['meta_title'] ?? ($page['title'] ?? null);
    $siteName = $agency->name;
    $fullTitle = $pageTitle ?? ($metaTitle ? $metaTitle . ' | ' . $siteName : $siteName);
    $metaDescription = $meta['meta_description'] ?? ($seo['meta_description'] ?? $agency->description);
    $favicon = $agency->favicon_path ? asset('storage/' . $agency->favicon_path) : ($agency->logo ? asset('storage/' . $agency->logo) : null);
@endphp
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $fullTitle }}</title>
    @if($metaDescription)<meta name="description" content="{{ \Illuminate\Support\Str::limit(strip_tags($metaDescription), 160) }}">@endif
    <meta property="og:title" content="{{ $fullTitle }}">
    <meta property="og:site_name" content="{{ $siteName }}">
    <meta property="og:type" content="website">
    @if(!empty($ogImage))<meta property="og:image" content="{{ $ogImage }}">@endif
    @if($favicon)<link rel="icon" href="{{ $favicon }}">@endif
    @if($preview)<meta name="robots" content="noindex,nofollow">@endif

    <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=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --v-primary: {{ $primary }};
            --v-primary-dark: {{ data_get($tokens, 'colors.primary_dark') }};
            --v-accent: {{ $accent }};
            --v-cta: {{ data_get($tokens, 'colors.cta') }};
            --v-ink: {{ data_get($tokens, 'colors.ink') }};
            --v-muted: {{ data_get($tokens, 'colors.muted') }};
            --v-surface: {{ data_get($tokens, 'colors.surface') }};
            --v-canvas: {{ data_get($tokens, 'colors.canvas') }};
            --v-footer: {{ data_get($tokens, 'colors.footer') }};
            --v-radius: {{ data_get($tokens, 'layout.radius') }};
            --v-radius-lg: {{ data_get($tokens, 'layout.radius_lg') }};
            --v-container: {{ data_get($tokens, 'layout.container') }};
            --v-font-display: '{{ data_get($tokens, 'typography.display_font') }}', sans-serif;
            --v-font-body: '{{ data_get($tokens, 'typography.body_font') }}', sans-serif;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/site/voyage/voyage.css') }}?v={{ @filemtime(public_path('assets/site/voyage/voyage.css')) }}">

    @if($snapshot->customCss())<style>{!! $snapshot->customCss() !!}</style>@endif
    {!! $snapshot->headScripts() !!}
    @stack('head')
</head>
<body class="v-body">
    {{-- $bare: tek bölümün örnek gösterimi (kütüphane önizlemesi).
         Header/footer/canlı destek çizilmez ki bölüm kendi başına görünsün. --}}
    @php $bare = $bare ?? false; @endphp

    @if($preview && ! $bare)
        <div class="v-preview-bar">
            <span class="v-preview-bar__dot"></span>
            Önizleme modundasınız — bu sayfa yalnızca size görünür. Yayına almadan ziyaretçiler göremez.
        </div>
    @endif

    @unless($bare)
        @include('site.templates.voyage.partials.header')
    @endunless

    <main class="v-main">
        @yield('content')
    </main>

    @unless($bare)
        @include('site.templates.voyage.partials.footer')
        @include('site.templates.voyage.partials.chat-widget')
    @endunless

    @if(session('site_form_success'))
        <div class="v-toast" id="vToast">
            <x-voyage.icon name="check-circle" class="v-toast__icon" />
            <span>{{ session('site_form_success') }}</span>
        </div>
    @endif

    <script src="{{ asset('assets/site/voyage/voyage.js') }}?v={{ @filemtime(public_path('assets/site/voyage/voyage.js')) }}" defer></script>
    @if($snapshot->customJs())<script>{!! $snapshot->customJs() !!}</script>@endif
    {!! $snapshot->bodyScripts() !!}

    @if($editorMode ?? false)
        {{-- Editör iframe köprüsü: bölüm seçimi ↔ üst pencere --}}
        <style>
            .v-editable { position: relative; cursor: pointer; transition: outline .12s ease; outline: 2px dashed transparent; outline-offset: -2px; }
            .v-editable:hover { outline-color: rgba(21, 157, 88, .55); }
            .v-editable.is-editing { outline: 3px solid #159D58; }
            .v-editable::after {
                content: 'Düzenle'; position: absolute; top: 10px; right: 10px; z-index: 50;
                background: #159D58; color: #fff; font: 700 11px/1 sans-serif; padding: 6px 12px;
                border-radius: 999px; opacity: 0; transition: opacity .12s ease; pointer-events: none;
            }
            .v-editable:hover::after { opacity: 1; }
            .v-preview-bar { display: none; } /* editörün kendi çubuğu var */
        </style>
        <script>
            (function () {
                document.querySelectorAll('[data-v-section]').forEach(function (el) {
                    el.addEventListener('click', function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        document.querySelectorAll('.v-editable.is-editing').forEach(function (x) { x.classList.remove('is-editing'); });
                        el.classList.add('is-editing');
                        parent.postMessage({ type: 'v-section-click', id: parseInt(el.dataset.vSection, 10) }, '*');
                    }, true);
                });
                window.addEventListener('message', function (event) {
                    var msg = event.data || {};
                    if (msg.type === 'v-scroll-to-section') {
                        var target = document.getElementById('v-section-' + msg.id);
                        if (target) {
                            document.querySelectorAll('.v-editable.is-editing').forEach(function (x) { x.classList.remove('is-editing'); });
                            target.classList.add('is-editing');
                            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }
                    }
                });
            })();
        </script>
    @endif
    @stack('scripts')
</body>
</html>
