@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/DentalCrown900x600.jpg.webp" />
                        <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">
                                Dental Crowns
                            </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">
                            Strengthening and Restoring Damaged Teeth with Natural-Looking
                            Results
                        </h2>
                        <p class="text-secondary text-lg body-lg leading-relaxed">
                            Dental crowns are a restorative treatment used to repair and
                            protect teeth that are damaged, weakened, or worn. A crown
                            covers the entire visible surface of a tooth, restoring its
                            shape, strength, and appearance while allowing it to function
                            normally.<br /><br />
                            At Chagger Dental, we focus on restoring long-term health and
                            aesthetics using precise, natural-looking restorations tailored
                            to each patient.
                        </p>
                        <h3 class="text-3xl font-bold text-primary mb-4">
                            When a Dental Crown May Be Recommended
                        </h3>
                        <p class="text-xl leading-relaxed" style="margin-top: 10px">
                            A dental crown may be used to:
                        </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">
                                Restore a chipped, cracked, or worn tooth
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Protect a weakened tooth from further damage
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Restore a tooth after a large filling or decay
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Improve the appearance of a misshapen or discoloured tooth
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Support a tooth following other restorative treatment
                            </li>
                        </ul>
                        <p class="text-secondary text-lg body-lg leading-relaxed">
                            Crowns are designed to blend naturally with surrounding teeth
                            for a seamless 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">
                                Why Choose a Dental Crown?
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Dental crowns are both restorative and cosmetic in nature.<br /><br />
                                They help reinforce the structure of a damaged tooth while
                                also improving its appearance. Unlike tooth replacement
                                options, crowns allow you to preserve your existing natural
                                tooth whenever possible.<br /><br />
                                The result is a stronger tooth that looks and functions like a
                                natural part of your smile.
                            </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">
                                The Crown Treatment Process
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Dental crown treatment is carefully planned to ensure
                                precision, comfort, and long-term success.

                                <br /><br />
                                The tooth is first prepared and shaped to allow the crown to
                                fit securely. Digital scans or impressions are then taken to
                                create a custom restoration that matches your bite and
                                surrounding teeth.<br /><br />
                                The tooth is first prepared and shaped to allow the crown to
                                fit securely. Digital scans or impressions are then taken to
                                create a custom restoration that matches your bite and
                                surrounding teeth.<br /><br />
                                A temporary protective restoration may be placed while your
                                final crown is being created.
                                <br /><br />
                                Once ready, the permanent crown is adjusted for fit, comfort,
                                and bite alignment before being securely bonded in place.
                            </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">
                                Types of Dental Crowns
                            </h3>
                            <p class="text-xl leading-relaxed" style="margin-top: 10px">
                                Different materials may be used depending on your clinical
                                needs and aesthetic goals:
                            </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]">Porcelain or Ceramic Crowns</b> –
                                    Natural-looking and commonly used for visible teeth
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    <b class="text-[#000]">Metal or Alloy Crowns</b> – Strong
                                    and durable, often used in back teeth
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    <b class="text-[#000]">Porcelain-Fused-to-Metal Crowns</b> –
                                    Combines strength with aesthetics
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    <b class="text-[#000]">Same-Day Ceramic Crowns (CAD/CAM technology)</b>
                                    – Custom crowns created and placed in a single visit in
                                    select cases
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-3">
                                Your dentist will recommend the most appropriate option based
                                on your tooth condition and treatment goals.
                            </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">
                                Same-Day Crown Technology
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Advancements in dental technology now allow select crowns to
                                be designed, created, and placed in a single visit.

                                <br /><br />
                                Digital scanning replaces traditional impressions, allowing
                                for highly accurate and comfortable treatment. The crown is
                                then crafted and fitted with precision to match your natural
                                smile.
                                <br /><br />
                                This approach reduces waiting time and eliminates the need for
                                multiple appointments in suitable cases.
                            </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">
                                Protecting Your Crown Long-Term
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Dental crown treatment is carefully planned to ensure
                                precision, comfort, and long-term success.

                                <br /><br />
                                The tooth is first prepared and shaped to allow the crown to
                                fit securely. Digital scans or impressions are then taken to
                                create a custom restoration that matches your bite and
                                surrounding teeth.<br /><br />
                                The tooth is first prepared and shaped to allow the crown to
                                fit securely. Digital scans or impressions are then taken to
                                create a custom restoration that matches your bite and
                                surrounding teeth.<br /><br />
                                A temporary protective restoration may be placed while your
                                final crown is being created.
                                <br /><br />
                                Once ready, the permanent crown is adjusted for fit, comfort,
                                and bite alignment before being securely bonded in place.
                            </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">
                                Protecting Your Crown Long-Term
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                With proper care, dental crowns can provide long-lasting
                                support and function.
                            </p>
                            <p class="text-xl leading-relaxed" style="margin-top: 10px">
                                To help maintain your crown:
                            </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">
                                    Brush and floss daily
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Maintain regular dental checkups
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Avoid using teeth as tools
                                </li>
                                <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                    Address grinding or clenching if present
                                </li>
                            </ul>
                            <p class="text-secondary text-lg body-lg leading-relaxed mt-4">
                                Your dental team will monitor your crown as part of your
                                ongoing oral health care.
                            </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">
                                Consultation for Dental Crown Treatment
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                A consultation is required to assess your tooth, determine the
                                best restorative option, and provide a personalized treatment
                                plan tailored to your needs.
                            </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