{#
 # Hero Section Component
 # Luxury aesthetics clinic - Navy & Gold color scheme
 # 
 # Entry Type: heroSection
 # Fields: title, plainText (heading), textArea (subtitle), textArea2 (description), 
 #         ctaButtons, image (background), imagePosition
 #
 # Usage: {% include 'components/hero.twig' with { block: block } %}
 #}

{% import '_macros/images.twig' as imageMacro %}

{% set heroBlock = block ?? entry %}

{# Get field values – no default copy; only show fields that have content #}
{% set headingLine1 = heroBlock.plainText is defined and heroBlock.plainText|length ? heroBlock.plainText : null %}
{% set headingLine2 = heroBlock.plainText2 is defined and heroBlock.plainText2|length ? heroBlock.plainText2 : null %}
{% set subtitle = heroBlock.textArea is defined and heroBlock.textArea|length ? heroBlock.textArea : null %}
{% set description = heroBlock.textArea2 is defined and heroBlock.textArea2|length ? heroBlock.textArea2 : null %}
{% set backgroundImage = heroBlock.image is defined and heroBlock.image|length ? heroBlock.image.one() : null %}
{% set imagePosition = heroBlock.imagePosition ?? 'right' %}

{# Split second line to make first word italic gold #}
{% set line2Words = headingLine2|split(' ') %}
{% set firstWord = line2Words|first %}
{% set restOfLine2 = line2Words|slice(1)|join(' ') %}

<section class="relative bg-white overflow-hidden">
    <!-- Subtle decorative elements -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-beige/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-gold/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div>
    
    <div class="grid lg:grid-cols-2 min-h-[750px] lg:min-h-[900px]">
        <!-- Left Content Side -->
        <div class="flex items-center px-6 lg:px-20 py-24 lg:py-36 relative z-10 {{ imagePosition == 'left' ? 'lg:order-last' : '' }}">
            <div class="max-w-2xl">
                {% if subtitle %}
                <div class="flex items-center gap-4 mb-6">
                    <div class="w-12 h-px bg-gold"></div>
                    <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ subtitle }}</p>
                </div>
                {% endif %}
                
                {% if headingLine1 or headingLine2 %}
                <h1 class="text-[3rem] md:text-[4rem] lg:text-[5rem] mb-8 leading-[0.95] tracking-tight text-navy">
                    {% if headingLine1 %}{{ headingLine1 }}{% endif %}{% if headingLine2 %}<br>
                    <span class="italic text-gold">{{ firstWord }}</span>{% if restOfLine2 %} {{ restOfLine2 }}{% endif %}{% endif %}
                </h1>
                {% endif %}
                
                <!-- Description -->
                {% if description %}
                <p class="text-lg lg:text-xl mb-12 leading-relaxed max-w-xl text-charcoal-light">
                    {{ description }}
                </p>
                {% endif %}
                
                <!-- CTA Buttons (Entries field linking to callToAction entries) -->
                {% if heroBlock.ctaButtons is defined and heroBlock.ctaButtons and heroBlock.ctaButtons.exists() %}
                <div class="flex flex-col sm:flex-row gap-5">
                    {% for button in heroBlock.ctaButtons.all() %}
                        {% set btnText = button.linkText|length ? button.linkText : null %}
                        {% set btnUrl = button.urlAddress|length ? button.urlAddress : null %}
                        {% set btnType = button.buttonType.value ?? button.buttonType ?? 'primary' %}
                        {% if btnText and btnUrl %}
                        {% if btnType == 'ctaAlt' %}
                            {# Secondary CTA - Outline (ctaAlt) #}
                            <a href="{{ btnUrl }}" class="btn-outline inline-flex items-center justify-center">
                                {{ btnText }}
                            </a>
                        {% else %}
                            {# Primary CTA - Gold #}
                            <a href="{{ btnUrl }}" class="btn-gold-lg inline-flex items-center justify-center group">
                                <span>{{ btnText }}</span>
                                <svg class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                                </svg>
                            </a>
                        {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
                
                <!-- Elegant beige divider -->
                <div class="w-full h-px bg-beige mt-12"></div>
            </div>
        </div>
        
        <!-- Right Image Side - Full Space Container -->
        <div class="relative h-[600px] lg:h-auto {{ imagePosition == 'left' ? 'lg:order-first' : 'order-first lg:order-last' }}">
            <!-- Image container fills entire space -->
            <div class="absolute inset-0 rounded-3xl overflow-hidden shadow-luxury m-6 lg:m-12">
                {% if backgroundImage %}
                {# Hero image - use picture element for WebP + mobile/desktop optimization #}
                {# Mobile gets 400px WebP, desktop gets 600px WebP - prevents browser from choosing wrong size #}
                <picture>
                  {# Mobile: 400px WebP #}
                  <source 
                    type="image/webp"
                    media="(max-width: 640px)" 
                    srcset="{{ backgroundImage.getUrl({width: 400, mode: 'fit', format: 'webp'}) }}"
                  >
                  {# Desktop: 600px WebP #}
                  <source 
                    type="image/webp"
                    media="(min-width: 641px)" 
                    srcset="{{ backgroundImage.getUrl({width: 600, mode: 'fit', format: 'webp'}) }}"
                  >
                  {# Fallback: Mobile 400px original format #}
                  <source 
                    media="(max-width: 640px)" 
                    srcset="{{ backgroundImage.getUrl({width: 400, mode: 'fit'}) }}"
                  >
                  {# Fallback: Desktop 600px original format #}
                  <source 
                    media="(min-width: 641px)" 
                    srcset="{{ backgroundImage.getUrl({width: 600, mode: 'fit'}) }}"
                  >
                  {# Fallback img with optimized attributes #}
                  <img 
                    src="{{ backgroundImage.getUrl({width: 400, mode: 'fit', format: 'webp'}) }}"
                    alt="{{ backgroundImage.alt|length ? backgroundImage.alt : (heroBlock.title|length ? heroBlock.title : '') }}"
                    class="w-full h-full object-cover object-center"
                    width="{{ backgroundImage.width }}"
                    height="{{ backgroundImage.height }}"
                    loading="eager"
                    fetchpriority="high"
                  >
                </picture>
                {% else %}
                <div class="w-full h-full bg-beige/30"></div>
                {% endif %}
                <!-- Subtle overlay for depth -->
                <div class="absolute inset-0 bg-gradient-to-br from-navy/5 to-transparent pointer-events-none"></div>
                
                <!-- Decorative corner accents - elegant gold -->
                <div class="hidden lg:block absolute top-5 right-5 w-20 h-20 border-t-2 border-r-2 border-gold/25 rounded-tr-2xl pointer-events-none"></div>
                <div class="hidden lg:block absolute bottom-5 left-5 w-16 h-16 border-b-2 border-l-2 border-gold/25 rounded-bl-2xl pointer-events-none"></div>
            </div>
        </div>
    </div>
    
    <!-- Bottom decorative line -->
    <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-gold/40 to-transparent"></div>
</section>