@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/gum-disease.avif" />
                        <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">
                                Gum Health
                            </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">
                            Understanding Gum Disease and How We Support Your Oral Health
                        </h2>
                        <p class="text-secondary text-lg body-lg leading-relaxed">
                            Gum disease (periodontal disease) is a common condition that
                            begins with plaque buildup on the teeth and along the gumline.
                            If it is not addressed early, it can progress and affect the
                            supporting structures of the teeth, including the gums and bone.

                            <br /><br />
                            At Chagger Dental, we focus on early detection, prevention, and
                            personalized treatment planning to help protect your long-term
                            oral health and maintain a strong, healthy smile.
                        </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">
                                What is Gum Disease?
                            </h3>
                            <p class="text-xl leading-relaxed" style="margin-top: 10px">
                                Gum disease typically develops in stages:
                            </p>
                            <ul class="items-center text-sm space-y-3 text-gray-500" style="margin-top: 10px">
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    <b class="text-[#000]">Gingivitis</b> – Gingivitis – Early
                                    inflammation of the gums caused by plaque buildup
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    <b class="text-[#000]">Periodontitis</b> – More advanced
                                    infection that affects the bone and supporting tissues
                                    around the teeth
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-3">
                                Early signs may be mild, which is why routine dental visits
                                are important even when symptoms are not obvious.
                            </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">
                                What Causes Gum Disease?
                            </h3>
                            <p class="text-xl leading-relaxed" style="margin-top: 10px">
                                Gum disease is primarily caused by bacteria in plaque, but
                                several factors can increase your risk, including:
                            </p>
                            <ul class="items-center text-sm space-y-3 text-gray-500" style="margin-top: 10px">
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Inconsistent brushing and flossing habits
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Smoking or tobacco use
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Hormonal changes (such as pregnancy or menopause)
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Certain medical conditions, including diabetes
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Medications that reduce saliva flow
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Family history of gum disease
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-3">
                                Regular professional cleanings and exams play a key role in
                                prevention and early management.
                            </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">
                                Warning Signs to Look For
                            </h3>
                            <p class="text-xl leading-relaxed" style="margin-top: 10px">
                                Gum disease can progress quietly, but common signs may
                                include:
                            </p>
                            <ul class="items-center text-sm space-y-3 text-gray-500" style="margin-top: 10px">
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Bleeding when brushing or flossing
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Red, swollen, or tender gums
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Persistent bad breath or unpleasant taste
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Gums pulling away from teeth
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Teeth that feel loose or shifting
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Changes in how your bite or dental work feels
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-3">
                                If you notice any of these symptoms, a dental assessment is
                                recommended.
                            </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">
                                How Gum Disease is Diagnosed
                            </h3>
                            <p class="text-xl leading-relaxed" style="margin-top: 10px">
                                During your dental exam, your dentist will carefully evaluate:
                            </p>
                            <ul class="items-center text-sm space-y-3 text-gray-500" style="margin-top: 10px">
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Gum health, including inflammation and bleeding
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Pocket depth between teeth and gums
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Tooth stability and alignment
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Bone levels supporting the teeth
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-3">
                                In some cases, dental imaging may be used to assess underlying
                                bone health.
                            </p>
                        </div>
                        <!-- Step 6 -->
                        <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">
                                Treatment and Management Options
                            </h3>
                            <p class="text-xl leading-relaxed" style="margin-top: 10px">
                                Treatment depends on the stage of gum disease and your
                                individual oral health needs. Options may include:
                            </p>
                            <ul class="items-center text-sm space-y-3 text-gray-500" style="margin-top: 10px">
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Professional deep cleaning (scaling and root planing)
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Improved at-home oral hygiene routines
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Antibacterial or targeted therapies
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Ongoing periodontal maintenance care
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Advanced treatment options when required
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-3">
                                Our goal is always to preserve your natural teeth and restore
                                gum health in the least invasive way possible.
                            </p>
                        </div>
                        <!-- step 7 -->
                        <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">
                                Protecting Your Gum Health
                            </h3>
                            <p class="text-xl text-secondary leading-relaxed" style="margin-top: 10px">
                                Healthy gums are the foundation of a healthy smile. Consistent
                                care can help prevent disease and support long-term stability.
                            </p>
                            <p class="text-xl leading-relaxed mt-3">We recommend:</p>

                            <ul class="items-center text-sm space-y-3 text-gray-500" style="margin-top: 10px">
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Brushing twice daily
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Daily flossing or interdental cleaning
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Regular dental exams and hygiene visits
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Professional cleanings as recommended by your dental team
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-3">
                                Early care is the most effective way to prevent progression
                                and maintain healthy gums.
                            </p>
                        </div>
                        <!-- step 8 -->
                        <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">
                                7
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Treatment Planning & Consultation
                            </h3>
                            <p class="text-xl leading-relaxed text-secondary">
                                Every smile is different, and gum health concerns are best
                                addressed with a personalized approach.<br /><br />
                                A consultation is required to assess your gum health and
                                determine the most appropriate treatment options for your
                                needs. Your dental team will review your condition, answer
                                your questions, and outline a clear care plan tailored to you.
                            </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