<?php
$defaults = [
  'slide1Image' => 'http://localhost:10089/wp-content/uploads/2026/01/quincho-duplex.jpg',
  'slide1Title' => "Duplex Clásico",
  'slide1Text' => 'Tu modelo favorito con un descuento increíble. ANTES $909.990 / AHORA: $864.000',
  'slide1ButtonText' => 'Ver producto',
  'slide1ButtonUrl' => '#',
  'slide2Image' => 'https://framerusercontent.com/images/M8cpp44fcecDccZvJuknm85uc.webp?width=2400&height=1200',
  'slide2Title' => "Natural Elegance\nin Every Detail",
  'slide2Text' => 'Crafted from solid oak with a smooth finish, timeless and durable.',
  'slide2ButtonText' => 'Ver producto',
  'slide2ButtonUrl' => '#',
  'slide3Image' => 'https://framerusercontent.com/images/yWfiT9hCK49Xggoq1k9TvLHyUY.webp?width=2400&height=1200',
  'slide3Title' => "Modern Minimalism,\nMaximum Comfort",
  'slide3Text' => 'Simple, sleek, and built for a cozy, stylish lifestyle.',
  'slide3ButtonText' => 'Ver producto',
  'slide3ButtonUrl' => '#',
  'slide4Image' => '',
  'slide4Title' => '',
  'slide4Text' => '',
  'slide4ButtonText' => 'Ver producto',
  'slide4ButtonUrl' => '#',
  'slide5Image' => '',
  'slide5Title' => '',
  'slide5Text' => '',
  'slide5ButtonText' => 'Ver producto',
  'slide5ButtonUrl' => '#',
  'slide1ButtonBackgroundEnabled' => true,
  'slide2ButtonBackgroundEnabled' => true,
  'slide3ButtonBackgroundEnabled' => true,
  'slide4ButtonBackgroundEnabled' => true,
  'slide5ButtonBackgroundEnabled' => true,
  'slide1Enabled' => false,
  'slide2Enabled' => true,
  'slide3Enabled' => true,
  'slide4Enabled' => false,
  'slide5Enabled' => false,
  'slideOrder' => 'slide2,slide3,slide1,slide4,slide5',
  'autoplay' => true,
  'autoplaySpeed' => 7000,
];

$hotspot_position_defaults = [
  ['x' => 32, 'y' => 32],
  ['x' => 60, 'y' => 58],
  ['x' => 78, 'y' => 70],
];

foreach (range(1, 5) as $slide_index) {
  $defaults["slide{$slide_index}HotspotsEnabled"] = true;
  foreach ($hotspot_position_defaults as $hotspot_index => $position) {
    $hotspot_number = $hotspot_index + 1;
    $defaults["slide{$slide_index}Hotspot{$hotspot_number}Enabled"] = true;
    $defaults["slide{$slide_index}Hotspot{$hotspot_number}X"] = $position['x'];
    $defaults["slide{$slide_index}Hotspot{$hotspot_number}Y"] = $position['y'];
    $defaults["slide{$slide_index}Hotspot{$hotspot_number}Background"] = '#ffffff';
    $defaults["slide{$slide_index}Hotspot{$hotspot_number}TextColor"] = '#111111';
  }
}

$defaults['slide1Hotspot1Image'] = 'https://framerusercontent.com/images/1c3s4XR0YhiP5U0jMudG8pcXqDA.webp?width=120&height=120';
$defaults['slide1Hotspot1Text'] = 'Soft leather, durable cushioning.';
$defaults['slide1Hotspot2Image'] = 'https://framerusercontent.com/images/vb8XKVhsi1CNqzR5Bozhb2yTXeo.webp?width=120&height=120';
$defaults['slide1Hotspot2Text'] = 'Handcrafted wood finish.';
$defaults['slide1Hotspot3Image'] = 'https://framerusercontent.com/images/GbiVrsgrVhulfQoqpcQTKA1u4.webp?width=120&height=120';
$defaults['slide1Hotspot3Text'] = 'Ergonomic and supportive.';

$values = array_merge($defaults, (array) $attributes);

