@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')
    @section('validate') @stop
    @push('head_scripts')
        <script id="tailwind-config">
            tailwind.config = {
                darkMode: "class",
                theme: {
                    extend: {
                        colors: {
                            secondary: "#4e6072",
                            "on-secondary-container": "#546678",
                            "on-error-container": "#93000a",
                            "surface-bright": "#fcf9f5",
                            tertiary: "#251e16",
                            surface: "#fcf9f5",
                            "on-surface": "#1c1c1a",
                            "on-primary-fixed-variant": "#26467d",
                            "secondary-fixed": "#d1e5fa",
                            "on-surface-variant": "#434750",
                            "surface-container-low": "#f6f3ef",
                            outline: "#747781",
                            "surface-container-highest": "#e5e2de",
                            "secondary-fixed-dim": "#b5c9dd",
                            "on-secondary-fixed-variant": "#36495a",
                            primary: "#001e49",
                            "on-tertiary-fixed": "#211a13",
                            "inverse-primary": "#adc6ff",
                            "error-container": "#ffdad6",
                            "on-error": "#ffffff",
                            "on-primary": "#ffffff",
                            error: "#ba1a1a",
                            "tertiary-fixed": "#eee0d4",
                            background: "#fcf9f5",
                            "surface-container-lowest": "#ffffff",
                            "surface-dim": "#dcdad6",
                            "secondary-container": "#d1e5fa",
                            "primary-container": "#0e336a",
                            "on-tertiary-container": "#a79b90",
                            "on-primary-fixed": "#001a41",
                            "surface-container-high": "#eae8e4",
                            "inverse-surface": "#31302e",
                            "tertiary-fixed-dim": "#d1c4b8",
                            "surface-variant": "#e5e2de",
                            "on-secondary": "#ffffff",
                            "primary-fixed": "#d8e2ff",
                            "surface-container": "#f0ede9",
                            "on-tertiary": "#ffffff",
                            "outline-variant": "#c4c6d1",
                            "on-primary-container": "#809ddb",
                            "on-background": "#1c1c1a",
                            "inverse-on-surface": "#f3f0ec",
                            "tertiary-container": "#3b332b",
                            "primary-fixed-dim": "#adc6ff",
                            "on-tertiary-fixed-variant": "#4e453c",
                            "surface-tint": "#405e97",
                            "on-secondary-fixed": "#091d2c",
                        },
                        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" 400,
                    "GRAD" 0,
                    "opsz" 24;
            }

            /* 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;
            }

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

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

            .editorial-shadow {
                box-shadow: 0 32px 64px -16px rgba(0, 30, 73, 0.05);
            }

            .text-balance {
                text-wrap: balance;
            }

            .glass-input {
                background: rgba(14, 51, 106, 0.4) !important;
                border: 1px solid rgba(255, 255, 255, 0.15) !important;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                color: white !important;
                transition: all 0.3s ease;
            }

            .bg-chagger-blue {
                --tw-bg-opacity: 1;
                background-color: rgb(14 51 106 / var(--tw-bg-opacity, 1));
            }

            /* other services css */
            .glass-primary {
                background: rgba(14, 51, 106, 0.75);
                backdrop-filter: blur(16px);
            }

            .tonal-shift-surface-container-low {
                background-color: #f6f3ef;
            }

            .surface-dim-tonal-grounding {
                background-color: #dcdad6;
            }

            .perspective-text {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            }

            input[type="date"]::-webkit-calendar-picker-indicator {
                filter: invert(1);
                /* Turns a black icon white */
            }
        </style>
    @endpush
@section('content')
    <main class="max-w-[1440px] mx-auto px-6 md:px-12 mt-20 pb-8">
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- Left Column: Storytelling (65%) -->
            <div class="w-full lg:w-[65%] space-y-10 mt-5">
                <!-- Cinematic Hero -->
                <section class="relative group">
                    <div class="rounded-[3rem] overflow-hidden aspect-[16/10] relative">
                        <img alt="Radiant Smile"
                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                            data-alt="Close-up of a stunningly bright and healthy human smile with almost invisible clear aligners in soft, natural studio lighting"
                            src="{{ asset('themes/frontend') }}/images/services/sedation.jpg" />
                        <div class="absolute inset-0 bg-gradient-to-t from-primary/40 to-transparent"></div>
                        <div class="absolute bottom-12 left-12 max-w-xl">
                            <h1
                                class="text-5xl md:text-5xl font-headline font-extrabold text-white tracking-tighter leading-[0.9] text-balance">
                                Sedation Dentistry
                            </h1>
                        </div>
                    </div>
                </section>
                <!-- 'The Art of Perfection' Section -->
                <section class="grid relative">
                    <div class="absolute -top-20 -left-20 w-64 h-64 bg-primary-container/10 rounded-full blur-3xl"></div>
                    <div class="space-y-4 relative z-10">
                        <h2 class="text-4xl font-headline font-bold text-primary tracking-tight">
                            Comfortable, Calm Dental Care at Chagger Dental
                        </h2>
                        <p class="text-secondary text-lg body-lg leading-relaxed">
                            At Chagger Dental, we understand that some patients feel nervous
                            or anxious about dental treatment. Sedation dentistry is
                            designed to help you feel relaxed, calm, and comfortable during
                            your visit so you can receive the care you need with confidence.

                            <br /><br />
                            Our approach focuses on gentle care, clear communication, and
                            creating a supportive environment for every patient.
                        </p>
                    </div>
                    <div class="space-y-2 mt-5 relative z-10">
                        <h2 class="text-4xl font-headline font-bold text-primary tracking-tight">
                            When Sedation Dentistry May Help
                        </h2>
                        <p class="text-lg body-lg leading-relaxed">
                            Sedation options may be considered if you:
                        </p>
                        <ul class="items-center gap-2 space-y-3 px-4 text-sm text-gray-500 mt-1 mb-3">
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Feel anxious about dental visits or procedures
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Have had difficult past dental experiences
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Require longer or more complex treatment
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Experience sensitivity to dental work or instruments
                            </li>
                        </ul>
                        <p class="leading-relaxed text-secondary text-lg">
                            Your dentist will review your medical history and treatment plan
                            to determine the most appropriate option for your comfort and
                            safety.
                        </p>
                    </div>
                </section>
                <!-- The Sanctuary Journey -->
                <section class="py-1">
                    <div
                        class="relative space-y-8 before:content-[''] before:absolute before:left-[1.25rem] before:top-4 before:bottom-4 before:w-[2px] before:bg-surface-container-highest">
                        <!-- Step 1 -->
                        <div class="relative pl-16 group">
                            <div
                                class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10 transition-transform duration-500 group-hover:scale-110">
                                1
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                How Sedation Dentistry Works
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Sedation dentistry uses carefully controlled medication
                                options to help you feel relaxed during treatment.<br /><br />
                                Depending on your needs, sedation may help reduce awareness of
                                the procedure while still allowing you to respond to your
                                dental team if needed.
                                <br /><br />
                                Local freezing is still used alongside sedation to ensure the
                                area being treated remains fully comfortable.
                            </p>
                        </div>
                        <!-- Step 2 -->
                        <div class="relative pl-16 group">
                            <div
                                class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10">
                                2
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Sedation Options Available
                            </h3>
                            <p class="leading-relaxed text-lg">
                                Different sedation options may be recommended based on your
                                level of anxiety and the type of treatment required:
                            </p>
                            <div class="mt-3">
                                <h4 class="text-2xl font-bold text-primary">
                                    Nitrous Oxide (Laughing Gas)
                                </h4>
                                <p class="text-secondary leading-relaxed text-lg">
                                    A light sedative inhaled through a small mask that helps you
                                    feel calm and relaxed during treatment. The effects wear off
                                    quickly after your visit.
                                </p>
                            </div>
                            <div class="mt-3">
                                <h4 class="text-2xl font-bold text-primary">Oral Sedation</h4>
                                <p class="text-secondary leading-relaxed text-lg">
                                    A prescribed medication taken before your appointment to
                                    help you feel deeply relaxed while remaining awake.
                                </p>
                            </div>
                            <div class="mt-3">
                                <h4 class="text-2xl font-bold text-primary">
                                    IV Sedation (Intravenous Sedation)
                                </h4>
                                <p class="text-secondary leading-relaxed text-lg">
                                    A deeper form of sedation administered by trained
                                    professionals for more complex procedures or higher levels
                                    of dental anxiety.
                                </p>
                            </div>
                            <p class="text-secondary leading-relaxed text-lg mt-5">
                                Your dentist will help determine which option is appropriate
                                during your consultation.
                            </p>
                        </div>
                        <!-- Step 3 -->
                        <div class="relative pl-16 group">
                            <div
                                class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10">
                                3
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Your Comfort and Safety Come First
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Sedation dentistry is carefully monitored at all times by
                                trained dental professionals.

                                <br /><br />
                                Your vital signs and comfort level are observed throughout the
                                procedure to ensure a safe and controlled experience from
                                start to finish.

                                <br /><br />
                                Every treatment is tailored to your individual needs, ensuring
                                you feel supported throughout your visit. ne which sedation
                                option is best for you.
                            </p>
                        </div>
                        <!-- step 4 -->
                        <div class="relative pl-16 group">
                            <div
                                class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10">
                                4
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                After Your Appointment
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Depending on the type of sedation used, recovery time may
                                vary.

                                <br /><br />
                                Some sedation options wear off quickly, while others may
                                require a longer recovery period. You may need someone to
                                accompany you home after your appointment depending on the
                                method used.

                                <br /><br />
                                Your dental team will give you clear aftercare instructions so
                                you know exactly what to expect.
                            </p>
                        </div>
                        <div class="relative pl-16 group">
                            <div
                                class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10">
                                5
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                A More Comfortable Dental Experience
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Sedation dentistry allows many patients to complete necessary
                                dental care in a more relaxed and positive way.

                                <br /><br />
                                It can also make longer appointments feel shorter and help
                                reduce the number of visits required for complex treatment.

                                <br /><br />
                                Our goal is to make dental care feel manageable, predictable,
                                and stress-free.
                            </p>
                        </div>
                        <div class="relative pl-16 group">
                            <div
                                class="absolute left-0 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold z-10">
                                6
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Consultation for Sedation Options
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                A consultation is required to determine if sedation dentistry
                                is appropriate for you and to review available options based
                                on your treatment plan and health history.
                            </p>
                        </div>
                    </div>
                </section>
            </div>
            <!-- Right Column: Sticky Booking Module (35%) -->
            @include('themes.frontend.partials.book_appointment_section')
        </div>
        @include('themes.frontend.pages.service._other-services')
    </main>
@endsection