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

{% set c = module.content %}
{% set i = module.images %}
{% set l = module.layout %}
{% set a = module.advanced %}

{# Get image URLs - HubSpot image fields have a .src property #}
{# When an image is selected in the editor, it will have a .src property #}
{# When using defaults from fields.json, we need to apply get_asset_url #}

{# Mobile image #}
{% if i.mobile_image and i.mobile_image.src %}
  {# Image is set (either from editor or default) #}
  {% set mobile_img_raw = i.mobile_image.src %}
  {# Check if it's a relative path from default that needs get_asset_url #}
  {% if '../../images/' in mobile_img_raw %}
    {% set mobile_img_url = get_asset_url(mobile_img_raw) %}
  {% else %}
    {# It's already a full URL from the editor #}
    {% set mobile_img_url = mobile_img_raw %}
  {% endif %}
{% endif %}

{# Desktop background #}
{% if i.desktop_background and i.desktop_background.src %}
  {# Image is set (either from editor or default) #}
  {% set desktop_bg_raw = i.desktop_background.src %}
  {# Check if it's a relative path from default that needs get_asset_url #}
  {% if '../../images/' in desktop_bg_raw %}
    {% set desktop_bg_url = get_asset_url(desktop_bg_raw) %}
  {% else %}
    {# It's already a full URL from the editor #}
    {% set desktop_bg_url = desktop_bg_raw %}
  {% endif %}
{% endif %}
{# Desktop background URL will use query params when needed #}

{# Hero wrapper with CSS variable for desktop background (won't load on mobile) #}
<section class="hero-module hero-module--{{ l.content_position }}{{ a.custom_class ? ' ' ~ a.custom_class : '' }}"
         data-overlay="{{ i.desktop_overlay }}"
         style="
           --hero-text-mobile: {{ module.text_color_mobile.color or 'var(--color-text)' }};
           --hero-text-desktop: {{ module.text_color_desktop.color or '#ffffff' }};
           --hero-eyebrow: {{ module.eyebrow_color.color or 'var(--color-primary)' }};
           --hero-min-h-mobile: {{ l.min_height_mobile }};
           --hero-min-h-desktop: {{ l.min_height_desktop }};
           --hero-align-mobile: {{ l.text_align_mobile }};
           --hero-align-desktop: {{ l.text_align_desktop }};
           --hero-v-align: {{ l.vertical_align }};
           {% if desktop_bg_url %}{% set desktop_bg_1920 = resize_image_url(desktop_bg_url, 1920) %}--hero-desktop-bg: url('{{ desktop_bg_1920 }}');{% endif %}
         ">

  {# Content wrapper - constrained to container width #}
  <div class="hero-content">
    <div class="hero-text">
      {% if c.eyebrow %}
        <p class="hero-eyebrow">{{ c.eyebrow|escape }}</p>
      {% endif %}

      <h1 class="hero-heading">{{ c.heading|escape }}</h1>

      {% if c.subheading %}
        <div class="hero-subheading">{{ c.subheading|sanitize_html }}</div>
      {% endif %}

      {# CTAs - Using smart link macro for intelligent URL handling #}
      <div class="hero-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="hero-link"
             {{ links.attrs(c.cta_secondary.url.href) }}>
            {{ c.cta_secondary.text|escape }}
            <span aria-hidden="true">→</span>
          </a>
        {% endif %}
      </div>
    </div>
  </div>

  {# Mobile image - hybrid solution with background-image for precise control #}
  {% if mobile_img_url %}
    {# Calculate aspect ratio for proper sizing #}
    {% set aspect_width = i.mobile_image.width|default(926) %}
    {% set aspect_height = i.mobile_image.height|default(870) %}
    {% set aspect_ratio = aspect_width ~ '/' ~ aspect_height %}

    <div class="hero-mobile-image"
         style="background-image: url('{{ mobile_img_url }}?width=350');
                background-size: cover;
                background-position: center;
                width: 100%;
                max-width: 350px;
                margin: 0 auto;
                aspect-ratio: {{ aspect_ratio }};">
      {# Hidden img for SEO and accessibility - 1x1 transparent pixel #}
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
           alt="{{ i.mobile_image.alt|default('', true)|escape }}"
           width="1"
           height="1"
           style="opacity: 0; position: absolute; pointer-events: none;"
           aria-hidden="false">
    </div>
  {% endif %}

  {# Preload hints inside module for better encapsulation #}
  {% if not a.lazy_load_mobile %}
    {% if mobile_img_url %}
      {# Preload the exact 350px image we're using for mobile #}
      <link rel="preload" as="image" href="{{ mobile_img_url }}?width=350" media="(max-width: 767px)" fetchpriority="high">
    {% endif %}

    {# Desktop preload only for larger screens - browser respects media query #}
    {% if desktop_bg_url %}
      {% set desktop_preload = resize_image_url(desktop_bg_url, 1920) %}
      <link rel="preload" as="image" href="{{ desktop_preload }}" media="(min-width: 993px)" fetchpriority="high">
    {% endif %}
  {% endif %}
</section>

{# Critical inline CSS for performance #}
{% require_css %}
<style>
  /* Mobile-first styles - NO background image loads here */
  .hero-module {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: var(--hero-min-h-mobile);
    overflow: hidden;
  }

  .hero-content {
    padding: 3rem 1rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-text {
    max-width: 600px;
    width: 100%;
    text-align: var(--hero-align-mobile);
    color: var(--hero-text-mobile);
  }

  .hero-eyebrow {
    color: var(--hero-text-mobile); /* Use mobile text color on mobile */
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
    text-shadow: 0 0.03em 0.08em rgba(0, 0, 0, 0.5);
  }

  .hero-heading {
    font-size: 1.875rem; /* Fixed size for mobile to prevent CLS */
    line-height: 1.1;
    margin: 0 0 1.25rem;
    font-weight: 700;
    text-shadow: 0 0.03em 0.08em rgba(0, 0, 0, 0.5);
  }

  @media (min-width: 640px) {
    .hero-heading {
      font-size: 2.25rem;
    }
  }

  .hero-subheading {
    font-size: 1rem; /* Fixed size for mobile to prevent CLS */
    line-height: 1.6;
    margin: 0 0 2rem;
    opacity: 0.9;
    text-shadow: 0 0.03em 0.08em rgba(0, 0, 0, 0.5);
  }

  @media (min-width: 640px) {
    .hero-subheading {
      font-size: 1.125rem;
    }
  }

  .hero-subheading > *:first-child { margin-top: 0; }
  .hero-subheading > *:last-child { margin-bottom: 0; }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: var(--hero-align-mobile);
  }

  /* Use theme button styles - just ensure they work well in hero context */
  .hero-actions .button {
    /* Theme buttons already have their own styles */
    text-decoration: none;
  }

  /* Ghost button style if not in theme */
  .hero-actions .btn-ghost {
    background: transparent;
    color: var(--hero-text-mobile);
    border: 2px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }

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

  .hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: gap 0.2s ease;
    text-shadow: 0 0.03em 0.08em rgba(0, 0, 0, 0.5);
  }

  .hero-link:hover {
    gap: 0.75rem;
  }

  .hero-mobile-image {
    width: 100%;
    line-height: 0;
    background-color: #f3f4f6; /* Placeholder color to prevent CLS */
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    display: block;
  }

  /* The hidden SEO/accessibility image */
  .hero-mobile-image img {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Skeleton loader for lazy loaded images */
  .hero-mobile-image[data-loading]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
  }

  @keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Desktop styles - Background image ONLY loads when this media query matches */
  @media (min-width: 993px) {
    .hero-heading {
      font-size: clamp(2.25rem, 4vw, 3.5rem);
    }

    .hero-subheading {
      font-size: clamp(1.125rem, 2vw, 1.25rem);
    }
    .hero-module {
      min-height: var(--hero-min-h-desktop);

      /* Break out of container to be full width */
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }

    /* Hide mobile image on desktop */
    .hero-mobile-image {
      display: none;
    }

    /* Desktop background image - only exists/loads on desktop */
    .hero-module::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: var(--hero-desktop-bg, none);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }

    /* Overlay variants */
    .hero-module[data-overlay="light"]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.2);
      z-index: 1;
    }

    .hero-module[data-overlay="medium"]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 1;
    }

    .hero-module[data-overlay="dark"]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 1;
    }

    .hero-module[data-overlay="gradient-left"]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
      z-index: 1;
    }

    .hero-module[data-overlay="gradient-right"]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(-90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
      z-index: 1;
    }

    .hero-module[data-overlay="gradient-top"]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
      z-index: 1;
    }

    .hero-module[data-overlay="gradient-bottom"]::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
      z-index: 1;
    }

    /* Content positioning */
    .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: var(--container-width, 1200px);
      margin: 0 auto;
      padding: 4rem 1rem;
      display: flex;
      align-items: var(--hero-v-align);
      min-height: var(--hero-min-h-desktop);
    }

    .hero-module--left .hero-content {
      justify-content: flex-start;
    }

    .hero-module--center .hero-content {
      justify-content: center;
    }

    .hero-module--right .hero-content {
      justify-content: flex-end;
    }

    .hero-text {
      color: var(--hero-text-desktop);
      text-align: var(--hero-align-desktop);
    }

    /* Use eyebrow color on desktop */
    .hero-eyebrow {
      color: var(--hero-eyebrow);
    }

    .hero-actions {
      justify-content: var(--hero-align-desktop);
    }

    /* Update ghost button color for desktop with background */
    .hero-actions .btn-ghost {
      color: var(--hero-text-desktop);
    }

    .hero-actions .btn-ghost:hover {
      background: rgba(255,255,255,0.1);
    }
  }

  {# 'Custom breakpoint' blocks removed with the desktop_breakpoint field (audit
     H2) — they only matched [data-breakpoint="1024px"/"1280px"], which is no
     longer emitted. The theme's canonical desktop split is 768px above. #}

  /* Accessibility: Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .hero-btn,
    .hero-link {
      transition: none;
    }

    .hero-btn--solid:hover {
      transform: none;
    }
  }

  /* Print styles */
  @media print {
    .hero-module {
      min-height: auto !important;
      background: none !important;
    }

    .hero-module::before,
    .hero-module::after {
      display: none !important;
    }

    .hero-mobile-image {
      display: none !important;
    }

    .hero-content {
      padding: 1rem !important;
    }

    .hero-text {
      color: black !important;
      max-width: 100% !important;
    }

    .hero-eyebrow,
    .hero-heading,
    .hero-subheading {
      color: black !important;
    }

    .hero-btn,
    .hero-link {
      color: black !important;
      border-color: black !important;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .hero-module[data-overlay]::after {
      opacity: 0.9;
    }

    .hero-btn {
      border-width: 3px;
    }

    .hero-link {
      text-decoration-thickness: 2px;
    }
  }
</style>
{% end_require_css %}