{#
 # Video Section Component (single-row YouTube embed)
 #
 # Recommended block handle: videoSection
 # Recommended fields on the block:
 # - sectionHeading (Plain Text, optional)
 # - sectionDescription (Text Area, optional)
 # - heroYoutubeUrl (Plain Text/URL, required for output)
 # - treatmentHeroBackground (Dropdown, optional; reuse existing background dropdown)
 #}

{% set source = block ?? entry %}
{% set bl = source.getFieldLayout() %}

{% set sectionHeading = (bl and bl.getFieldByHandle('sectionHeading') is not null and attribute(source, 'sectionHeading')|length)
    ? attribute(source, 'sectionHeading')
    : ((bl and bl.getFieldByHandle('plainText') is not null and attribute(source, 'plainText')|length) ? attribute(source, 'plainText') : null) %}
{% set sectionDescription = (bl and bl.getFieldByHandle('sectionDescription') is not null and attribute(source, 'sectionDescription')|length)
    ? attribute(source, 'sectionDescription')
    : ((bl and bl.getFieldByHandle('textArea') is not null and attribute(source, 'textArea')|length) ? attribute(source, 'textArea') : null) %}
{% set videoLayoutVal = source.videoLayout ?? null %}
{% set videoLayout = (videoLayoutVal.value ?? videoLayoutVal ?? 'onevideo')|string|lower|trim %}
{% set isTwoVideoChoice = videoLayout in ['two', 'twovideo', 'twovideos', '2'] %}

{% set ytVal = source.heroYoutubeUrl ?? null %}
{% set ytRaw = '' %}
{% if ytVal %}
    {% if ytVal.url is defined %}
        {% set ytRaw = ytVal.url %}
    {% elseif ytVal.value is defined and ytVal.value.url is defined %}
        {% set ytRaw = ytVal.value.url %}
    {% elseif ytVal.value is defined %}
        {% set ytRaw = ytVal.value %}
    {% else %}
        {% set ytRaw = ytVal %}
    {% endif %}
{% endif %}
{% set ytRaw = ytRaw ? (ytRaw|string|trim) : '' %}

{% set ytVal2 = source.heroYoutubeUrl2 ?? null %}
{% set ytRaw2 = '' %}
{% if ytVal2 %}
    {% if ytVal2.url is defined %}
        {% set ytRaw2 = ytVal2.url %}
    {% elseif ytVal2.value is defined and ytVal2.value.url is defined %}
        {% set ytRaw2 = ytVal2.value.url %}
    {% elseif ytVal2.value is defined %}
        {% set ytRaw2 = ytVal2.value %}
    {% else %}
        {% set ytRaw2 = ytVal2 %}
    {% endif %}
{% endif %}
{% set ytRaw2 = ytRaw2 ? (ytRaw2|string|trim) : '' %}

{% set videoId = null %}
{% if ytRaw %}
    {% if 'youtu.be/' in ytRaw %}
        {% set videoId = ytRaw|split('youtu.be/')|last|split('?')|first|split('#')|first|trim %}
    {% elseif 'watch?v=' in ytRaw %}
        {% set videoId = ytRaw|split('watch?v=')|last|split('&')|first|split('#')|first|trim %}
    {% elseif 'v=' in ytRaw %}
        {% set videoId = ytRaw|split('v=')|last|split('&')|first|split('#')|first|trim %}
    {% elseif 'embed/' in ytRaw %}
        {% set videoId = ytRaw|split('embed/')|last|split('?')|first|split('#')|first|trim %}
    {% elseif 'youtube.com/live/' in ytRaw %}
        {% set videoId = ytRaw|split('youtube.com/live/')|last|split('?')|first|split('#')|first|split('/')|first|trim %}
    {% elseif 'youtube.com/shorts/' in ytRaw %}
        {% set videoId = ytRaw|split('youtube.com/shorts/')|last|split('?')|first|split('#')|first|split('/')|first|trim %}
    {% elseif ytRaw|length == 11 and '/' not in ytRaw and ' ' not in ytRaw %}
        {% set videoId = ytRaw %}
    {% endif %}
{% endif %}
{% set embedSrc = null %}
{% if videoId %}
    {% set embedSrc = 'https://www.youtube-nocookie.com/embed/' ~ videoId %}
{% elseif 'youtube-nocookie.com/embed/' in ytRaw or 'youtube.com/embed/' in ytRaw %}
    {% set embedSrc = ytRaw %}
{% endif %}

{% set videoId2 = null %}
{% if ytRaw2 %}
    {% if 'youtu.be/' in ytRaw2 %}
        {% set videoId2 = ytRaw2|split('youtu.be/')|last|split('?')|first|split('#')|first|trim %}
    {% elseif 'watch?v=' in ytRaw2 %}
        {% set videoId2 = ytRaw2|split('watch?v=')|last|split('&')|first|split('#')|first|trim %}
    {% elseif 'v=' in ytRaw2 %}
        {% set videoId2 = ytRaw2|split('v=')|last|split('&')|first|split('#')|first|trim %}
    {% elseif 'embed/' in ytRaw2 %}
        {% set videoId2 = ytRaw2|split('embed/')|last|split('?')|first|split('#')|first|trim %}
    {% elseif 'youtube.com/live/' in ytRaw2 %}
        {% set videoId2 = ytRaw2|split('youtube.com/live/')|last|split('?')|first|split('#')|first|split('/')|first|trim %}
    {% elseif 'youtube.com/shorts/' in ytRaw2 %}
        {% set videoId2 = ytRaw2|split('youtube.com/shorts/')|last|split('?')|first|split('#')|first|split('/')|first|trim %}
    {% elseif ytRaw2|length == 11 and '/' not in ytRaw2 and ' ' not in ytRaw2 %}
        {% set videoId2 = ytRaw2 %}
    {% endif %}
{% endif %}
{% set embedSrc2 = null %}
{% if videoId2 %}
    {% set embedSrc2 = 'https://www.youtube-nocookie.com/embed/' ~ videoId2 %}
{% elseif 'youtube-nocookie.com/embed/' in ytRaw2 or 'youtube.com/embed/' in ytRaw2 %}
    {% set embedSrc2 = ytRaw2 %}
{% endif %}

{# Background dropdown (reuse treatmentHeroBackground) #}
{% set videoBgRaw = null %}
{% if bl and bl.getFieldByHandle('treatmentHeroBackground') is not null %}
    {% set bgVal = attribute(source, 'treatmentHeroBackground') %}
    {% if bgVal is not null and (bgVal.value ?? bgVal) %}
        {% set videoBgRaw = bgVal.value ?? bgVal %}
    {% endif %}
{% endif %}
{% set bgNorm = videoBgRaw ? (videoBgRaw|string|lower|trim) : '' %}
{% set videoBgClasses = {
  'white': 'bg-white',
  'ebd5cb': 'bg-beige',
  'fffaf7': 'bg-cream',
  'f2e5de': 'bg-beige-soft',
  'navy': 'bg-navy',
  'option 1': 'bg-white',
  'option1': 'bg-white',
  '1': 'bg-white',
  'option 2': 'bg-cream',
  'option2': 'bg-cream',
  '2': 'bg-cream',
  'option 3': 'bg-beige',
  'option3': 'bg-beige',
  '3': 'bg-beige'
} %}
{% set sectionBgClass = bgNorm and videoBgClasses[bgNorm] is defined ? videoBgClasses[bgNorm] : 'bg-cream' %}
{% set isDarkBg = sectionBgClass == 'bg-navy' %}
{% set headingClass = isDarkBg ? 'text-white' : 'text-navy' %}
{% set bodyClass = isDarkBg ? 'text-white/90' : 'text-charcoal-light' %}
{% set compactTop = compactTop|default(false) %}
{% set videoSectionPadding = compactTop ? 'pt-6 lg:pt-8 pb-12 lg:pb-16' : 'py-12 lg:py-16' %}

{% if sectionHeading or sectionDescription or ytRaw or ytRaw2 %}
{% set ytEmbedQuery = 'autoplay=0' ~
    '&controls=0' ~
    '&modestbranding=1' ~
    '&rel=0' ~
    '&fs=0' ~
    '&iv_load_policy=3' ~
    '&disablekb=1' ~
    '&playsinline=1' ~
    '&cc_load_policy=0' %}

<section class="relative {{ sectionBgClass }} {{ videoSectionPadding }} overflow-hidden">
    <div class="container-default">
        {% if sectionHeading or sectionDescription %}
        <div class="max-w-3xl mx-auto text-center mb-8 lg:mb-10">
            {% if sectionHeading %}
            <h2 class="{{ headingClass }} text-2xl md:text-4xl lg:text-5xl font-heading mb-4">{{ sectionHeading }}</h2>
            {% endif %}
            {% if sectionDescription %}
            <p class="{{ bodyClass }} text-base lg:text-lg leading-relaxed">{{ sectionDescription }}</p>
            {% endif %}
        </div>
        {% endif %}

        {% set isTwoVideoLayout = isTwoVideoChoice and (embedSrc2 or ytRaw2) %}
        <div class="{% if isTwoVideoLayout %}grid md:grid-cols-2 gap-6{% endif %}">
            <div class="relative rounded-3xl overflow-hidden shadow-luxury" style="box-shadow: 0 8px 25px 1px rgba(0, 0, 0, 0.30);">
                <div class="relative w-full pt-[56.25%] bg-navy">
                    {% if embedSrc %}
                        <iframe
                            class="absolute inset-0 w-full h-full border-0"
                            src="{{ embedSrc }}{% if '?' in embedSrc %}&{% else %}?{% endif %}{{ ytEmbedQuery }}"
                            title="{{ sectionHeading|length ? sectionHeading : 'Video' }}"
                            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen"
                            referrerpolicy="strict-origin-when-cross-origin"
                            allowfullscreen
                            loading="lazy"
                        ></iframe>
                    {% endif %}
                </div>
            </div>
            {% if isTwoVideoLayout %}
            <div class="relative rounded-3xl overflow-hidden shadow-luxury" style="box-shadow: 0 8px 25px 1px rgba(0, 0, 0, 0.30);">
                <div class="relative w-full pt-[56.25%] bg-navy">
                    {% if embedSrc2 %}
                        <iframe
                            class="absolute inset-0 w-full h-full border-0"
                            src="{{ embedSrc2 }}{% if '?' in embedSrc2 %}&{% else %}?{% endif %}{{ ytEmbedQuery }}"
                            title="{{ sectionHeading|length ? sectionHeading ~ ' Video 2' : 'Video 2' }}"
                            allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen"
                            referrerpolicy="strict-origin-when-cross-origin"
                            allowfullscreen
                            loading="lazy"
                        ></iframe>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endif %}