<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
/*
@section
{
  "name": "Categories",
  "category": "navigation",
  "heading_level": "h2",
  "settings": [
    { "id": "eyebrow",  "type": "text",   "label": "Eyebrow",  "default": "" },
    { "id": "headline", "type": "text",   "label": "Headline", "default": "Shop by Category" },
    { "id": "source",   "type": "select", "label": "Source",   "default": "woocommerce",
      "hint": "WooCommerce pulls top-level categories automatically. Manual lets you pick any category with a custom image.",
      "options": [
        { "value": "woocommerce", "label": "WooCommerce Categories (automatic)" },
        { "value": "manual",      "label": "Manual (use blocks below)" }
      ]
    },
    { "id": "count",   "type": "number", "label": "Max Categories (WooCommerce source)", "default": "6", "min": "1", "max": "20" },
    { "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": "card_style", "type": "select", "label": "Card Style", "default": "overlay",
      "options": [
        { "value": "overlay", "label": "Image with Text Overlay" },
        { "value": "below",   "label": "Text Below Image" },
        { "value": "minimal", "label": "Text Only (no image)" }
      ]
    },
    { "id": "image_ratio", "type": "select", "label": "Image Ratio", "default": "square",
      "options": [
        { "value": "square",    "label": "Square (1:1)" },
        { "value": "landscape", "label": "Landscape (4:3)" },
        { "value": "portrait",  "label": "Portrait (3:4)" }
      ]
    },
    { "id": "show_count", "type": "toggle", "label": "Show Product Count", "default": "" },
    { "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": "category",
      "name": "Category",
      "limit": 12,
      "settings": [
        { "id": "name",      "type": "text",  "label": "Name",       "default": "Category Name" },
        { "id": "image",     "type": "image", "label": "Image",      "default": "" },
        { "id": "image_alt", "type": "text",  "label": "Image Alt",  "default": "",              "hint": "Describe the image for screen readers" },
        { "id": "url",       "type": "url",   "label": "URL",        "default": "" },
        { "id": "count",     "type": "text",  "label": "Count Label","default": "",              "hint": "e.g. '48 products' - shown when 'Show Product Count' is on" }
      ]
    }
  ],
  "default_blocks": [
    { "type": "category", "settings": { "name": "Bestsellers",    "image": "", "image_alt": "", "url": "", "count": "24 products" } },
    { "type": "category", "settings": { "name": "New Arrivals",   "image": "", "image_alt": "", "url": "", "count": "12 products" } },
    { "type": "category", "settings": { "name": "On Sale",        "image": "", "image_alt": "", "url": "", "count": "18 products" } }
  ]
}
*/

$spacing_map = [ 'compact' => 'py-12', 'normal' => 'py-20', 'spacious' => 'py-32' ];
$columns_map = [ '2' => 'grid-cols-2', '3' => 'grid-cols-2 md:grid-cols-3', '4' => 'grid-cols-2 md:grid-cols-4' ];
$ratio_map   = [ 'square' => 'aspect-square', 'landscape' => 'aspect-[4/3]', 'portrait' => 'aspect-[3/4]' ];

$spacing     = slbuild_get_field( 'spacing', 'attr' ) ?: 'normal';
$source      = slbuild_get_field( 'source', 'attr' ) ?: 'woocommerce';
$columns     = slbuild_get_field( 'columns', 'attr' ) ?: '3';
$count       = (int) ( slbuild_get_field( 'count', 'attr' ) ?: 6 );
$card_style  = slbuild_get_field( 'card_style', 'attr' ) ?: 'overlay';
$image_ratio = slbuild_get_field( 'image_ratio', 'attr' ) ?: 'square';
$show_count  = (bool) slbuild_get_field( 'show_count', 'attr' );
$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-2 md:grid-cols-3';
$ratio_cls   = $ratio_map[ $image_ratio ] ?? 'aspect-square';
$eyebrow     = slbuild_get_field( 'eyebrow' );
$headline    = slbuild_get_field( 'headline' );
$tag         = slbuild_meta( 'heading_level' ) ?: 'h2';

