{#
# What Is Treatment Section Component
# Section: header, 2x Dr Rachel blocks, testimonial, Harley Street CTA
# Optional: whatIsTreatmentBackground (Dropdown) - white | ebd5cb | fffaf7 (default: navy)
# Optional frame toggles (Lightswitch) – per image:
#   - showBlock1ImageFrame = gold frame on Block 1 image only
#   - showBlock2ImageFrame = gold frame on Block 2 image only
#   If you add only one: showImageFrame = applies to BOTH images (one toggle for whole section)
#
# Usage:
#   {% include 'components/what-is-treatment.twig' %} - Uses entry fields or defaults
#   {% include 'components/what-is-treatment.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 #}
{% if block is defined %}
    {% set blockLayout = block.getFieldLayout() %}
    {# Read only from handles that exist on this layout (block may be Matrix block or Entry) to avoid RuntimeError and to show backend content.
       The What Is Treatment block type uses:
       - sectionLabel
       - sectioTitle (typo handle)
       - sectionDescription
    #}
    {% set sectionLabel = (blockLayout.getFieldByHandle('whatIsSectionLabel') is not null and attribute(block, 'whatIsSectionLabel')|length)
        ? attribute(block, 'whatIsSectionLabel')
        : ((blockLayout.getFieldByHandle('sectionLabel') is not null and attribute(block, 'sectionLabel')|length) ? attribute(block, 'sectionLabel') : null) %}

    {% if blockLayout.getFieldByHandle('whatIsSectionTitle') is not null and attribute(block, 'whatIsSectionTitle')|length %}
        {% set sectionTitle = attribute(block, 'whatIsSectionTitle') %}
    {% elseif blockLayout.getFieldByHandle('sectionTitle') is not null and attribute(block, 'sectionTitle')|length %}
        {% set sectionTitle = attribute(block, 'sectionTitle') %}
    {% elseif blockLayout.getFieldByHandle('sectioTitle') is not null and attribute(block, 'sectioTitle')|length %}
        {% set sectionTitle = attribute(block, 'sectioTitle') %}
    {% else %}
        {% set sectionTitle = null %}
    {% endif %}

    {% set sectionDescription = (blockLayout.getFieldByHandle('whatIsSectionDescription') is not null and attribute(block, 'whatIsSectionDescription')|length)
        ? attribute(block, 'whatIsSectionDescription')
        : ((blockLayout.getFieldByHandle('sectionDescription') is not null and attribute(block, 'sectionDescription')|length) ? attribute(block, 'sectionDescription') : null) %}
    {% set block1Heading = (blockLayout.getFieldByHandle('block1Heading') is not null and attribute(block, 'block1Heading')|length) ? attribute(block, 'block1Heading') : ((blockLayout.getFieldByHandle('whatIsBlock1Heading') is not null and attribute(block, 'whatIsBlock1Heading')|length) ? attribute(block, 'whatIsBlock1Heading') : null) %}
    {% set block1Paragraph1 = (blockLayout.getFieldByHandle('block1Paragraph1') is not null and attribute(block, 'block1Paragraph1')|length) ? attribute(block, 'block1Paragraph1') : ((blockLayout.getFieldByHandle('whatIsBlock1Paragraph1') is not null and attribute(block, 'whatIsBlock1Paragraph1')|length) ? attribute(block, 'whatIsBlock1Paragraph1') : null) %}
    {% set block1Paragraph2 = (blockLayout.getFieldByHandle('block1Paragraph2') is not null and attribute(block, 'block1Paragraph2')|length) ? attribute(block, 'block1Paragraph2') : ((blockLayout.getFieldByHandle('whatIsBlock1Paragraph2') is not null and attribute(block, 'whatIsBlock1Paragraph2')|length) ? attribute(block, 'whatIsBlock1Paragraph2') : null) %}
    {% set block1Image = (blockLayout.getFieldByHandle('block1Image') is not null and attribute(block, 'block1Image')|length) ? attribute(block, 'block1Image').one() : ((blockLayout.getFieldByHandle('whatIsBlock1Image') is not null and attribute(block, 'whatIsBlock1Image')|length) ? attribute(block, 'whatIsBlock1Image').one() : null) %}
    {% set block2Heading = (blockLayout.getFieldByHandle('block2Heading') is not null and attribute(block, 'block2Heading')|length) ? attribute(block, 'block2Heading') : ((blockLayout.getFieldByHandle('whatIsBlock2Heading') is not null and attribute(block, 'whatIsBlock2Heading')|length) ? attribute(block, 'whatIsBlock2Heading') : null) %}
    {% set block2Paragraph1 = (blockLayout.getFieldByHandle('block2Paragraph1') is not null and attribute(block, 'block2Paragraph1')|length) ? attribute(block, 'block2Paragraph1') : ((blockLayout.getFieldByHandle('whatIsBlock2Paragraph1') is not null and attribute(block, 'whatIsBlock2Paragraph1')|length) ? attribute(block, 'whatIsBlock2Paragraph1') : null) %}
    {% set block2Paragraph2 = (blockLayout.getFieldByHandle('block2Paragraph2') is not null and attribute(block, 'block2Paragraph2')|length) ? attribute(block, 'block2Paragraph2') : ((blockLayout.getFieldByHandle('whatIsBlock2Paragraph2') is not null and attribute(block, 'whatIsBlock2Paragraph2')|length) ? attribute(block, 'whatIsBlock2Paragraph2') : null) %}
    {% set block2Image = (blockLayout.getFieldByHandle('block2Image') is not null and attribute(block, 'block2Image')|length) ? attribute(block, 'block2Image').one() : ((blockLayout.getFieldByHandle('whatIsBlock2Image') is not null and attribute(block, 'whatIsBlock2Image')|length) ? attribute(block, 'whatIsBlock2Image').one() : null) %}
    {# Per-image frame toggles: showBlock1ImageFrame / showBlock2ImageFrame, or single showImageFrame for both #}
    {% set showBlock1ImageFrame = (blockLayout.getFieldByHandle('showBlock1ImageFrame') is not null) ? attribute(block, 'showBlock1ImageFrame') : ((blockLayout.getFieldByHandle('showImageFrame') is not null) ? attribute(block, 'showImageFrame') : true) %}
    {% set showBlock2ImageFrame = (blockLayout.getFieldByHandle('showBlock2ImageFrame') is not null) ? attribute(block, 'showBlock2ImageFrame') : ((blockLayout.getFieldByHandle('showImageFrame') is not null) ? attribute(block, 'showImageFrame') : true) %}
    {% set testimonialQuote = (blockLayout.getFieldByHandle('testimonialQuote') is not null and attribute(block, 'testimonialQuote')|length) ? attribute(block, 'testimonialQuote') : ((blockLayout.getFieldByHandle('whatIsTestimonialQuote') is not null and attribute(block, 'whatIsTestimonialQuote')|length) ? attribute(block, 'whatIsTestimonialQuote') : null) %}
    {% set testimonialAuthorName = (blockLayout.getFieldByHandle('testimonialAuthorName') is not null and attribute(block, 'testimonialAuthorName')|length) ? attribute(block, 'testimonialAuthorName') : ((blockLayout.getFieldByHandle('whatIsTestimonialAuthorName') is not null and attribute(block, 'whatIsTestimonialAuthorName')|length) ? attribute(block, 'whatIsTestimonialAuthorName') : null) %}
    {% set testimonialTreatmentName = (blockLayout.getFieldByHandle('testimonialTreatmentName') is not null and attribute(block, 'testimonialTreatmentName')|length) ? attribute(block, 'testimonialTreatmentName') : ((blockLayout.getFieldByHandle('whatIsTestimonialTreatmentName') is not null and attribute(block, 'whatIsTestimonialTreatmentName')|length) ? attribute(block, 'whatIsTestimonialTreatmentName') : null) %}
    {% set testimonialInitials = (blockLayout.getFieldByHandle('testimonialInitials') is not null and attribute(block, 'testimonialInitials')|length) ? attribute(block, 'testimonialInitials') : ((blockLayout.getFieldByHandle('whatIsTestimonialInitials') is not null and attribute(block, 'whatIsTestimonialInitials')|length) ? attribute(block, 'whatIsTestimonialInitials') : null) %}
    {% set testimonialStarCount = (blockLayout.getFieldByHandle('testimonialStarCount') is not null) ? (attribute(block, 'testimonialStarCount') ?? 4) : ((blockLayout.getFieldByHandle('whatIsTestimonialStarCount') is not null) ? (attribute(block, 'whatIsTestimonialStarCount') ?? 4) : 4) %}
    {% set harleyHeading = (blockLayout.getFieldByHandle('harleyHeading') is not null and attribute(block, 'harleyHeading')|length) ? attribute(block, 'harleyHeading') : ((blockLayout.getFieldByHandle('whatIsHarleyHeading') is not null and attribute(block, 'whatIsHarleyHeading')|length) ? attribute(block, 'whatIsHarleyHeading') : null) %}
    {% set harleyDescription = (blockLayout.getFieldByHandle('harleyDescription') is not null and attribute(block, 'harleyDescription')|length) ? attribute(block, 'harleyDescription') : ((blockLayout.getFieldByHandle('whatIsHarleyDescription') is not null and attribute(block, 'whatIsHarleyDescription')|length) ? attribute(block, 'whatIsHarleyDescription') : null) %}
    {% set harleyButtonText = (blockLayout.getFieldByHandle('harleyButtonText') is not null and attribute(block, 'harleyButtonText')|length) ? attribute(block, 'harleyButtonText') : ((blockLayout.getFieldByHandle('whatIsHarleyButtonText') is not null and attribute(block, 'whatIsHarleyButtonText')|length) ? attribute(block, 'whatIsHarleyButtonText') : null) %}
    {% set harleyButtonUrl = (blockLayout.getFieldByHandle('harleyButtonUrl') is not null and attribute(block, 'harleyButtonUrl')|length) ? attribute(block, 'harleyButtonUrl') : ((blockLayout.getFieldByHandle('whatIsHarleyButtonUrl') is not null and attribute(block, 'whatIsHarleyButtonUrl')|length) ? attribute(block, 'whatIsHarleyButtonUrl') : null) %}
    {# Section Background: only read handles that exist on this layout to avoid RuntimeError on Entry #}
    {% set heroBgRaw = null %}
    {% if blockLayout.getFieldByHandle('whatIsTreatmentBackground') is not null %}
        {% set bgVal = attribute(block, 'whatIsTreatmentBackground') %}
        {% if bgVal is defined and bgVal is not null and (bgVal.value ?? bgVal) %}{% set heroBgRaw = bgVal.value ?? bgVal %}{% endif %}
    {% endif %}
    {% if heroBgRaw is null and blockLayout.getFieldByHandle('treatmentHeroBackground') is not null %}
        {% set bgVal = attribute(block, 'treatmentHeroBackground') %}
        {% if bgVal is defined and bgVal is not null and (bgVal.value ?? bgVal) %}{% set heroBgRaw = bgVal.value ?? bgVal %}{% endif %}
    {% endif %}
    {% if heroBgRaw is null and blockLayout.getFieldByHandle('treatmentheroBackground') is not null %}
        {% set bgVal = attribute(block, 'treatmentheroBackground') %}
        {% if bgVal is defined and bgVal is not null and (bgVal.value ?? bgVal) %}{% set heroBgRaw = bgVal.value ?? bgVal %}{% endif %}
    {% endif %}
{% else %}
    {% set fieldLayout = entry.getFieldLayout() %}
    {# Support both generic field handles (sectionLabel/Title/Description) and whatIs-specific handles.
       Note: entry type uses a typo handle `sectioTitle`, so we explicitly support that too. #}
    {% set hasGenericSectionLabel = fieldLayout.getFieldByHandle('sectionLabel') is not null %}
    {% set hasGenericSectionTitle = fieldLayout.getFieldByHandle('sectionTitle') is not null %}
    {% set hasTypoSectionTitle = fieldLayout.getFieldByHandle('sectioTitle') is not null %}
    {% set hasGenericSectionDescription = fieldLayout.getFieldByHandle('sectionDescription') is not null %}

    {% set sectionLabel = (fieldLayout.getFieldByHandle('whatIsSectionLabel') is not null and entry.whatIsSectionLabel|length)
        ? entry.whatIsSectionLabel
        : ((hasGenericSectionLabel and entry.sectionLabel|length) ? entry.sectionLabel : null) %}

    {% if fieldLayout.getFieldByHandle('whatIsSectionTitle') is not null and entry.whatIsSectionTitle|length %}
        {% set sectionTitle = entry.whatIsSectionTitle %}
    {% elseif hasGenericSectionTitle and entry.sectionTitle|length %}
        {% set sectionTitle = entry.sectionTitle %}
    {% elseif hasTypoSectionTitle and entry.sectioTitle|length %}
        {% set sectionTitle = entry.sectioTitle %}
    {% else %}
        {% set sectionTitle = null %}
    {% endif %}

    {% set sectionDescription = (fieldLayout.getFieldByHandle('whatIsSectionDescription') is not null and entry.whatIsSectionDescription|length)
        ? entry.whatIsSectionDescription
        : ((hasGenericSectionDescription and entry.sectionDescription|length) ? entry.sectionDescription : null) %}
    {% set block1Heading = (fieldLayout.getFieldByHandle('whatIsBlock1Heading') is not null and entry.whatIsBlock1Heading|length) ? entry.whatIsBlock1Heading : null %}
    {% set block1Paragraph1 = (fieldLayout.getFieldByHandle('whatIsBlock1Paragraph1') is not null and entry.whatIsBlock1Paragraph1|length) ? entry.whatIsBlock1Paragraph1 : null %}
    {% set block1Paragraph2 = (fieldLayout.getFieldByHandle('whatIsBlock1Paragraph2') is not null and entry.whatIsBlock1Paragraph2|length) ? entry.whatIsBlock1Paragraph2 : null %}
    {% set block1Image = (fieldLayout.getFieldByHandle('whatIsBlock1Image') is not null and entry.whatIsBlock1Image|length) ? entry.whatIsBlock1Image.one() : null %}
    {% set block2Heading = (fieldLayout.getFieldByHandle('whatIsBlock2Heading') is not null and entry.whatIsBlock2Heading|length) ? entry.whatIsBlock2Heading : null %}
    {% set block2Paragraph1 = (fieldLayout.getFieldByHandle('whatIsBlock2Paragraph1') is not null and entry.whatIsBlock2Paragraph1|length) ? entry.whatIsBlock2Paragraph1 : null %}
    {% set block2Paragraph2 = (fieldLayout.getFieldByHandle('whatIsBlock2Paragraph2') is not null and entry.whatIsBlock2Paragraph2|length) ? entry.whatIsBlock2Paragraph2 : null %}
    {% set block2Image = (fieldLayout.getFieldByHandle('whatIsBlock2Image') is not null and entry.whatIsBlock2Image|length) ? entry.whatIsBlock2Image.one() : null %}
    {% set showBlock1ImageFrame = (fieldLayout.getFieldByHandle('showBlock1ImageFrame') is not null) ? entry.showBlock1ImageFrame : ((fieldLayout.getFieldByHandle('showImageFrame') is not null) ? entry.showImageFrame : true) %}
    {% set showBlock2ImageFrame = (fieldLayout.getFieldByHandle('showBlock2ImageFrame') is not null) ? entry.showBlock2ImageFrame : ((fieldLayout.getFieldByHandle('showImageFrame') is not null) ? entry.showImageFrame : true) %}
    {% set testimonialQuote = (fieldLayout.getFieldByHandle('whatIsTestimonialQuote') is not null and entry.whatIsTestimonialQuote|length) ? entry.whatIsTestimonialQuote : null %}
    {% set testimonialAuthorName = (fieldLayout.getFieldByHandle('whatIsTestimonialAuthorName') is not null and entry.whatIsTestimonialAuthorName|length) ? entry.whatIsTestimonialAuthorName : null %}
    {% set testimonialTreatmentName = (fieldLayout.getFieldByHandle('whatIsTestimonialTreatmentName') is not null and entry.whatIsTestimonialTreatmentName|length) ? entry.whatIsTestimonialTreatmentName : null %}
    {% set testimonialInitials = (fieldLayout.getFieldByHandle('whatIsTestimonialInitials') is not null and entry.whatIsTestimonialInitials|length) ? entry.whatIsTestimonialInitials : null %}
    {% set testimonialStarCount = (fieldLayout.getFieldByHandle('whatIsTestimonialStarCount') is not null and entry.whatIsTestimonialStarCount) ? entry.whatIsTestimonialStarCount : 4 %}
    {% set harleyHeading = (fieldLayout.getFieldByHandle('whatIsHarleyHeading') is not null and entry.whatIsHarleyHeading|length) ? entry.whatIsHarleyHeading : null %}
    {% set harleyDescription = (fieldLayout.getFieldByHandle('whatIsHarleyDescription') is not null and entry.whatIsHarleyDescription|length) ? entry.whatIsHarleyDescription : null %}
    {% set harleyButtonText = (fieldLayout.getFieldByHandle('whatIsHarleyButtonText') is not null and entry.whatIsHarleyButtonText|length) ? entry.whatIsHarleyButtonText : null %}
    {% set harleyButtonUrl = (fieldLayout.getFieldByHandle('whatIsHarleyButtonUrl') is not null and entry.whatIsHarleyButtonUrl|length) ? entry.whatIsHarleyButtonUrl : null %}
    {% set heroBgRaw = null %}
    {% if fieldLayout.getFieldByHandle('whatIsTreatmentBackground') is not null %}
        {% set bgVal = attribute(entry, 'whatIsTreatmentBackground') %}
        {% if bgVal is defined and bgVal is not null and (bgVal.value ?? bgVal) %}{% set heroBgRaw = bgVal.value ?? bgVal %}{% endif %}
    {% endif %}
    {% if heroBgRaw is null and fieldLayout.getFieldByHandle('treatmentHeroBackground') is not null %}
        {% set bgVal = attribute(entry, 'treatmentHeroBackground') %}
        {% if bgVal is defined and bgVal is not null and (bgVal.value ?? bgVal) %}{% set heroBgRaw = bgVal.value ?? bgVal %}{% endif %}
    {% endif %}
    {% if heroBgRaw is null and fieldLayout.getFieldByHandle('treatmentheroBackground') is not null %}
        {% set bgVal = attribute(entry, 'treatmentheroBackground') %}
        {% if bgVal is defined and bgVal is not null and (bgVal.value ?? bgVal) %}{% set heroBgRaw = bgVal.value ?? bgVal %}{% endif %}
    {% endif %}
{% endif %}

{# Background: white | ebd5cb | fffaf7 (same as treatment hero); default navy – normalize (trim, lower) #}
{% set heroBgNorm = heroBgRaw ? (heroBgRaw|string|lower|trim) : '' %}
{% set whatIsBgClasses = {
  '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 = heroBgNorm and whatIsBgClasses[heroBgNorm] is defined ? whatIsBgClasses[heroBgNorm] : 'bg-navy' %}
{% set isLightBg = sectionBgClass != 'bg-navy' %}
{% set sectionHeadingClass = isLightBg ? 'text-navy' : 'text-white' %}
{% set sectionBodyClass = isLightBg ? 'text-charcoal' : 'text-white/90' %}
{# For dark navy background, make intro/description fully white for better contrast #}
{% set sectionMutedClass = isLightBg ? 'text-charcoal-light' : 'text-white' %}

{% set hasWhatIsContent = sectionLabel or sectionTitle or sectionDescription or block1Heading or block1Paragraph1 or block1Paragraph2 or block1Image or block2Heading or block2Paragraph1 or block2Paragraph2 or block2Image or testimonialQuote or testimonialAuthorName or testimonialTreatmentName or testimonialInitials or harleyHeading or harleyDescription or (harleyButtonText and harleyButtonUrl) %}
{% if hasWhatIsContent %}
<section class="relative {{ sectionBgClass }} py-20 lg:py-28 overflow-hidden">
    <div class="container-default relative z-10">
        {% if sectionLabel or sectionTitle or sectionDescription %}
        <div class="text-center mb-16 max-w-4xl mx-auto">
            {% 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="{{ sectionHeadingClass }} font-heading font-semibold mb-6">{{ sectionTitle }}</h2>
            {% endif %}
            {% if sectionDescription %}
            {# CKEditor/Rich Text outputs its own <p> tags.
               For navy background, inject an inline color on all <p> tags so they override the global app.css p colour. #}
            {% set descHtml = sectionDescription %}
            {% if not isLightBg %}
                {% set descHtml = descHtml|replace({'<p':'<p style="color:#ffffff !important;"'}) %}
            {% endif %}
            <div class="{{ sectionMutedClass }} text-base font-body max-w-2xl mx-auto leading-relaxed">
                {{ descHtml|raw }}
            </div>
            {% endif %}
        </div>
        {% endif %}

        {# First Dr Rachel block: text left, image right #}
        {% if block1Heading or block1Paragraph1 or block1Paragraph2 or block1Image %}
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-20">
            <div class="order-2 lg:order-1">
                {% if block1Heading %}
                <h2 class="{{ sectionHeadingClass }} font-heading text-2xl lg:text-3xl italic mb-8">{{ block1Heading }}</h2>
                {% endif %}
                {% if block1Paragraph1 %}
                <p class="{{ sectionBodyClass }} font-body text-[18px] leading-relaxed mb-6">{{ block1Paragraph1 }}</p>
                {% endif %}
                {% if block1Paragraph2 %}
                <p class="{{ sectionBodyClass }} font-body text-[18px] leading-relaxed">{{ block1Paragraph2 }}</p>
                {% endif %}
            </div>
            <div class="order-1 lg:order-2 relative">
                {% if showBlock1ImageFrame %}
                <div class="absolute -top-5 -left-5 w-full h-full border-2 border-gold/40 rounded-2xl pointer-events-none" aria-hidden="true"></div>
                <div class="absolute -bottom-5 -right-5 w-full h-full border-2 border-gold/20 rounded-2xl pointer-events-none" aria-hidden="true"></div>
                {% endif %}
                {% if block1Image %}
                    <div class="relative rounded-2xl overflow-hidden border {{ isLightBg ? 'border-navy/20' : 'border-white/20' }}">
                        {{ imageMacro.optimizedImage(block1Image, {
                            alt: block1Heading ? block1Heading : '',
                            class: 'w-full h-auto object-cover aspect-[3/4]',
                            loading: 'lazy',
                            width: block1Image.width,
                            height: block1Image.height,
                            sizes: '(max-width: 1024px) 100vw, 50vw'
                        }) }}
                    </div>
                {% else %}
                    <div class="rounded-2xl border {{ isLightBg ? 'border-navy/20' : 'border-white/20' }} aspect-[3/4] {{ isLightBg ? 'bg-cream/50' : 'bg-navy-light/50' }}"></div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {# Testimonial #}
        {% if testimonialQuote or testimonialAuthorName or testimonialTreatmentName or testimonialInitials %}
        <div class="mb-16 w-full shadow-elegant" style="background-color: #E7C3B3; border-radius:10px; padding:2rem 2.5rem;">
            <div class="flex flex-col lg:flex-row gap-12 items-center">
                {% if testimonialInitials %}
                <div class="flex-shrink-0">
                    <div class="w-32 h-32 lg:w-40 lg:h-40 rounded-full overflow-hidden border-4 border-white shadow-luxury bg-gradient-to-br from-gold to-gold-light flex items-center justify-center">
                        <span class="text-white text-4xl font-bold font-body">{{ testimonialInitials }}</span>
                    </div>
                </div>
                {% endif %}
                <div class="flex-1 text-center lg:text-left">
                    <div class="flex items-center justify-center lg:justify-start gap-2 mb-6">
                        {% for i in 1..5 %}
                            <i class="fa-{{ i <= testimonialStarCount ? 'solid' : 'regular' }} fa-star text-white text-xl" aria-hidden="true"></i>
                        {% endfor %}
                    </div>
                    {% if testimonialQuote %}
                    <blockquote class="italic mb-6" style="color:#22313E; font-weight:500; font-size:26px; line-height:1.3;">
                        {{ testimonialQuote }}
                    </blockquote>
                    {% endif %}
                    {% if testimonialAuthorName %}
                    <p style="color:#22313E; font-weight:500; font-size:24px;">{{ testimonialAuthorName }}</p>
                    {% endif %}
                    {% if testimonialTreatmentName %}
                    <p class="text-white text-sm font-medium tracking-wide">{{ testimonialTreatmentName }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}

        {# Second Dr Rachel block: image left, text right #}
        {% if block2Heading or block2Paragraph1 or block2Paragraph2 or block2Image %}
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-20">
            <div class="relative">
                {% if showBlock2ImageFrame %}
                <div class="absolute -top-5 -left-5 w-full h-full border-2 border-gold/40 rounded-2xl pointer-events-none" aria-hidden="true"></div>
                <div class="absolute -bottom-5 -right-5 w-full h-full border-2 border-gold/20 rounded-2xl pointer-events-none" aria-hidden="true"></div>
                {% endif %}
                {% if block2Image %}
                    <div class="relative rounded-2xl overflow-hidden border {{ isLightBg ? 'border-navy/20' : 'border-white/20' }}">
                        {{ imageMacro.optimizedImage(block2Image, {
                            alt: block2Heading|length ? block2Heading : '',
                            class: 'w-full h-auto object-cover aspect-[3/4]',
                            loading: 'lazy',
                            width: block2Image.width,
                            height: block2Image.height,
                            sizes: '(max-width: 1024px) 100vw, 50vw'
                        }) }}
                    </div>
                {% else %}
                    <div class="rounded-2xl border {{ isLightBg ? 'border-navy/20' : 'border-white/20' }} aspect-[3/4] {{ isLightBg ? 'bg-cream/50' : 'bg-navy-light/50' }}"></div>
                {% endif %}
            </div>
            <div>
                {% if block2Heading %}
                <h2 class="{{ sectionHeadingClass }} font-heading text-2xl lg:text-3xl italic mb-8">{{ block2Heading }}</h2>
                {% endif %}
                {% if block2Paragraph1 %}
                <p class="{{ sectionBodyClass }} font-body text-[18px] leading-relaxed mb-6">{{ block2Paragraph1 }}</p>
                {% endif %}
                {% if block2Paragraph2 %}
                <p class="{{ sectionBodyClass }} font-body text-[18px] leading-relaxed">{{ block2Paragraph2 }}</p>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {# Harley Street CTA box #}
        {% if harleyHeading or harleyDescription or (harleyButtonText and harleyButtonUrl) %}
        <div class="w-full p-8 lg:p-12 shadow-elegant text-left" style="background-color: #EBD5CB; border-radius:10px;">
            {% if harleyHeading %}
            <h3 class="font-heading mb-6" style="color:#22313E; font-weight:500; font-size:35px;">{{ harleyHeading }}</h3>
            {% endif %}
            {% if harleyDescription %}
            <p class="font-body leading-relaxed mb-10" style="color:#22313E; font-size:20px; font-weight:400; max-width:40rem; line-height:1.3;">
                {{ harleyDescription }}
            </p>
            {% endif %}
            {% if harleyButtonText and harleyButtonUrl %}
            <a href="{{ harleyButtonUrl }}" class="inline-block text-white font-body font-semibold px-8 py-3.5 rounded transition-colors duration-300" style="background-color:#22313E;">
                {{ harleyButtonText }}
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</section>
{% endif %}