<?php
$defaults = [
  'step1Text' => 'Compra online',
  'step1Icon' => 'cart',
  'step1IconEnabled' => true,
  'step1Url' => '',
  'step1BgColor' => '',
  'step1TextColor' => '',
  'step1IconColor' => '',
  'step2Text' => 'Cotiza tu despacho',
  'step2Icon' => 'box',
  'step2IconEnabled' => true,
  'step2Url' => '',
  'step2BgColor' => '',
  'step2TextColor' => '',
  'step2IconColor' => '',
  'step3Text' => 'Nos contactamos',
  'step3Icon' => 'chat',
  'step3IconEnabled' => true,
  'step3Url' => '',
  'step3BgColor' => '',
  'step3TextColor' => '',
  'step3IconColor' => '',
  'step4Text' => 'Preparamos el producto',
  'step4Icon' => 'lines',
  'step4IconEnabled' => true,
  'step4Url' => '',
  'step4BgColor' => '',
  'step4TextColor' => '',
  'step4IconColor' => '',
  'step5Text' => 'Se envía',
  'step5Icon' => 'truck',
  'step5IconEnabled' => true,
  'step5Url' => '',
  'step5BgColor' => '',
  'step5TextColor' => '',
  'step5IconColor' => '',
  'step6Text' => 'Se monta y ¡listo!',
  'step6Icon' => 'bag',
  'step6IconEnabled' => true,
  'step6Url' => '',
  'step6BgColor' => '',
  'step6TextColor' => '',
  'step6IconColor' => '',
];

$values = array_merge($defaults, array_filter((array) $attributes, static function ($value) {
  return $value !== null && $value !== '';
}));

$icons = [
  'cart' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M3 5h2l2.2 9.5a2 2 0 0 0 2 1.5h7.6a2 2 0 0 0 2-1.4l1.6-6.6H7.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="10" cy="20" r="1.6" fill="none" stroke="currentColor" stroke-width="1.6"></circle><circle cx="17" cy="20" r="1.6" fill="none" stroke="currentColor" stroke-width="1.6"></circle></svg>',
  'box' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M4 8l8-4 8 4-8 4-8-4Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M4 8v8l8 4 8-4V8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M12 12v8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>',
  'chat' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M5 6h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path></svg>',
  'lines' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M3 12h7l11-6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path><path d="M3 16h7l11-6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path><path d="M3 20h7l11-6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>',
  'truck' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M3 7h11v8H3z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M14 10h4l3 3v2h-7z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><circle cx="7" cy="18" r="1.6" fill="none" stroke="currentColor" stroke-width="1.6"></circle><circle cx="18" cy="18" r="1.6" fill="none" stroke="currentColor" stroke-width="1.6"></circle></svg>',
  'bag' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M4 9h16v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M8 9V7a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>',
  'globe' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Z" fill="none" stroke="currentColor" stroke-width="1.6"></path><path d="M2 12h20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path><path d="M12 2c2.8 3.2 2.8 14.8 0 20-2.8-3.2-2.8-14.8 0-20Z" fill="none" stroke="currentColor" stroke-width="1.6"></path></svg>',
  'clock' => '<svg viewBox="0 0 24 24" focusable="false"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.6"></circle><path d="M12 7v5l3 2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>',
  'shield' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M12 3l7 3v6c0 4.4-3 7.8-7 9-4-1.2-7-4.6-7-9V6l7-3Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path></svg>',
  'check' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M5 12l4 4 10-10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>',
  'star' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.2 1 5.8L12 16.9 6.8 19.7l1-5.8L3.5 9.7l5.9-.9L12 3.5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path></svg>',
  'leaf' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M5 19c8-1 12-6 14-14-8 2-13 6-14 14Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M9 15c2-3 5-5 9-7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>',
  'heart' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.5-7 9-7 9Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path></svg>',
  'phone' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M6 4h4l1 4-2 2c1.5 2.8 3.7 5 6.5 6.5l2-2 4 1v4c0 1.1-.9 2-2 2C10.3 21.5 2.5 13.7 2.5 4c0-1.1.9-2 2-2Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path></svg>',
  'tag' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M3 10l7-7h7l4 4v7l-7 7-11-11Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><circle cx="15" cy="7" r="1.6" fill="none" stroke="currentColor" stroke-width="1.6"></circle></svg>',
  'gift' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M3 10h18v10H3z" fill="none" stroke="currentColor" stroke-width="1.6"></path><path d="M12 10v10M3 10h18M7 10c-2.2 0-3.5-1.3-3.5-2.7C3.5 5.8 4.8 4.5 6.6 4.5c2.1 0 3.6 2.3 4.4 5.5M17 10c2.2 0 3.5-1.3 3.5-2.7 0-1.5-1.3-2.8-3.1-2.8-2.1 0-3.6 2.3-4.4 5.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>',
  'lock' => '<svg viewBox="0 0 24 24" focusable="false"><rect x="4" y="10" width="16" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>',
  'recycle' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M7 7l2-3 2 3M6 7h5M17 17l-2 3-2-3M18 17h-5M12 8l3 5-3 5-3-5 3-5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>',
  'warranty' => '<svg viewBox="0 0 24 24" focusable="false"><path d="M4 12h16a2 2 0 0 1 2 2v4H2v-4a2 2 0 0 1 2-2Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M6 12V9a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path><path d="M4 18v2m16-2v2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>',
  'creditcard' => '<svg viewBox="0 0 24 24" focusable="false"><rect x="2" y="5" width="20" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"></rect><path d="M2 9h20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path><path d="M6 15h6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>',
];

 $hover_arrow = '<svg viewBox="0 0 24 24" focusable="false"><path d="M6 18l12-12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 6h7v7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>';

