{#
# 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 showSecondaryButton = (bl.getFieldByHandle('showSecondaryButton') is not null)
        ? attribute(block, 'showSecondaryButton')
        : false %}

    {# Contact mode toggle + number (optional): CALL vs WhatsApp MESSAGE #}
    {% set contactModeMessage = null %}
    {% for h in ['contactModeMessage', 'ctaMessageMode', 'isWhatsAppMode'] %}
        {% if contactModeMessage is null and bl.getFieldByHandle(h) is not null %}
            {% set contactModeMessage = attribute(block, h) ?? false %}
        {% endif %}
    {% endfor %}
    {% set contactNumberRaw = null %}
    {% for h in ['contactNumber', 'ctaContactNumber', 'phoneNumber', 'whatsAppNumber'] %}
        {% if contactNumberRaw is null and bl.getFieldByHandle(h) is not null and attribute(block, h)|length %}
            {% set contactNumberRaw = attribute(block, h) %}
        {% endif %}
    {% endfor %}

    {# 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 showSecondaryButton = fieldLayout.getFieldByHandle('callToActionShowSecondaryButton') is not null ? entry.callToActionShowSecondaryButton : false %}
    {% set contactModeMessage = fieldLayout.getFieldByHandle('callToActionContactModeMessage') is not null ? entry.callToActionContactModeMessage : null %}
    {% set contactNumberRaw = fieldLayout.getFieldByHandle('callToActionContactNumber') is not null and entry.callToActionContactNumber|length ? entry.callToActionContactNumber : null %}
    {% 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-beige',
  'fffaf7': 'bg-cream',
  'f2e5de': 'bg-beige-soft',
  'navy': 'bg-navy',
  'option 1': 'bg-white',
  'option1': 'bg-white',
  '1': 'bg-white',
  'option 2': 'bg-cream',
  'option2': 'bg-cream',
  '2': 'bg-cream',
  'option 3': 'bg-beige',
  'option3': 'bg-beige',
  '3': 'bg-beige'
} %}
{% set sectionBgClass = bgNorm and ctaBgClasses[bgNorm] is defined ? ctaBgClasses[bgNorm] : 'bg-cream-warm' %}
{% set isDarkBg = sectionBgClass == 'bg-navy' %}
{% set headingClass = isDarkBg ? 'text-white' : 'text-navy' %}
{% set bodyClass = isDarkBg ? 'text-white/90' : 'text-charcoal' %}

{# 2b. Secondary action derivation: one number + mode switch only #}
{% set secondaryActionText = null %}
{% set secondaryActionUrl = null %}
{% set secondaryActionIsWhatsapp = false %}
{% if showSecondaryButton and contactModeMessage is not null and contactNumberRaw %}
    {% set contactNumberDisplay = contactNumberRaw|string|trim %}
    {% set normalizedForCall = contactNumberRaw|replace({' ': '', '-': '', '(': '', ')': ''})|trim %}
    {% set normalizedForWa = normalizedForCall|replace({'+': ''}) %}
    {# WhatsApp requires international format; convert UK local 0XXXXXXXXXX -> 44XXXXXXXXXX #}
    {% if normalizedForWa|slice(0, 1) == '0' %}
        {% set normalizedForWa = '44' ~ normalizedForWa|slice(1) %}
    {% endif %}
    {% if contactModeMessage %}
        {% set secondaryActionIsWhatsapp = true %}
        {% set secondaryActionText = 'Message on WhatsApp' %}
        {% set secondaryActionUrl = 'https://wa.me/' ~ normalizedForWa %}
    {% else %}
        {% set secondaryActionIsWhatsapp = false %}
        {% set secondaryActionText = 'Call ' ~ contactNumberDisplay %}
        {% set secondaryActionUrl = 'tel:' ~ normalizedForCall %}
    {% endif %}
{% endif %}

{# 3. Only render if we have some content #}
{% if sectionHeading or sectionDescription or (primaryButtonText and primaryButtonUrl) or (showSecondaryButton and secondaryActionText and secondaryActionUrl) %}
<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 secondaryActionText and secondaryActionUrl) %}
            <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 secondaryActionText and secondaryActionUrl %}
                <a href="{{ secondaryActionUrl }}" class="btn-outline inline-flex items-center justify-center group" {% if secondaryActionIsWhatsapp %}target="_blank" rel="noopener noreferrer"{% endif %}>
                    {% if secondaryActionIsWhatsapp %}
                    <svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M20.52 3.48A11.9 11.9 0 0 0 12.03 0C5.41 0 .02 5.39.02 12c0 2.11.55 4.17 1.6 6L0 24l6.2-1.62A12 12 0 0 0 12.03 24h.01c6.62 0 12.01-5.39 12.01-12 0-3.2-1.25-6.2-3.53-8.52zM12.04 21.9a9.86 9.86 0 0 1-5.03-1.38l-.36-.21-3.68.96.98-3.59-.24-.37A9.87 9.87 0 0 1 2.13 12c0-5.47 4.45-9.9 9.91-9.9 2.64 0 5.13 1.03 6.99 2.9a9.84 9.84 0 0 1 2.9 7c0 5.46-4.45 9.9-9.89 9.9zm5.43-7.42c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15s-.77.96-.95 1.16c-.17.2-.35.23-.65.08-.3-.15-1.27-.47-2.42-1.5-.9-.8-1.5-1.8-1.67-2.1-.18-.3-.02-.46.13-.61.13-.13.3-.35.45-.53.15-.17.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.67-1.62-.92-2.22-.24-.58-.48-.5-.67-.51h-.57c-.2 0-.53.08-.8.38-.27.3-1.04 1.02-1.04 2.5 0 1.47 1.07 2.9 1.22 3.1.15.2 2.1 3.22 5.1 4.51.71.31 1.27.5 1.7.64.72.23 1.38.2 1.9.12.58-.09 1.75-.72 2-1.42.25-.7.25-1.3.18-1.42-.07-.12-.27-.2-.57-.35z"/>
                    </svg>
                    {% else %}
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                        <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>
                    {% endif %}
                    <span>{{ secondaryActionText }}</span>
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}