@extends('themes.frontend.layouts.app')
@section('body_class',
    'bg-background text-on-background font-body selection:bg-primary-fixed-dim selection:text-primary
    overflow-x-hidden')
    @push('head_scripts')
        <script id="tailwind-config">
            tailwind.config = {
                darkMode: "class",
                theme: {
                    extend: {
                        colors: {
                            "surface-container-high": "#eae8e4",
                            "on-error": "#ffffff",
                            "on-tertiary": "#ffffff",
                            tertiary: "#251e16",
                            "on-secondary-container": "#546678",
                            "surface-container": "#f0ede9",
                            "secondary-fixed-dim": "#b5c9dd",
                            "surface-container-low": "#f6f3ef",
                            "surface-container-highest": "#e5e2de",
                            "secondary-container": "#d1e5fa",
                            "surface-container-lowest": "#ffffff",
                            "inverse-on-surface": "#f3f0ec",
                            "tertiary-container": "#3b332b",
                            "on-secondary": "#ffffff",
                            "secondary-fixed": "#d1e5fa",
                            "on-secondary-fixed-variant": "#36495a",
                            "tertiary-fixed": "#eee0d4",
                            "surface-tint": "#405e97",
                            "surface-dim": "#dcdad6",
                            "on-primary-container": "#809ddb",
                            "primary-fixed-dim": "#adc6ff",
                            "on-primary": "#ffffff",
                            "outline-variant": "#c4c6d1",
                            "surface-bright": "#fcf9f5",
                            "on-primary-fixed-variant": "#26467d",
                            "on-background": "#1c1c1a",
                            "tertiary-fixed-dim": "#d1c4b8",
                            "on-tertiary-fixed": "#211a13",
                            secondary: "#4e6072",
                            outline: "#747781",
                            "on-tertiary-container": "#a79b90",
                            "surface-variant": "#e5e2de",
                            "on-primary-fixed": "#001a41",
                            "on-error-container": "#93000a",
                            surface: "#fcf9f5",
                            "error-container": "#ffdad6",
                            "on-tertiary-fixed-variant": "#4e453c",
                            error: "#ba1a1a",
                            primary: "#001e49",
                            "primary-container": "#0e336a",
                            "inverse-surface": "#31302e",
                            "primary-fixed": "#d8e2ff",
                            "on-secondary-fixed": "#091d2c",
                            background: "#fcf9f5",
                            "inverse-primary": "#adc6ff",
                            "on-surface-variant": "#434750",
                            "on-surface": "#1c1c1a",
                        },
                        borderRadius: {
                            DEFAULT: "0.25rem",
                            lg: "0.5rem",
                            xl: "0.75rem",
                            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;
            }

            .prism-shard {
                clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
            }

            .glass-silk {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(20px);
            }

            .glass-card {
                background: rgba(14, 51, 106, 0.4);
                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-card2 {
                background: rgba(14, 51, 106, 0.4);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
            }

            /* navbar */
        </style>
    @endpush
@section('content')
    <main>
        <!-- Hero: The Refractive Entry -->
        <section class="relative h-[600px] flex items-center justify-center pt-24 overflow-hidden">
            <div class="absolute inset-0 z-0">
                <div class="absolute inset-0 bg-gradient-to-tr from-primary-container via-primary to-blue-900 opacity-95">
                </div>
                <img class="w-full h-full object-cover mix-blend-overlay"
                    data-alt="Smooth radial gradient flowing from deep navy to soft lavender with subtle grain texture and crystalline light refractions"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCaru2ipPoQtx9QI5XjLPuf-JGVwoXChvpsS21YyoCc1BjwMhxLQjbB6wgPjAqZNUY4i_uXACAB9lWWV5hlJPWE1U4PF91k0_9VlM3p7RyUj5qTM1TSHS6QVHYk0dWtllCOvTIHMFunMDWW6PhIjDUVAt2PV-B7oS6utceZ7JIDLsB5V5IIpWkpcenLhiTtg5AY_2ZJntTM_mOf1BUM7ctHAxVExJNc__CqnEh5uHWXhh6UHjaGVgK3tDkihRmyrTcsGRfRDNvv5Z5G" />
            </div>
            <div class="container mx-auto px-6 relative z-10 text-center">
                <span
                    class="inline-block px-4 py-1 rounded-full bg-secondary-container text-on-secondary-container text-xs font-label uppercase tracking-[0.2em] mb-4">Reviews</span>
                <h1
                    class="text-6xl md:text-7xl font-headline font-extrabold text-white leading-[0.9] tracking-tighter mb-12">
                    PATIENT
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-white">REVIEWS</span>
                </h1>
            </div>
            <!-- Floating Prism Shards (Visual Decoration) -->
            <div class="absolute -bottom-24 left-1/4 w-64 h-96 prism-shard bg-white/10 backdrop-blur-md rotate-12"></div>
            <div class="absolute top-1/4 -right-12 w-48 h-80 prism-shard bg-blue-400/10 backdrop-blur-md -rotate-45"></div>
        </section>

        <!-- Service Section: Atmospheric Calm -->
        <section class="py-12 bg-slate-100">
            <div class="container mx-auto px-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
                    <div class="relative order-2 lg:order-1">
                        <div class="relative z-10 rounded-[3rem] overflow-hidden aspect-square">
                            <img class="w-full h-full object-cover"
                                data-alt="Ultra-modern dental clinic interior with sun-drenched rooms, white marble floors, and lush indoor plants, minimalist sanctuary design"
                                src="{{ asset('themes/frontend') }}/images/chagger1.png" />
                        </div>
                        <div
                            class="absolute -top-10 -left-10 w-64 h-64 bg-secondary-container rounded-full mix-blend-multiply filter blur-3xl opacity-70">
                        </div>
                        <div
                            class="absolute -bottom-10 -right-10 w-64 h-64 bg-primary-container rounded-full mix-blend-multiply filter blur-3xl opacity-30">
                        </div>
                    </div>
                    <div class="order-1 lg:order-2">
                        <h2 class="text-5xl md:text-5xl font-headline font-extrabold text-primary mb-5 tracking-tighter">
                            Patient Experience That Matters
                        </h2>

                        <div class="space-y-8">
                            <div
                                class="group bg-white flex gap-6 p-8 rounded-2xl hover:bg-white transition-all duration-500">
                                <div
                                    class="flex-shrink-0 w-14 h-14 rounded-full bg-primary-container text-white flex items-center justify-center">
                                    <span class="material-symbols-outlined">auto_awesome</span>
                                </div>
                                <div>
                                    <h4 class="text-xl font-headline text-secondary mb-2">
                                        At Chagger Dental, we focus on delivering consistent,
                                        high-quality care built around comfort, communication, and
                                        trust. Every visit is designed to feel clear, supportive,
                                        and patient-focused.
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="py-12 bg-primary relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-8 mb-10">
                <div class="flex flex-col md:flex-row justify-between items-end gap-8">
                    <div>
                        <h2 class="text-white text-4xl md:text-5xl font-headline font-extrabold tracking-tighter">
                            Patient Testimonials
                        </h2>
                    </div>
                    <div class="flex gap-4">
                        <button
                            class="w-14 h-14 rounded-full border border-primary-fixed-dim/30 text-white flex items-center justify-center hover:bg-white hover:text-primary transition-all duration-300 active:scale-90"
                            id="ps-blueprint-prev" style="opacity: 0.4; cursor: default">
                            <span class="material-symbols-outlined">west</span>
                        </button>
                        <button
                            class="w-14 h-14 rounded-full border border-primary-fixed-dim/30 text-white flex items-center justify-center hover:bg-white hover:text-primary transition-all duration-300 active:scale-90"
                            id="ps-blueprint-next" style="opacity: 1; cursor: pointer">
                            <span class="material-symbols-outlined">east</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="flex gap-8 px-8 overflow-x-auto ps-blueprint-no-scrollbar pb-10 snap-x" id="ps-blueprint-slider">
                <!-- Card 1 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "Professional and friendly environment. As usual, I had a very
                        pleasant experience; procedure done at the highest standards. I
                        would definitely recommend Dr. Chagger’s dental office to all my
                        friends."
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Rodica Dutka
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Card 2 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "Dr. Chagger and his team are the absolute best in the business.
                        From the time you walk in it is clear you are important to them.
                        State of the art equipment and beautiful clean offices. I
                        recommend them to all wanting high quality service with a smile."
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Mike Wakefield
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Card 3 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "CHAGGER Dental deserves more than 5 stars - 10+ - wonderful
                        dental office, professional and very caring. Visiting the dentist
                        can be very stressful. Dr. Chagger and all his staff do a great
                        job of making you feel at ease. Always! THANK YOU"
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Motria
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Card 4 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "The team was extremely helpful and treated my 88 year old mom
                        with great kindness and respect. Dr B outlined options with risks
                        and benefits. Sonia is tremendous to work with!"
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Debbie Moretta
                            </p>
                        </div>
                    </div>
                </div>
                <!-- card 5 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "I have been going to Chaggar Dental for over a year now and the
                        staff are excellent! I always feel welcomed and relaxed. My
                        anxiety about going to the dentist is nearly non-existent now!"
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Caitlin Korff
                            </p>
                        </div>
                    </div>
                </div>
                <!-- card 6 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "This is by far one of the best dental offices I have been to! The
                        staff are always kind and the procedures have always gone
                        smoothly. Thank you to the wonderful team for all their hard
                        work!!"
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Sabrina Sappal
                            </p>
                        </div>
                    </div>
                </div>
                <!-- card 7 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "I love the staff and dentists at this office. They’re so kind and
                        friendly. I am always nervous about seeing dentists but the team
                        at this office makes the visits so easy. Thank you!!!"
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                ViVi
                            </p>
                        </div>
                    </div>
                </div>
                <!-- card 8 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "Awesome place the staff is super welcoming excellent service
                        doctor knows his job amazing with kids."
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Ebtesam Salman
                            </p>
                        </div>
                    </div>
                </div>
                <!-- card 9 -->
                <div
                    class="min-w-[85vw] md:min-w-[450px] bg-primary-container/40 backdrop-blur-md border border-white/5 p-12 rounded-[2rem] group hover:bg-white transition-all duration-500 cursor-pointer snap-center">
                    <!-- <span
                      class="material-symbols-outlined text-on-primary-container group-hover:text-primary text-5xl mb-8"
                      >format_quote</span
                    > -->
                    <p class="text-lg italic h-[200px] text-primary-fixed group-hover:text-primary leading-relaxed mb-12">
                        "Incredible staff. Kind service. I’m comfortable taking my entire
                        family to Chagger for all our dental needs"
                    </p>
                    <div class="flex items-center gap-4 border-t border-white/10 group-hover:border-primary/10 pt-8">
                        <div>
                            <p class="font-headline font-bold text-white group-hover:text-primary">
                                Mohsin Khandwala
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- CTA: The Final Prism -->
        <section class="mt-10 mb-20 px-6">
            <div class="mb-16 text-center">
                <span class="font-label text-xs uppercase tracking-[0.2em] text-secondary font-bold mb-4 block">Immediate
                    Assistance</span>
                <h1
                    class="font-headline text-5xl md:text-7xl font-extrabold text-primary tracking-tighter leading-tight mb-6">
                    Urgent Care <br />When You Need It Most.
                </h1>
                <p class="max-w-2xl mx-auto text-secondary text-lg leading-relaxed">
                    Dental emergencies don't wait. Neither do we. Our sanctuary is
                    equipped for immediate clinical intervention in a calming, pain-free
                    environment.
                </p>
            </div>

            <!-- Emergency Care CTA Badge (The Primary Task) -->
            <div class="relative w-full max-w-7xl mx-auto rounded-[2rem] overflow-hidden bg-surface-container-low shadow-2xl group aos-init aos-animate"
                data-aos="zoom-in">
                <div class="flex flex-col md:flex-row min-h-[500px]">
                    <!-- Image Side -->
                    <div class="relative w-full md:w-1/2 overflow-hidden">
                        <img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                            data-alt="Close-up of professional dentist in sterile blue scrubs reassuring a patient in a sunlit modern clinic, cinematic lighting, shallow depth of field"
                            src="{{ asset('themes/frontend') }}/images/chagger.png" />
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent to-surface-container-low/20"></div>
                    </div>
                    <!-- Content Side -->
                    <div
                        class="w-full md:w-1/2 p-10 md:p-16 flex flex-col justify-center items-start bg-surface-container-low relative">
                        <div class="mb-8">
                            <div class="flex items-center gap-3 mb-4">
                                <span class="material-symbols-outlined text-error text-3xl" data-icon="e911_emergency"
                                    style="font-variation-settings: &quot;FILL&quot; 1">e911_emergency</span>
                                <span class="font-headline font-extrabold text-primary text-2xl tracking-tight">Clinical
                                    Priority</span>
                            </div>
                            <h2 class="font-headline text-4xl font-bold text-tertiary leading-tight mb-4">
                                Dental Emergency? <br /><span class="text-primary-container">We're on standby.</span>
                            </h2>
                            <ul class="space-y-3 text-secondary mb-10">
                                <li class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm"
                                        data-icon="check_circle">check_circle</span>
                                    Severe Tooth Pain &amp; Swelling
                                </li>
                                <li class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm"
                                        data-icon="check_circle">check_circle</span>
                                    Broken or Knocked-out Teeth
                                </li>
                                <li class="flex items-center gap-2">
                                    <span class="material-symbols-outlined text-sm"
                                        data-icon="check_circle">check_circle</span>
                                    Abscess &amp; Infection Control
                                </li>
                            </ul>
                        </div>
                        <div class="w-full flex flex-col sm:flex-row items-center gap-6">
                            <!-- Glowing Pulse CTA -->
                            <a href="{{ module_url('WebEnquiryController.bookAppointment') }}"><button
                                    class="pulse-glow relative flex items-center justify-center gap-3 bg-primary text-on-primary px-10 py-5 rounded-full font-headline font-black text-lg group/btn overflow-hidden transition-all active:scale-95 w-full sm:w-auto">
                                    <span class="material-symbols-outlined" data-icon="call"
                                        style="font-variation-settings: &quot;FILL&quot; 1">call</span>
                                    Book Appointment
                                </button></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection