<?php include_once(ESSB3_PLUGIN_ROOT . 'lib/admin/helpers/about-page-header.php'); ?>
<?php
/**
 * ESSB Add-ons Page — Primary Card Grid Design
 * Uses ESSB_MyAddons_API::get_split_addons() which returns:
 *   [ 'featured' => [...], 'addons' => [...] ]
 * Each add-on entry matches the same structure as get_free_addons_full().
 */

if (! function_exists('get_plugins')) {
	require_once wp_normalize_path(ABSPATH . 'wp-admin/includes/plugin.php');
}

$split           = ESSB_MyAddons_API::get_split_addons();
$featured_list   = isset($split['featured']) ? $split['featured'] : array();
$all_list        = isset($split['addons'])   ? $split['addons']   : array();
$current_plugins = essb_get_site_plugins();

// Collect unique categories from all add-ons for the filter bar
$all_categories = array();
foreach ($all_list as $data) {
	$cat = isset($data['category']) ? trim($data['category']) : '';
	if ($cat !== '' && ! in_array($cat, $all_categories, true)) {
		$all_categories[] = $cat;
	}
}
sort($all_categories);

$count_featured = count($featured_list);
$count_all      = count($all_list);

/**
 * Helper: resolve install/activate/deactivate state for one add-on key.
 * Returns array: url_command, command_text, command_class, not_compatible.
 */
function essb_addons_resolve_state($key, $data, $current_plugins)
{
	$not_compatible = false;
	$pro_running = false;
	$requires       = isset($data['requires']) ? $data['requires'] : '';
	if (! empty($requires) && version_compare(ESSB3_VERSION, $requires) < 0) {
		$not_compatible = true;
	}
	
						// ------------------------------------------------------------------
						// Pro Check
						// ------------------------------------------------------------------
						if (isset($data['pro_check'])) {
							$pro_check_param = isset($data['pro_check']['param']) ? $data['pro_check']['param'] : '';
							$pro_check_type = isset($data['pro_check']['type']) ? $data['pro_check']['type'] : '';
							
							if (!empty($pro_check_type) && !empty($pro_check_param)) {
								if ($pro_check_type == 'param') {
									if (defined($pro_check_param)) {
										$pro_running = true;
									}
								}
								if ($pro_check_type == 'function') {
									if (function_exists($pro_check_param)) {
										$pro_running = true;
									}
								}
								if ($pro_check_type == 'class') {
									if (class_exists($pro_check_param)) {
										$pro_running = true;
									}
								}
							}
							
							if ($pro_running) {
								$not_compatible = true;
							}
						}
	

	$url_install = wp_nonce_url(
		add_query_arg(
			array(
				'plugin'             => urlencode($key),
				'essb-tgmpa-install' => 'install-plugin',
			),
			ESSB_TGM_Plugin_Activation::$instance->get_tgmpa_url()
		),
		'essb-tgmpa-install',
		'essb-tgmpa-nonce'
	);

	$url_command   = $url_install;
	$command_text  = 'Install';
	$command_class = 'button-primary';
	
	$is_active = false;

	if (isset($current_plugins[$key])) {
		$addon_slug     = $current_plugins[$key]['path'];
		$url_activate   = wp_nonce_url("plugins.php?action=activate&plugin={$addon_slug}", "activate-plugin_{$addon_slug}");
		$url_deactivate = wp_nonce_url("plugins.php?action=deactivate&plugin={$addon_slug}", "deactivate-plugin_{$addon_slug}");
		$is_active      = (bool) $current_plugins[$key]['active'];
		$url_command    = $is_active ? $url_deactivate : $url_activate;
		$command_text   = $is_active ? 'Deactivate' : 'Activate';
		$command_class  = $is_active ? 'button-deactivate' : 'button-activate';
	}

	return array(
		'url_command'    => $url_command,
		'command_text'   => $command_text,
		'command_class'  => $command_class,
		'not_compatible' => $not_compatible,
		'pro_running'    => $pro_running,
		'active'         => $is_active,
		'requires'       => $requires,
	);
}

