{#
 # About Doctor Component (Dynamic)
 # Luxury navy/gold design showcasing the practitioner
 #
 # Fields Expected:
 # - sectionLabel (Plain Text) - e.g., "Meet Your Doctor"
 # - heading (Plain Text) - Main heading
 # - description (Rich Text) - Main content paragraphs
 # - image (Asset) - Doctor's photo
 # - ctaButtons (Entries) - Optional CTA buttons (callToAction entries)
 # - backgroundScheme (Dropdown) - Uses same options as flexible section
 # - imagePosition (Dropdown) - "left", "center", "right"
 # - showImageFrame (Lightswitch) - Yes/No toggle for the decorative gold frame around the image (default: true)
 #
 # Usage: 
 #   {% include 'components/about-doctor.twig' with { block: block } %}
 #   OR for standalone: {% include 'components/about-doctor.twig' %}
 #}

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

{% set doctorBlock = block ?? entry ?? null %}

{# Get field values – no default copy; only show fields that have content #}
{% set sectionLabel = doctorBlock.sectionLabel is defined and doctorBlock.sectionLabel|length ? doctorBlock.sectionLabel : null %}
{% set heading = doctorBlock.heading is defined and doctorBlock.heading|length ? doctorBlock.heading : null %}
{% set description = doctorBlock.description is defined and doctorBlock.description|length ? doctorBlock.description : null %}
{% set doctorImage = doctorBlock.image is defined and doctorBlock.image|length ? doctorBlock.image.one() : null %}
{% set ctaButtons = doctorBlock.ctaButtons ?? null %}
{% set backgroundSchemeRaw = doctorBlock.backgroundScheme.value ?? doctorBlock.backgroundScheme ?? 'whiteClean' %}
{% set imagePositionRaw = doctorBlock.imagePosition.value ?? doctorBlock.imagePosition ?? 'left' %}
{% set showImageFrame = doctorBlock.showImageFrame is defined ? doctorBlock.showImageFrame : true %}

{# Normalize dropdown values #}
{% set backgroundScheme = backgroundSchemeRaw|string %}
{% set imagePosition = imagePositionRaw|string %}

{# Background classes - separate from text color to avoid cascading issues #}
{% set bgClasses = {
  'navyDark': 'bg-gradient-navy',
  'creamLight': 'bg-cream',
  'whiteClean': 'bg-white',
  'beigeWarm': 'bg-beige',
  'goldLuxury': 'bg-gradient-gold',
  'gradientNavy': 'bg-gradient-navy',
  'gradientGold': 'bg-gradient-gold',
  'transparent': 'bg-transparent'
} %}

{# Text color classes - applied individually to elements, not to section #}
{% set textColorClasses = {
  'navyDark': 'text-white',
  'creamLight': 'text-navy',
  'whiteClean': 'text-navy',
  'beigeWarm': 'text-navy',
  'goldLuxury': 'text-navy',
  'gradientNavy': 'text-white',
  'gradientGold': 'text-navy',
  'transparent': 'text-navy'
} %}

{# Image position classes #}
{% set imageOrderClasses = {
  'left': '',
  'center': 'lg:order-2',
  'right': 'lg:order-last'
} %}

{# Image alignment classes for center position #}
{% set imageAlignClasses = {
  'left': '',
  'center': 'mx-auto',
  'right': 'ml-auto'
} %}

{% set sectionBgClass = bgClasses[backgroundScheme] ?? bgClasses['whiteClean'] %}
{% set sectionTextColor = textColorClasses[backgroundScheme] ?? textColorClasses['whiteClean'] %}
{% set isNavySection = backgroundScheme == 'navyDark' or backgroundScheme == 'gradientNavy' %}
{% set hasDoctorContent = sectionLabel or heading or description or doctorImage or (ctaButtons and ctaButtons.exists()) %}

{% if hasDoctorContent %}
<section class="section-luxury relative overflow-hidden {{ sectionBgClass }}">
    <!-- Decorative corner accents -->
    <div class="absolute top-0 right-0 w-64 h-64 bg-beige/30 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
    <div class="absolute bottom-0 left-0 w-48 h-48 bg-gold/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div>
    
    <div class="container-default relative">
        {% if imagePosition == 'center' %}
        {# Center layout: Image on top, content below #}
        <div class="max-w-4xl mx-auto">
            <!-- Image centered at top -->
            <div class="relative mb-12 {{ imageAlignClasses[imagePosition] ?? 'mx-auto' }} max-w-md">
                {% if showImageFrame %}
                <!-- Decorative gold frame behind image -->
                <div class="absolute -top-5 -left-5 w-full h-full border-2 border-gold/40 rounded-2xl"></div>
                <div class="absolute -bottom-5 -right-5 w-full h-full border-2 border-gold/20 rounded-2xl"></div>
                {% endif %}
                
                <!-- Main image container -->
                {% if doctorImage %}
                <div class="relative rounded-2xl overflow-hidden shadow-xl">
                    {{ imageMacro.optimizedImage(doctorImage, {
                      alt: doctorImage.alt|length ? doctorImage.alt : (heading|length ? heading : ''),
                      class: 'w-full h-auto object-cover',
                      loading: 'lazy',
                      width: doctorImage.width,
                      height: doctorImage.height,
                      sizes: '(max-width: 1024px) 100vw, 400px'
                    }) }}
                    <!-- Subtle gradient overlay -->
                    <div class="absolute inset-0 bg-gradient-to-t from-navy/15 to-transparent"></div>
                </div>
                {% else %}
                <div class="relative rounded-2xl overflow-hidden shadow-xl bg-beige-light aspect-[4/5]"></div>
                {% endif %}
            </div>
            
            <!-- Content centered below image -->
            <div class="text-center">
                <!-- Section label with gold accent -->
                {% if sectionLabel %}
                <div class="flex items-center justify-center gap-4 mb-6">
                    <div class="w-12 h-px bg-gold"></div>
                    <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ sectionLabel }}</p>
                </div>
                {% endif %}
                
                <!-- Main heading -->
                {% if heading %}
                <h2 class="italic mb-10 leading-snug {{ sectionTextColor }}">
                    {{ heading }}
                </h2>
                {% endif %}
                
                <!-- Content paragraphs -->
                {% if description %}
                <div class="space-y-6 mb-12 prose prose-lg max-w-none mx-auto {{ sectionTextColor }}">
                    {{ description }}
                </div>
                {% endif %}
                
                <!-- CTA Buttons -->
                {% if ctaButtons and ctaButtons.exists() %}
                <div class="mb-6 flex flex-col sm:flex-row gap-5 justify-center">
                    {% for button in ctaButtons.all() %}
                        {% include 'components/cta-button.twig' with { 'cta': button } %}
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% else %}
        {# Side-by-side layout: Image left or right, content on opposite side #}
        <div class="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
            <!-- Image Side (Left or Right based on imagePosition) -->
            <div class="relative {{ imageOrderClasses[imagePosition] ?? '' }}">
                {% if showImageFrame %}
                <!-- Decorative gold frame behind image -->
                <div class="absolute -top-5 -left-5 w-full h-full border-2 border-gold/40 rounded-2xl"></div>
                <div class="absolute -bottom-5 -right-5 w-full h-full border-2 border-gold/20 rounded-2xl"></div>
                {% endif %}
                
                <!-- Main image container -->
                {% if doctorImage %}
                <div class="relative rounded-2xl overflow-hidden shadow-xl">
                    {{ imageMacro.optimizedImage(doctorImage, {
                      alt: doctorImage.alt|length ? doctorImage.alt : (heading|length ? heading : ''),
                      class: 'w-full h-auto object-cover',
                      loading: 'lazy',
                      width: doctorImage.width,
                      height: doctorImage.height,
                      srcset: [
                        {width: 300},
                        {width: 400}
                      ],
                      sizes: '(max-width: 640px) 100vw, 364px'
                    }) }}
                    <!-- Subtle gradient overlay -->
                    <div class="absolute inset-0 bg-gradient-to-t from-navy/15 to-transparent"></div>
                </div>
                {% else %}
                <div class="relative rounded-2xl overflow-hidden shadow-xl bg-beige-light aspect-[4/5]"></div>
                {% endif %}
            </div>
            
            <!-- Content Side -->
            <div class="lg:pl-8 {{ imagePosition == 'right' ? 'lg:pr-8 lg:pl-0' : '' }}">
                <!-- Section label with gold accent -->
                {% if sectionLabel %}
                <div class="flex items-center gap-4 mb-6">
                    <div class="w-12 h-px bg-gold"></div>
                    <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ sectionLabel }}</p>
                </div>
                {% endif %}
                
                <!-- Main heading -->
                {% if heading %}
                <h2 class="italic mb-10 leading-snug {{ sectionTextColor }}">
                    {{ heading }}
                </h2>
                {% endif %}
                
                <!-- Content paragraphs -->
                {% if description %}
                <div class="space-y-6 mb-12 prose prose-lg max-w-none {{ sectionTextColor }}">
                    {{ description }}
                </div>
                {% endif %}
                
                <!-- CTA Buttons -->
                {% if ctaButtons and ctaButtons.exists() %}
                <div class="mb-6 flex flex-col sm:flex-row gap-5">
                    {% for button in ctaButtons.all() %}
                        {% include 'components/cta-button.twig' with { 'cta': button } %}
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</section>
{% endif %}