$items = [];
if ( 'woocommerce' === $source && class_exists( 'WooCommerce' ) ) {
	$cats = get_terms( [
		'taxonomy'   => 'product_cat',
		'hide_empty' => true,
		'parent'     => 0,
		'number'     => $count,
		'orderby'    => 'menu_order',
	] );
	if ( ! is_wp_error( $cats ) ) {
		foreach ( $cats as $cat ) {
			$thumb_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
			$items[]  = [
				'name'  => $cat->name,
				'image' => $thumb_id ? wp_get_attachment_image_url( $thumb_id, 'medium' ) : '',
				'url'   => get_term_link( $cat ),
				/* translators: %s: product count */
				'count' => $show_count ? sprintf( _n( '%s product', '%s products', $cat->count, 'slb-section-layout-builder' ), number_format_i18n( $cat->count ) ) : '',
			];
		}
	}
} else {
	foreach ( slbuild_get_blocks() as $block ) {
		SLBUILD_SectionLoader::instance()->set_current_block( $block );
		$items[] = [
			'name'  => slbuild_get_block_field( 'name' ),
			'image' => slbuild_get_block_field( 'image', 'url' ),
			'alt'   => slbuild_get_block_field( 'image_alt' ),
			'url'   => slbuild_get_block_field( 'url', 'url' ),
			'count' => $show_count ? slbuild_get_block_field( 'count' ) : '',
		];
	}
	SLBUILD_SectionLoader::instance()->clear_current_block();
}
?>
<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 ) : ?>
      <div class="mb-10">
        <?php if ( $eyebrow ) : ?>
          <p class="text-xs font-semibold uppercase tracking-widest <?php echo esc_attr( $cs['eyebrow'] ); ?> mb-2"><?php echo esc_html( $eyebrow ); ?></p>
        <?php endif; ?>
        <?php if ( $headline ) : ?>
          <<?php echo esc_attr( $tag ); ?> class="text-3xl font-semibold tracking-tight <?php echo esc_attr( $cs['text'] ); ?>"><?php echo esc_html( $headline ); ?></<?php echo esc_attr( $tag ); ?>>
        <?php endif; ?>
      </div>
    <?php endif; ?>

    <?php if ( ! empty( $items ) ) : ?>
      <div class="grid <?php echo esc_attr( $col_cls ); ?> gap-6">
        <?php foreach ( $items as $item ) :
          $img    = $item['image'] ?? '';
          $alt    = $item['alt'] ?? $item['name'];
          $url    = $item['url'] ?? '#';
          $label  = $item['name'] ?? '';
          $ct     = $item['count'] ?? '';
        ?>
          <?php if ( 'overlay' === $card_style ) : ?>
            <a href="<?php echo esc_url( $url ); ?>" class="group block relative <?php echo esc_attr( $ratio_cls ); ?> rounded-2xl overflow-hidden">
              <?php if ( $img ) : ?>
                <img src="<?php echo esc_url( $img ); ?>" alt="<?php echo esc_attr( $alt ); ?>"
                     class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy">
              <?php else : ?>
                <div class="absolute inset-0 bg-gray-100"></div>
              <?php endif; ?>
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-5">
                <p class="text-white font-semibold text-base"><?php echo esc_html( $label ); ?></p>
                <?php if ( $ct ) : ?>
                  <p class="text-white/70 text-sm mt-0.5"><?php echo esc_html( $ct ); ?></p>
                <?php endif; ?>
              </div>
            </a>

          <?php elseif ( 'below' === $card_style ) : ?>
            <a href="<?php echo esc_url( $url ); ?>" class="group block">
              <div class="<?php echo esc_attr( $ratio_cls ); ?> <?php echo esc_attr( $cs['card'] ); ?> rounded-2xl overflow-hidden mb-3">
                <?php if ( $img ) : ?>
                  <img src="<?php echo esc_url( $img ); ?>" alt="<?php echo esc_attr( $alt ); ?>"
                       class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy">
                <?php endif; ?>
              </div>
              <p class="text-sm font-semibold <?php echo esc_attr( $cs['text'] ); ?> text-center"><?php echo esc_html( $label ); ?></p>
              <?php if ( $ct ) : ?>
                <p class="text-xs <?php echo esc_attr( $cs['sub'] ); ?> text-center mt-0.5"><?php echo esc_html( $ct ); ?></p>
              <?php endif; ?>
            </a>

          <?php else : // minimal ?>
            <a href="<?php echo esc_url( $url ); ?>"
               class="flex items-center justify-between gap-3 py-4 border-b <?php echo esc_attr( $cs['border'] ); ?> group">
              <span class="font-semibold <?php echo esc_attr( $cs['text'] ); ?> group-hover:<?php echo esc_attr( $cs['eyebrow'] ); ?> transition-colors">
                <?php echo esc_html( $label ); ?>
              </span>
              <?php if ( $ct ) : ?>
                <span class="text-sm <?php echo esc_attr( $cs['sub'] ); ?>"><?php echo esc_html( $ct ); ?></span>
              <?php endif; ?>
            </a>
          <?php endif; ?>

        <?php endforeach; ?>
      </div>
    <?php endif; ?>

  </div>
</section>