---
interface Props {
    title: string;
}

const { title } = Astro.props;
import "../styles/global.css";
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="description"
            content="Summit Painting and Handyman Services - Quality Craftsmanship in Colorado Springs"
        />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
        <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
        <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link
            href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
            rel="stylesheet"
        />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body
        class="antialiased bg-brand-cream text-brand-dark selection:bg-brand-sage selection:text-white relative"
    >
        <!-- Page-wide Subtle Texture -->
        <div class="fixed inset-0 brush-texture opacity-[0.015] pointer-events-none z-0"></div>
        <div class="relative z-10">
            <slot />
        </div>

        <script>
            // Intersection Observer for Reveal Animations
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-in-view');
                        // Once animated, no need to observe anymore
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            // Observe all reveal masks and generic reveal items
            document.querySelectorAll('.text-reveal-mask, .reveal-item').forEach(el => observer.observe(el));
        </script>
    </body>
</html>

<style is:global>
    body {
        font-family: "Plus Jakarta Sans", sans-serif;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
</style>
