{# Import smart link macro for intelligent URL handling #}
{% import "../../includes/macros/smart-link.html" as links %}

{% set c = module.content %}
{% set s = module.style %}
{% set colors = module.colors %}
{% set spacing = module.spacing %}
{% set a = module.advanced %}

{# Build CSS classes #}
{% set module_classes = "split-content" %}
{% set module_classes = module_classes ~ " split-content--media-" ~ c.media_position %}
{% if s.stack_on_mobile %}
  {% set module_classes = module_classes ~ " split-content--stack" %}
{% endif %}
{% if s.reverse_stack %}
  {% set module_classes = module_classes ~ " split-content--reverse-stack" %}
{% endif %}
{% if a.custom_class %}
  {% set module_classes = module_classes ~ " " ~ a.custom_class %}
{% endif %}

{# Image URL handling #}
{% if c.media_type == "image" and c.image and c.image.src %}
  {% set img_raw = c.image.src %}
  {% if '../../images/' in img_raw %}
    {% set img_url = get_asset_url(img_raw) %}
  {% else %}
    {% set img_url = img_raw %}
  {% endif %}
  {% set img_width = c.image.width|default(600) %}
  {% set img_height = c.image.height|default(400) %}
{% endif %}

{# Video thumbnail handling #}
{% if c.media_type == "video" and c.video_thumbnail and c.video_thumbnail.src %}
  {% set thumb_raw = c.video_thumbnail.src %}
  {% if '../../images/' in thumb_raw %}
    {% set thumb_url = get_asset_url(thumb_raw) %}
  {% else %}
    {% set thumb_url = thumb_raw %}
  {% endif %}
{% endif %}

{# Parse video URL for embed #}
{% if c.media_type == "video" and c.video_url %}
  {% set video_id = "" %}
  {% set video_platform = "" %}
  {% if "youtube.com" in c.video_url or "youtu.be" in c.video_url %}
    {% set video_platform = "youtube" %}
    {% if "v=" in c.video_url %}
      {% set video_id = c.video_url|split("v=")|last|split("&")|first %}
    {% elif "youtu.be/" in c.video_url %}
      {% set video_id = c.video_url|split("youtu.be/")|last|split("?")|first %}
    {% endif %}
  {% elif "vimeo.com" in c.video_url %}
    {% set video_platform = "vimeo" %}
    {% set video_id = c.video_url|split("vimeo.com/")|last|split("?")|first %}
  {% endif %}
{% endif %}

<section class="{{ module_classes }}"
         {% if a.custom_id %}id="{{ a.custom_id }}"{% endif %}
         style="
           --split-gap: {{ s.gap }};
           --split-media-width: {{ s.media_width }};
           --split-align: {{ s.vertical_align }};
           --split-radius: {{ s.media_border_radius }};
           --split-eyebrow: {{ colors.eyebrow_color.color }};
           --split-heading: {{ colors.heading_color.color }};
           --split-text: {{ colors.text_color.color }};
           --split-bg: {{ colors.background_color.css }};
           --split-pt: {{ spacing.padding_top }};
           --split-pb: {{ spacing.padding_bottom }};
           {% if s.media_aspect_ratio != 'auto' %}--split-aspect: {{ s.media_aspect_ratio }};{% endif %}
         ">

  {# Media Column #}
  <div class="split-content__media split-content__media--shadow-{{ s.media_shadow }}">
    {% if c.media_type == "image" and img_url %}
      <img src="{{ img_url }}"
           alt="{{ c.image.alt|default('', true)|escape }}"
           width="{{ img_width }}"
           height="{{ img_height }}"
           {% if a.lazy_load %}loading="lazy"{% else %}loading="eager" fetchpriority="high"{% endif %}
           decoding="async"
           class="split-content__image">

    {% elif c.media_type == "video" and video_id %}
      <div class="split-content__video" data-platform="{{ video_platform }}" data-video-id="{{ video_id }}">
        {# Facade pattern: show thumbnail until click #}
        <button class="split-content__video-play" aria-label="Play video">
          {% if thumb_url %}
            <img src="{{ thumb_url }}"
                 alt="Video thumbnail"
                 width="{{ c.video_thumbnail.width|default(640) }}"
                 height="{{ c.video_thumbnail.height|default(360) }}"
                 loading="lazy"
                 decoding="async"
                 class="split-content__video-thumb">
          {% else %}
            {# Auto-fetch YouTube thumbnail #}
            {% if video_platform == "youtube" %}
              <img src="https://img.youtube.com/vi/{{ video_id }}/maxresdefault.jpg"
                   alt="Video thumbnail"
                   width="1280"
                   height="720"
                   loading="lazy"
                   decoding="async"
                   class="split-content__video-thumb">
            {% endif %}
          {% endif %}
          <span class="split-content__play-icon" aria-hidden="true">
            <svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="34" cy="34" r="34" fill="rgba(0,0,0,0.7)"/>
              <path d="M28 22L48 34L28 46V22Z" fill="white"/>
            </svg>
          </span>
        </button>
        <div class="split-content__video-embed"></div>
      </div>

    {% elif c.media_type == "code" and c.code_content %}
      <div class="split-content__code">
        <pre><code class="language-{{ c.code_language }}">{{ c.code_content|escape }}</code></pre>
      </div>
    {% endif %}
  </div>

  {# Content Column #}
  <div class="split-content__content">
    {% if c.eyebrow %}
      <p class="split-content__eyebrow">{{ c.eyebrow|escape }}</p>
    {% endif %}

    <{{ c.heading_level }} class="split-content__heading">{{ c.heading|escape }}</{{ c.heading_level }}>

    {% if c.body_content %}
      <div class="split-content__body">{{ c.body_content }}</div>
    {% endif %}

    {# CTAs - Using smart link macro for intelligent URL handling.
       Either CTA can render on its own; each guards on its own .url.href. #}
    {% if (c.cta_primary.text and c.cta_primary.url.href) or (c.cta_secondary.text and c.cta_secondary.url.href) %}
      <div class="split-content__actions">
        {% if c.cta_primary.text and c.cta_primary.url.href %}
          <a href="{{ c.cta_primary.url.href }}"
             class="button {% if c.cta_primary.style == 'solid' %}btn-primary{% elif c.cta_primary.style == 'outline' %}btn-secondary{% else %}btn-ghost{% endif %}"
             {{ links.attrs(c.cta_primary.url.href) }}>
            {{ c.cta_primary.text|escape }}
          </a>
        {% endif %}

        {% if c.cta_secondary.text and c.cta_secondary.url.href %}
          <a href="{{ c.cta_secondary.url.href }}"
             class="split-content__link"
             {{ links.attrs(c.cta_secondary.url.href) }}>
            {{ c.cta_secondary.text|escape }}
            <span aria-hidden="true">→</span>
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>
</section>

{% require_css %}
<style>
  .split-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--split-gap, 48px);
    align-items: var(--split-align, center);
    padding: var(--split-pt, 48px) 0 var(--split-pb, 48px);
    background-color: var(--split-bg, transparent);
  }

  /* Stack order on mobile */
  .split-content--stack.split-content--media-left .split-content__media { order: 1; }
  .split-content--stack.split-content--media-left .split-content__content { order: 2; }
  .split-content--stack.split-content--media-right .split-content__media { order: 1; }
  .split-content--stack.split-content--media-right .split-content__content { order: 2; }

  /* Reverse stack puts content first on mobile only — scoped so it can't leak the
     order into the desktop grid (the !important version always beat the desktop reset). */
  @media (max-width: {{ theme.core.layout.mobile_breakpoint or 992 }}px) {
    .split-content--reverse-stack .split-content__content { order: 1; }
    .split-content--reverse-stack .split-content__media { order: 2; }
  }

  /* Media styles */
  .split-content__media {
    width: 100%;
    overflow: hidden;
    border-radius: var(--split-radius, 12px);
  }

  .split-content__media--shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .split-content__media--shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
  .split-content__media--shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }

  .split-content__image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: var(--split-aspect, auto);
    object-fit: cover;
  }

  /* Video facade */
  .split-content__video {
    position: relative;
    aspect-ratio: var(--split-aspect, 16/9);
    background: #000;
    overflow: hidden;
  }

  .split-content__video-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .split-content__video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .split-content__play-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease;
  }

  .split-content__video-play:hover .split-content__play-icon {
    transform: scale(1.1);
  }

  .split-content__video-embed {
    display: none;
    position: absolute;
    inset: 0;
  }

  .split-content__video-embed.active {
    display: block;
  }

  .split-content__video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* Code block */
  .split-content__code {
    background: #1e293b;
    border-radius: var(--split-radius, 12px);
    overflow: hidden;
    aspect-ratio: var(--split-aspect, auto);
  }

  .split-content__code pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.7;
  }

  .split-content__code code {
    color: #e2e8f0;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  }

  /* Content styles */
  .split-content__content {
    max-width: 540px;
  }

  .split-content__eyebrow {
    color: var(--split-eyebrow, var(--color-primary, #3b82f6));
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
  }

  .split-content__heading {
    color: var(--split-heading, var(--color-text, #111827));
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    font-weight: 700;
  }

  .split-content__body {
    color: var(--split-text, var(--color-text-secondary, #4b5563));
    font-size: 1rem;
    line-height: 1.7;
  }

  .split-content__body > *:first-child { margin-top: 0; }
  .split-content__body > *:last-child { margin-bottom: 0; }

  .split-content__body ul,
  .split-content__body ol {
    padding-left: 1.25rem;
    margin: 1rem 0;
  }

  .split-content__body li {
    margin-bottom: 0.5rem;
  }

  .split-content__body li::marker {
    color: var(--split-eyebrow, var(--color-primary, #3b82f6));
  }

  .split-content__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
  }

  .split-content__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--split-heading, var(--color-text, #111827));
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: gap 0.2s ease;
  }

  .split-content__link:hover {
    gap: 0.75rem;
  }

  /* Ghost button fallback */
  .split-content .btn-ghost {
    background: transparent;
    color: var(--split-heading, var(--color-text, #111827));
    border: 2px solid currentColor;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }

  .split-content .btn-ghost:hover {
    background: rgba(0,0,0,0.05);
  }

  /* Desktop layout */
  @media (min-width: 993px) {
    .split-content {
      grid-template-columns: var(--split-media-width, 50%) 1fr;
    }

    .split-content--media-right {
      grid-template-columns: 1fr var(--split-media-width, 50%);
    }

    .split-content--media-right .split-content__media {
      order: 2;
    }

    .split-content--media-right .split-content__content {
      order: 1;
    }

    /* Reset mobile stack overrides for left position */
    .split-content--stack.split-content--media-left .split-content__media,
    .split-content--reverse-stack .split-content__media {
      order: unset;
    }

    .split-content--stack.split-content--media-left .split-content__content,
    .split-content--reverse-stack .split-content__content {
      order: unset;
    }

    /* Restore correct desktop order for right position (needs higher specificity than mobile stack rules) */
    .split-content--stack.split-content--media-right .split-content__media {
      order: 2;
    }

    .split-content--stack.split-content--media-right .split-content__content {
      order: 1;
    }

    .split-content__content {
      padding: 0 1rem;
    }
  }

  /* Large screens */
  @media (min-width: 993px) {
    .split-content__heading {
      font-size: 2.25rem;
    }

    .split-content__body {
      font-size: 1.125rem;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .split-content__play-icon,
    .split-content__link {
      transition: none;
    }
  }

  /* Print styles */
  @media print {
    .split-content {
      display: block;
      padding: 1rem 0;
    }

    .split-content__media {
      max-width: 50%;
      float: left;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }

    .split-content__video {
      display: none;
    }
  }

  {# Dark mode — the heading/body/link colors come from fields defaulting to dark
     hex values, so the var(--color-text) fallbacks never engage; restore theme
     tokens in dark mode. Gated by the theme setting. #}
  {% if theme.dark_mode.enabled %}
  @media (prefers-color-scheme: dark) {
    .split-content__heading,
    .split-content__link {
      color: var(--color-text);
    }
    .split-content__body {
      color: var(--color-text-secondary);
    }
  }
  {% endif %}
</style>
{% end_require_css %}

{# Video facade script - only included when video is present #}
{% if c.media_type == "video" and video_id %}
{% require_js position="footer" defer=true %}
<script>
(function() {
  document.querySelectorAll('.split-content__video-play').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var container = btn.closest('.split-content__video');
      var platform = container.dataset.platform;
      var videoId = container.dataset.videoId;
      var embedDiv = container.querySelector('.split-content__video-embed');
      var iframe;

      if (platform === 'youtube') {
        iframe = document.createElement('iframe');
        iframe.src = 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0';
        iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
        iframe.allowFullscreen = true;
      } else if (platform === 'vimeo') {
        iframe = document.createElement('iframe');
        iframe.src = 'https://player.vimeo.com/video/' + videoId + '?autoplay=1';
        iframe.allow = 'autoplay; fullscreen; picture-in-picture';
        iframe.allowFullscreen = true;
      }

      if (iframe) {
        embedDiv.appendChild(iframe);
        embedDiv.classList.add('active');
        btn.style.display = 'none';
      }
    });
  });
})();
</script>
{% end_require_js %}
{% endif %}