$render_step = function ($text, $icon_key, $url, $icon_enabled, $icon_color) use ($icons) {
  $icon_markup = $icons[$icon_key] ?? $icons['cart'];
  $open = $url
    ? '<a class="nordie-step__link" href="' . esc_url($url) . '">'
    : '<div class="nordie-step__link">';
  $close = $url ? '</a>' : '</div>';

  echo $open;
  echo '<p>' . esc_html($text) . '</p>';
  if ($icon_enabled) {
    $icon_style = $icon_color !== '' ? ' style="color:' . esc_attr($icon_color) . ';"' : '';
    echo '<span class="nordie-step__icon" aria-hidden="true"' . $icon_style . '>' . $icon_markup . '</span>';
  }
  echo $close;
};
?>
<section class="nordie-steps fjord-reveal">
  <div class="nordie-steps__grid">
    <?php
    $step1_style = [];
    if ($values['step1BgColor'] !== '') {
      $step1_style[] = 'background:' . $values['step1BgColor'];
    }
    if ($values['step1TextColor'] !== '') {
      $step1_style[] = 'color:' . $values['step1TextColor'];
    }
    $step1_style_attr = $step1_style ? ' style="' . esc_attr(implode(';', $step1_style)) . '"' : '';
    ?>
    <article class="nordie-step"<?php echo $step1_style_attr; ?>>
      <div class="nordie-step__content">
        <?php $render_step($values['step1Text'], $values['step1Icon'], $values['step1Url'], $values['step1IconEnabled'], $values['step1IconColor']); ?>
      </div>
      <span class="nordie-step__check" aria-hidden="true">
        <?php echo $hover_arrow; ?>
      </span>
    </article>
    <?php
    $step2_style = [];
    if ($values['step2BgColor'] !== '') {
      $step2_style[] = 'background:' . $values['step2BgColor'];
    }
    if ($values['step2TextColor'] !== '') {
      $step2_style[] = 'color:' . $values['step2TextColor'];
    }
    $step2_style_attr = $step2_style ? ' style="' . esc_attr(implode(';', $step2_style)) . '"' : '';
    ?>
    <article class="nordie-step"<?php echo $step2_style_attr; ?>>
      <div class="nordie-step__content">
        <?php $render_step($values['step2Text'], $values['step2Icon'], $values['step2Url'], $values['step2IconEnabled'], $values['step2IconColor']); ?>
      </div>
      <span class="nordie-step__check" aria-hidden="true">
        <?php echo $hover_arrow; ?>
      </span>
    </article>
    <?php
    $step3_style = [];
    if ($values['step3BgColor'] !== '') {
      $step3_style[] = 'background:' . $values['step3BgColor'];
    }
    if ($values['step3TextColor'] !== '') {
      $step3_style[] = 'color:' . $values['step3TextColor'];
    }
    $step3_style_attr = $step3_style ? ' style="' . esc_attr(implode(';', $step3_style)) . '"' : '';
    ?>
    <article class="nordie-step"<?php echo $step3_style_attr; ?>>
      <div class="nordie-step__content">
        <?php $render_step($values['step3Text'], $values['step3Icon'], $values['step3Url'], $values['step3IconEnabled'], $values['step3IconColor']); ?>
      </div>
      <span class="nordie-step__check" aria-hidden="true">
        <?php echo $hover_arrow; ?>
      </span>
    </article>
    <?php
    $step4_style = [];
    if ($values['step4BgColor'] !== '') {
      $step4_style[] = 'background:' . $values['step4BgColor'];
    }
    if ($values['step4TextColor'] !== '') {
      $step4_style[] = 'color:' . $values['step4TextColor'];
    }
    $step4_style_attr = $step4_style ? ' style="' . esc_attr(implode(';', $step4_style)) . '"' : '';
    ?>
    <article class="nordie-step"<?php echo $step4_style_attr; ?>>
      <div class="nordie-step__content">
        <?php $render_step($values['step4Text'], $values['step4Icon'], $values['step4Url'], $values['step4IconEnabled'], $values['step4IconColor']); ?>
      </div>
      <span class="nordie-step__check" aria-hidden="true">
        <?php echo $hover_arrow; ?>
      </span>
    </article>
    <?php
    $step5_style = [];
    if ($values['step5BgColor'] !== '') {
      $step5_style[] = 'background:' . $values['step5BgColor'];
    }
    if ($values['step5TextColor'] !== '') {
      $step5_style[] = 'color:' . $values['step5TextColor'];
    }
    $step5_style_attr = $step5_style ? ' style="' . esc_attr(implode(';', $step5_style)) . '"' : '';
    ?>
    <article class="nordie-step"<?php echo $step5_style_attr; ?>>
      <div class="nordie-step__content">
        <?php $render_step($values['step5Text'], $values['step5Icon'], $values['step5Url'], $values['step5IconEnabled'], $values['step5IconColor']); ?>
      </div>
      <span class="nordie-step__check" aria-hidden="true">
        <?php echo $hover_arrow; ?>
      </span>
    </article>
    <?php
    $step6_style = [];
    if ($values['step6BgColor'] !== '') {
      $step6_style[] = 'background:' . $values['step6BgColor'];
    }
    if ($values['step6TextColor'] !== '') {
      $step6_style[] = 'color:' . $values['step6TextColor'];
    }
    $step6_style_attr = $step6_style ? ' style="' . esc_attr(implode(';', $step6_style)) . '"' : '';
    ?>
    <article class="nordie-step"<?php echo $step6_style_attr; ?>>
      <div class="nordie-step__content">
        <?php $render_step($values['step6Text'], $values['step6Icon'], $values['step6Url'], $values['step6IconEnabled'], $values['step6IconColor']); ?>
      </div>
      <span class="nordie-step__check" aria-hidden="true">
        <?php echo $hover_arrow; ?>
      </span>
    </article>
  </div>
</section>
