{#
# Treatment Overview Component
# Navy background with cream cards showing treatment details
#
# Usage: 
#   {% include 'components/treatment-overview.twig' %} - Uses entry fields or defaults
#   {% include 'components/treatment-overview.twig' with { block: block } %} - From page builder
#}

{# Get data from block (pagebuilder) or entry fields, with fallback to defaults #}
{% if block is defined %}
    {# Block may be Matrix block with Entries field – get the overview content entry (same pattern as treatment-hero) #}
    {% set blockTypeLayout = block.getFieldLayout() %}
    {% set overviewEntry = null %}
    {% for handle in ['treatmentOverviewSection', 'treatmentOverviewType', 'treatmentOverviewEntry', 'treatmentOverview'] %}
        {% if overviewEntry is null and blockTypeLayout.getFieldByHandle(handle) is not null %}
            {% set rel = attribute(block, handle) %}
            {% if rel|length %}
                {% set overviewEntry = rel.one() %}
            {% endif %}
        {% endif %}
    {% endfor %}
    {% if overviewEntry %}
        {% set dataSource = overviewEntry %}
    {% else %}
        {% set dataSource = block %}
    {% endif %}
    {% set srcLayout = dataSource.getFieldLayout() %}
    {# Support both block-type handles (overviewLabel) and entry-type handles (treatmentOverviewLabel) #}
    {% set flabel = srcLayout.getFieldByHandle('overviewLabel') is not null ? 'overviewLabel' : (srcLayout.getFieldByHandle('treatmentOverviewLabel') is not null ? 'treatmentOverviewLabel' : null) %}
    {% set ftitle = srcLayout.getFieldByHandle('overviewTitle') is not null ? 'overviewTitle' : (srcLayout.getFieldByHandle('treatmentOverviewTitle') is not null ? 'treatmentOverviewTitle' : null) %}
    {% set fcards = srcLayout.getFieldByHandle('overviewCard') is not null ? 'overviewCard' : (srcLayout.getFieldByHandle('overviewCards') is not null ? 'overviewCards' : (srcLayout.getFieldByHandle('treatmentOverviewCards') is not null ? 'treatmentOverviewCards' : null)) %}
    {% set fdisclaimer = srcLayout.getFieldByHandle('disclaimerItems') is not null ? 'disclaimerItems' : (srcLayout.getFieldByHandle('treatmentOverviewDisclaimer') is not null ? 'treatmentOverviewDisclaimer' : null) %}
    {% set overviewLabel = (flabel is not null and attribute(dataSource, flabel)|length) ? attribute(dataSource, flabel) : null %}
    {% set overviewTitle = (ftitle is not null and attribute(dataSource, ftitle)|length) ? attribute(dataSource, ftitle) : null %}
    {% set overviewCards = (fcards is not null and attribute(dataSource, fcards)|length) ? attribute(dataSource, fcards).all() : [] %}
    {% set disclaimerItems = (fdisclaimer is not null and attribute(dataSource, fdisclaimer)|length) ? attribute(dataSource, fdisclaimer).all() : [] %}
{% else %}
    {% set fieldLayout = entry.getFieldLayout() %}
    {% set hasOverviewLabel = fieldLayout.getFieldByHandle('treatmentOverviewLabel') is not null %}
    {% set hasOverviewTitle = fieldLayout.getFieldByHandle('treatmentOverviewTitle') is not null %}
    {% set hasOverviewCards = fieldLayout.getFieldByHandle('treatmentOverviewCards') is not null %}
    {% set hasOverviewDisclaimer = fieldLayout.getFieldByHandle('treatmentOverviewDisclaimer') is not null %}
    
    {% set overviewLabel = (hasOverviewLabel and entry.treatmentOverviewLabel|length) ? entry.treatmentOverviewLabel : null %}
    {% set overviewTitle = (hasOverviewTitle and entry.treatmentOverviewTitle|length) ? entry.treatmentOverviewTitle : null %}
    {% set overviewCards = (hasOverviewCards and entry.treatmentOverviewCards|length) ? entry.treatmentOverviewCards.all() : [] %}
    {% set disclaimerItems = (hasOverviewDisclaimer and entry.treatmentOverviewDisclaimer|length) ? entry.treatmentOverviewDisclaimer.all() : [] %}
{% endif %}

{% set cards = overviewCards %}
{% set disclaimers = disclaimerItems %}
{% set hasOverviewContent = overviewLabel or overviewTitle or cards|length or disclaimers|length %}

{% if hasOverviewContent %}
<section class="relative bg-navy py-20 lg:py-28 overflow-hidden">
    <div class="container-default relative z-10">
        {% if overviewLabel or overviewTitle %}
        <div class="text-center mb-12 lg:mb-16">
            {% if overviewLabel %}
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="h-px w-10 flex-shrink-0 bg-gold/80" aria-hidden="true"></div>
                <p class="text-[#D58D72] tracking-[0.25em] text-[14px] font-body uppercase font-medium">{{ overviewLabel }}</p>
                <div class="h-px w-10 flex-shrink-0 bg-gold/80" aria-hidden="true"></div>
            </div>
            {% endif %}
            {% if overviewTitle %}
            <h2 class="text-white font-heading tracking-tight">{{ overviewTitle }}</h2>
            {% endif %}
        </div>
        {% endif %}

        {# Four cards: Dynamic from CMS or fallback #}
        <div class="treatment-overview-cards max-w-5xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8 mb-12">
            {% for card in cards %}
                {# Handle both CMS Matrix blocks and default array structure #}
                {% set cardIcon = card.iconCard is defined ? card.iconCard : (card.icon is defined ? card.icon : null) %}
                {% set cardTitle = card.titleCard is defined ? card.titleCard : (card.title is defined ? card.title : '') %}
                {% set cardValue = card.value is defined ? card.value : (card.cardValue is defined ? card.cardValue : '') %}
                {% set cardDescription = card.description is defined ? card.description : (card.cardDescription is defined ? card.cardDescription : '') %}
                
                {% if cardTitle %}
                <div class="bg-cream rounded-3xl p-6 lg:p-8 flex flex-col items-center text-center shadow-soft">
                    {% if cardIcon %}
                    <div class="w-12 h-12 rounded-full border-2 border-gold bg-transparent flex items-center justify-center mb-4 flex-shrink-0 text-gold">
                        <i class="{{ cardIcon }} text-base" aria-hidden="true"></i>
                    </div>
                    {% endif %}
                    {# Reserve consistent title area height (fixed h-16) so value row always aligns #}
                    <div class="h-16 flex items-center mb-1.5">
                        <h3 class="text-navy font-body !text-[25px] font-semibold">{{ cardTitle }}</h3>
                    </div>
                    {% if cardValue %}<p class="text-gold font-heading text-[30px] font-medium mb-1.5">{{ cardValue }}</p>{% endif %}
                    {% if cardDescription %}<p class="text-charcoal-light text-[16px] font-body">{{ cardDescription }}</p>{% endif %}
                </div>
                {% endif %}
            {% endfor %}
        </div>

        {# Bottom disclaimer: Dynamic from CMS or fallback #}
        <div class="treatment-overview-disclaimer grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3 max-w-5xl mx-auto text-[16px] font-body text-center">
            {% for item in disclaimers %}
                {% set disclaimerText = item.text is defined ? item.text : (item.disclaimerText is defined ? item.disclaimerText : item) %}
                <span {% if disclaimerText|length <= 15 %}class="whitespace-nowrap"{% endif %}>{{ disclaimerText }}</span>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}