/**
 * Helper: render the icon wrap using svg_icon, color, svg_icon_color, svg_color_type.
 * $size_class = 'essb-addons-card-icon-wrap' (card) or custom class
 */
function essb_addons_render_icon($data, $wrap_class = 'essb-addons-card-icon-wrap')
{
	$svg        = isset($data['svg_icon'])       ? $data['svg_icon']       : '';
	$bg         = isset($data['color'])          ? $data['color']          : '#e4e9f5';
	$icon_color = isset($data['svg_icon_color']) ? $data['svg_icon_color'] : '#ffffff';
	$color_type = isset($data['svg_color_type']) ? $data['svg_color_type'] : 'fill';

	$css = 'background:' . esc_attr($bg) . '; --essb-icon-c:' . esc_attr($icon_color) . ';';
	echo '<div class="' . esc_attr($wrap_class) . ' essb-icon-' . esc_attr($color_type) . '" style="' . $css . '">';
	echo $svg; // Trusted internal API data
	echo '</div>';
}

/**
 * Helper: render a single card.
 * $section = 'featured' | 'all'
 */
function essb_addons_render_card($key, $data, $current_plugins, $section = 'all')
{
	$state       = essb_addons_resolve_state($key, $data, $current_plugins);
	$is_featured = ! empty($data['featured']) || $section === 'featured';
	$is_free     = isset($data['type']) && strtolower($data['type']) === 'free';
	$is_premium  = ! $is_free;
	$not_compat  = $state['not_compatible'];
	$pro_running  = $state['pro_running'];
	$active_state  = $state['active'];

	$name    = isset($data['name'])        ? $data['name']        : $key;
	$desc    = isset($data['description']) ? $data['description'] : '';
	$cat     = isset($data['category'])    ? trim($data['category']) : '';
	$cat_lc  = strtolower($cat);
	$docs    = isset($data['docs'])        ? $data['docs']        : '';
	$page    = isset($data['page'])        ? $data['page']        : '';

	// Card classes
	$card_classes = array('essb-addons-card');
	if ($is_featured)  $card_classes[] = 'essb-addons-card-featured';
	if ($is_free)      $card_classes[] = 'essb-addons-card-type-free';
	if ($is_premium)   $card_classes[] = 'essb-addons-card-type-premium';
	if ($not_compat)   $card_classes[] = 'essb-addons-card-incompatible';

	$cat_attr = $cat_lc !== '' ? ' data-addon-category="' . esc_attr($cat_lc) . '"' : '';
	$type_attr = ' data-addon-type="' . esc_attr($is_free ? 'free' : 'premium') . '"';

	echo '<div class="' . implode(' ', $card_classes) . '"' . $cat_attr . $type_attr . '>';

	// ---- Body ----
	echo '<div class="essb-addons-card-body">';

	// Top row: icon + type badge
	echo '<div class="essb-addons-card-top">';
	essb_addons_render_icon($data);
	if ($active_state) {
		echo '<span class="essb-addons-card-type-badge essb-addons-card-type-badge-active">';
		echo '<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
		echo esc_html__('Active', 'essb');
		echo '</span>';
	}

	if ($is_free) {
		echo '<span class="essb-addons-card-type-badge essb-addons-card-type-badge-free">';
		echo '<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
		echo esc_html__('Free', 'essb');
		echo '</span>';
	} else {
		echo '<span class="essb-addons-card-type-badge essb-addons-card-type-badge-premium">';
		echo '<svg viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>';
		echo esc_html__('Premium', 'essb');
		echo '</span>';
	}
	echo '</div>'; // card-top

	// Meta: category tag
	if ($cat !== '') {
		echo '<div class="essb-addons-card-meta">';
		echo '<span class="essb-addons-card-category">' . esc_html($cat) . '</span>';
		echo '</div>';
	}

	// Title
	echo '<h3 class="essb-addons-card-title">' . esc_html($name) . '</h3>';

	// Description
	echo '<p class="essb-addons-card-desc">' . esc_html($desc) . '</p>';

	// Incompatible notice
	if ($not_compat && !$pro_running) {
		echo '<div class="essb-addons-card-incompat-notice">';
		echo '<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>';
		echo sprintf(esc_html__('Requires version %s', 'essb'), esc_html($state['requires']));
		echo '</div>';
	}

	// Incompatible notice
	if ($not_compat && $pro_running) {
		echo '<div class="essb-addons-card-incompat-notice">';
		echo '<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>';
		echo esc_html__('Pro version is currently active.', 'essb');
		echo '</div>';
	}
	
	// Link buttons (docs / learn more / page)
	$has_links = ! empty($docs) || ! empty($page);
	echo '<div class="essb-addons-card-links">';
	if (! empty($docs)) {
		echo '<a href="' . esc_url($docs) . '" target="_blank" rel="noopener noreferrer" class="essb-addons-card-link-btn">';
		echo '<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>';
		echo esc_html__('Documentation', 'essb');
		echo '</a>';
	}
	if (! empty($page)) {
		echo '<a href="' . esc_url($page) . '" target="_blank" rel="noopener noreferrer" class="essb-addons-card-link-btn">';
		echo '<svg viewBox="0 0 20 20"><path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/><path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/></svg>';
		echo esc_html__('Learn More', 'essb');
		echo '</a>';
	}
	echo '</div>'; // card-links

	echo '</div>'; // card-body

	// ---- Footer ----
	if ($not_compat) {
		echo '<div class="essb-addons-card-footer-empty"></div>';
	} else {
		echo '<div class="essb-addons-card-footer">';

		if ($is_premium) {
			// Premium: always "Learn More" action button
			$learn_href = ! empty($page) ? $page : (! empty($docs) ? $docs : '#');
			echo '<a href="' . esc_url($learn_href) . '" target="_blank" rel="noopener noreferrer" class="essb-addons-card-btn essb-addons-card-btn-learnmore">';
			echo '<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>';
			echo esc_html__('Learn More', 'essb');
			echo '</a>';
		} else {
			// Free + activated: install / activate / deactivate
			echo '<a class="button ' . esc_attr($state['command_class']) . '" href="' . esc_url($state['url_command']) . '">' . esc_html($state['command_text']) . '</a>';
		}

		echo '</div>'; // card-footer
	}

	echo '</div>'; // card
}
?>

