{#
# Why Choose This Treatment Component
# Warm background with white cards showing treatment benefits
#
# Usage: 
#   {% include 'components/why-choose-treatment.twig' %} - Uses entry fields or defaults
#   {% include 'components/why-choose-treatment.twig' with { block: block } %} - From page builder
#}

{# Get data from block or entry. No default values – only show fields that have content. #}
{% if block is defined %}
    {% set bl = block.getFieldLayout() %}
    {% set sectionLabel = (bl.getFieldByHandle('sectionLabel') is not null and attribute(block, 'sectionLabel')|length) ? attribute(block, 'sectionLabel') : ((bl.getFieldByHandle('whyChooseLabel') is not null and attribute(block, 'whyChooseLabel')|length) ? attribute(block, 'whyChooseLabel') : null) %}
    {% set sectionTitle = (bl.getFieldByHandle('sectionTitle') is not null and attribute(block, 'sectionTitle')|length) ? attribute(block, 'sectionTitle') : ((bl.getFieldByHandle('whyChooseTitle') is not null and attribute(block, 'whyChooseTitle')|length) ? attribute(block, 'whyChooseTitle') : null) %}
    {% set sectionDescription = (bl.getFieldByHandle('sectionDescription') is not null and attribute(block, 'sectionDescription')|length) ? attribute(block, 'sectionDescription') : ((bl.getFieldByHandle('whyChooseDescription') is not null and attribute(block, 'whyChooseDescription')|length) ? attribute(block, 'whyChooseDescription') : null) %}
    {% set benefitCards = (bl.getFieldByHandle('benefitCards') is not null and attribute(block, 'benefitCards')|length) ? attribute(block, 'benefitCards').all() : ((bl.getFieldByHandle('whyChooseCards') is not null and attribute(block, 'whyChooseCards')|length) ? attribute(block, 'whyChooseCards').all() : []) %}
{% else %}
    {% set fieldLayout = entry.getFieldLayout() %}
    {% set hasWhyChooseLabel = fieldLayout.getFieldByHandle('whyChooseLabel') is not null %}
    {% set hasWhyChooseTitle = fieldLayout.getFieldByHandle('whyChooseTitle') is not null %}
    {% set hasWhyChooseDescription = fieldLayout.getFieldByHandle('whyChooseDescription') is not null %}
    {% set hasWhyChooseCards = fieldLayout.getFieldByHandle('whyChooseCards') is not null %}
    
    {% set sectionLabel = (hasWhyChooseLabel and entry.whyChooseLabel|length) ? entry.whyChooseLabel : null %}
    {% set sectionTitle = (hasWhyChooseTitle and entry.whyChooseTitle|length) ? entry.whyChooseTitle : null %}
    {% set sectionDescription = (hasWhyChooseDescription and entry.whyChooseDescription|length) ? entry.whyChooseDescription : null %}
    {% set benefitCards = (hasWhyChooseCards and entry.whyChooseCards|length) ? entry.whyChooseCards.all() : [] %}
{% endif %}

{% set cards = benefitCards %}

{% if sectionLabel or sectionTitle or sectionDescription or cards|length %}
<section class="relative py-32 lg:py-40 overflow-hidden" style="background-color: #F2E5DE;">
    <div class="container-default relative z-10">
        {% if sectionLabel or sectionTitle or sectionDescription %}
        <div class="text-center mb-16 lg:mb-20">
            {% if sectionLabel %}
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="h-px w-10 flex-shrink-0 bg-gold" aria-hidden="true"></div>
                <p class="text-[#D58D72] tracking-[0.25em] text-[24px] font-body font-medium">{{ sectionLabel }}</p>
                <div class="h-px w-10 flex-shrink-0 bg-gold" aria-hidden="true"></div>
            </div>
            {% endif %}
            {% if sectionTitle %}
            <h2 class="text-charcoal font-heading font-semibold mb-6">
                {{ sectionTitle|replace({'Treatment': '<span class="text-[#D58D72] italic">Treatment</span>'})|raw }}
            </h2>
            {% endif %}
            {% if sectionDescription %}
            <p class="text-charcoal text-[18px] font-body max-w-2xl mx-auto leading-relaxed">
                {{ sectionDescription }}
            </p>
            {% endif %}
        </div>
        {% endif %}

        {# 2x2 grid: white cards, rounded, subtle shadow, FA outline icons #}
        <div class="why-choose-cards grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-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 cardDescription = card.description is defined ? card.description : '' %}
                
                {% if cardTitle %}
                <div class="bg-white rounded-2xl p-8 lg:p-10 shadow-soft flex flex-col justify-start h-full">
                    {% if cardIcon %}
                    <div class="w-14 h-14 rounded-full flex items-center justify-center mb-6 text-gold">
                        <i class="{{ cardIcon }} text-2xl" aria-hidden="true"></i>
                    </div>
                    {% endif %}
                    <h3 class="font-heading font-semibold mb-4" style="color:#22313E; font-size:30px !important; line-height:1.3;">{{ cardTitle }}</h3>
                    {% if cardDescription %}
                    <p class="text-charcoal-light text-[18px] font-body leading-relaxed">
                        {{ cardDescription }}
                    </p>
                    {% endif %}
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}