$get_value = function ($key) use ($values) {
  if (isset($values[$key]) && $values[$key] !== '') {
    return $values[$key];
  }
  return $defaults[$key] ?? '';
};

$format_text = function ($text) {
  $text = trim((string) $text);
  if ($text === '') {
    return '';
  }
  return nl2br(esc_html($text));
};

$slides_config = [
  [
    'key' => 'slide1',
    'enabled' => 'slide1Enabled',
    'image' => 'slide1Image',
    'title' => 'slide1Title',
    'text' => 'slide1Text',
    'buttonText' => 'slide1ButtonText',
    'buttonUrl' => 'slide1ButtonUrl',
    'cardBackground' => 'slide1CardBackground',
    'cardTextColor' => 'slide1CardTextColor',
    'buttonBackground' => 'slide1ButtonBackground',
    'buttonBackgroundEnabled' => 'slide1ButtonBackgroundEnabled',
    'buttonTextColor' => 'slide1ButtonTextColor',
  ],
  [
    'key' => 'slide2',
    'image' => 'slide2Image',
    'title' => 'slide2Title',
    'text' => 'slide2Text',
    'buttonText' => 'slide2ButtonText',
    'buttonUrl' => 'slide2ButtonUrl',
    'cardBackground' => 'slide2CardBackground',
    'cardTextColor' => 'slide2CardTextColor',
    'buttonBackground' => 'slide2ButtonBackground',
    'buttonBackgroundEnabled' => 'slide2ButtonBackgroundEnabled',
    'buttonTextColor' => 'slide2ButtonTextColor',
    'enabled' => 'slide2Enabled',
  ],
  [
    'key' => 'slide3',
    'image' => 'slide3Image',
    'title' => 'slide3Title',
    'text' => 'slide3Text',
    'buttonText' => 'slide3ButtonText',
    'buttonUrl' => 'slide3ButtonUrl',
    'cardBackground' => 'slide3CardBackground',
    'cardTextColor' => 'slide3CardTextColor',
    'buttonBackground' => 'slide3ButtonBackground',
    'buttonBackgroundEnabled' => 'slide3ButtonBackgroundEnabled',
    'buttonTextColor' => 'slide3ButtonTextColor',
    'enabled' => 'slide3Enabled',
  ],
  [
    'key' => 'slide4',
    'image' => 'slide4Image',
    'title' => 'slide4Title',
    'text' => 'slide4Text',
    'buttonText' => 'slide4ButtonText',
    'buttonUrl' => 'slide4ButtonUrl',
    'cardBackground' => 'slide4CardBackground',
    'cardTextColor' => 'slide4CardTextColor',
    'buttonBackground' => 'slide4ButtonBackground',
    'buttonBackgroundEnabled' => 'slide4ButtonBackgroundEnabled',
    'buttonTextColor' => 'slide4ButtonTextColor',
    'enabled' => 'slide4Enabled',
  ],
  [
    'key' => 'slide5',
    'image' => 'slide5Image',
    'title' => 'slide5Title',
    'text' => 'slide5Text',
    'buttonText' => 'slide5ButtonText',
    'buttonUrl' => 'slide5ButtonUrl',
    'cardBackground' => 'slide5CardBackground',
    'cardTextColor' => 'slide5CardTextColor',
    'buttonBackground' => 'slide5ButtonBackground',
    'buttonBackgroundEnabled' => 'slide5ButtonBackgroundEnabled',
    'buttonTextColor' => 'slide5ButtonTextColor',
    'enabled' => 'slide5Enabled',
  ],
];

$slides_by_key = [];
foreach ($slides_config as $slide_config) {
  $slides_by_key[$slide_config['key']] = $slide_config;
}

$default_slide_order = array_column($slides_config, 'key');
$saved_slide_order = array_filter(array_map('trim', explode(',', (string) $get_value('slideOrder'))));
$valid_slide_order = array_values(array_unique(array_intersect($saved_slide_order, $default_slide_order)));
$missing_slide_order = array_values(array_diff($default_slide_order, $valid_slide_order));
$slide_order = array_merge($valid_slide_order, $missing_slide_order);
$ordered_slides_config = array_values(array_filter(array_map(
  static fn($slide_key) => $slides_by_key[$slide_key] ?? null,
  $slide_order
)));

