{#
# Who Should Consider This Treatment Component
# Two-column: image left, text right. Light peach background #EBD5CB
#
# Usage:
#   {% include 'components/who-should-consider.twig' %} - Uses entry fields or defaults
#   {% include 'components/who-should-consider.twig' with { block: block } %} - From page builder
#}

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

{% set treatmentName = entry.title|length ? entry.title : null %}

{# Get data from block (pagebuilder) or entry fields, mimicking why-choose-treatment behaviour. #}
{% if block is defined %}
    {% set bl = block.getFieldLayout() %}
    {# Block entry has sectionLabel / sectionHeading / sectionContent / sectionImage #}
    {% set sectionLabel = (bl.getFieldByHandle('sectionLabel') is not null and attribute(block, 'sectionLabel')|length)
        ? attribute(block, 'sectionLabel')
        : ((bl.getFieldByHandle('whoConsiderLabel') is not null and attribute(block, 'whoConsiderLabel')|length) ? attribute(block, 'whoConsiderLabel') : null) %}
    {% set sectionHeading = (bl.getFieldByHandle('sectionHeading') is not null and attribute(block, 'sectionHeading')|length)
        ? attribute(block, 'sectionHeading')
        : ((bl.getFieldByHandle('whoConsiderHeading') is not null and attribute(block, 'whoConsiderHeading')|length) ? attribute(block, 'whoConsiderHeading') : null) %}
    {% set sectionContent = (bl.getFieldByHandle('sectionContent') is not null and attribute(block, 'sectionContent')|length)
        ? attribute(block, 'sectionContent')
        : ((bl.getFieldByHandle('whoConsiderContent') is not null and attribute(block, 'whoConsiderContent')|length) ? attribute(block, 'whoConsiderContent') : '') %}
    {% set sectionImage = (bl.getFieldByHandle('sectionImage') is not null and attribute(block, 'sectionImage')|length)
        ? attribute(block, 'sectionImage').one()
        : ((bl.getFieldByHandle('whoConsiderImage') is not null and attribute(block, 'whoConsiderImage')|length) ? attribute(block, 'whoConsiderImage').one() : null) %}
{% else %}
    {% set fieldLayout = entry.getFieldLayout() %}
    {% set sectionLabel = (fieldLayout.getFieldByHandle('whoConsiderLabel') is not null and entry.whoConsiderLabel|length) ? entry.whoConsiderLabel : null %}
    {% set sectionHeading = (fieldLayout.getFieldByHandle('whoConsiderHeading') is not null and entry.whoConsiderHeading|length) ? entry.whoConsiderHeading : null %}
    {% set sectionContent = (fieldLayout.getFieldByHandle('whoConsiderContent') is not null and entry.whoConsiderContent|length) ? entry.whoConsiderContent : (fieldLayout.getFieldByHandle('whoConsiderIntro') is not null and entry.whoConsiderIntro|length ? entry.whoConsiderIntro : '') %}
    {% set sectionImage = (fieldLayout.getFieldByHandle('whoConsiderImage') is not null and entry.whoConsiderImage|length) ? entry.whoConsiderImage.one() : null %}
{% endif %}

{% if sectionLabel or sectionHeading or sectionContent|length or sectionImage %}
<section class="py-32 lg:py-40 overflow-hidden" style="background-color: #F2E5DE;">
    <div class="container-default">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            {# Left: image (only when section has an image) #}
            {% if sectionImage %}
            <div class="order-2 lg:order-1">
                <div class="rounded-2xl overflow-hidden shadow-elegant">
                    {{ imageMacro.optimizedImage(sectionImage, {
                        alt: sectionHeading|length ? sectionHeading : '',
                        class: 'w-full h-auto object-cover',
                        loading: 'lazy',
                        width: sectionImage.width,
                        height: sectionImage.height,
                        sizes: '(max-width: 1024px) 100vw, 50vw'
                    }) }}
                </div>
            </div>
            {% endif %}

            {# Right: label, heading, WYSIWYG content #}
            <div class="order-1 lg:order-2 max-w-xl">
                {% if sectionLabel %}
                <div class="flex items-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>
                {% endif %}
                {% if sectionHeading %}
                <h2 class="text-charcoal font-heading text-3xl lg:text-4xl italic font-normal mb-8 leading-tight">
                    {{ sectionHeading }}
                </h2>
                {% endif %}
                {% if sectionContent|length %}
                <div class="text-charcoal font-body text-base leading-relaxed prose prose-p:mb-4 prose-ul:list-disc prose-ul:pl-6 prose-li:mb-1 max-w-none">
                    {{ sectionContent|raw }}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endif %}