<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
/*
@section
{
  "name": "Steps",
  "category": "content",
  "heading_level": "h2",
  "settings": [
    { "id": "eyebrow",  "type": "text",     "label": "Eyebrow",  "default": "" },
    { "id": "headline", "type": "text",     "label": "Headline", "default": "How it works" },
    { "id": "subtext",  "type": "textarea", "label": "Sub Text", "default": "" },
    { "id": "style", "type": "select", "label": "Style", "default": "numbered",
      "options": [
        { "value": "numbered", "label": "Numbered (large step number)" },
        { "value": "icon",     "label": "Icon / Emoji" },
        { "value": "minimal",  "label": "Minimal (no number or icon)" }
      ]
    },
    { "id": "layout", "type": "select", "label": "Layout", "default": "horizontal",
      "options": [
        { "value": "horizontal", "label": "Horizontal (steps in a row)" },
        { "value": "vertical",   "label": "Vertical (stacked list)" }
      ]
    },
    { "id": "connector", "type": "toggle", "label": "Show Connector Line", "default": "1",
      "hint": "Draws a line between steps (horizontal layout only)." },
    { "id": "spacing", "type": "select", "label": "Spacing", "default": "normal",
      "options": [
        { "value": "compact",  "label": "Compact" },
        { "value": "normal",   "label": "Normal" },
        { "value": "spacious", "label": "Spacious" }
      ]
    },
    { "id": "color_scheme", "type": "select", "label": "Color Scheme", "default": "white",
      "options": [
        { "value": "white",   "label": "White" },
        { "value": "light",   "label": "Light Grey" },
        { "value": "dark",    "label": "Dark" },
        { "value": "primary", "label": "Primary Blue" },
        { "value": "ink",     "label": "Ink" }
      ]
    }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "limit": 8,
      "settings": [
        { "id": "emoji",       "type": "text",     "label": "Emoji (icon style only)", "default": "1",
          "hint": "Only shown when Style is set to Icon / Emoji." },
        { "id": "title",       "type": "text",     "label": "Title",       "default": "Step Title", "required": true },
        { "id": "description", "type": "textarea", "label": "Description", "default": "" }
      ]
    }
  ],
  "default_blocks": [
    { "type": "step", "settings": { "emoji": "??", "title": "Choose your items", "description": "Browse our catalogue and add your favourites to the cart." } },
    { "type": "step", "settings": { "emoji": "??", "title": "Checkout securely",  "description": "Pay with card, PayPal, or Buy Now Pay Later - 256-bit SSL throughout." } },
    { "type": "step", "settings": { "emoji": "??", "title": "We ship fast",       "description": "Orders are packed and dispatched within 1 business day." } },
    { "type": "step", "settings": { "emoji": "??", "title": "Enjoy your order",   "description": "Sit back, relax, and look forward to something great at your door." } }
  ],
  "max_blocks": 8
}
*/

$spacing_map = [ 'compact' => 'py-12', 'normal' => 'py-20', 'spacious' => 'py-32' ];

$spacing   = slbuild_get_field( 'spacing', 'attr' ) ?: 'normal';
$style     = slbuild_get_field( 'style', 'attr' ) ?: 'numbered';
$layout    = slbuild_get_field( 'layout', 'attr' ) ?: 'horizontal';
$connector = (bool) slbuild_get_field( 'connector', 'attr' );
$cs        = slbuild_get_color_scheme( slbuild_get_field( 'color_scheme', 'attr' ) ?: 'white' );
$pad       = $spacing_map[ $spacing ] ?? 'py-20';
$blocks    = slbuild_get_blocks();
$eyebrow   = slbuild_get_field( 'eyebrow' );
$headline  = slbuild_get_field( 'headline' );
$subtext   = slbuild_get_field( 'subtext' );
$tag       = slbuild_meta( 'heading_level' ) ?: 'h2';

$is_horizontal = ( 'horizontal' === $layout );
$grid_cls = $is_horizontal
  ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-' . count( $blocks ) . ' gap-8 relative'
  : 'flex flex-col gap-8 max-w-2xl mx-auto';
// Clamp column count for safety
$col_count = count( $blocks );
if ( $col_count > 6 ) { $col_count = 6; }
$grid_cls = $is_horizontal
  ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-' . $col_count . ' gap-8'
  : 'flex flex-col gap-8 max-w-2xl mx-auto';