$slides = [];
foreach ($ordered_slides_config as $slide_config) {
  $enabled = false;
  if (isset($slide_config['enabled'], $values[$slide_config['enabled']])) {
    $enabled = (bool) $values[$slide_config['enabled']];
  }
  if (!$enabled) {
    continue;
  }
  $button_text = isset($slide_config['buttonText'])
    ? $get_value($slide_config['buttonText'])
    : '';
  $button_url = isset($slide_config['buttonUrl'])
    ? $get_value($slide_config['buttonUrl'])
    : '#';

  $slide_hotspots_enabled_key = "{$slide_config['key']}HotspotsEnabled";
  $slide_hotspots_enabled = isset($values[$slide_hotspots_enabled_key])
    ? (bool) $values[$slide_hotspots_enabled_key]
    : true;
  $slide_hotspots = [];

  if ($slide_hotspots_enabled) {
    foreach (range(1, 3) as $hotspot_index) {
      $hotspot_enabled_key = "{$slide_config['key']}Hotspot{$hotspot_index}Enabled";
      $hotspot_enabled = isset($values[$hotspot_enabled_key])
        ? (bool) $values[$hotspot_enabled_key]
        : true;
      if (!$hotspot_enabled) {
        continue;
      }
      $image_key = "{$slide_config['key']}Hotspot{$hotspot_index}Image";
      $text_key = "{$slide_config['key']}Hotspot{$hotspot_index}Text";
      $x_key = "{$slide_config['key']}Hotspot{$hotspot_index}X";
      $y_key = "{$slide_config['key']}Hotspot{$hotspot_index}Y";
      $background_key = "{$slide_config['key']}Hotspot{$hotspot_index}Background";
      $text_color_key = "{$slide_config['key']}Hotspot{$hotspot_index}TextColor";

      $slide_hotspots[] = [
        'image' => esc_url($get_value($image_key)),
        'text' => esc_html($get_value($text_key)),
        'x' => max(0, min(100, (int) $get_value($x_key))),
        'y' => max(0, min(100, (int) $get_value($y_key))),
        'background' => $get_value($background_key) ?: '#ffffff',
        'textColor' => $get_value($text_color_key) ?: '#111111',
      ];
    }
  }

  $card_background = isset($slide_config['cardBackground'])
    ? trim((string) $get_value($slide_config['cardBackground']))
    : '';
  $card_text_color = isset($slide_config['cardTextColor'])
    ? trim((string) $get_value($slide_config['cardTextColor']))
    : '';
  $button_background = isset($slide_config['buttonBackground'])
    ? trim((string) $get_value($slide_config['buttonBackground']))
    : '';
  $button_background_enabled = true;
  if (isset($slide_config['buttonBackgroundEnabled'])) {
    $button_background_enabled = isset($values[$slide_config['buttonBackgroundEnabled']])
      ? (bool) $values[$slide_config['buttonBackgroundEnabled']]
      : true;
  }
  $button_text_color = isset($slide_config['buttonTextColor'])
    ? trim((string) $get_value($slide_config['buttonTextColor']))
    : '';

  $slides[] = [
    'image' => esc_url($get_value($slide_config['image'])),
    'title' => $format_text($get_value($slide_config['title'])),
    'text' => esc_html($get_value($slide_config['text'])),
    'buttonText' => $button_text,
    'buttonUrl' => $button_url,
    'cardBackground' => $card_background,
    'cardTextColor' => $card_text_color,
    'buttonBackground' => $button_background,
    'buttonTextColor' => $button_text_color,
    'hotspotsEnabled' => $slide_hotspots_enabled,
    'hotspots' => $slide_hotspots,
  ];
}

if (empty($slides)) {
  return;
}

