{#
# Treatment Hero Component
# Centered hero section for treatment pages
#
# Optional field: treatmentHeroBackground (Dropdown) - Option 1: white, Option 2: EBD5CB, Option 3: FFFAF7
#
# Usage: 
#   {% include 'components/treatment-hero.twig' %} - Uses entry fields or defaults
#   {% include 'components/treatment-hero.twig' with { block: block } %} - From page builder
#}

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

{# Get data from block (pagebuilder) or entry fields. No fallbacks – only show when field has content. #}
{% if block is defined %}
    {% set blockTypeLayout = block.getFieldLayout() %}
    {% set heroEntry = null %}
    {% for handle in ['treatmentHeroType', 'treatmentHeroSection', 'treatmentHeroEntry', 'treatmentHero'] %}
        {% if heroEntry is null and blockTypeLayout.getFieldByHandle(handle) is not null %}
            {% set rel = attribute(block, handle) %}
            {% if rel|length %}
                {% set heroEntry = rel.one() %}
            {% endif %}
        {% endif %}
    {% endfor %}
    {% if heroEntry %}
        {% set dataSource = heroEntry %}
    {% else %}
        {% set dataSource = block %}
    {% endif %}
    {% set blockLayout = dataSource.getFieldLayout() %}
    {% set treatmentTitle = (blockLayout.getFieldByHandle('treatmentTitle') is not null and dataSource.treatmentTitle|length) ? dataSource.treatmentTitle : null %}
    {% set location = (blockLayout.getFieldByHandle('location') is not null and dataSource.location|length) ? dataSource.location : null %}
    {% set description = (blockLayout.getFieldByHandle('description') is not null and dataSource.description|length) ? dataSource.description : null %}
    {# Image only from the block’s own field (never from linked entry). Clearing the image on the block = no image. #}
    {% set backgroundImage = null %}
    {% if blockTypeLayout.getFieldByHandle('backgroundImage') is not null and block.backgroundImage|length %}
        {% set backgroundImage = block.backgroundImage.one() %}
    {% elseif blockTypeLayout.getFieldByHandle('image') is not null and block.image|length %}
        {% set backgroundImage = block.image.one() %}
    {% endif %}
    {% set primaryButtonText = (blockLayout.getFieldByHandle('primaryButtonText') is not null and dataSource.primaryButtonText|length) ? dataSource.primaryButtonText : null %}
    {% set primaryButtonUrl = (blockLayout.getFieldByHandle('primaryButtonUrl') is not null and dataSource.primaryButtonUrl|length) ? dataSource.primaryButtonUrl : null %}
    {% set secondaryButtonText = (blockLayout.getFieldByHandle('secondaryButtonText') is not null and dataSource.secondaryButtonText|length) ? dataSource.secondaryButtonText : null %}
    {% set secondaryButtonUrl = (blockLayout.getFieldByHandle('secondaryButtonUrl') is not null and dataSource.secondaryButtonUrl|length) ? dataSource.secondaryButtonUrl : null %}
    {% set showSecondaryButton = (blockLayout.getFieldByHandle('showSecondaryButton') is not null) ? dataSource.showSecondaryButton : false %}
    {# Background: read from block first (field is on block), then linked entry. Support both treatmentHeroBackground and treatmentheroBackground #}
    {% set blockHasBg = blockTypeLayout.getFieldByHandle('treatmentHeroBackground') is not null or blockTypeLayout.getFieldByHandle('treatmentheroBackground') is not null %}
    {% set sourceHasBg = blockLayout.getFieldByHandle('treatmentHeroBackground') is not null or blockLayout.getFieldByHandle('treatmentheroBackground') is not null %}
    {% set blockBg = block.treatmentHeroBackground ?? attribute(block, 'treatmentheroBackground') ?? null %}
    {% set sourceBg = dataSource.treatmentHeroBackground ?? attribute(dataSource, 'treatmentheroBackground') ?? null %}
    {% set heroBgRaw = null %}
    {% if blockHasBg and blockBg and (blockBg.value ?? blockBg) %}
        {% set heroBgRaw = blockBg.value ?? blockBg %}
    {% elseif sourceHasBg and sourceBg and (sourceBg.value ?? sourceBg) %}
        {% set heroBgRaw = sourceBg.value ?? sourceBg %}
    {% endif %}
{% else %}
    {# From entry fields - check if field exists in layout first #}
    {% set fieldLayout = entry.getFieldLayout() %}
    {% set hasTreatmentHeroTitle = fieldLayout.getFieldByHandle('treatmentHeroTitle') is not null %}
    {% set hasTreatmentHeroLocation = fieldLayout.getFieldByHandle('treatmentHeroLocation') is not null %}
    {% set hasTreatmentHeroDescription = fieldLayout.getFieldByHandle('treatmentHeroDescription') is not null %}
    {% set hasTreatmentHeroImage = fieldLayout.getFieldByHandle('treatmentHeroImage') is not null %}
    {% set hasTreatmentHeroPrimaryButton = fieldLayout.getFieldByHandle('treatmentHeroPrimaryButton') is not null %}
    {% set hasTreatmentHeroSecondaryButton = fieldLayout.getFieldByHandle('treatmentHeroSecondaryButton') is not null %}
    
    {% set treatmentTitle = (hasTreatmentHeroTitle and entry.treatmentHeroTitle|length) ? entry.treatmentHeroTitle : null %}
    {% set location = (hasTreatmentHeroLocation and entry.treatmentHeroLocation|length) ? entry.treatmentHeroLocation : null %}
    {% set description = (hasTreatmentHeroDescription and entry.treatmentHeroDescription|length) ? entry.treatmentHeroDescription : null %}
    {# Only treatment hero image field – no fallback to featuredImage or any other image #}
    {% set backgroundImage = (hasTreatmentHeroImage and entry.treatmentHeroImage|length) ? entry.treatmentHeroImage.one() : null %}
    {% set hasPrimaryButtonText = fieldLayout.getFieldByHandle('treatmentHeroPrimaryButtonText') is not null %}
    {% set hasPrimaryButtonUrl = fieldLayout.getFieldByHandle('treatmentHeroPrimaryButtonUrl') is not null %}
    {% set hasSecondaryButtonText = fieldLayout.getFieldByHandle('treatmentHeroSecondaryButtonText') is not null %}
    {% set hasSecondaryButtonUrl = fieldLayout.getFieldByHandle('treatmentHeroSecondaryButtonUrl') is not null %}
    {% set hasShowSecondaryButton = fieldLayout.getFieldByHandle('treatmentHeroShowSecondaryButton') is not null %}
    {% set primaryButtonText = (hasPrimaryButtonText and entry.treatmentHeroPrimaryButtonText|length) ? entry.treatmentHeroPrimaryButtonText : null %}
    {% set primaryButtonUrl = (hasPrimaryButtonUrl and entry.treatmentHeroPrimaryButtonUrl|length) ? entry.treatmentHeroPrimaryButtonUrl : null %}
    {% set secondaryButtonText = (hasSecondaryButtonText and entry.treatmentHeroSecondaryButtonText|length) ? entry.treatmentHeroSecondaryButtonText : null %}
    {% set secondaryButtonUrl = (hasSecondaryButtonUrl and entry.treatmentHeroSecondaryButtonUrl|length) ? entry.treatmentHeroSecondaryButtonUrl : null %}
    {% set showSecondaryButton = (hasShowSecondaryButton and entry.treatmentHeroShowSecondaryButton) ? true : false %}
    {% set hasTreatmentHeroBackground = fieldLayout.getFieldByHandle('treatmentHeroBackground') is not null or fieldLayout.getFieldByHandle('treatmentheroBackground') is not null %}
    {% set entryBg = null %}
    {% if fieldLayout.getFieldByHandle('treatmentHeroBackground') is not null %}{% set entryBg = entry.treatmentHeroBackground %}{% endif %}
    {% if entryBg is null and fieldLayout.getFieldByHandle('treatmentheroBackground') is not null %}{% set entryBg = entry.treatmentheroBackground %}{% endif %}
    {% set heroBgRaw = (hasTreatmentHeroBackground and entryBg and (entryBg.value ?? entryBg)) ? (entryBg.value ?? entryBg) : null %}
{% endif %}

{# Treatment hero background: white | ebd5cb | fffaf7 – normalize value (trim, lower) #}
{% set heroBgNorm = heroBgRaw ? (heroBgRaw|string|lower|trim) : '' %}
{% set treatmentHeroBgClasses = {
  'white': 'bg-white',
  'ebd5cb': 'bg-[#EBD5CB]',
  'fffaf7': 'bg-[#FFFAF7]',
  'f2e5de': 'bg-[#F2E5DE]',
  'option 1': 'bg-white',
  'option1': 'bg-white',
  '1': 'bg-white',
  'option 2': 'bg-[#FFFAF7]',
  'option2': 'bg-[#FFFAF7]',
  '2': 'bg-[#FFFAF7]',
  'option 3': 'bg-[#EBD5CB]',
  'option3': 'bg-[#EBD5CB]',
  '3': 'bg-[#EBD5CB]'
} %}
{% set treatmentHeroBgClass = treatmentHeroBgClasses[heroBgNorm] is defined ? treatmentHeroBgClasses[heroBgNorm] : 'bg-white' %}

<section class="relative {{ treatmentHeroBgClass }} overflow-hidden">
    {% if backgroundImage %}
    <div class="absolute inset-0 opacity-10">
        {{ imageMacro.optimizedImage(backgroundImage, {
            alt: treatmentTitle|length ? treatmentTitle : (entry.title|length ? entry.title : ''),
            class: 'w-full h-full object-cover',
            loading: 'lazy',
            width: backgroundImage.width,
            height: backgroundImage.height,
            sizes: '100vw'
        }) }}
    </div>
    {% endif %}
    <div class="container-default relative z-10 px-6 py-20 sm:py-24 lg:py-28">
        <div class="max-w-3xl mx-auto text-center">
            {% if treatmentTitle or location %}
            <h1 class="text-[3.5rem] md:text-[4.5rem] lg:text-[4.5rem] font-heading text-navy leading-[1] tracking-tight" style="letter-spacing: -0.02em;">
                {% if treatmentTitle %}{{ treatmentTitle }}{% endif %}
                {% if treatmentTitle and location %}<br>{% endif %}
                {% if location %}<span class="text-gold italic font-light text-[0.9em]">{{ location }}</span>{% endif %}
            </h1>
            {% endif %}
            {% if (treatmentTitle or location) and (description or primaryButtonText or secondaryButtonText) %}
            <div class="h-px w-24 mx-auto mt-6 mb-6 bg-gold/60"></div>
            {% endif %}
            {% if description %}
            <p class="text-lg text-charcoal-light max-w-2xl mx-auto mb-10 font-body leading-relaxed">
                {{ description }}
            </p>
            {% endif %}
            {% if primaryButtonText and primaryButtonUrl or (showSecondaryButton and secondaryButtonText and secondaryButtonUrl) %}
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                {% if primaryButtonText and primaryButtonUrl %}
                <a href="{{ primaryButtonUrl }}" class="btn-gold-lg inline-flex items-center justify-center group">
                    <span>{{ primaryButtonText }}</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 %}
                {% if showSecondaryButton and secondaryButtonText and secondaryButtonUrl %}
                <a href="{{ secondaryButtonUrl }}" class="btn-outline inline-flex items-center justify-center group">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
                    </svg>
                    <span>{{ secondaryButtonText }}</span>
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</section>