?>
<section class="<?php echo esc_attr( $cs['bg'] . ' ' . $pad ); ?> px-6 md:px-12 lg:px-24">
  <div class="max-w-6xl mx-auto">

    <?php if ( $eyebrow || $headline || $subtext ) : ?>
      <div class="text-center mb-14">
        <?php if ( $eyebrow ) : ?>
          <p class="text-xs font-semibold uppercase tracking-widest <?php echo esc_attr( $cs['eyebrow'] ); ?> mb-3"><?php echo esc_html( $eyebrow ); ?></p>
        <?php endif; ?>
        <?php if ( $headline ) : ?>
          <<?php echo esc_attr( $tag ); ?> class="text-3xl md:text-4xl font-semibold tracking-tight <?php echo esc_attr( $cs['text'] ); ?> mb-4"><?php echo esc_html( $headline ); ?></<?php echo esc_attr( $tag ); ?>>
        <?php endif; ?>
        <?php if ( $subtext ) : ?>
          <p class="text-lg <?php echo esc_attr( $cs['sub'] ); ?> max-w-2xl mx-auto"><?php echo esc_html( $subtext ); ?></p>
        <?php endif; ?>
      </div>
    <?php endif; ?>

    <?php if ( ! empty( $blocks ) ) : ?>
      <div class="<?php echo esc_attr( $grid_cls ); ?>">
        <?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
        $i = 0;
        $total = count( $blocks );
        foreach ( $blocks as $block ) :
          SLBUILD_SectionLoader::instance()->set_current_block( $block );
          $emoji = slbuild_get_block_field( 'emoji' );
          $title = slbuild_get_block_field( 'title' );
          $desc  = slbuild_get_block_field( 'description' );
          $step_num = $i + 1;
          $is_last  = ( $step_num === $total );
          $i++;
        ?>
          <?php if ( $is_horizontal ) : ?>
            <div class="flex flex-col items-center text-center gap-4 relative">
              <?php if ( $connector && ! $is_last ) : ?>
                <div class="hidden lg:block absolute top-6 left-1/2 w-full h-px <?php echo esc_attr( $cs['border'] ); ?> border-t border-dashed"></div>
              <?php endif; ?>

              <?php if ( 'numbered' === $style ) : ?>
                <div class="relative z-10 w-12 h-12 rounded-full <?php echo esc_attr( $cs['card'] ); ?> border <?php echo esc_attr( $cs['border'] ); ?> flex items-center justify-center flex-shrink-0">
                  <span class="text-lg font-bold <?php echo esc_attr( $cs['eyebrow'] ); ?>"><?php echo esc_html( $step_num ); ?></span>
                </div>
              <?php elseif ( 'icon' === $style ) : ?>
                <div class="relative z-10 w-12 h-12 rounded-full <?php echo esc_attr( $cs['card'] ); ?> flex items-center justify-center flex-shrink-0 text-2xl">
                  <span><?php echo esc_html( $emoji ); ?></span>
                </div>
              <?php endif; ?>

              <div class="flex flex-col gap-2">
                <p class="font-semibold <?php echo esc_attr( $cs['text'] ); ?>"><?php echo esc_html( $title ); ?></p>
                <?php if ( $desc ) : ?>
                  <p class="text-sm leading-relaxed <?php echo esc_attr( $cs['sub'] ); ?>"><?php echo esc_html( $desc ); ?></p>
                <?php endif; ?>
              </div>
            </div>

          <?php else : // vertical ?>
            <div class="flex items-start gap-5">
              <?php if ( 'numbered' === $style ) : ?>
                <div class="flex-shrink-0 w-10 h-10 rounded-full <?php echo esc_attr( $cs['card'] ); ?> border <?php echo esc_attr( $cs['border'] ); ?> flex items-center justify-center">
                  <span class="text-sm font-bold <?php echo esc_attr( $cs['eyebrow'] ); ?>"><?php echo esc_html( $step_num ); ?></span>
                </div>
              <?php elseif ( 'icon' === $style ) : ?>
                <div class="flex-shrink-0 w-10 h-10 rounded-full <?php echo esc_attr( $cs['card'] ); ?> flex items-center justify-center text-xl">
                  <span><?php echo esc_html( $emoji ); ?></span>
                </div>
              <?php endif; ?>

              <div class="flex flex-col gap-1 pt-1">
                <p class="font-semibold <?php echo esc_attr( $cs['text'] ); ?>"><?php echo esc_html( $title ); ?></p>
                <?php if ( $desc ) : ?>
                  <p class="text-sm leading-relaxed <?php echo esc_attr( $cs['sub'] ); ?>"><?php echo esc_html( $desc ); ?></p>
                <?php endif; ?>
              </div>
            </div>
          <?php endif; ?>

        <?php endforeach; SLBUILD_SectionLoader::instance()->clear_current_block(); ?>
      </div>
    <?php endif; ?>

  </div>
</section>