$autoplay = isset($values['autoplay']) ? (bool) $values['autoplay'] : true;
$autoplay_speed = isset($values['autoplaySpeed']) ? max(2000, (int) $values['autoplaySpeed']) : 7000;
?>
<section class="fjord-hero" aria-labelledby="fjord-hero-title">
  <div
    class="fjord-hero__slider"
    data-hero-slider
    data-autoplay="<?php echo $autoplay ? "true" : "false"; ?>"
    data-autoplay-speed="<?php echo esc_attr($autoplay_speed); ?>"
  >
    <?php foreach ($slides as $index => $slide) : ?>
      <article
        class="fjord-hero__slide<?php echo $index === 0 ? " is-active" : ""; ?>"
        style="background-image:url('<?php echo esc_attr($slide['image']); ?>');"
      >
        <div class="fjord-hero__overlay" aria-hidden="true"></div>
        <?php if ($slide['hotspotsEnabled'] && !empty($slide['hotspots'])) : ?>
          <div class="fjord-hotspots" aria-hidden="true">
            <?php foreach ($slide['hotspots'] as $hotspot) : ?>
              <button
                class="fjord-hotspot"
                type="button"
                style="--x: <?php echo esc_attr($hotspot['x']); ?>%; --y: <?php echo esc_attr($hotspot['y']); ?>%;"
              >
                <span class="fjord-hotspot__icon">+</span>
                <span
                  class="fjord-hotspot__card"
                  style="background: <?php echo esc_attr($hotspot['background']); ?>; color: <?php echo esc_attr($hotspot['textColor']); ?>;"
                >
                  <?php if ($hotspot['image']) : ?>
                    <img src="<?php echo esc_url($hotspot['image']); ?>" alt="">
                  <?php endif; ?>
                  <span><?php echo $hotspot['text']; ?></span>
                </span>
              </button>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
        <?php
          $card_styles = [];
          if ($slide['cardBackground']) {
            $card_styles[] = 'background: ' . esc_attr($slide['cardBackground']);
          }
          if ($slide['cardTextColor']) {
            $card_styles[] = 'color: ' . esc_attr($slide['cardTextColor']);
          }
          $card_style_attr = $card_styles ? ' style="' . esc_attr(implode(';', $card_styles)) . '"' : '';
          $button_styles = [];
          if ($button_background_enabled && $slide['buttonBackground']) {
            $button_styles[] = 'background: ' . esc_attr($slide['buttonBackground']);
          }
          if ($slide['buttonTextColor']) {
            $button_styles[] = 'color: ' . esc_attr($slide['buttonTextColor']);
          }
          $button_style_attr = $button_styles ? ' style="' . esc_attr(implode(';', $button_styles)) . '"' : '';
        ?>
        <div class="fjord-hero__card"<?php echo $card_style_attr; ?>>
          <?php if ($index === 0) : ?>
            <h1 id="fjord-hero-title"><?php echo $slide['title']; ?></h1>
          <?php else : ?>
            <h2><?php echo $slide['title']; ?></h2>
          <?php endif; ?>
          <p><?php echo $slide['text']; ?></p>
          <?php
            $button_text = esc_html($slide['buttonText'] ?: 'Ver producto');
            $button_url = esc_url($slide['buttonUrl'] ?: '#');
          ?>
          <a class="fjord-btn" href="<?php echo esc_attr($button_url); ?>"<?php echo $button_style_attr; ?>><?php echo $button_text; ?></a>
        </div>
      </article>
    <?php endforeach; ?>
      <button class="fjord-hero__control fjord-hero__control--prev" type="button" aria-label="Previous">
        <img src="https://framerusercontent.com/images/6tTbkXggWgQCAJ4DO2QEdXXmgM.svg" alt="">
      </button>
      <button class="fjord-hero__control fjord-hero__control--next" type="button" aria-label="Next">
        <img src="https://framerusercontent.com/images/11KSGbIZoRSg4pjdnUoif6MKHI.svg" alt="">
      </button>
      <?php if (count($slides) > 1) : ?>
        <div class="fjord-hero__dots" data-hero-dots>
          <?php foreach ($slides as $dot_index => $slide) : ?>
            <button
              class="fjord-hero__dot<?php echo $dot_index === 0 ? ' is-active' : ''; ?>"
              type="button"
              aria-label="<?php echo esc_attr(sprintf('Slide %d', $dot_index + 1)); ?>"
              data-hero-dot-index="<?php echo esc_attr($dot_index); ?>"
            ></button>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>
  </section>
