{{#
    @name Service Detail Page
    @desc Individual treatment show view with duration pricing table and booking trigger
#}}

<main id="content" class="bg-canvas">

    {{# 1. Breadcrumbs & Header #}}
    <section class="py-12 sm:py-16 border-b border-neutral-200/60 bg-surface-warm/40">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="flex items-center gap-2 text-xs text-neutral-500 mb-4">
                <a href="/" class="hover:text-neutral-900">Home</a>
                <span>/</span>
                <a href="/services" class="hover:text-neutral-900">Services</a>
                <span>/</span>
                <span class="text-neutral-900 font-medium">{{ title }}</span>
            </nav>

            {{ if brand }}
                <div class="text-xs font-bold uppercase tracking-widest text-accent-dark mb-2">
                    {{ brand }}
                </div>
            {{ /if }}

            <h1 class="font-serif text-3xl sm:text-5xl font-bold text-neutral-900 tracking-tight mb-4">
                {{ title }}
            </h1>

            {{ if teaser }}
                <p class="text-neutral-600 text-lg sm:text-xl font-light leading-relaxed">
                    {{ teaser }}
                </p>
            {{ /if }}
        </div>
    </section>

    {{# 2. Main Content & Pricing Sidebar #}}
    <section class="py-16 sm:py-20 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
            
            {{# Left: Description & Details #}}
            <div class="lg:col-span-7">
                {{ if image }}
                    <div class="rounded-3xl overflow-hidden shadow-md mb-8 border border-neutral-200">
                        <img src="/assets/{{ image }}" alt="{{ title }}" class="w-full h-80 object-cover" />
                    </div>
                {{ /if }}

                <div class="prose prose-neutral max-w-none text-neutral-700 text-base leading-relaxed space-y-4">
                    {{ description | markdown }}
                </div>

                <div class="mt-12 pt-8 border-t border-neutral-200">
                    <h3 class="font-serif text-xl font-bold text-neutral-900 mb-3">
                        Complimentary Mineral Makeup
                    </h3>
                    <p class="text-sm text-neutral-600">
                        At the conclusion of your facial treatment, should you wish, we offer a complimentary quick Jane Iredale mineral makeup touch-up so you can return to your day feeling radiant and confident.
                    </p>
                </div>
            </div>

            {{# Right: Pricing Card & Booking Trigger #}}
            <div class="lg:col-span-5">
                <div class="sticky top-28 rounded-3xl bg-white border border-neutral-200/90 p-6 sm:p-8 shadow-md">
                    
                    <h2 class="font-serif text-2xl font-bold text-neutral-900 mb-4 pb-3 border-b border-neutral-100">
                        Pricing &amp; Options
                    </h2>

                    {{ if pricing_options }}
                        <div class="space-y-3 mb-6">
                            {{ pricing_options }}
                                <div class="p-3.5 rounded-xl bg-surface-sand/30 border border-neutral-200/50 flex items-center justify-between">
                                    <div>
                                        <div class="font-semibold text-neutral-900 text-sm">{{ duration }}</div>
                                        {{ if course_price }}
                                            <div class="text-2xs text-neutral-500 mt-0.5">{{ course_price }}</div>
                                        {{ /if }}
                                    </div>
                                    <div class="font-serif text-xl font-bold text-neutral-900">
                                        {{ price }}
                                    </div>
                                </div>
                            {{ /pricing_options }}
                        </div>
                    {{ /if }}

                    {{ if pricing_note }}
                        <p class="text-xs text-neutral-400 italic mb-6">
                            {{ pricing_note }}
                        </p>
                    {{ /if }}

                    <div class="space-y-3">
                        <a 
                            href="/contact?service={{ title | urlencode }}" 
                            class="flex items-center justify-center w-full py-3.5 rounded-full bg-primary hover:bg-primary-hover text-white text-xs font-semibold uppercase tracking-wider transition-colors shadow-sm"
                        >
                            Book This Treatment
                        </a>
                        <a 
                            href="tel:{{ company:telephone_clean }}" 
                            class="flex items-center justify-center gap-2 w-full py-3 rounded-full border border-neutral-300 bg-white hover:bg-neutral-50 text-neutral-800 text-xs font-semibold transition-colors"
                        >
                            <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                                <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 4V3z"/>
                            </svg>
                            <span>Call {{ company:telephone }}</span>
                        </a>
                    </div>

                    <div class="mt-6 pt-5 border-t border-neutral-100 text-center">
                        <span class="text-2xs text-neutral-400">
                            Studio Address: 214 High Street, Guildford, GU1 3JB
                        </span>
                    </div>

                </div>
            </div>

        </div>
    </section>

</main>