@props(['settings'])
<!DOCTYPE html>
<html class="scroll-smooth" lang="tk">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Hoşal Patisserie - Hünärmençe döredilen</title>
    <script src="{{ asset('assets/js/tailwind.min.js') }}"></script>
    <link href="{{ asset('assets/css/fonts.css') }}" rel="stylesheet"/>
    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "outline": "#81756e",
                        "surface-container-lowest": "#ffffff",
                        "on-surface-variant": "#4f453f",
                        "on-background": "#1e1b1a",
                        "tertiary": "#010700",
                        "secondary-fixed": "#ffdad2",
                        "primary-fixed-dim": "#dfc0af",
                        "on-secondary-container": "#7a463a",
                        "inverse-on-surface": "#f6efed",
                        "primary-fixed": "#fddcca",
                        "tertiary-fixed-dim": "#b9ccab",
                        "surface-variant": "#e8e1de",
                        "on-tertiary": "#ffffff",
                        "surface-bright": "#fff8f5",
                        "on-primary-container": "#9b8071",
                        "on-error-container": "#93000a",
                        "on-secondary": "#ffffff",
                        "surface-tint": "#71594b",
                        "surface-container-low": "#f9f2ef",
                        "tertiary-fixed": "#d5e9c6",
                        "surface-dim": "#dfd9d6",
                        "primary-container": "#2b1a0f",
                        "inverse-primary": "#dfc0af",
                        "secondary-container": "#ffb8a8",
                        "surface": "#fff8f5",
                        "on-error": "#ffffff",
                        "error": "#ba1a1a",
                        "on-primary": "#ffffff",
                        "on-tertiary-container": "#798b6d",
                        "surface-container-highest": "#e8e1de",
                        "tertiary-container": "#13220c",
                        "on-primary-fixed-variant": "#584235",
                        "on-secondary-fixed-variant": "#6a392e",
                        "surface-container-high": "#eee7e4",
                        "on-tertiary-fixed-variant": "#3b4b32",
                        "background": "#fff8f5",
                        "surface-container": "#f4ecea",
                        "on-tertiary-fixed": "#111f0a",
                        "outline-variant": "#d3c4bc",
                        "secondary": "#865043",
                        "on-primary-fixed": "#28180d",
                        "secondary-fixed-dim": "#fcb6a5",
                        "on-secondary-fixed": "#350f07",
                        "primary": "#0c0300",
                        "on-surface": "#1e1b1a",
                        "inverse-surface": "#33302e",
                        "error-container": "#ffdad6",
                        "antique-gold": "#C8A96E",
                        "ink-brown": "#2B1A0F"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "margin-mobile": "20px",
                        "gutter": "24px",
                        "container-max": "1280px",
                        "unit": "8px",
                        "margin-desktop": "64px"
                    },
                    "fontFamily": {
                        "subheading-caps": ["Playfair Display"],
                        "label-sm": ["Libre Franklin"],
                        "body-md": ["Merriweather"],
                        "display-lg": ["Playfair Display"],
                        "headline-md": ["Playfair Display"],
                        "display-lg-mobile": ["Playfair Display"],
                        "body-lg": ["Merriweather"]
                    },
                    "fontSize": {
                        "subheading-caps": ["14px", { "lineHeight": "1.5", "letterSpacing": "0.15em", "fontWeight": "600" }],
                        "label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "500" }],
                        "body-md": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
                        "display-lg": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
                        "headline-md": ["32px", { "lineHeight": "1.3", "fontWeight": "600" }],
                        "display-lg-mobile": ["40px", { "lineHeight": "1.2", "fontWeight": "700" }],
                        "body-lg": ["18px", { "lineHeight": "1.8", "fontWeight": "400" }]
                    },
                    "animation": {
                        "marquee": "marquee 30s linear infinite",
                        "fade-in-up": "fadeInUp 0.8s ease-out forwards"
                    },
                    "keyframes": {
                        marquee: {
                            "0%": { transform: "translateX(0%)" },
                            "100%": { transform: "translateX(-50%)" }
                        },
                        fadeInUp: {
                            "0%": { opacity: "0", transform: "translateY(20px)" },
                            "100%": { opacity: "1", transform: "translateY(0)" }
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .paper-texture {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .carousel-slide {
            transition: opacity 1s ease-in-out;
            opacity: 0;
            position: absolute;
            inset: 0;
        }
        .carousel-slide.active {
            opacity: 1;
            z-index: 10;
        }
    </style>
</head>
<body class="bg-background text-on-background antialiased relative selection:bg-antique-gold selection:text-white">
<div class="paper-texture"></div>
<nav class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-outline/20 transition-all duration-300 ease-in-out">
    <div class="flex justify-between items-center px-margin-mobile md:px-margin-desktop py-4 w-full z-50 max-w-[1280px] mx-auto">
        <a class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-primary italic" href="{{ url('/') }}">Hoşal Patisserie</a>
        <div class="hidden md:flex gap-8">
            <a class="font-subheading-caps text-subheading-caps text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#about">Biz barada</a>
            <a class="font-subheading-caps text-subheading-caps text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#menu">Menýu</a>
        </div>
        <button aria-label="Menýu" class="md:hidden text-primary">
            <span class="material-symbols-outlined">menu</span>
        </button>
    </div>
</nav>

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

<footer class="w-full mt-auto bg-primary-container dark:bg-tertiary-container border-t border-secondary-container/30">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-gutter px-margin-mobile md:px-margin-desktop py-16 w-full max-w-[1280px] mx-auto">
        <div class="col-span-1 mb-8 md:mb-0 flex flex-col justify-between">
            <h2 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-[40px] text-surface-container-lowest italic mb-4">Hoşal Patisserie</h2>
            <p class="font-body-md text-body-md text-surface-variant/80 mt-auto">{{ $settings->footer_copyright ?? '© 2026 Hoşal Patisserie. Hünärmençe döredilen.' }}</p>
        </div>
        <div class="col-span-1 md:col-span-2 grid grid-cols-2 md:grid-cols-3 gap-8">
            <div>
                <h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Gözlemek</h3>
                <ul class="space-y-4">
                    <li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#about">Biz barada</a></li>
                    <li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#menu">Menýu</a></li>
                </ul>
            </div>
            <div>
                <h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Goldaw</h3>
                <ul class="space-y-4">
                    <li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#">Eltip bermek</a></li>
                    <li><a class="font-body-md text-body-md text-surface-variant/80 hover:text-surface-container-lowest transition-colors duration-200" href="#">Gizlinlik syýasaty</a></li>
                </ul>
            </div>
            <div class="col-span-2 md:col-span-1 mt-8 md:mt-0">
                <h3 class="font-subheading-caps text-subheading-caps text-surface-container-lowest mb-6">Bize geliň</h3>
                <address class="font-body-md text-body-md text-surface-variant/80 not-italic space-y-2">
                    {!! nl2br(e($settings->footer_address ?? "Magtymguly şaýoly\nAşgabat, Türkmenistan")) !!}
                    <p class="mt-4"><a class="hover:text-surface-container-lowest transition-colors duration-200" href="tel:{{ preg_replace('/[^0-9+]/', '', $settings->footer_phone ?? '+993 61 92 92 48') }}">{{ $settings->footer_phone ?? '+993 61 92 92 48' }}</a></p>
                </address>
            </div>
        </div>
    </div>
</footer>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const animatedElements = document.querySelectorAll('.animate-on-scroll');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                }
            });
        }, { threshold: 0.1 });
        animatedElements.forEach(el => observer.observe(el));

        const slides = document.querySelectorAll('.carousel-slide');
        if (slides.length > 0) {
            let currentSlide = 0;
            setInterval(() => {
                slides[currentSlide].classList.remove('active');
                currentSlide = (currentSlide + 1) % slides.length;
                slides[currentSlide].classList.add('active');
            }, 5000);
        }

        const collectionsContainer = document.getElementById('collections-container');
        const btnPrev = document.getElementById('btn-prev-collection');
        const btnNext = document.getElementById('btn-next-collection');
        if(btnNext && btnPrev && collectionsContainer) {
            btnNext.addEventListener('click', () => {
                collectionsContainer.scrollBy({ left: 340, behavior: 'smooth' });
            });
            btnPrev.addEventListener('click', () => {
                collectionsContainer.scrollBy({ left: -340, behavior: 'smooth' });
            });
        }
    });
</script>
</body>
</html>