<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $page->meta_title ?? 'Ana Sayfa' }} | {{ $agency->name }}</title>

    <meta name="description" content="{{ $page->meta_description }}">
    <meta name="keywords" content="{{ $page->meta_keywords }}">

    @if($agency->logo)
        <link rel="icon" href="{{ asset('storage/' . $agency->logo) }}">
    @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={{ str_replace(' ', '+', explode(',', $themeSettings['typography']['font_family'] ?? 'Inter')[0]) }}:wght@300;400;500;600;700;800;900&family={{ str_replace(' ', '+', explode(',', $themeSettings['typography']['heading_font'] ?? 'Poppins')[0]) }}:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <style>
        :root {
            /* Colors */
            --primary:
                {{ $themeSettings['colors']['primary'] ?? '#3B82F6' }}
            ;
            --primary-dark:
                {{ adjustBrightness($themeSettings['colors']['primary'] ?? '#3B82F6', -20) }}
            ;
            --primary-light:
                {{ adjustBrightness($themeSettings['colors']['primary'] ?? '#3B82F6', 20) }}
            ;
            --secondary:
                {{ $themeSettings['colors']['secondary'] ?? '#8B5CF6' }}
            ;
            --accent:
                {{ $themeSettings['colors']['accent'] ?? '#F59E0B' }}
            ;
            --text:
                {{ $themeSettings['colors']['text'] ?? '#1F2937' }}
            ;
            --background:
                {{ $themeSettings['colors']['background'] ?? '#FFFFFF' }}
            ;
            --muted:
                {{ $themeSettings['colors']['muted'] ?? '#F3F4F6' }}
            ;

            /* Typography */
            --font-family:
                {{ $themeSettings['typography']['font_family'] ?? 'Inter, sans-serif' }}
            ;
            --heading-font:
                {{ $themeSettings['typography']['heading_font'] ?? 'Poppins, sans-serif' }}
            ;
            --font-size-base:
                {{ $themeSettings['typography']['font_size_base'] ?? '16px' }}
            ;

            /* Layout */
            --container-width:
                {{ $themeSettings['layout']['container_width'] ?? '1280px' }}
            ;
            --border-radius:
                {{ $themeSettings['layout']['border_radius'] ?? '12px' }}
            ;
            --spacing-unit:
                {{ $themeSettings['layout']['spacing_unit'] ?? '8px' }}
            ;

            /* Effects */
            --shadow-sm:
                {{ $themeSettings['effects']['shadow_sm'] ?? '0 1px 2px 0 rgb(0 0 0 / 0.05)' }}
            ;
            --shadow-md:
                {{ $themeSettings['effects']['shadow_md'] ?? '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
            ;
            --shadow-lg:
                {{ $themeSettings['effects']['shadow_lg'] ?? '0 10px 15px -3px rgb(0 0 0 / 0.1)' }}
            ;
            --transition:
                {{ $themeSettings['effects']['transition'] ?? '150ms' }}
            ;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--text);
            background: var(--background);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            padding-top: 80px;
            /* Fixed header offset */
            position: relative;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--heading-font);
            font-weight: 700;
            line-height: 1.3;
            color: var(--text);
        }

        /* Layout Style: {{ $page->layout_style ?? 'full-width' }}
        */

        @if(($page->layout_style ?? 'full-width') === 'full-width')
            /* Full-Width Layout */
            .container {
                max-width: 100%;
                width: 100%;
                margin: 0 auto;
                padding: 0 2rem;
            }

            header .container,
            footer .container,
            section .container {
                max-width: 100%;
                padding: 0 3rem;
            }

        @else

            /* Boxed Layout */
            body {
                background: #F3F4F6;
                padding: 2rem 1rem;
            }

            .container {
                max-width: var(--container-width);
                margin: 0 auto;
                padding: 0 1.5rem;
            }

            body>* {
                max-width: var(--container-width);
                margin-left: auto;
                margin-right: auto;
            }

            header,
            main,
            footer {
                background: var(--background);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            }

            header {
                border-radius: 8px 8px 0 0;
            }

            footer {
                border-radius: 0 0 8px 8px;
                background: linear-gradient(135deg, #111827 0%, #1F2937 100%) !important;
            }

        @endif section {
            padding: 5rem 0;
        }

        @media (max-width: 1024px) {
            section {
                padding: 3.5rem 0;
            }
        }

        @media (max-width: 768px) {
            :root {
                --font-size-base: 15px;
            }

            body {
                padding-top: 70px;
                /* Mobile header offset */
            }

            .container,
            header .container,
            footer .container,
            section .container {
                padding: 0 1rem !important;
            }

            section {
                padding: 2.5rem 0;
            }

            @if(($page->layout_style ?? 'full-width') === 'boxed')
                body {
                    padding: 1rem 0.5rem;
                }

                header {
                    border-radius: 4px 4px 0 0;
                }

                footer {
                    border-radius: 0 0 4px 4px;
                }

            @endif
        }

        /* Utility Classes */
        .text-center {
            text-align: center;
        }

        .mb-1 {
            margin-bottom: calc(var(--spacing-unit) * 1);
        }

        .mb-2 {
            margin-bottom: calc(var(--spacing-unit) * 2);
        }

        .mb-3 {
            margin-bottom: calc(var(--spacing-unit) * 3);
        }

        .mb-4 {
            margin-bottom: calc(var(--spacing-unit) * 4);
        }

        /* Selection Colors */
        ::selection {
            background: color-mix(in srgb, var(--primary) 25%, transparent);
            color: var(--primary);
        }

        ::-moz-selection {
            background: color-mix(in srgb, var(--primary) 25%, transparent);
            color: var(--primary);
        }

        /* Scrollbar Styling */
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 6px;
            border: 2px solid #f1f1f1;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--secondary), var(--primary));
        }

        /* Focus Visible Styles */
        *:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* Smooth Transitions */
        * {
            transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Page Fade-in Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        main {
            animation: fadeIn 0.6s ease-out;
        }

        /* Loading State */
        body.loading {
            overflow: hidden;
        }

        body.loading::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

    @stack('styles')

    {{-- Custom CSS from page settings --}}
    @if($page->custom_css)
        <style>
            {!! $page->custom_css !!}
        </style>
    @endif

    {{-- Header scripts --}}
    @if($page->header_scripts)
        {!! $page->header_scripts !!}
    @endif
</head>

<body>
    @include('page.agency.themes.default.header')

    <main>
        {{ $slot }}
    </main>

    @include('page.agency.themes.default.footer')

    @stack('scripts')

    {{-- Custom JS from page settings --}}
    @if($page->custom_js)
        <script>
            {!! $page->custom_js !!}
        </script>
    @endif

    {{-- Footer scripts --}}
    @if($page->footer_scripts)
        {!! $page->footer_scripts !!}
    @endif

    {{-- Modern Enhancements --}}
    <script>
        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                const href = this.getAttribute('href');
                if (href !== '#' && href !== '') {
                    const target = document.querySelector(href);
                    if (target) {
                        e.preventDefault();
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                }
            });
        });

        // Add scroll reveal animation
        const revealElements = document.querySelectorAll('section');
        const revealObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });

        revealElements.forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
            revealObserver.observe(el);
        });

        // Lazy load images
        if ('loading' in HTMLImageElement.prototype) {
            const images = document.querySelectorAll('img[loading="lazy"]');
            images.forEach(img => {
                img.src = img.dataset.src || img.src;
            });
        } else {
            // Fallback for browsers that don't support lazy loading
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js';
            document.body.appendChild(script);
        }

        // Remove loading state when page is fully loaded
        window.addEventListener('load', () => {
            document.body.classList.remove('loading');
        });

        // Add loading state on page unload
        window.addEventListener('beforeunload', () => {
            document.body.classList.add('loading');
        });

        // Performance: Preload important resources
        const preloadLinks = [
            { href: 'https://fonts.googleapis.com', rel: 'preconnect' },
            { href: 'https://cdnjs.cloudflare.com', rel: 'preconnect' }
        ];

        preloadLinks.forEach(link => {
            const linkEl = document.createElement('link');
            linkEl.rel = link.rel;
            linkEl.href = link.href;
            if (link.rel === 'preconnect') {
                linkEl.crossOrigin = '';
            }
            document.head.appendChild(linkEl);
        });
    </script>
</body>

</html>

@php
    function adjustBrightness($hex, $steps)
    {
        $hex = str_replace('#', '', $hex);
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        $r = max(0, min(255, $r + $steps));
        $g = max(0, min(255, $g + $steps));
        $b = max(0, min(255, $b + $steps));

        return '#' . str_pad(dechex($r), 2, '0', STR_PAD_LEFT)
            . str_pad(dechex($g), 2, '0', STR_PAD_LEFT)
            . str_pad(dechex($b), 2, '0', STR_PAD_LEFT);
    }
@endphp