<style>
	/* ============================================================
   ESSB ADD-ONS PAGE — Card Grid
   Prefix: essb-addons-
   ============================================================ */

	.essb-control-content-fullwidth {
		width: 100% !important;
	}

	.essb-addons-wrap {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		color: #121212;
		box-sizing: border-box;
		padding: 30px;
	}

	.essb-addons-wrap *,
	.essb-addons-wrap *::before,
	.essb-addons-wrap *::after {
		box-sizing: inherit;
	}

	/* ---- CSS Variables ---- */
	.essb-addons-wrap {
		--essb-primary: #1b84ff;
		--essb-primary-dark: #0e6fd4;
		--essb-primary-light: #e8f3ff;
		--essb-secondary: #172153;
		--essb-muted: #6b7280;
		--essb-light: #9ca3af;
		--essb-bg: #ffffff;
		--essb-bg-light: #eff3fc;
		--essb-border: #e4e9f5;
		--essb-border-light: #f0f3fa;
		--essb-free: #10b981;
		--essb-free-bg: #ecfdf5;
		--essb-premium: #f59e0b;
		--essb-premium-bg: #fffbeb;
		--essb-incompat-bg: #f3f4f6;
		--essb-radius: 5px;
		--essb-shadow-sm: 0 1px 3px rgba(23, 33, 83, .07), 0 1px 2px rgba(23, 33, 83, .04);
		--essb-shadow-hover: 0 8px 24px rgba(27, 132, 255, .13), 0 3px 8px rgba(27, 132, 255, .08);
	}

	/* ---- Section header ---- */
	.essb-addons-section {
		margin-bottom: 28px;
	}

	.essb-addons-section-header {
		display: flex;
		align-items: center;
		gap: 9px;
		margin-bottom: 14px;
	}

	.essb-addons-section-icon {
		width: 26px;
		height: 26px;
		border-radius: var(--essb-radius);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.essb-addons-section-icon svg {
		width: 14px;
		height: 14px;
		fill: #fff;
	}

	.essb-addons-section-icon-featured {
		background: var(--essb-primary);
	}

	.essb-addons-section-icon-all {
		background: var(--essb-secondary);
	}

	.essb-addons-section-title {
		font-size: 13px;
		font-weight: 700;
		color: var(--essb-secondary);
		margin: 0;
		letter-spacing: -.1px;
	}

	.essb-addons-section-badge {
		background: var(--essb-bg-light);
		color: var(--essb-muted);
		font-size: 11px;
		font-weight: 600;
		padding: 2px 7px;
		border-radius: 3px;
		border: 1px solid var(--essb-border);
	}

	.essb-addons-section-line {
		flex: 1;
		height: 1px;
		background: var(--essb-border);
	}

	/* ---- Filter bar ---- */
	.essb-addons-filter-bar {
		background: var(--essb-bg);
		border: 1px solid var(--essb-border);
		border-radius: var(--essb-radius);
		padding: 9px 14px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		box-shadow: var(--essb-shadow-sm);
	}

	.essb-addons-filter-label {
		font-size: 11px;
		font-weight: 600;
		color: var(--essb-muted);
		text-transform: uppercase;
		letter-spacing: .7px;
		white-space: nowrap;
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.essb-addons-filter-label svg {
		width: 12px;
		height: 12px;
		fill: var(--essb-muted);
	}

	.essb-addons-filter-divider {
		width: 1px;
		height: 20px;
		background: var(--essb-border);
		flex-shrink: 0;
	}

	.essb-addons-filter-group {
		display: flex;
		align-items: center;
		gap: 4px;
		flex-wrap: wrap;
	}

	.essb-addons-filter-group-label {
		font-size: 11px;
		font-weight: 600;
		color: var(--essb-light);
		text-transform: uppercase;
		letter-spacing: .5px;
		margin-right: 2px;
		white-space: nowrap;
	}

	/* Type filter — single select */
	.essb-addons-filter-btn {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 5px 10px;
		border-radius: var(--essb-radius);
		border: 1px solid var(--essb-border);
		background: var(--essb-bg);
		color: var(--essb-muted);
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
		transition: all .15s ease;
		white-space: nowrap;
		font-family: inherit;
		line-height: 1;
	}

	.essb-addons-filter-btn:hover {
		border-color: var(--essb-primary);
		color: var(--essb-primary);
		background: var(--essb-primary-light);
	}

	.essb-addons-filter-btn.essb-filter-active {
		border-color: var(--essb-primary);
		background: var(--essb-primary);
		color: #fff;
	}

	.essb-addons-filter-btn-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.essb-addons-filter-btn-dot-free {
		background: var(--essb-free);
	}

	.essb-addons-filter-btn-dot-premium {
		background: var(--essb-premium);
	}

	.essb-addons-filter-btn.essb-filter-active .essb-addons-filter-btn-dot {
		background: rgba(255, 255, 255, .8);
	}

	.essb-addons-filter-count {
		background: var(--essb-bg-light);
		color: var(--essb-muted);
		border-radius: 3px;
		padding: 1px 5px;
		font-size: 10px;
		font-weight: 700;
	}

	.essb-addons-filter-btn.essb-filter-active .essb-addons-filter-count {
		background: rgba(255, 255, 255, .22);
		color: #fff;
	}

	/* Category — multi select */
	.essb-addons-filter-cat-btn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 4px 9px;
		border-radius: var(--essb-radius);
		border: 1px solid var(--essb-border);
		background: var(--essb-bg);
		color: var(--essb-muted);
		font-size: 12px;
		font-weight: 500;
		cursor: pointer;
		transition: all .15s ease;
		white-space: nowrap;
		font-family: inherit;
		line-height: 1;
	}

	.essb-addons-filter-cat-btn:hover {
		border-color: var(--essb-primary);
		color: var(--essb-primary);
		background: var(--essb-primary-light);
	}

	.essb-addons-filter-cat-btn.essb-filter-cat-active {
		border-color: var(--essb-secondary);
		background: var(--essb-secondary);
		color: #fff;
	}

	/* ---- 4-column grid ---- */
	.essb-addons-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	/* ---- Card ---- */
	.essb-addons-card {
		background: var(--essb-bg);
		border: 1px solid var(--essb-border);
		border-radius: var(--essb-radius);
		display: flex;
		flex-direction: column;
		box-shadow: var(--essb-shadow-sm);
		transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
		position: relative;
		overflow: hidden;
	}

	.essb-addons-card:hover {
		box-shadow: var(--essb-shadow-hover);
		transform: translateY(-2px);
		border-color: rgba(27, 132, 255, .25);
	}

	/* Top colour stripe */
	.essb-addons-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: var(--essb-border-light);
		border-radius: var(--essb-radius) var(--essb-radius) 0 0;
	}

	/* Featured = blue stripe always */
	.essb-addons-card-featured::before {
		background: linear-gradient(90deg, var(--essb-primary), #60a8ff);
	}

	/* Non-featured type stripes */
	.essb-addons-section-all .essb-addons-card-type-free::before {
		background: linear-gradient(90deg, var(--essb-free), #34d399);
	}

	.essb-addons-section-all .essb-addons-card-type-premium::before {
		background: linear-gradient(90deg, var(--essb-premium), #fb923c);
	}

	/* Incompatible */
	.essb-addons-card-incompatible {
		opacity: .72;
	}

	.essb-addons-card-incompatible:hover {
		transform: none;
		box-shadow: var(--essb-shadow-sm);
		border-color: var(--essb-border);
	}

	.essb-addons-card-incompatible::before {
		background: var(--essb-incompat-bg);
	}

	/* Card body */
	.essb-addons-card-body {
		padding: 15px 15px 11px;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	/* Top row: icon + badge */
	.essb-addons-card-top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 10px;
		gap: 5px;
	}

	/* Icon wrap — size & coloring */
	.essb-addons-card-icon-wrap {
		width: 50px;
		height: 50px;
		border-radius: var(--essb-radius);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-right: auto;
	}

	.essb-addons-card-icon-wrap svg {
		width: 28px;
		height: 28px;
		display: block;
		flex-shrink: 0;
	}

	/* SVG icon colour — fill type */
	.essb-addons-card-icon-wrap.essb-icon-fill svg path,
	.essb-addons-card-icon-wrap.essb-icon-fill svg rect,
	.essb-addons-card-icon-wrap.essb-icon-fill svg circle,
	.essb-addons-card-icon-wrap.essb-icon-fill svg polygon {
		fill: var(--essb-icon-c, #ffffff);
	}

	/* SVG icon colour — stroke type */
	.essb-addons-card-icon-wrap.essb-icon-stroke svg path,
	.essb-addons-card-icon-wrap.essb-icon-stroke svg rect,
	.essb-addons-card-icon-wrap.essb-icon-stroke svg circle,
	.essb-addons-card-icon-wrap.essb-icon-stroke svg polygon {
		stroke: var(--essb-icon-c, #ffffff);
		fill: none;
	}

	/* Type badge */
	.essb-addons-card-type-badge {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 3px 7px;
		border-radius: var(--essb-radius);
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .5px;
		flex-shrink: 0;
		margin-top: 2px;
	}

	.essb-addons-card-type-badge svg {
		width: 9px;
		height: 9px;
		fill: currentColor;
	}

	.essb-addons-card-type-badge-free {
		background: var(--essb-free-bg);
		color: #059669;
		border: 1px solid rgba(16, 185, 129, .2);
	}

	.essb-addons-card-type-badge-premium {
		background: var(--essb-premium-bg);
		color: #d97706;
		border: 1px solid rgba(245, 158, 11, .22);
	}
	
	.essb-addons-card-type-badge-active {
		background: var(--essb-primary-light);
		color: var(--essb-primary);
		border: 1px solid rgba(27, 132, 255, .22);
	}	

	/* Category tag */
	.essb-addons-card-meta {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 6px;
	}

	.essb-addons-card-category {
		display: inline-flex;
		align-items: center;
		font-size: 10px;
		font-weight: 600;
		color: var(--essb-primary);
		text-transform: uppercase;
		letter-spacing: .5px;
		padding: 2px 6px;
		background: var(--essb-primary-light);
		border-radius: 3px;
		width: fit-content;
	}

	/* Title */
	.essb-addons-card-title {
		font-size: 13px;
		font-weight: 700;
		color: var(--essb-secondary);
		margin: 0 0 6px;
		line-height: 1.3;
	}

	/* Description */
	.essb-addons-card-desc {
		font-size: 12px;
		color: var(--essb-muted);
		line-height: 1.6;
		margin: 0 0 10px;
		flex: 1;
	}

	/* Incompatible notice in body */
	.essb-addons-card-incompat-notice {
		display: flex;
		align-items: center;
		gap: 5px;
		background: #fef2f2;
		border: 1px solid #fecaca;
		border-radius: var(--essb-radius);
		padding: 5px 8px;
		font-size: 11px;
		color: #dc2626;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.essb-addons-card-incompat-notice svg {
		width: 11px;
		height: 11px;
		fill: #dc2626;
		flex-shrink: 0;
	}

	/* Link buttons (docs / learn more) inside body */
	.essb-addons-card-links {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
		min-height: 24px;
	}

	.essb-addons-card-link-btn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 4px 9px;
		border-radius: var(--essb-radius);
		border: 1px solid var(--essb-border);
		background: var(--essb-bg);
		color: var(--essb-muted);
		font-size: 11px;
		font-weight: 500;
		text-decoration: none;
		cursor: pointer;
		transition: all .14s ease;
		font-family: inherit;
		line-height: 1;
	}

	.essb-addons-card-link-btn:hover {
		border-color: var(--essb-primary);
		color: var(--essb-primary);
		background: var(--essb-primary-light);
	}

	.essb-addons-card-link-btn svg {
		width: 10px;
		height: 10px;
		fill: currentColor;
		flex-shrink: 0;
	}

	/* Card footer */
	.essb-addons-card-footer {
		padding: 9px 15px 12px;
		border-top: 1px solid var(--essb-border-light);
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.essb-addons-card-footer-empty {
		border-top: 1px solid var(--essb-border-light);
		height: 8px;
	}

	/* Card action buttons */
	.essb-addons-card-btn {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 6px 13px;
		border-radius: var(--essb-radius);
		font-size: 12px;
		font-weight: 600;
		cursor: pointer;
		transition: all .14s ease;
		border: 1px solid transparent;
		text-decoration: none;
		font-family: inherit;
		white-space: nowrap;
		line-height: 1;
	}

	.essb-addons-card-btn svg {
		width: 11px;
		height: 11px;
		fill: currentColor;
		flex-shrink: 0;
	}

	.essb-addons-card-btn-learnmore {
		background: var(--essb-secondary);
		color: #fff;
		border-color: var(--essb-secondary);
	}

	.essb-addons-card-btn-learnmore:hover {
		background: #1e2d6e;
		border-color: #1e2d6e;
		color: #fff;
	}

	/* Hidden by filter */
	.essb-addons-card-hidden {
		display: none !important;
	}

	/* No results */
	.essb-addons-no-results {
		text-align: center;
		padding: 40px 20px;
		color: var(--essb-muted);
		font-size: 13px;
		display: none;
		grid-column: 1 / -1;
	}

	.essb-addons-no-results svg {
		width: 36px;
		height: 36px;
		fill: var(--essb-border);
		display: block;
		margin: 0 auto 10px;
	}

	.essb-addons-no-results-title {
		font-weight: 700;
		color: var(--essb-secondary);
		margin-bottom: 4px;
		font-size: 14px;
	}

	/* not-activated span */
	.essb-addons-wrap .not-activated {
		font-size: 11px;
		color: var(--essb-muted);
	}
</style>

<div class="essb-addons-wrap">

	<?php if (! empty($featured_list)) : ?>
		<!-- ===================== FEATURED SECTION ===================== -->
		<div class="essb-addons-section essb-addons-section-featured">

			<div class="essb-addons-section-header">
				<span class="essb-addons-section-icon essb-addons-section-icon-featured">
					<svg viewBox="0 0 20 20">
						<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
					</svg>
				</span>
				<h2 class="essb-addons-section-title"><?php esc_html_e('Featured Add-ons', 'essb'); ?></h2>
				<span class="essb-addons-section-badge"><?php echo (int) $count_featured; ?></span>
				<span class="essb-addons-section-line"></span>
			</div>

			<div class="essb-addons-grid">
				<?php foreach ($featured_list as $key => $data) : ?>
					<?php essb_addons_render_card($key, $data, $current_plugins, 'featured'); ?>
				<?php endforeach; ?>
			</div>

		</div>
	<?php endif; ?>

	<!-- ===================== ALL ADD-ONS SECTION ===================== -->
	<div class="essb-addons-section essb-addons-section-all">

		<div class="essb-addons-section-header">
			<span class="essb-addons-section-icon essb-addons-section-icon-all">
				<svg viewBox="0 0 20 20">
					<path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
				</svg>
			</span>
			<h2 class="essb-addons-section-title"><?php esc_html_e('All Add-ons', 'essb'); ?></h2>
			<span class="essb-addons-section-badge" id="essb-addons-visible-count"><?php echo (int) $count_all; ?></span>
			<span class="essb-addons-section-line"></span>
		</div>

		<!-- Filter bar: type (free/premium) + category -->
		<div class="essb-addons-filter-bar">
			<span class="essb-addons-filter-label">
				<svg viewBox="0 0 20 20">
					<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
				</svg>
				<?php esc_html_e('Filter', 'essb'); ?>
			</span>

			<span class="essb-addons-filter-divider"></span>

			<div class="essb-addons-filter-group" id="essb-addons-type-group">
				<span class="essb-addons-filter-group-label"><?php esc_html_e('Type', 'essb'); ?></span>
				<button type="button" class="essb-addons-filter-btn essb-filter-active" data-filter-type="all">
					<?php esc_html_e('All', 'essb'); ?>
					<span class="essb-addons-filter-count"><?php echo (int) $count_all; ?></span>
				</button>
				<button type="button" class="essb-addons-filter-btn" data-filter-type="free">
					<span class="essb-addons-filter-btn-dot essb-addons-filter-btn-dot-free"></span>
					<?php esc_html_e('Free', 'essb'); ?>
				</button>
				<button type="button" class="essb-addons-filter-btn" data-filter-type="premium">
					<span class="essb-addons-filter-btn-dot essb-addons-filter-btn-dot-premium"></span>
					<?php esc_html_e('Premium', 'essb'); ?>
				</button>
			</div>

			<?php if (! empty($all_categories)) : ?>
				<span class="essb-addons-filter-divider"></span>
				<div class="essb-addons-filter-group" id="essb-addons-cat-group">
					<span class="essb-addons-filter-group-label"><?php esc_html_e('Category', 'essb'); ?></span>
					<?php foreach ($all_categories as $cat) : ?>
						<button type="button"
							class="essb-addons-filter-cat-btn"
							data-filter-cat="<?php echo esc_attr(strtolower($cat)); ?>">
							<?php echo esc_html($cat); ?>
						</button>
					<?php endforeach; ?>
				</div>
			<?php endif; ?>
		</div>

		<div class="essb-addons-grid" id="essb-addons-main-grid">
			<?php foreach ($all_list as $key => $data) : ?>
				<?php essb_addons_render_card($key, $data, $current_plugins, 'all'); ?>
			<?php endforeach; ?>

			<div class="essb-addons-no-results" id="essb-addons-no-results">
				<svg viewBox="0 0 24 24">
					<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
				</svg>
				<div class="essb-addons-no-results-title"><?php esc_html_e('No add-ons match your filters', 'essb'); ?></div>
				<div><?php esc_html_e('Try adjusting your selection.', 'essb'); ?></div>
			</div>
		</div>

	</div><!-- /section-all -->

</div><!-- /essb-addons-wrap -->

<script>
	(function() {
		'use strict';

		/**
		 * ESSBAddonsGridFilter
		 * Type: single-select (all / free / premium)
		 * Category: multi-select (none selected = show all)
		 * Both filters AND-combined.
		 */
		class ESSBAddonsGridFilter {
			constructor(opts) {
				this.gridId = opts.gridId || 'essb-addons-main-grid';
				this.typeGroupId = opts.typeGroupId || 'essb-addons-type-group';
				this.catGroupId = opts.catGroupId || 'essb-addons-cat-group';
				this.countId = opts.countId || 'essb-addons-visible-count';
				this.noResultsId = opts.noResultsId || 'essb-addons-no-results';
				this.cardSel = opts.cardSel || '.essb-addons-card';

				this.CLS_TYPE_ACTIVE = 'essb-filter-active';
				this.CLS_CAT_ACTIVE = 'essb-filter-cat-active';
				this.CLS_HIDDEN = 'essb-addons-card-hidden';

				this._type = 'all';
				this._cats = new Set();

				this._init();
			}

			_init() {
				this._grid = document.getElementById(this.gridId);
				this._countEl = document.getElementById(this.countId);
				this._noResults = document.getElementById(this.noResultsId);
				this._typeGroup = document.getElementById(this.typeGroupId);
				this._catGroup = document.getElementById(this.catGroupId);

				if (!this._grid) return;

				if (this._typeGroup) {
					this._typeGroup.querySelectorAll('[data-filter-type]').forEach(btn => {
						btn.addEventListener('click', () => this._handleType(btn));
					});
				}

				if (this._catGroup) {
					this._catGroup.querySelectorAll('[data-filter-cat]').forEach(btn => {
						btn.addEventListener('click', () => this._handleCat(btn));
					});
				}

				this._apply();
			}

			_handleType(btn) {
				this._typeGroup.querySelectorAll('[data-filter-type]')
					.forEach(b => b.classList.remove(this.CLS_TYPE_ACTIVE));
				btn.classList.add(this.CLS_TYPE_ACTIVE);
				this._type = btn.getAttribute('data-filter-type');
				this._apply();
			}

			_handleCat(btn) {
				const cat = btn.getAttribute('data-filter-cat');
				if (this._cats.has(cat)) {
					this._cats.delete(cat);
					btn.classList.remove(this.CLS_CAT_ACTIVE);
				} else {
					this._cats.add(cat);
					btn.classList.add(this.CLS_CAT_ACTIVE);
				}
				this._apply();
			}

			_apply() {
				const cards = this._grid.querySelectorAll(this.cardSel);
				let visible = 0;

				cards.forEach(card => {
					if (card.id === this.noResultsId) return;

					const cardType = (card.getAttribute('data-addon-type') || '').trim();
					const cardCat = (card.getAttribute('data-addon-category') || '').trim();

					const passType = (this._type === 'all') || (cardType === this._type);
					const passCat = (this._cats.size === 0) || this._cats.has(cardCat);

					if (passType && passCat) {
						card.classList.remove(this.CLS_HIDDEN);
						visible++;
					} else {
						card.classList.add(this.CLS_HIDDEN);
					}
				});

				if (this._countEl) this._countEl.textContent = visible;
				if (this._noResults) this._noResults.style.display = visible === 0 ? 'block' : 'none';
			}

			reset() {
				this._type = 'all';
				this._cats.clear();
				if (this._typeGroup) {
					this._typeGroup.querySelectorAll('[data-filter-type]')
						.forEach(b => b.classList.remove(this.CLS_TYPE_ACTIVE));
					const allBtn = this._typeGroup.querySelector('[data-filter-type="all"]');
					if (allBtn) allBtn.classList.add(this.CLS_TYPE_ACTIVE);
				}
				if (this._catGroup) {
					this._catGroup.querySelectorAll('[data-filter-cat]')
						.forEach(b => b.classList.remove(this.CLS_CAT_ACTIVE));
				}
				this._apply();
			}
		}

		function boot() {
			window.essbAddonsGridFilter = new ESSBAddonsGridFilter({
				gridId: 'essb-addons-main-grid',
				typeGroupId: 'essb-addons-type-group',
				catGroupId: 'essb-addons-cat-group',
				countId: 'essb-addons-visible-count',
				noResultsId: 'essb-addons-no-results',
				cardSel: '.essb-addons-card'
			});
		}

		if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', boot);
		} else {
			boot();
		}
	}());
</script>