<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
/*
@section
{
  "name": "Hero",
  "category": "hero",
  "heading_level": "h1",
  "above_fold": true,
  "settings": [
    { "id": "layout", "type": "select", "label": "Layout", "default": "split-left",
      "hint": "Split puts image beside text. Overlay uses the image as a full background.",
      "options": [
        { "value": "split-left",  "label": "Text Left, Image Right" },
        { "value": "split-right", "label": "Image Left, Text Right" },
        { "value": "centered",    "label": "Centered (text only)" },
        { "value": "overlay",     "label": "Full Image with Text Overlay" }
      ]
    },
    { "id": "eyebrow",   "type": "text",     "label": "Eyebrow Label",          "default": "",                                          "hint": "Short label above the headline - e.g. 'New Collection', 'Handcrafted in Canada'" },
    { "id": "headline",  "type": "text",     "label": "Headline",               "default": "Built for people who care about quality.",  "required": true, "hint": "Keep under 10 words for best visual impact" },
    { "id": "subtext",   "type": "textarea", "label": "Sub Text",               "default": "Clean design. Honest products. Made with intention." },
    { "id": "cta_text",  "type": "text",     "label": "Primary Button",         "default": "Shop Now",                                  "hint": "Be specific - 'Shop Herbal Teas' converts better than 'Shop Now'" },
    { "id": "cta_url",   "type": "url",      "label": "Primary URL",            "default": "" },
    { "id": "cta2_text", "type": "text",     "label": "Secondary Button",       "default": "",                                          "hint": "Optional - leave blank to hide" },
    { "id": "cta2_url",  "type": "url",      "label": "Secondary URL",          "default": "" },
    { "id": "image",     "type": "image",    "label": "Hero Image",             "default": "",                                          "hint": "Recommended: 1400-900px or larger. Used as full background in Overlay layout." },
    { "id": "image_alt", "type": "text",     "label": "Image Alt Text",         "default": "",                                          "hint": "Describe the image for screen readers and Google Image Search" },
    { "id": "min_height","type": "select",   "label": "Minimum Height",         "default": "auto",
      "options": [
        { "value": "auto",   "label": "Auto (content height)" },
        { "value": "medium", "label": "Medium (60% of screen)" },
        { "value": "large",  "label": "Large (90% of screen)" }
      ]
    },
    { "id": "overlay_opacity", "type": "number", "label": "Overlay Darkness (0-90)", "default": "50", "min": "0", "max": "90",
      "hint": "Only applies to Overlay layout. Higher = darker. Increase if text is hard to read over the image." },
    { "id": "spacing", "type": "select", "label": "Padding", "default": "spacious",
      "options": [
        { "value": "compact",  "label": "Compact" },
        { "value": "normal",   "label": "Normal" },
        { "value": "spacious", "label": "Spacious" }
      ]
    },
    { "id": "color_scheme", "type": "select", "label": "Color Scheme", "default": "white",
      "hint": "Ignored when Layout is set to Overlay - text is always white over the image.",
      "options": [
        { "value": "white",   "label": "White" },
        { "value": "light",   "label": "Light Grey" },
        { "value": "dark",    "label": "Dark" },
        { "value": "primary", "label": "Primary Blue" },
        { "value": "ink",     "label": "Ink" }
      ]
    }
  ]
}
*/

$spacing_map    = [ 'compact' => 'py-12', 'normal' => 'py-20', 'spacious' => 'py-32' ];
$min_height_map = [ 'auto' => '', 'medium' => 'min-h-[60vh]', 'large' => 'min-h-[90vh]' ];

$layout   = slbuild_get_field( 'layout', 'attr' ) ?: 'split-left';
$spacing  = slbuild_get_field( 'spacing', 'attr' ) ?: 'spacious';
$cs       = slbuild_get_color_scheme( slbuild_get_field( 'color_scheme', 'attr' ) ?: 'white' );
$pad      = $spacing_map[ $spacing ] ?? 'py-32';
$min_h    = $min_height_map[ slbuild_get_field( 'min_height', 'attr' ) ?: 'auto' ] ?? '';
$opacity  = max( 0, min( 90, (int) ( slbuild_get_field( 'overlay_opacity', 'attr' ) ?: 50 ) ) );
$eyebrow  = slbuild_get_field( 'eyebrow' );
$headline = slbuild_get_field( 'headline' );
$subtext  = slbuild_get_field( 'subtext' );
$cta_text  = slbuild_get_field( 'cta_text' );
$cta_url   = slbuild_get_field( 'cta_url', 'url' );
$cta2_text = slbuild_get_field( 'cta2_text' );
$cta2_url  = slbuild_get_field( 'cta2_url', 'url' );
$image_url = slbuild_get_field( 'image', 'url' );
$image_alt = slbuild_get_field( 'image_alt' );
$tag       = slbuild_meta( 'heading_level' ) ?: 'h1';
$size_cls  = $min_h ? esc_attr( $min_h ) . ' ' . esc_attr( $pad ) : esc_attr( $pad );

