@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/hero1.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">
                                Cosmetic 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="relative z-10">
                        <h2 class="text-4xl font-headline font-bold text-primary tracking-tight">
                            Creating Natural, Balanced Smiles
                        </h2>
                        <p class="text-secondary body-lg leading-relaxed mt-3">
                            Cosmetic dentistry focuses on improving the appearance, balance,
                            and function of your smile. While many people seek cosmetic
                            treatment for aesthetic reasons, these procedures can also
                            support overall oral health by correcting issues that may lead
                            to wear, discomfort, or long-term dental concerns.<br /><br />
                            At Chagger Dental, we take a personalized approach to cosmetic
                            care, helping you explore treatment options that fit your smile
                            goals and oral health 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">
                                What is Cosmetic Dentistry?
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Cosmetic dentistry is a branch of dental care focused on
                                enhancing the look of your teeth and smile. Because every
                                smile is unique, treatment is tailored to each patient’s
                                facial features, bite, and dental health.
                                <br /><br />
                                The goal is not only to improve appearance, but also to create
                                results that feel natural, functional, and long-lasting.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                2
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Cosmetic Dentistry Options
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                There are several treatment options that may be recommended
                                depending on your needs:
                            </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 transition-transform duration-500 group-hover:scale-110">
                                3
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Inlays and Onlays
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Custom restorations used when a tooth has decay or damage that
                                is too large for a standard filling but does not require a
                                full crown. They are designed to strengthen and restore the
                                tooth while maintaining a natural appearance.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                4
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Dental Bonding
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                A tooth-coloured composite material is carefully shaped and
                                applied to repair chips, gaps, or minor imperfections. Bonding
                                is a conservative option that blends naturally with
                                surrounding teeth.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                5
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Porcelain Veneers
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Thin, custom-made shells placed on the front surface of teeth
                                to improve shape, colour, and symmetry. Veneers are often used
                                to address staining, spacing, or uneven tooth appearance while
                                creating a refined, natural-looking smile.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                6
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Teeth Whitening
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                A professional whitening treatment designed to lift surface
                                stains and brighten your natural enamel. Results vary
                                depending on lifestyle habits and existing tooth colour. A
                                consultation is required to determine suitability and expected
                                outcomes.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                6
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Dental Implants
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Used to replace missing teeth, implants restore both
                                appearance and function by anchoring a replacement tooth
                                securely into the jawbone. They are designed to look and feel
                                like natural teeth.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                7
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Choosing the Right Cosmetic Treatment
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                The best cosmetic option depends on your current oral health,
                                goals, and the condition of your teeth. In many cases, more
                                than one treatment may be combined to achieve the desired
                                result.<br /><br />
                                A consultation is required to assess your smile and determine
                                the most appropriate treatment plan for you.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                8
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                Your Smile, Your Plan
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Every cosmetic treatment at Chagger Dental is designed with
                                balance, function, and natural aesthetics in mind. Our team
                                will guide you through your options and help you choose a plan
                                that supports both your confidence and long-term oral
                                health.<br /><br />
                                <b class="text-[#000]">Book a consultation to explore what’s possible for your
                                    smile.</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