@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/ortho3.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">
                                Orthodontics
                            </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-8 relative z-10">
                        <h2 class="text-4xl font-headline font-bold text-primary tracking-tight">
                            Aligner Therapy and Smile Alignment Solutions
                        </h2>
                        <p class="text-secondary text-lg body-lg leading-relaxed">
                            Orthodontic care focuses on the alignment of teeth and jaws to
                            support both function and aesthetics. When teeth are crowded,
                            spaced, or misaligned, it can affect not only the appearance of
                            your smile but also how easily you can clean and maintain your
                            teeth.

                            <br /><br />
                            Proper alignment helps support long-term oral health, bite
                            balance, and overall comfort.
                            <br /><br />
                            At Chagger Dental, we offer personalized orthodontic solutions
                            designed around your smile goals, lifestyle, and clinical needs.
                        </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">
                                Why Orthodontic Care Matters
                            </h3>
                            <p class="leading-relaxed text-secondary text-lg mt-3">
                                Orthodontic treatment is about more than straightening
                                teeth—it supports long-term oral health and function.
                            </p>
                            <p class="leading-relaxed text-lg mt-3">
                                Misalignment may contribute to:
                            </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">
                                    Difficulty cleaning teeth properly
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Increased risk of decay or gum issues
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Uneven bite pressure
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Jaw strain or discomfort
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Changes in smile appearance and confidence
                                </li>
                            </ul>
                            <p class="leading-relaxed text-secondary text-lg">
                                Every smile is unique, and treatment is always tailored to
                                your individual needs.
                            </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">
                                Common Alignment Concerns
                            </h3>
                            <p class="leading-relaxed text-lg mt-3">
                                Orthodontic treatment may be recommended for:
                            </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">
                                    Overbite or underbite
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Crossbite or open bite
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Crowding or spacing
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Impacted or shifted teeth
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    General bite imbalance
                                </li>
                            </ul>
                            <p class="leading-relaxed text-secondary text-lg">
                                Your dentist will assess your bite and alignment to determine
                                the most appropriate approach.
                            </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">
                                Treatment Options
                            </h3>
                            <p class="leading-relaxed text-lg">
                                We offer a range of orthodontic solutions depending on your
                                needs and goals:
                            </p>
                            <div class="mt-4">
                                <h4 class="text-xl font-bold text-primary mt-4 mb-2">
                                    Aurra Clear Aligners (including Invisalign)
                                </h4>
                                <p class="leading-relaxed text-secondary text-lg">
                                    A discreet, removable way to gradually guide teeth into
                                    improved alignment. Aligners are custom-designed and changed
                                    over time as your smile progresses.
                                </p>
                            </div>
                            <div class="mt-4">
                                <h4 class="text-xl font-bold text-primary mt-4 mb-2">
                                    Fixed Braces (in selected cases)
                                </h4>
                                <p class="leading-relaxed text-secondary text-lg">
                                    A traditional orthodontic system used when more controlled
                                    tooth movement is required.
                                </p>
                            </div>
                            <div class="mt-4">
                                <h4 class="text-xl font-bold text-primary mt-4 mb-2">
                                    Other Orthodontic Appliances
                                </h4>
                                <p class="leading-relaxed text-secondary text-lg">
                                    In some cases, additional devices may be recommended to
                                    support jaw positioning or guide development.<br /><br />
                                    Your dentist will explain the most suitable option during
                                    your consultation.
                                </p>
                            </div>
                        </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">
                                4
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                How Treatment Works
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Orthodontic treatment applies gentle, controlled pressure to
                                gradually move teeth into better alignment.
                                <br /><br />
                                Your progress is monitored throughout your treatment, and
                                adjustments or new aligners are provided as your smile
                                changes.
                                <br /><br />
                                The exact approach depends on your clinical needs and
                                treatment plan.
                            </p>
                        </div>
                        <!-- Step 5 -->
                        <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">
                                Your Consultation
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Every orthodontic journey begins with a detailed
                                consultation.<br /><br />
                                During this visit, we assess your teeth, bite, and alignment,
                                discuss your goals, and recommend a personalized treatment
                                plan.
                                <br /><br />
                                <b class="text-[#000]">Consultation required for treatment planning and pricing.
                                </b>
                            </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