// -- Overlay layout ----------------------------------------------------------
if ( 'overlay' === $layout ) {
	$bg_style = $image_url
		? 'background-image:url(' . esc_url( $image_url ) . ');background-size:cover;background-position:center;'
		: '';
	?>
	<section class="relative <?php echo $size_cls; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- pre-escaped via esc_attr() at assignment ?> px-6 md:px-12 lg:px-24 flex items-center"
	         style="<?php echo esc_attr( $bg_style ); ?>">
	  <?php if ( $opacity > 0 ) : ?>
	    <div class="absolute inset-0 bg-black" style="opacity:<?php echo esc_attr( number_format( $opacity / 100, 2 ) ); ?>;"></div>
	  <?php endif; ?>
	  <div class="relative z-10 max-w-3xl mx-auto text-center flex flex-col gap-6 items-center w-full">
	    <?php if ( $eyebrow ) : ?>
	      <p class="text-xs font-semibold uppercase tracking-widest text-white/70"><?php echo esc_html( $eyebrow ); ?></p>
	    <?php endif; ?>
	    <<?php echo esc_attr( $tag ); ?> class="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight leading-tight text-white">
	      <?php echo esc_html( $headline ); ?>
	    </<?php echo esc_attr( $tag ); ?>>
	    <?php if ( $subtext ) : ?>
	      <p class="text-xl leading-relaxed text-white/80 max-w-xl"><?php echo esc_html( $subtext ); ?></p>
	    <?php endif; ?>
	    <?php if ( $cta_text || $cta2_text ) : ?>
	      <div class="flex flex-wrap gap-4 justify-center">
	        <?php if ( $cta_text ) : ?>
	          <a href="<?php echo esc_url( $cta_url ?: '#' ); ?>" class="inline-block bg-white text-gray-900 text-sm font-semibold px-8 py-3.5 rounded-full hover:bg-gray-100 transition-colors">
	            <?php echo esc_html( $cta_text ); ?>
	          </a>
	        <?php endif; ?>
	        <?php if ( $cta2_text ) : ?>
	          <a href="<?php echo esc_url( $cta2_url ?: '#' ); ?>" class="inline-block border border-white text-white text-sm font-semibold px-8 py-3.5 rounded-full hover:bg-white/10 transition-colors">
	            <?php echo esc_html( $cta2_text ); ?>
	          </a>
	        <?php endif; ?>
	      </div>
	    <?php endif; ?>
	  </div>
	</section>
	<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
	return;
}

