@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/cerec-crown.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">
                                CEREC Same-Day 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-8 relative z-10">
                        <h2 class="text-4xl font-headline font-bold text-primary tracking-tight">
                            Restore your smile in a single visit with advanced CEREC
                            technology.
                        </h2>
                        <p class="text-secondary text-lg body-lg leading-relaxed">
                            At Chagger Dental, CEREC allows us to design, create, and place
                            high-quality ceramic crowns in one appointment—eliminating the
                            need for temporary crowns or multiple visits.
                            <br /><br />
                            Using digital scanning and precision milling technology, your
                            custom crown is created chairside for a fast, accurate, and
                            comfortable experience.
                        </p>
                    </div>
                </section>
                <!-- The Sanctuary Journey -->
                <section class="py-1">
                    <h3 class="text-3xl font-bold text-primary">Treatment Process</h3>
                    <p class="text-xl leading-relaxed mb-5 mt-3">
                        Your treatment is completed in a streamlined, same-day process:
                    </p>
                    <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">
                                Digital Scan
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                1. Digital ScanYour tooth is scanned using advanced imaging—no
                                traditional impressions required.
                            </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">
                                Custom Design
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                A precise 3D model is created and used to design your crown.
                            </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 transition-transform duration-500 group-hover:scale-110">
                                3
                            </div>
                            <h3 class="text-2xl font-bold text-primary mb-4">
                                On-Site Creation
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Your crown is crafted from high-quality ceramic using
                                in-office milling technology.
                            </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">
                                Placement & Finish
                            </h3>
                            <p class="text-secondary leading-relaxed text-lg">
                                Once fitted and adjusted, your crown is bonded and polished
                                for a natural look and feel.
                            </p>
                        </div>
                    </div>
                </section>
                <section class="py-1">
                    <div class="group">
                        <h3 class="text-3xl font-bold text-primary mb-4">
                            Benefits of CEREC Crowns
                        </h3>
                        <ul class="items-center gap-2 space-y-3 text-sm text-gray-500">
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Completed in a single visit
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                No temporary crowns needed
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Digital impressions (no messy molds)
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Natural-looking ceramic materials
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Precise, comfortable fit
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Durable, long-lasting restoration
                            </li>
                        </ul>
                    </div>
                    <div class="group mt-5">
                        <h3 class="text-3xl font-bold text-primary">
                            When CEREC Crowns Are Used
                        </h3>
                        <p class="text-lg leading-relaxed text-body mb-3 mt-3">
                            CEREC crowns are commonly recommended to restore teeth that are:
                        </p>
                        <ul class="items-center gap-2 space-y-3 text-sm text-gray-500">
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Broken or fractured
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Heavily filled or weakened
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Worn down or damaged
                            </li>
                            <li class="before:content-['•'] before:mr-2 text-secondary leading-relaxed text-lg">
                                Needing cosmetic improvement
                            </li>
                        </ul>
                    </div>
                    <div class="group mt-5">
                        <h3 class="text-3xl font-bold text-primary">
                            Cost & Consultation
                        </h3>
                        <p class="text-lg text-secondary leading-relaxed text-body mt-3">
                            The cost of a CEREC crown is similar to traditional crowns and
                            depends on the complexity of your case. During your
                            consultation, we’ll review your options and determine the most
                            suitable treatment for your smile.
                        </p>
                    </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