@php
    $meta      = $site->themeMeta();
    $isDark    = !empty($meta['dark']);
    $fh        = $fonts['heading'] ?? 'Poppins';
    $fb        = $fonts['body'] ?? 'Inter';
    $fam       = collect([$fh, $fb])->unique()->map(fn($f) => str_replace(' ', '+', $f) . ':wght@300;400;500;600;700;800;900')->implode('&family=');
    $title     = $page->seo_title ?: ($page->is_home ? ($site->seo_title ?: $site->name) : ($page->title . ' · ' . $site->name));
    $desc      = $page->seo_description ?: $site->seo_description ?: $site->tagline;
    $og        = $page->og_image_path ? asset('uploads/' . $page->og_image_path) : $site->ogImageUrl();
@endphp
<!DOCTYPE html>
<html lang="en" class="vs-html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title }}</title>
    @if($desc)<meta name="description" content="{{ $desc }}">@endif
    <meta property="og:title" content="{{ $title }}">
    @if($desc)<meta property="og:description" content="{{ $desc }}">@endif
    @if($og)<meta property="og:image" content="{{ $og }}">@endif
    <meta name="theme-color" content="{{ $palette['primary'] }}">
    @if($site->faviconUrl())<link rel="icon" href="{{ $site->faviconUrl() }}">@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={{ $fam }}&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">

    <style>
        :root{
            --vs-primary: {{ $palette['primary'] }};
            --vs-secondary: {{ $palette['secondary'] }};
            --vs-accent: {{ $palette['accent'] }};
            --vs-font-h: "{{ $fh }}", system-ui, sans-serif;
            --vs-font-b: "{{ $fb }}", system-ui, sans-serif;
        }
    </style>
    @include('clinicSite::themes._partials.base_style')
    @include('clinicSite::themes.' . $theme . '.style')
</head>
<body class="vs theme-{{ $theme }} {{ $isDark ? 'vs-dark' : '' }}" x-data="{ menu:false, scrolled:false }"
      @scroll.window="scrolled = window.scrollY > 30">

    @if($preview)
        <div class="vs-preview-bar"><i class="fas fa-eye"></i> Preview — this is how your published website will look.</div>
    @endif

    @php($navView = view()->exists("clinicSite::themes.{$theme}.nav") ? "clinicSite::themes.{$theme}.nav" : 'clinicSite::themes._partials.nav')
    @php($footerView = view()->exists("clinicSite::themes.{$theme}.footer") ? "clinicSite::themes.{$theme}.footer" : 'clinicSite::themes._partials.footer')

    @include($navView)

    <main class="vs-main">
        @include('clinicSite::themes._partials.render')
    </main>

    @include($footerView)
    @include('clinicSite::themes._partials.scripts')
</body>
</html>
