{{#
    @name Page Builder: Hero / Page Header
    @desc Versatile hero component supporting split layout with media card or centered inner-page header
#}}

{{ if style == 'split' }}
    {{# Split Hero (Homepage Style) #}}
    <section class="relative overflow-hidden pt-8 pb-16 sm:pt-14 sm:pb-24 border-b border-neutral-200/60 {{ background_style == 'warm' ? 'bg-surface-warm/40' : (background_style == 'white' ? 'bg-white' : 'bg-canvas') }}">
        <div class="absolute top-0 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl pointer-events-none -z-10"></div>
        <div class="absolute bottom-0 left-10 w-80 h-80 bg-surface-sand/60 rounded-full blur-2xl pointer-events-none -z-10"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
                
                {{# Left Copy #}}
                <div class="lg:col-span-7">
                    {{ if badge_kicker }}
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent-light border border-accent/30 text-accent-dark text-xs font-bold tracking-widest uppercase mb-5">
                            <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                            {{ badge_kicker }}
                        </div>
                    {{ /if }}

                    <h1 class="font-serif text-4xl sm:text-5xl lg:text-6xl text-neutral-900 font-bold leading-[1.12] mb-6 tracking-tight">
                        {{ title }}
                    </h1>

                    {{ if lead }}
                        <p class="text-neutral-600 text-lg sm:text-xl leading-relaxed mb-8 max-w-2xl font-light">
                            {{ lead }}
                        </p>
                    {{ /if }}

                    {{ if buttons }}
                        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4 mb-10">
                            {{ buttons }}
                                {{ if style == 'primary' }}
                                    <a 
                                        href="{{ url }}" 
                                        class="inline-flex items-center justify-center px-7 py-3.5 rounded-full bg-primary hover:bg-primary-hover text-white text-sm font-semibold tracking-wide uppercase transition-all shadow-sm hover:scale-[1.02] text-center"
                                    >
                                        {{ label }}
                                    </a>
                                {{ elseif style == 'accent' }}
                                    <a 
                                        href="{{ url }}" 
                                        target="_blank" 
                                        rel="noopener noreferrer"
                                        class="inline-flex items-center justify-center gap-2 px-4 py-3.5 rounded-full bg-accent/15 hover:bg-accent/25 text-accent-dark text-xs font-bold tracking-wider uppercase transition-colors text-center"
                                    >
                                        <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1.118.99A1.006 1.006 0 008 6h1zm4 0h-1V5a1 1 0 101.118.99A1.006 1.006 0 0013 6z" clip-rule="evenodd"/>
                                            <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z"/>
                                        </svg>
                                        <span>{{ label }}</span>
                                    </a>
                                {{ else }}
                                    <a 
                                        href="{{ url }}" 
                                        class="inline-flex items-center justify-center px-6 py-3.5 rounded-full bg-white hover:bg-neutral-50 text-neutral-800 text-sm font-semibold border border-neutral-300/80 transition-all shadow-2xs text-center"
                                    >
                                        {{ label }}
                                    </a>
                                {{ /if }}
                            {{ /buttons }}
                        </div>
                    {{ /if }}

                    {{ if show_trust_stats and trust_stats }}
                        <div class="grid grid-cols-3 gap-2 sm:gap-4 pt-6 border-t border-neutral-200/80 text-neutral-600">
                            {{ trust_stats }}
                                <div>
                                    <div class="font-serif text-xl sm:text-2xl font-bold text-neutral-900">{{ value }}</div>
                                    <div class="text-2xs sm:text-xs text-neutral-500 mt-0.5 leading-tight">{{ label }}</div>
                                </div>
                            {{ /trust_stats }}
                        </div>
                    {{ /if }}
                </div>

                {{# Right Media Card #}}
                <div class="lg:col-span-5">
                    <div class="relative mx-auto max-w-md lg:max-w-none">
                        <div class="overflow-hidden rounded-3xl shadow-xl border border-neutral-200/80 bg-white">
                            {{ if media_card_image }}
                                <div class="relative h-72 sm:h-80 overflow-hidden bg-neutral-100">
                                    <img 
                                        src="{{ media_card_image }}" 
                                        alt="{{ media_card_title ?? title }}" 
                                        class="w-full h-full object-cover object-center" 
                                    />
                                    {{ if media_card_price }}
                                        <div class="absolute top-4 right-4">
                                            <span class="inline-flex items-center px-3 py-1 rounded-full bg-white/95 backdrop-blur-xs text-accent-dark font-semibold text-xs shadow-xs">
                                                {{ media_card_price }}
                                            </span>
                                        </div>
                                    {{ /if }}
                                </div>
                            {{ /if }}

                            <div class="p-6 bg-white">
                                {{ if media_card_badge or media_card_title or media_card_text }}
                                    <div class="mb-4">
                                        {{ if media_card_badge }}
                                            <div class="text-2xs font-bold uppercase tracking-widest text-accent-dark">{{ media_card_badge }}</div>
                                        {{ /if }}
                                        {{ if media_card_title }}
                                            <div class="font-serif text-xl sm:text-2xl font-bold text-neutral-900 mt-0.5">
                                                {{ media_card_title }}
                                            </div>
                                        {{ /if }}
                                        {{ if media_card_text }}
                                            <p class="text-neutral-500 text-xs mt-1.5 leading-relaxed">
                                                {{ media_card_text }}
                                            </p>
                                        {{ /if }}
                                    </div>
                                {{ /if }}

                                {{# Victoria's Practitioner Info Box #}}
                                <div class="pt-4 border-t border-neutral-100 flex items-center gap-3.5 bg-surface-sand/30 -mx-6 -mb-6 p-4 px-6 rounded-b-3xl">
                                    <img 
                                        src="/assets/images/victoria.jpg" 
                                        alt="Victoria Kelson" 
                                        class="w-12 h-12 rounded-full object-cover shrink-0 border-2 border-accent shadow-xs" 
                                    />
                                    <div class="min-w-0">
                                        <div class="font-semibold text-sm text-neutral-900 leading-tight">Victoria Kelson</div>
                                        <div class="text-xs text-neutral-500">Head Therapist &amp; Founder</div>
                                        <div class="text-2xs text-accent-dark font-medium tracking-wide mt-0.5">BABTAC &bull; CIDESCO &bull; ITEC</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

{{ else }}
    {{# Centered Page Header (Inner Pages) #}}
    <section class="py-12 sm:py-20 border-b border-neutral-200/60 {{ background_style == 'white' ? 'bg-white' : (background_style == 'default' ? 'bg-canvas' : 'bg-surface-warm/40') }}">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            {{ if badge_kicker }}
                <div class="inline-flex items-center gap-2 text-accent-dark text-xs font-bold tracking-widest uppercase mb-3">
                    <span class="w-2 h-2 rounded-full bg-accent"></span>
                    {{ badge_kicker }}
                </div>
            {{ /if }}

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

            {{ if lead }}
                <p class="text-neutral-600 text-lg sm:text-xl leading-relaxed max-w-2xl mx-auto font-light {{ buttons or show_rating_card ? 'mb-8' : '' }}">
                    {{ lead }}
                </p>
            {{ /if }}

            {{ if show_rating_card }}
                {{# Rating & Google Review Card #}}
                <div class="inline-flex flex-col sm:flex-row items-center gap-4 sm:gap-6 p-4 sm:px-8 sm:py-5 rounded-2xl bg-white border border-neutral-200/90 shadow-xs">
                    <div class="flex items-center gap-2">
                        <span class="font-serif text-3xl font-bold text-neutral-900">5.0</span>
                        <div>
                            <div class="flex text-amber-500">
                                {{ loop from="1" to="5" }}
                                    <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                {{ /loop }}
                            </div>
                            <span class="text-xs text-neutral-500 font-medium">100% 5-Star Google Reviews</span>
                        </div>
                    </div>

                    <div class="hidden sm:block w-px h-8 bg-neutral-200"></div>

                    <a 
                        href="{{ company:google_maps_url }}" 
                        target="_blank" 
                        rel="noopener noreferrer"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-neutral-300 hover:bg-neutral-50 text-neutral-800 text-xs font-semibold transition-colors"
                    >
                        <svg class="w-3.5 h-3.5" viewBox="0 0 24 24">
                            <path fill="#4285F4" d="M23.745 12.27c0-.7-.06-1.4-.19-2.07H12v4.51h6.6c-.29 1.52-1.14 2.82-2.4 3.68v3.05h3.88c2.27-2.09 3.66-5.17 3.66-9.17z"/>
                            <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.88-3.05c-1.08.72-2.45 1.16-4.05 1.16-3.12 0-5.77-2.1-6.72-4.93H1.25v3.15C3.26 21.36 7.34 24 12 24z"/>
                            <path fill="#FBBC05" d="M5.28 14.27c-.25-.72-.38-1.49-.38-2.27s.13-1.55.38-2.27V6.58H1.25C.45 8.18 0 9.99 0 12s.45 3.82 1.25 5.42l4.03-3.15z"/>
                            <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.34 0 3.26 2.64 1.25 6.58l4.03 3.15c.95-2.83 3.6-4.98 6.72-4.98z"/>
                        </svg>
                        <span>Leave a Google Review &rarr;</span>
                    </a>
                </div>
            {{ /if }}

            {{ if buttons }}
                <div class="flex flex-wrap items-center justify-center gap-3 mt-6">
                    {{ buttons }}
                        <a 
                            href="{{ url }}" 
                            class="inline-flex items-center justify-center px-6 py-3 rounded-full {{ style == 'primary' ? 'bg-primary hover:bg-primary-hover text-white' : 'bg-white hover:bg-neutral-50 text-neutral-800 border border-neutral-300' }} text-sm font-semibold transition-all shadow-2xs"
                        >
                            {{ label }}
                        </a>
                    {{ /buttons }}
                </div>
            {{ /if }}
        </div>
    </section>
{{ /if }}