<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>@yield('title', $settings['site_title'] ?? 'MovieDocks')</title>
    <meta name="description" content="@yield('description', $settings['site_description'] ?? '')">
    <meta name="keywords" content="{{ $settings['site_keywords'] ?? '' }}">

    @if (!empty($settings['google_search_console_verification']))
        <meta name="google-site-verification" content="{{ $settings['google_search_console_verification'] }}">
    @endif

    @if (!empty($settings['favicon']))
        <link rel="icon" href="{{ app(\App\Services\MediaStorageService::class)->url($settings['favicon']) }}">
    @endif

    <link rel="stylesheet" href="{{ asset('assets/css/base.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/components.css') }}?v={{ @filemtime(public_path('assets/css/components.css')) ?: time() }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}?v={{ @filemtime(public_path('assets/css/responsive.css')) ?: time() }}">

    @if (!empty($settings['google_analytics_id']))
        <script async src="https://www.googletagmanager.com/gtag/js?id={{ urlencode($settings['google_analytics_id']) }}"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', @json($settings['google_analytics_id']));
        </script>
    @endif

    @if (!empty($settings['microsoft_clarity_id']))
        <script>
            (function(c,l,a,r,i,t,y){
                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                t=l.createElement(r);t.async=1;t.src='https://www.clarity.ms/tag/'+i;
                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
            })(window,document,'clarity','script',@json($settings['microsoft_clarity_id']));
        </script>
    @endif

    @if (!empty($settings['custom_css']))
        <style>{!! $settings['custom_css'] !!}</style>
    @endif

    {!! $settings['header_code'] ?? '' !!}
</head>
<body>
    <header class="topbar cine-header">
        <div class="header-inner">
            <a class="brand" href="{{ route('home') }}">
                @if (!empty($settings['logo']))
                    <img src="{{ app(\App\Services\MediaStorageService::class)->url($settings['logo']) }}" alt="{{ $settings['site_title'] ?? 'MovieDocks' }}">
                @else
                    <span class="brand-mark" aria-hidden="true">▶</span>
                    <strong>{{ $settings['site_title'] ?? 'MovieDocks' }}</strong>
                @endif
            </a>

            <nav class="main-nav" id="mainNavigation" aria-label="Primary navigation">
                <a class="nav-link nav-link-with-icon {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">
                    <span class="nav-emoji" aria-hidden="true">🏠</span><span>Home</span>
                </a>
                <a class="nav-link nav-link-with-icon {{ request()->routeIs('shows', 'show') ? 'active' : '' }}" href="{{ route('shows') }}">
                    <span class="nav-emoji" aria-hidden="true">📺</span><span>WEB-Series</span>
                </a>

                @if (($genres ?? collect())->isNotEmpty())
                    <div class="genres-menu movies-nav-menu {{ request()->routeIs('movies', 'movie', 'genre') ? 'active' : '' }}" data-genres-menu>
                        <div class="movies-nav-control">
                            <a class="movies-nav-link" href="{{ route('movies') }}">
                                <span class="nav-emoji" aria-hidden="true">🎬</span><span>Movies</span>
                            </a>
                            <button class="genres-trigger" type="button" aria-label="Open movie genres" aria-expanded="false" aria-controls="genresMegaMenu">
                                <span class="movies-nav-chevron" aria-hidden="true">⌄</span>
                            </button>
                        </div>

                        <div class="genres-mega" id="genresMegaMenu">
                            <div class="mega-intro">
                                <span class="mega-kicker">Browse by mood</span>
                                <h3>Find your next movie</h3>
                                <p>Choose a genre and jump straight into a hand-picked catalog.</p>
                                <a href="{{ route('movies') }}">Explore all movies <span>→</span></a>
                            </div>
                            <div class="mega-genres">
                                @foreach ($genres as $genre)
                                    <a href="{{ route('genre', $genre) }}">
                                        <span>{{ $genre->name }}</span>
                                        <small>{{ $genre->movies_count ?? '' }}</small>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </nav>

            <button class="menu-btn" type="button" aria-label="Toggle menu" aria-controls="mainNavigation" aria-expanded="false">
                <span></span><span></span><span></span>
            </button>
        </div>
    </header>

    <main>@yield('content')</main>

    @php
        $footerPagesCollection = collect($footerPages ?? []);
        $footerSplitAt = (int) ceil(max(1, $footerPagesCollection->count()) / 2);
        $footerFirstLinks = $footerPagesCollection->take($footerSplitAt);
        $footerSecondLinks = $footerPagesCollection->slice($footerSplitAt);
        $footerPhoneRaw = trim($settings['footer_phone'] ?? '');
        $footerPhoneHref = preg_replace('/[^0-9+]/', '', $footerPhoneRaw);
    @endphp
    <footer class="catalog-footer">
        <div class="catalog-footer-main">
            <div class="container catalog-footer-grid">
                <div class="catalog-footer-about">
                    <a class="catalog-footer-logo" href="{{ route('home') }}">
                        @if (!empty($settings['logo']))
                            <img src="{{ app(\App\Services\MediaStorageService::class)->url($settings['logo']) }}" alt="{{ $settings['site_title'] ?? 'MovieDocks' }}">
                        @else
                            <span class="brand-mark" aria-hidden="true">▶</span><strong>{{ $settings['site_title'] ?? 'MovieDocks' }}</strong>
                        @endif
                    </a>
                    <div class="catalog-footer-description">{!! nl2br(e($settings['site_description'] ?? '')) !!}</div>
                    @if ($footerPhoneRaw !== '')
                        <a class="catalog-footer-phone" href="tel:{{ $footerPhoneHref }}"><span>☎</span>{{ $footerPhoneRaw }}</a>
                    @endif
                </div>

                <div class="catalog-footer-links-column">
                    <h3>{{ $settings['footer_useful_title'] ?? 'Useful Link' }}</h3>
                    @foreach ($footerFirstLinks as $page)<a href="{{ route('page', $page) }}">{{ $page->title }}</a>@endforeach
                </div>

                <div class="catalog-footer-links-column">
                    <h3>{{ $settings['footer_links_title'] ?? 'Link' }}</h3>
                    @foreach ($footerSecondLinks as $page)<a href="{{ route('page', $page) }}">{{ $page->title }}</a>@endforeach
                </div>
            </div>
        </div>
        <div class="catalog-footer-bottom">
            <div class="container">
                Copyright © {{ now()->year }} {{ $settings['site_title'] ?? 'MovieDocks' }}. All rights reserved
                @if (!empty($settings['footer_designer_name']))
                    <span> - Design By </span>
                    @if (!empty($settings['footer_designer_url']))
                        <a href="{{ $settings['footer_designer_url'] }}" target="_blank" rel="noopener">{{ $settings['footer_designer_name'] }}</a>
                    @else
                        <b>{{ $settings['footer_designer_name'] }}</b>
                    @endif
                @endif
            </div>
        </div>
    </footer>

    <script src="{{ asset('assets/js/site.js') }}"></script>
    {!! $settings['footer_code'] ?? '' !!}

    @foreach (($ads['global_script'] ?? collect()) as $ad)
        {!! $ad->content !!}
    @endforeach

    @if (!empty($settings['custom_js']))
        <script>{!! $settings['custom_js'] !!}</script>
    @endif
</body>
</html>