// -- Centered layout ---------------------------------------------------------
if ( 'centered' === $layout ) {
	?>
	<section class="<?php echo esc_attr( $cs['bg'] ); ?> <?php echo $size_cls; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- pre-escaped via esc_attr() at assignment ?> px-6 md:px-12 lg:px-24 flex items-center">
	  <div class="max-w-3xl mx-auto text-center flex flex-col gap-6 items-center w-full">
	    <?php if ( $eyebrow ) : ?>
	      <p class="text-xs font-semibold uppercase tracking-widest <?php echo esc_attr( $cs['eyebrow'] ); ?>"><?php echo esc_html( $eyebrow ); ?></p>
	    <?php endif; ?>
	    <<?php echo esc_attr( $tag ); ?> class="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight leading-tight <?php echo esc_attr( $cs['text'] ); ?>">
	      <?php echo esc_html( $headline ); ?>
	    </<?php echo esc_attr( $tag ); ?>>
	    <?php if ( $subtext ) : ?>
	      <p class="text-xl leading-relaxed <?php echo esc_attr( $cs['sub'] ); ?> max-w-xl"><?php echo esc_html( $subtext ); ?></p>
	    <?php endif; ?>
	    <?php if ( $cta_text || $cta2_text ) : ?>
	      <div class="flex flex-wrap gap-4 justify-center">
	        <?php if ( $cta_text ) : ?>
	          <a href="<?php echo esc_url( $cta_url ?: '#' ); ?>" class="inline-block <?php echo esc_attr( $cs['btn'] ); ?> text-sm font-semibold px-8 py-3.5 rounded-full transition-colors">
	            <?php echo esc_html( $cta_text ); ?>
	          </a>
	        <?php endif; ?>
	        <?php if ( $cta2_text ) : ?>
	          <a href="<?php echo esc_url( $cta2_url ?: '#' ); ?>" class="inline-block <?php echo esc_attr( $cs['btn2'] ); ?> text-sm font-semibold px-8 py-3.5 rounded-full transition-colors">
	            <?php echo esc_html( $cta2_text ); ?>
	          </a>
	        <?php endif; ?>
	      </div>
	    <?php endif; ?>
	    <?php if ( $image_url ) : ?>
	      <div class="w-full mt-4 rounded-2xl overflow-hidden shadow-md">
	        <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>"
	             class="w-full h-auto" loading="eager">
	      </div>
	    <?php endif; ?>
	  </div>
	</section>
	<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
	return;
}

// -- Split layout (left / right) ---------------------------------------------
$image_first = ( 'split-right' === $layout );
?>
<section class="<?php echo esc_attr( $cs['bg'] ); ?> <?php echo $size_cls; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- pre-escaped via esc_attr() at assignment ?> px-6 md:px-12 lg:px-24 flex items-center">
  <div class="max-w-6xl mx-auto w-full">
    <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center">

      <?php if ( $image_first && $image_url ) : ?>
        <div class="rounded-2xl overflow-hidden shadow-md">
          <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>"
               class="w-full h-auto" loading="eager">
        </div>
      <?php elseif ( $image_first ) : ?>
        <div class="aspect-[4/3] bg-gray-100 rounded-2xl"></div>
      <?php endif; ?>

      <div class="flex flex-col gap-6">
        <?php if ( $eyebrow ) : ?>
          <p class="text-xs font-semibold uppercase tracking-widest <?php echo esc_attr( $cs['eyebrow'] ); ?>"><?php echo esc_html( $eyebrow ); ?></p>
        <?php endif; ?>
        <<?php echo esc_attr( $tag ); ?> class="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight leading-tight <?php echo esc_attr( $cs['text'] ); ?>">
          <?php echo esc_html( $headline ); ?>
        </<?php echo esc_attr( $tag ); ?>>
        <?php if ( $subtext ) : ?>
          <p class="text-xl leading-relaxed <?php echo esc_attr( $cs['sub'] ); ?>"><?php echo esc_html( $subtext ); ?></p>
        <?php endif; ?>
        <?php if ( $cta_text || $cta2_text ) : ?>
          <div class="flex flex-wrap gap-4">
            <?php if ( $cta_text ) : ?>
              <a href="<?php echo esc_url( $cta_url ?: '#' ); ?>" class="inline-block <?php echo esc_attr( $cs['btn'] ); ?> text-sm font-semibold px-8 py-3.5 rounded-full transition-colors">
                <?php echo esc_html( $cta_text ); ?>
              </a>
            <?php endif; ?>
            <?php if ( $cta2_text ) : ?>
              <a href="<?php echo esc_url( $cta2_url ?: '#' ); ?>" class="inline-block <?php echo esc_attr( $cs['btn2'] ); ?> text-sm font-semibold px-8 py-3.5 rounded-full transition-colors">
                <?php echo esc_html( $cta2_text ); ?>
              </a>
            <?php endif; ?>
          </div>
        <?php endif; ?>
      </div>

      <?php if ( ! $image_first ) : ?>
        <?php if ( $image_url ) : ?>
          <div class="rounded-2xl overflow-hidden shadow-md">
            <img src="<?php echo esc_url( $image_url ); ?>" alt="<?php echo esc_attr( $image_alt ); ?>"
                 class="w-full h-auto" loading="eager">
          </div>
        <?php else : ?>
          <div class="aspect-[4/3] bg-gray-100 rounded-2xl"></div>
        <?php endif; ?>
      <?php endif; ?>

    </div>
  </div>
</section>