{#
# Call To Action Section Component
# Centered heading, description and 1–2 buttons.
#
# Usage:
#   {% include 'components/call-to-action-section.twig' with { block: block } %}  # from Page Builder
#   {% include 'components/call-to-action-section.twig' %}                        # fallback from entry
#}

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

{# 1. Read data from block (Page Builder) or entry #}
{% if block is defined %}
    {% set bl = block.getFieldLayout() %}

    {# Text content #}
    {% set sectionHeading = (bl.getFieldByHandle('sectionHeading') is not null and attribute(block, 'sectionHeading')|length)
        ? attribute(block, 'sectionHeading')
        : null %}
    {% set sectionDescription = (bl.getFieldByHandle('sectionDescription') is not null and attribute(block, 'sectionDescription')|length)
        ? attribute(block, 'sectionDescription')
        : null %}

    {# Buttons – reuse generic hero button handles #}
    {% set primaryButtonText = (bl.getFieldByHandle('primaryButtonText') is not null and attribute(block, 'primaryButtonText')|length)
        ? attribute(block, 'primaryButtonText')
        : null %}
    {% set primaryButtonUrl = (bl.getFieldByHandle('primaryButtonUrl') is not null and attribute(block, 'primaryButtonUrl')|length)
        ? attribute(block, 'primaryButtonUrl')
        : null %}
    {% set secondaryButtonText = (bl.getFieldByHandle('secondaryButtonText') is not null and attribute(block, 'secondaryButtonText')|length)
        ? attribute(block, 'secondaryButtonText')
        : null %}
    {% set secondaryButtonUrl = (bl.getFieldByHandle('secondaryButtonUrl') is not null and attribute(block, 'secondaryButtonUrl')|length)
        ? attribute(block, 'secondaryButtonUrl')
        : null %}
    {% set showSecondaryButton = (bl.getFieldByHandle('showSecondaryButton') is not null)
        ? attribute(block, 'showSecondaryButton')
        : false %}

    {# Background dropdown: reuse treatmentHeroBackground on this block #}
    {% set ctaBgRaw = null %}
    {% if bl.getFieldByHandle('treatmentHeroBackground') is not null %}
        {% set bgVal = attribute(block, 'treatmentHeroBackground') %}
        {% if bgVal is not null and (bgVal.value ?? bgVal) %}
            {% set ctaBgRaw = bgVal.value ?? bgVal %}
        {% endif %}
    {% endif %}
{% else %}
    {# Entry–level fallback (optional) – only if you add these fields to the entry #}
    {% set fieldLayout = entry.getFieldLayout() %}
    {% set sectionHeading = fieldLayout.getFieldByHandle('callToActionHeading') is not null and entry.callToActionHeading|length ? entry.callToActionHeading : null %}
    {% set sectionDescription = fieldLayout.getFieldByHandle('callToActionDescription') is not null and entry.callToActionDescription|length ? entry.callToActionDescription : null %}
    {% set primaryButtonText = fieldLayout.getFieldByHandle('callToActionPrimaryButtonText') is not null and entry.callToActionPrimaryButtonText|length ? entry.callToActionPrimaryButtonText : null %}
    {% set primaryButtonUrl = fieldLayout.getFieldByHandle('callToActionPrimaryButtonUrl') is not null and entry.callToActionPrimaryButtonUrl|length ? entry.callToActionPrimaryButtonUrl : null %}
    {% set secondaryButtonText = fieldLayout.getFieldByHandle('callToActionSecondaryButtonText') is not null and entry.callToActionSecondaryButtonText|length ? entry.callToActionSecondaryButtonText : null %}
    {% set secondaryButtonUrl = fieldLayout.getFieldByHandle('callToActionSecondaryButtonUrl') is not null and entry.callToActionSecondaryButtonUrl|length ? entry.callToActionSecondaryButtonUrl : null %}
    {% set showSecondaryButton = fieldLayout.getFieldByHandle('callToActionShowSecondaryButton') is not null ? entry.callToActionShowSecondaryButton : false %}
    {% set ctaBgRaw = null %}
    {% if fieldLayout.getFieldByHandle('callToActionBackground') is not null %}
        {% set bgVal = entry.callToActionBackground %}
        {% if bgVal is not null and (bgVal.value ?? bgVal) %}
            {% set ctaBgRaw = bgVal.value ?? bgVal %}
        {% endif %}
    {% endif %}
{% endif %}

{# 2. Background mapping like hero / what-is #}
{% set bgNorm = ctaBgRaw ? (ctaBgRaw|string|lower|trim) : '' %}
{% set ctaBgClasses = {
  'white': 'bg-white',
  'ebd5cb': 'bg-[#EBD5CB]',
  'fffaf7': 'bg-[#FFFAF7]',
  'f2e5de': 'bg-[#F2E5DE]',
  'navy': 'bg-navy',
  '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 sectionBgClass = bgNorm and ctaBgClasses[bgNorm] is defined ? ctaBgClasses[bgNorm] : 'bg-[#FFF7F1]' %}
{% set isDarkBg = sectionBgClass == 'bg-navy' %}
{% set headingClass = isDarkBg ? 'text-white' : 'text-navy' %}
{% set bodyClass = isDarkBg ? 'text-white/90' : 'text-charcoal' %}

{# 3. Only render if we have some content #}
{% if sectionHeading or sectionDescription or (primaryButtonText and primaryButtonUrl) or (showSecondaryButton and secondaryButtonText and secondaryButtonUrl) %}
<section class="relative {{ sectionBgClass }} py-8 lg:py-10 overflow-hidden">
    <div class="container-default relative z-10">
        <div class="max-w-3xl mx-auto text-center">
            {% if sectionHeading %}
            <h2 class="{{ headingClass }} font-heading text-2xl lg:text-3xl mb-4">
                {{ sectionHeading }}
            </h2>
            {% endif %}
            {% if sectionDescription %}
            <p class="{{ bodyClass }} text-base lg:text-lg mb-8 leading-relaxed font-body max-w-2xl mx-auto">
                {{ sectionDescription }}
            </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>
{% endif %}