@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/dental-res.png" />
                        <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">
                                Restorative 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-8 relative z-10">
                        <h2 class="text-4xl font-headline font-bold text-primary tracking-tight">
                            Restoring Strength, Function, and Confidence to Your Smile
                        </h2>
                        <p class="text-secondary text-lg body-lg leading-relaxed">
                            Restorative dentistry focuses on rebuilding and repairing teeth
                            that are damaged, decayed, or missing. The goal is simple:
                            restore your ability to chew comfortably, speak clearly, and
                            smile with confidence while maintaining a natural-looking
                            result.

                            <br /><br />
                            At Chagger Dental, we take a conservative, personalized
                            approach—preserving as much of your natural tooth structure as
                            possible while restoring long-term health and function.
                            <br /><br />
                            Common restorative treatments include dental fillings, crowns,
                            bridges, dentures, implants, veneers, and other custom solutions
                            depending on your needs and treatment plan.
                        </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">
                                When Restorative Dentistry May Be Needed
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Restorative treatment is recommended when teeth have been
                                affected by decay, wear, injury, or previous dental work that
                                needs to be replaced or improved.
                                <br /><br />
                                Even small issues can affect your bite, comfort, and long-term
                                oral health if left untreated. Our team will assess your teeth
                                carefully and explain the most suitable options in a clear,
                                straightforward way.
                            </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">
                                Treatment Options Tailored to You
                            </h3>
                            <p class="leading-relaxed text-lg mt-3">
                                There is no single solution for every smile. Your treatment
                                plan may include one or more of the following:
                            </p>
                            <ul class="items-center gap-2 px-4 space-y-3 text-sm text-gray-500 mt-1 mb-3">
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Dental fillings for small areas of decay or damage
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Dental crowns to strengthen and protect weakened teeth
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Dental bridges to replace missing teeth
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Dental implants for long-term tooth replacement
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Dentures for partial or full arch restoration
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Cosmetic restorations such as veneers when appearance is
                                    also a priority
                                </li>
                            </ul>
                            <p class="leading-relaxed text-secondary text-lg">
                                Each option is designed to restore both function and
                                aesthetics while blending naturally with your existing teeth.
                            </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">
                                Why Restorative Care Matters
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Restoring missing or damaged teeth is about more than
                                appearance. It plays an important role in your overall oral
                                health.<br /><br />
                                Without proper treatment, teeth can shift, bite alignment can
                                change, and surrounding teeth may become more prone to wear or
                                decay. Restorative dentistry helps maintain balance in your
                                bite and supports long-term stability.
                                <br /><br />
                                It also helps protect your confidence—so you can eat, speak,
                                and smile without hesitation.
                            </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