<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
/*
@section
{
  "name": "Features",
  "category": "content",
  "heading_level": "h2",
  "settings": [
    { "id": "eyebrow",  "type": "text",     "label": "Eyebrow",  "default": "" },
    { "id": "headline", "type": "text",     "label": "Headline", "default": "Why choose us" },
    { "id": "subtext",  "type": "textarea", "label": "Sub Text", "default": "" },
    { "id": "layout", "type": "select", "label": "Icon Layout", "default": "icon-top",
      "options": [
        { "value": "icon-top",  "label": "Icon Top (stacked)" },
        { "value": "icon-left", "label": "Icon Left (horizontal)" }
      ]
    },
    { "id": "style", "type": "select", "label": "Style", "default": "card",
      "options": [
        { "value": "card",    "label": "Card (padded background)" },
        { "value": "minimal", "label": "Minimal (no background)" },
        { "value": "bordered","label": "Bordered (outline card)" }
      ]
    },
    { "id": "columns", "type": "select", "label": "Columns", "default": "3",
      "options": [
        { "value": "2", "label": "2 Columns" },
        { "value": "3", "label": "3 Columns" },
        { "value": "4", "label": "4 Columns" }
      ]
    },
    { "id": "icon_size", "type": "select", "label": "Icon / Emoji Size", "default": "md",
      "options": [
        { "value": "sm", "label": "Small" },
        { "value": "md", "label": "Medium" },
        { "value": "lg", "label": "Large" }
      ]
    },
    { "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": "feature",
      "name": "Feature",
      "limit": 12,
      "settings": [
        { "id": "icon",      "type": "image",    "label": "Icon / Image",        "default": "",
          "hint": "Optional - upload a small SVG or PNG icon (64-64px recommended)" },
        { "id": "icon_alt",  "type": "text",     "label": "Icon Alt Text",       "default": "" },
        { "id": "emoji",     "type": "text",     "label": "Emoji (if no icon)",  "default": "⚡",
          "hint": "Used as fallback when no icon image is uploaded" },
        { "id": "title",     "type": "text",     "label": "Title",               "default": "Feature Title", "required": true },
        { "id": "description","type":"textarea", "label": "Description",          "default": "" },
        { "id": "link_text", "type": "text",     "label": "Link Text",           "default": "",
          "hint": "Optional - e.g. 'Learn more'. Leave blank to hide." },
        { "id": "link_url",  "type": "url",      "label": "Link URL",            "default": "" }
      ]
    }
  ],
  "default_blocks": [
    { "type": "feature", "settings": { "emoji": "⚡", "icon": "", "icon_alt": "", "title": "Lightning Fast",    "description": "Optimised from the ground up so your store loads instantly - on any device.", "link_text": "", "link_url": "" } },
    { "type": "feature", "settings": { "emoji": "??", "icon": "", "icon_alt": "", "title": "Secure by Default", "description": "256-bit SSL, PCI-compliant checkout, and automatic fraud detection keep every order safe.", "link_text": "", "link_url": "" } },
    { "type": "feature", "settings": { "emoji": "??", "icon": "", "icon_alt": "", "title": "Ships Worldwide",   "description": "We deliver to 40+ countries. Real-time rates at checkout, with tracking from day one.", "link_text": "", "link_url": "" } }
  ],
  "max_blocks": 12
}
*/

$spacing_map   = [ 'compact' => 'py-12', 'normal' => 'py-20', 'spacious' => 'py-32' ];
$columns_map   = [ '2' => 'grid-cols-1 sm:grid-cols-2', '3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3', '4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4' ];
$icon_size_map = [ 'sm' => 'w-8 h-8 text-2xl', 'md' => 'w-12 h-12 text-4xl', 'lg' => 'w-16 h-16 text-5xl' ];

$spacing   = slbuild_get_field( 'spacing', 'attr' ) ?: 'normal';
$layout    = slbuild_get_field( 'layout', 'attr' ) ?: 'icon-top';
$style     = slbuild_get_field( 'style', 'attr' ) ?: 'card';
$columns   = slbuild_get_field( 'columns', 'attr' ) ?: '3';
$icon_size = slbuild_get_field( 'icon_size', 'attr' ) ?: 'md';
$cs        = slbuild_get_color_scheme( slbuild_get_field( 'color_scheme', 'attr' ) ?: 'white' );
$pad       = $spacing_map[ $spacing ] ?? 'py-20';
$col_cls   = $columns_map[ $columns ] ?? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
$icon_cls  = $icon_size_map[ $icon_size ] ?? 'w-12 h-12 text-4xl';
$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_icon_left = ( 'icon-left' === $layout );
?>
<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="grid <?php echo esc_attr( $col_cls ); ?> gap-6">
        <?php foreach ( $blocks as $block ) :
          SLBUILD_SectionLoader::instance()->set_current_block( $block );
          $icon      = slbuild_get_block_field( 'icon', 'url' );
          $icon_alt  = slbuild_get_block_field( 'icon_alt' );
          $emoji     = slbuild_get_block_field( 'emoji' );
          $title     = slbuild_get_block_field( 'title' );
          $desc      = slbuild_get_block_field( 'description' );
          $link_text = slbuild_get_block_field( 'link_text' );
          $link_url  = slbuild_get_block_field( 'link_url', 'url' );

          // Wrapper classes per style
          if ( 'card' === $style ) {
            $wrap_cls = esc_attr( $cs['card'] ) . ' rounded-2xl p-8';
          } elseif ( 'bordered' === $style ) {
            $wrap_cls = 'border ' . esc_attr( $cs['border'] ) . ' rounded-2xl p-8';
          } else {
            $wrap_cls = 'p-2';
          }
        ?>

          <?php if ( $is_icon_left ) : ?>
            <div class="flex items-start gap-5 <?php echo esc_attr( $wrap_cls ); ?>">
              <div class="flex-shrink-0 <?php echo esc_attr( $icon_cls ); ?> flex items-center justify-center">
                <?php if ( $icon ) : ?>
                  <img src="<?php echo esc_url( $icon ); ?>" alt="<?php echo esc_attr( $icon_alt ); ?>" class="w-full h-full object-contain">
                <?php else : ?>
                  <span><?php echo esc_html( $emoji ); ?></span>
                <?php endif; ?>
              </div>
              <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; ?>
                <?php if ( $link_text ) : ?>
                  <a href="<?php echo esc_url( $link_url ?: '#' ); ?>" class="text-sm font-semibold <?php echo esc_attr( $cs['eyebrow'] ); ?> mt-1 hover:underline"><?php echo esc_html( $link_text ); ?> &rarr;</a>
                <?php endif; ?>
              </div>
            </div>

          <?php else : // icon-top ?>
            <div class="flex flex-col gap-4 <?php echo esc_attr( $wrap_cls ); ?>">
              <div class="<?php echo esc_attr( $icon_cls ); ?> flex items-center justify-center self-start">
                <?php if ( $icon ) : ?>
                  <img src="<?php echo esc_url( $icon ); ?>" alt="<?php echo esc_attr( $icon_alt ); ?>" class="w-full h-full object-contain">
                <?php else : ?>
                  <span><?php echo esc_html( $emoji ); ?></span>
                <?php endif; ?>
              </div>
              <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; ?>
              <?php if ( $link_text ) : ?>
                <a href="<?php echo esc_url( $link_url ?: '#' ); ?>" class="text-sm font-semibold <?php echo esc_attr( $cs['eyebrow'] ); ?> mt-auto hover:underline"><?php echo esc_html( $link_text ); ?> &rarr;</a>
              <?php endif; ?>
            </div>
          <?php endif; ?>

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

  </div>
</section>