@extends('themes.frontend.layouts.app')
@section('body_class', 'bg-background text-on-background font-body antialiased overflow-x-hidden
    selection:bg-primary-fixed-dim selection:text-primary')
    @push('head_scripts')
        <script id="tailwind-config">
            tailwind.config = {
                darkMode: "class",
                theme: {
                    extend: {
                        colors: {
                            "inverse-surface": "#31302e",
                            "on-background": "#1c1c1a",
                            "surface-container-low": "#f6f3ef",
                            surface: "#fcf9f5",
                            "on-surface-variant": "#434750",
                            "on-primary-container": "#809ddb",
                            "tertiary-fixed": "#eee0d4",
                            "on-secondary-container": "#546678",
                            "on-secondary": "#ffffff",
                            "tertiary-fixed-dim": "#d1c4b8",
                            "on-error-container": "#93000a",
                            "outline-variant": "#c4c6d1",
                            "on-tertiary-container": "#a79b90",
                            "primary-fixed-dim": "#adc6ff",
                            "error-container": "#ffdad6",
                            "primary-container": "#0e336a",
                            "surface-container": "#f0ede9",
                            "tertiary-container": "#3b332b",
                            "on-tertiary-fixed": "#211a13",
                            "on-surface": "#1c1c1a",
                            "secondary-container": "#d1e5fa",
                            "on-tertiary": "#ffffff",
                            tertiary: "#251e16",
                            "on-secondary-fixed": "#091d2c",
                            "surface-container-highest": "#e5e2de",
                            outline: "#747781",
                            "secondary-fixed": "#d1e5fa",
                            background: "#fcf9f5",
                            "on-primary-fixed-variant": "#26467d",
                            "secondary-fixed-dim": "#b5c9dd",
                            primary: "#001e49",
                            "on-tertiary-fixed-variant": "#4e453c",
                            secondary: "#4e6072",
                            "surface-container-high": "#eae8e4",
                            "on-error": "#ffffff",
                            "surface-container-lowest": "#ffffff",
                            "on-primary-fixed": "#001a41",
                            "primary-fixed": "#d8e2ff",
                            error: "#ba1a1a",
                            "inverse-on-surface": "#f3f0ec",
                            "surface-bright": "#fcf9f5",
                            "on-primary": "#ffffff",
                            "surface-dim": "#dcdad6",
                            "on-secondary-fixed-variant": "#36495a",
                            "surface-tint": "#405e97",
                            "inverse-primary": "#adc6ff",
                            "surface-variant": "#e5e2de",
                        },
                        borderRadius: {
                            DEFAULT: "0.25rem",
                            lg: "0.5rem",
                            xl: "1.5rem",
                            full: "9999px",
                        },
                        fontFamily: {
                            headline: ["Manrope"],
                            body: ["Inter"],
                            label: ["Inter"],
                        },
                    },
                },
            };
        </script>
    @endpush
    @push('styles')
        <style>
            .material-symbols-outlined {
                font-variation-settings:
                    "FILL" 0,
                    "wght" 300,
                    "GRAD" 0,
                    "opsz" 24;
            }

            .glass-silk {
                background: rgba(252, 249, 245, 0.7);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
            }

            /* nabrbar css */
            .chg-nav-glass-morphism {
                background: #ffffff;
                border-bottom: 1px solid rgba(0, 30, 73, 0.08);
            }

            .chg-nav-dropdown-container {
                visibility: hidden;
                opacity: 0;
                transform: translateY(10px);
                pointer-events: none;
            }

            .chg-nav-link {
                @apply relative text-[#4e6072] font-semibold text-sm tracking-wide transition-colors duration-200 cursor-pointer;
            }

            .chg-nav-link:hover {
                @apply text-primary;
            }

            .chg-nav-active-nav-link {
                @apply text-primary;
            }

            .chg-nav-active-nav-link::after {
                /* content: ""; */
                position: absolute;
                bottom: -4px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: #001e49;
            }

            .chg-nav-z-menu {
                z-index: 100;
            }

            .glass-card {
                background: rgba(14, 51, 106, 0.4);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
            }

            .hero-overlay {
                background: linear-gradient(to bottom,
                        rgba(0, 30, 73, 0.4),
                        rgba(0, 30, 73, 0.8));
            }

            .orbital-container {
                position: relative;
                height: 600px;
            }

            .no-scrollbar::-webkit-scrollbar {
                display: none;
            }

            .no-scrollbar {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }

            /* Float Animation */
            @keyframes float {
                0% {
                    transform: translateY(0px) rotate(0deg);
                }

                50% {
                    transform: translateY(-15px) rotate(0.5deg);
                }

                100% {
                    transform: translateY(0px) rotate(0deg);
                }
            }

            .animate-float {
                animation: float 8s ease-in-out infinite;
            }

            .animate-float-delayed {
                animation: float 10s ease-in-out infinite;
                animation-delay: -2s;
            }

            .animate-float-slow {
                animation: float 12s ease-in-out infinite;
                animation-delay: -4s;
            }

            .floating-element {
                animation: float 6s ease-in-out infinite;
            }

            @keyframes float {

                0%,
                100% {
                    transform: translateY(0px);
                }

                50% {
                    transform: translateY(-20px);
                }
            }

            .reveal-text {
                opacity: 0;
                transform: translateY(30px);
            }

            /* High Fidelity Card Hover */
            .sanctuary-card {
                transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
                background-color: rgba(0, 30, 73, 0.03);
                border: 1px solid rgba(0, 30, 73, 0.05);
            }

            .sanctuary-card:hover {
                background-color: #ffffff;
                border-color: rgba(0, 30, 73, 0.1);
                box-shadow: 0 40px 80px -20px rgba(0, 30, 73, 0.08);
                transform: translateY(-8px);
            }

            /* Text Reveal Masks */
            .reveal-text {
                overflow: hidden;
                display: block;
            }

            .reveal-text>span {
                display: block;
            }
        </style>
    @endpush
@section('content')
    <!-- Hero: The Art of Absolute Precision -->
    <section class="relative h-[600px] w-full overflow-hidden flex items-center justify-center">
        <div class="absolute inset-0 bg-primary z-0">
            <img alt="Modern clinical architecture"
                class="w-full h-full object-cover opacity-100 mix-blend-luminosity scale-110" id="hero-img"
                src="{{ asset('themes/frontend') }}/images/chagger-hall.png" />
        </div>
        <div class="absolute inset-0 hero-overlay z-10"></div>
        <svg class="absolute inset-0 w-full h-full z-20 opacity-20 pointer-events-none" preserveaspectratio="none"
            viewbox="0 0 100 100">
            <line class="hero-line" stroke="white" stroke-width="0.05" x1="0" x2="100" y1="20"
                y2="20"></line>
            <line class="hero-line" stroke="white" stroke-width="0.05" x1="0" x2="100" y1="80"
                y2="80"></line>
            <line class="hero-line" stroke="white" stroke-width="0.05" x1="30" x2="30" y1="0"
                y2="100"></line>
            <line class="hero-line" stroke="white" stroke-width="0.05" x1="70" x2="70" y1="0"
                y2="100"></line>
        </svg>
        <div class="relative z-30 text-center px-6">
            <span
                class="text-on-primary/70 uppercase tracking-[0.4em] text-sm mb-6 block font-label animate-reveal-sub">Heritage
                &amp; Vision</span>
            <h1 class="text-6xl md:text-8xl lg:text-9xl font-headline font-extrabold text-on-primary tracking-tighter leading-[0.9] overflow-hidden"
                id="hero-title">
                <span class="block">About Us</span>
                <!-- <span class="text-primary-fixed-dim block">Chagger Dental Clinics</span> -->
            </h1>
            <div class="mt-12 flex justify-center gap-4">
                <div class="w-[1px] h-24 bg-gradient-to-b from-primary-fixed-dim to-transparent origin-top"
                    id="hero-scroller"></div>
            </div>
        </div>
    </section>

    <!-- Core Values: Philosophy Orbit -->
    <section class="py-12 bg-surface overflow-hidden" id="philosophy-section">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-10 items-center">
                <div class="relative group floating-element">
                    <div class="relative aspect-square mx-auto rounded-[3rem] overflow-hidden shadow-2xl mt-10">
                        <img class="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-105"
                            data-alt="high-tech dental surgery room with futuristic lighting and clean white surfaces"
                            src="{{ asset('themes/frontend') }}/images/chagger-hall.png" />
                    </div>
                </div>
                <div class="space-y-5 scroll-reveal-group">
                    <h2 class="text-5xl md:text-6xl font-headline font-bold text-primary leading-tight overflow-hidden">
                        <span class="reveal-inner block">A Symphony of</span>
                        <span class="reveal-inner block">Care and Science.</span>
                    </h2>
                    <p class="text-xl text-secondary leading-relaxed font-light reveal-content">
                        At Chagger Dental, we are committed to delivering high-quality,
                        patient-focused care through a thoughtful blend of clinical
                        expertise and modern dentistry. Our experienced team takes the
                        time to understand your needs and works with you to develop
                        personalized treatment options that support your long-term oral
                        health.
                    </p>
                    <div class="flex flex-col gap-6 reveal-content">
                        <div class="flex gap-6 items-start group">
                            <div
                                class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center shrink-0 transition-transform group-hover:scale-110">
                                <span class="material-symbols-outlined text-primary" data-icon="verified">verified</span>
                            </div>
                            <div>
                                <h4 class="font-headline font-bold text-lg">
                                    Proudly Supporting Healthier Smiles
                                </h4>
                                <p class="text-on-surface-variant">
                                    We are dedicated to helping our community smile with
                                    confidence. Our team provides comprehensive dental care for
                                    the whole family in a welcoming, supportive
                                    environment—focused on comfort, clarity, and consistency of
                                    care.
                                </p>
                            </div>
                        </div>
                        <div class="flex gap-6 items-start group">
                            <div
                                class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center shrink-0 transition-transform group-hover:scale-110">
                                <span class="material-symbols-outlined text-primary"
                                    data-icon="architecture">architecture</span>
                            </div>
                            <div>
                                <h4 class="font-headline font-bold text-lg">
                                    A Comfortable Experience, Every Visit
                                </h4>
                                <p class="text-on-surface-variant">
                                    We believe dental care should feel calm and reassuring. From
                                    your first visit onward, our goal is to create a positive
                                    experience built on trust, communication, and personalized
                                    attention.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- The Roadmap: SVG Guided History -->
    <section class="py-12 mt-10 relative bg-surface-container-low overflow-hidden">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col items-center text-center mb-24">
                <h2 class="reveal-text text-5xl font-headline font-bold text-primary mb-4">
                    Expert Dental Care
                </h2>
                <p class="reveal-text text-secondary max-w-xl">
                    From a single clinical vision, we’ve grown into a multi-location
                    practice focused on comprehensive, modern dentistry with a
                    patient-first approach.
                </p>
            </div>
            <div class="relative">
                <!-- GSAP Scroll Line -->
                <div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-1 hidden md:block">
                    <div class="h-full w-full bg-outline-variant/20 rounded-full"></div>
                    <div class="absolute top-0 left-0 w-full bg-primary rounded-full origin-top transform scale-y-0"
                        id="timeline-progress"></div>
                </div>
                <div class="space-y-32">
                    <!-- Milestone 1 -->
                    <div class="milestone-row relative flex flex-col md:flex-row items-center gap-8 md:gap-0">
                        <div class="w-full md:w-1/2 md:pr-16 text-right order-2 md:order-1 reveal-text">
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Comprehensive Clinical Assessment
                            </h3>
                            <p class="text-secondary">
                                We begin with a thorough examination using modern diagnostic
                                tools to assess your oral health and identify the most
                                appropriate treatment options.
                            </p>
                        </div>
                        <div
                            class="timeline-dot absolute left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-outline-variant z-10 border-4 border-surface hidden md:block transition-colors duration-500">
                        </div>
                        <div class="w-full md:w-1/2 md:pl-16 order-1 md:order-2 floating-element">
                            <img class="w-full aspect-video object-cover rounded-3xl shadow-lg"
                                data-alt="historical photo of first dental clinic exterior"
                                src="{{ asset('themes/frontend') }}/images/chagger.png" />
                        </div>
                    </div>
                    <!-- Milestone 2 -->
                    <div class="milestone-row relative flex flex-col md:flex-row items-center gap-8 md:gap-0">
                        <div class="w-full md:w-1/2 md:pr-16 order-1 floating-element" style="animation-delay: -3s">
                            <img class="w-full aspect-video object-cover rounded-3xl shadow-lg"
                                data-alt="modern dental laboratory"
                                src="{{ asset('themes/frontend') }}/images/hero-new-3.png" />
                        </div>
                        <div
                            class="timeline-dot absolute left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-outline-variant z-10 border-4 border-surface hidden md:block transition-colors duration-500">
                        </div>
                        <div class="w-full md:w-1/2 md:pl-16 text-left order-2 reveal-text">
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Personalised Treatment Planning
                            </h3>
                            <p class="text-secondary">
                                Our clinicians create tailored treatment plans that may
                                include preventive, restorative, cosmetic, and orthodontic
                                care—designed to achieve predictable, long-term results.
                            </p>
                        </div>
                    </div>
                    <!-- Milestone 3 -->
                    <div class="milestone-row relative flex flex-col md:flex-row items-center gap-8 md:gap-0">
                        <div class="w-full md:w-1/2 md:pr-16 text-right order-2 md:order-1 reveal-text">
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Ongoing Preventive Care & Support
                            </h3>
                            <p class="text-secondary">
                                Through regular checkups, hygiene care, and ongoing guidance,
                                we help you maintain healthy teeth and gums and protect your
                                smile over time.
                            </p>
                        </div>
                        <div
                            class="timeline-dot absolute left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-outline-variant z-10 border-4 border-surface hidden md:block transition-colors duration-500">
                        </div>
                        <div class="w-full md:w-1/2 md:pl-16 order-1 md:order-2 floating-element"
                            style="animation-delay: -1.5s">
                            <img class="w-full aspect-video object-cover rounded-3xl shadow-lg"
                                data-alt="minimalist modern dental lobby"
                                src="{{ asset('themes/frontend') }}/images/chagger1.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-12 px-6 mb-10 bg-surface" style="display: none">
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-end gap-8 mb-10">
                <div>
                    <h2 class="text-5xl font-headline font-bold text-primary">
                        Our Team
                    </h2>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                <!-- Doctor 1 -->
                <div
                    class="group relative overflow-hidden rounded-[2.5rem] bg-surface-container shadow-sm hover:shadow-2xl transition-all duration-700">
                    <div class="aspect-[3/4] overflow-hidden">
                        <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                            data-alt="professional male dentist in clean medical attire looking confident in clinical setting"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpjQ3xRgT8VCtLr0_Lh8r1WjzvINPswD9B_f0LB2D4SAantewUkt-VsgycFTdjsWbHDEgsGtyWqHCh6Ze_3DUCwf9WMDu4PpenriRPSPZi1c5hrf5q8zcrpuIuG07QUQj3aQoWVkWHb5mSZjqZK3tzV6hQI2aCYrgQ5vOgtw9TyTa66hxhCUvGCVWaWW8pHNEU5HHYWIpZeNQ5-BZTUDAhMLA6lQvtXaELIEFsIw9T6C3ViiI2fy6zHmM-XQgPa1qlPX41r9K5I8Nq" />
                    </div>
                    <div
                        class="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    </div>
                    <div
                        class="absolute bottom-0 left-0 right-0 p-8 transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500">
                        <h4 class="text-2xl font-bold text-surface-container-lowest font-headline">
                            Dr. Arjan Chagger
                        </h4>
                        <p class="text-on-primary-container font-medium mb-4">
                            Founder &amp; Lead Aesthetic Surgeon
                        </p>
                        <div class="h-px bg-white/20 mb-4"></div>
                        <div class="space-y-2 opacity-0 group-hover:opacity-100 transition-opacity delay-200">
                            <span class="text-xs uppercase tracking-widest text-white/60 font-bold">Signature
                                Treatment</span>
                            <p class="text-white text-sm">
                                Full Arch Reconstruction using Guided Robotics.
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Doctor 2 -->
                <div
                    class="group relative overflow-hidden rounded-[2.5rem] bg-surface-container shadow-sm hover:shadow-2xl transition-all duration-700">
                    <div class="aspect-[3/4] overflow-hidden">
                        <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                            data-alt="female specialist dentist smiling warmly in high-end clinic hallway"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbSOPVX2azJAVlaFvJnhjHcKg5Q_hQW-G8jG9VFgbLBmXOKOwuQDYnxoVsG4nIN4We4_Fj5ecSAUd9K9Rnvd-KV8GKy0OD3s_MZieSHGjGZN0UfnSH2RR1ii0ZFkg750U3Yhv8ng9LEjJ7NJEa_o-ysZxv1S-fXthU-wOgweeMRbr8mFLsADubWr4Fx_d-BN8ijvkL30SyJVExCgNtBqcT2LGEZpgLxltPQTFcN7rXTEGO-WpRmZO7fqSFF7oda1l_7OcsKZB4efMH" />
                    </div>
                    <div
                        class="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    </div>
                    <div
                        class="absolute bottom-0 left-0 right-0 p-8 transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500">
                        <h4 class="text-2xl font-bold text-surface-container-lowest font-headline">
                            Dr. Sarah Vane
                        </h4>
                        <p class="text-on-primary-container font-medium mb-4">
                            Orthodontic Specialist
                        </p>
                        <div class="h-px bg-white/20 mb-4"></div>
                        <div class="space-y-2 opacity-0 group-hover:opacity-100 transition-opacity delay-200">
                            <span class="text-xs uppercase tracking-widest text-white/60 font-bold">Signature
                                Treatment</span>
                            <p class="text-white text-sm">
                                Neuromuscular Alignment &amp; Invisible Orthodontics.
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Doctor 3 -->
                <div
                    class="group relative overflow-hidden rounded-[2.5rem] bg-surface-container shadow-sm hover:shadow-2xl transition-all duration-700">
                    <div class="aspect-[3/4] overflow-hidden">
                        <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                            data-alt="male dental professional with glasses in a technical lab workspace"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuBWCntQCLV6mTwhlmWuiDTIy0eE2zGJOC6T7HviMIYNumEnmiutpdW7YFAusriHdcaTUIWADh87TbT7CwE2EAH7lJlkbWSsim3C7nS8HR587LbhbPjHnZWVl3sknQJrr5yuuv2PkAoRGR2SIPT4kuiu0tWQD6rCojEE-mcCY_160Kkp12nh2WSuQ4YVyTPc2wPPd2Ej3Nc0qcDepRR31MSDyr3vLRFO5X4B6uYjxJEiHtIGN3AZyPcRcs1e6ZkwyPqNDTV1qYAK2_gd" />
                    </div>
                    <div
                        class="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    </div>
                    <div
                        class="absolute bottom-0 left-0 right-0 p-8 transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500">
                        <h4 class="text-2xl font-bold text-surface-container-lowest font-headline">
                            Dr. Marcus Thorne
                        </h4>
                        <p class="text-on-primary-container font-medium mb-4">
                            Implantology Lead
                        </p>
                        <div class="h-px bg-white/20 mb-4"></div>
                        <div class="space-y-2 opacity-0 group-hover:opacity-100 transition-opacity delay-200">
                            <span class="text-xs uppercase tracking-widest text-white/60 font-bold">Signature
                                Treatment</span>
                            <p class="text-white text-sm">
                                Bio-Compatible Titanium Matrix Implants.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Diagnostic Hub: Futuristic UI -->
    <section class="py-12 bg-[#001e49] text-on-primary relative overflow-hidden" id="tech-section">
        <div class="absolute top-20 right-20 w-96 h-96 border border-primary-fixed-dim/20 rounded-full animate-pulse">
        </div>
        <div class="absolute bottom-20 left-20 w-[600px] h-[600px] border border-primary-fixed-dim/10 rounded-full"></div>
        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="grid lg:grid-cols-12 gap-12 items-center">
                <div class="lg:col-span-5 space-y-8 scroll-reveal-group">
                    <h2 class="text-3xl font-headline font-bold leading-tight overflow-hidden">
                        <span class="reveal-inner">Over 19 Years of Trusted Care</span>
                    </h2>
                    <p class="text-on-primary/70 text-lg leading-relaxed reveal-content">
                        At Chagger Dental, we’ve been caring for smiles for more than 19
                        years, combining clinical expertise with a modern, patient-first
                        approach
                    </p>
                    <ul class="space-y-6 reveal-content">
                        <li class="flex gap-4 items-center group cursor-pointer">
                            <div
                                class="w-10 h-2 rounded-full bg-primary-fixed-dim group-hover:scale-[3] transition-transform duration-500">
                            </div>
                            <span class="text-xl font-headline transition-all group-hover:translate-x-4">We bring together
                                advanced technology and a human
                                touch—delivering precise, efficient treatment in a calm and
                                supportive environment. From routine care to full smile
                                transformations, our focus is always on making your experience
                                comfortable, clear, and personalized.</span>
                        </li>
                        <li class="flex gap-4 items-center group cursor-pointer">
                            <div
                                class="w-3 h-2 rounded-full bg-primary-fixed-dim group-hover:scale-[3] transition-transform duration-500">
                            </div>
                            <span class="text-xl font-headline transition-all group-hover:translate-x-4">We believe dental
                                care should feel simple and stress-free,
                                with results you can trust.</span>
                        </li>
                        <li class="flex gap-4 items-center group cursor-pointer">
                            <div
                                class="w-2 h-2 rounded-full bg-primary-fixed-dim group-hover:scale-[3] transition-transform duration-500">
                            </div>
                            <span class="text-xl font-headline transition-all group-hover:translate-x-4">Modern care.
                                Gentle approach. Thoughtful results.
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="lg:col-span-7">
                    <div class="grid grid-cols-2 gap-4">
                        <div
                            class="bg-primary-container p-8 rounded-xl border border-white/5 backdrop-blur-sm sanctuary-card hover:bg-white/10 transition-all duration-700 animate-float-delayed">
                            <div class="mb-12 flex justify-between items-start">
                                <span class="material-symbols-outlined text-4xl text-primary-fixed-dim"
                                    data-icon="biometrics">fingerprint</span>
                            </div>
                            <h5 class="text-xl font-headline font-bold mb-2">
                                Cutting-Edge Technology
                            </h5>
                            <p class="text-sm text-on-primary/50">
                                We use advanced digital scanning to capture precise
                                impressions quickly and comfortably—without the need for
                                traditional messy molds.
                            </p>
                        </div>
                        <div
                            class="bg-primary-container p-8 rounded-xl border border-white/5 backdrop-blur-sm mt-12 sanctuary-card hover:bg-white/10 transition-all duration-700 animate-float-slow">
                            <div class="mb-12 flex justify-between items-start">
                                <span class="material-symbols-outlined text-4xl text-primary-fixed-dim"
                                    data-icon="neurology">neurology</span>
                            </div>
                            <h5 class="text-xl font-headline font-bold mb-2">
                                Professional Care
                            </h5>
                            <p class="text-sm text-on-primary/50">
                                We use advanced monitoring and modern techniques to ensure
                                your comfort and safety throughout your dental treatment.
                            </p>
                        </div>
                        <div
                            class="col-span-2 from-primary-container to-primary p-8 rounded-xl border border-white/5 hover: transition-all duration-1000">
                            <img alt="Medical UI"
                                class="w-full h-48 object-cover rounded-lg opacity-100 mix-blend-overlay mb-6 scale-110"
                                src="{{ asset('themes/frontend') }}/images/chag.webp" />
                            <div class="flex justify-between items-end">
                                <div>
                                    <h5 class="text-2xl font-headline font-bold">
                                        Advanced Treatment Planning
                                    </h5>
                                    <p class="text-on-primary/50">
                                        We use detailed digital imaging and 3D planning tools to
                                        better understand your oral health and design precise,
                                        personalized treatment plans.
                                    </p>
                                </div>
                                <span class="material-symbols-outlined text-3xl animate-bounce"
                                    data-icon="query_stats">query_stats</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Final Reveal: Transformation Section -->
    <section class="py-12 px-6 bg-surface-container-low">
        <div class="max-w-5xl mx-auto">
            <div class="text-center mb-5">
                <h2 class="text-4xl md:text-6xl font-headline font-bold text-primary mb-2 tracking-tighter">
                    See Your Smile Potential
                </h2>
                <p class="text-primary-fixed text-lg md:text-xl text-secondary max-w-2xl mx-auto mb-5">
                    Use the slider to explore the results of comprehensive restorative
                    care.
                </p>
            </div>
            <!-- Interactive Before/After Slider -->
            <div class="relative aspect-[16/9] w-full rounded-[3rem] overflow-hidden shadow-2xl group cursor-col-resize bg-surface"
                id="slider-container">
                <!-- After Image (Base) -->
                <img class="absolute inset-0 w-full h-full object-cover pointer-events-none" data-alt="after smile"
                    src="{{ asset('themes/frontend') }}/images/about-after.png" />
                <!-- Before Image (Clipped) -->
                <div class="absolute inset-0 w-1/2 overflow-hidden border-r-4 border-white z-10 pointer-events-none"
                    id="slider-clipped" style="width: 50%">
                    <img class="absolute inset-0 h-full object-cover grayscale brightness-75 pointer-events-none"
                        data-alt="before smile" src="{{ asset('themes/frontend') }}/images/about-before.png"
                        style="width: 70vw; max-width: none" />
                </div>
                <!-- Draggable Handle -->
                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white rounded-full shadow-xl flex items-center justify-center active:scale-95 transition-transform pointer-events-none"
                    id="slider-handle">
                    <span class="material-symbols-outlined text-primary">unfold_more</span>
                </div>
                <div
                    class="absolute bottom-10 left-10 z-20 px-4 py-1 bg-black/40 backdrop-blur rounded-full text-white text-xs font-bold uppercase tracking-widest pointer-events-none">
                    Pre-Clinical
                </div>
                <div
                    class="absolute bottom-10 right-10 z-20 px-4 py-1 bg-primary/80 backdrop-blur rounded-full text-white text-xs font-bold uppercase tracking-widest pointer-events-none">
                    Sanctuary Outcome
                </div>
            </div>
            <div class="mt-8 flex flex-col items-center">
                <p class="reveal-text text-2xl font-headline font-light italic text-primary text-center mb-5 max-w-2xl">
                    "The transformation wasn't just my smile; it was how I walked into
                    every room from that day forward."
                </p>
                <a href="{{ module_url('WebEnquiryController.bookAppointment') }}"><button
                        class="reveal-text bg-primary text-on-primary px-12 py-5 rounded-full font-headline font-extrabold text-lg shadow-xl hover:scale-105 active:scale-95 transition-all hover:bg-blue-100 hover:text-primary">
                        Book Appointment
                    </button></a>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script>
        gsap.registerPlugin(ScrollTrigger);
        // Text Reveal Animations
        document.querySelectorAll(".reveal-text").forEach((text) => {
            gsap.to(text, {
                scrollTrigger: {
                    trigger: text,
                    start: "top 90%",
                    toggleActions: "play none none none",
                },
                opacity: 1,
                y: 0,
                duration: 1.2,
                ease: "power3.out",
                stagger: 0.2,
            });
        });
        // Initial Preparation
        document.querySelectorAll(".reveal-inner").forEach((el) => {
            gsap.set(el, {
                y: "105%"
            });
        });
        document.querySelectorAll(".reveal-content").forEach((el) => {
            gsap.set(el, {
                opacity: 0,
                y: 20
            });
        });

        // Timeline Progress Animation
        const timelineProgress = document.getElementById("timeline-progress");
        const milestoneRows = document.querySelectorAll(".milestone-row");
        const dots = document.querySelectorAll(".timeline-dot");

        gsap.to(timelineProgress, {
            scrollTrigger: {
                trigger: ".relative",
                start: "top 40%",
                end: "bottom 60%",
                scrub: 0.5,
            },
            scaleY: 1,
        });

        milestoneRows.forEach((row, index) => {
            ScrollTrigger.create({
                trigger: row,
                start: "top center",
                onEnter: () => {
                    gsap.to(dots[index], {
                        backgroundColor: "#001e49",
                        scale: 1.5,
                        duration: 0.5,
                    });
                },
                onLeaveBack: () => {
                    gsap.to(dots[index], {
                        backgroundColor: "#c4c6d1",
                        scale: 1,
                        duration: 0.5,
                    });
                },
            });
        });
        
        // Smooth Before/After Slider
        const container = document.getElementById("slider-container");
        const clippedImage = document.getElementById("slider-clipped");
        const handle = document.getElementById("slider-handle");

        const updateSlider = (e) => {
            const rect = container.getBoundingClientRect();
            let x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left;
            x = Math.max(0, Math.min(x, rect.width));
            const percentage = (x / rect.width) * 100;

            gsap.to(clippedImage, {
                width: `${percentage}%`,
                duration: 0.4,
                ease: "power2.out",
            });
            gsap.to(handle, {
                left: `${percentage}%`,
                duration: 0.4,
                ease: "power2.out",
            });
        };

        container.addEventListener("mousemove", updateSlider);
        container.addEventListener("touchmove", updateSlider, {
            passive: true
        });

        // 1. & 3. Hero and Scroll Animations
        const heroTl = gsap.timeline();
        heroTl
            .from("#hero-img", {
                scale: 1.3,
                duration: 2.5,
                ease: "power2.out"
            })
            .from(
                ".hero-line", {
                    attr: {
                        x2: 0,
                        y2: 0
                    },
                    stagger: 0.1,
                    duration: 1.5,
                    ease: "power3.inOut",
                },
                0.5,
            )
            .to(
                "#hero-title span", {
                    y: 0,
                    duration: 1.5,
                    stagger: 0.2,
                    ease: "power4.out"
                },
                0.8,
            )
            .from(".animate-reveal-sub", {
                opacity: 0,
                y: 10,
                duration: 1
            }, 1.2)
            .from("#hero-scroller", {
                scaleY: 0,
                duration: 1
            }, 2);

        // Dynamic Scroll Reveals
        document.querySelectorAll(".scroll-reveal-group").forEach((group) => {
            const inners = group.querySelectorAll(".reveal-inner");
            const contents = group.querySelectorAll(".reveal-content");

            const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: group,
                    start: "top 85%",
                    toggleActions: "play none none none",
                },
            });

            tl.to(inners, {
                y: 0,
                duration: 1,
                stagger: 0.1,
                ease: "power3.out",
            }).to(
                contents, {
                    opacity: 1,
                    y: 0,
                    duration: 1,
                    stagger: 0.2,
                    ease: "power2.out"
                },
                "-=0.5",
            );
        });

        // 4. Interactive Orbital Movement
        const orbitalMaster = document.getElementById("orbital-master");
        const floatingNodesContainer = document.getElementById("floating-nodes");
        const coreNode = document.getElementById("core-node");

        orbitalMaster.addEventListener("mousemove", (e) => {
            const rect = orbitalMaster.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;

            gsap.to(floatingNodesContainer, {
                x: x * 0.15,
                y: y * 0.15,
                duration: 2,
                ease: "power3.out",
            });

            gsap.to(coreNode, {
                x: x * 0.05,
                y: y * 0.05,
                duration: 1.5,
                ease: "power2.out",
            });

            gsap.to("#ring-outer, #ring-inner", {
                x: x * 0.03,
                y: y * 0.03,
                duration: 2.5,
                ease: "power1.out",
            });
        });

        orbitalMaster.addEventListener("mouseleave", () => {
            gsap.to(
                [floatingNodesContainer, coreNode, "#ring-outer, #ring-inner"], {
                    x: 0,
                    y: 0,
                    duration: 3,
                    ease: "elastic.out(1, 0.5)",
                },
            );
        });
    </script>
@endpush