<?php
/**
 * Pricing Table block — render template.
 */

require_once __DIR__ . '/icons.php';
require_once __DIR__ . '/defaults.php';

$id = "$block[id]";
if (!empty($block['anchor'])) {
	$id = $block['anchor'];
}

$default_billing = get_field('default_billing') ?: 'annual';
if (!in_array($default_billing, ['annual', 'monthly'], true)) {
	$default_billing = 'annual';
}
$toggle_monthly_label = get_field('toggle_monthly_label') ?: 'Monthly';
$toggle_annual_label  = get_field('toggle_annual_label') ?: 'Annual';
$toggle_save_badge    = get_field('toggle_save_badge');
$bottom_strip         = get_field('bottom_strip');

// `get_field('plans')` returns the saved rows, or — for an unsaved block —
// the prefilled rows from the acf/load_value filter. The `?:` is a final
// safety net if the filter is bypassed (e.g. legacy block instance pre-rewrite).
$plans = get_field('plans');
if (empty($plans)) {
	$plans = hp_pricing_default_plans();
}

$bottom_parts = [];
if (!empty($bottom_strip)) {
	foreach (explode('|', $bottom_strip) as $part) {
		$part = trim($part);
		if ($part !== '') {
			$bottom_parts[] = $part;
		}
	}
}
?>
<div id="<?php echo esc_attr($id); ?>" class="hp-pricing-table" data-billing="<?php echo esc_attr($default_billing); ?>">
	<style>
		.hp-pricing-table{
			--accent:#1aa05a;--cta:#f47a20;--cta-hover:#e06a12;
			--ink:#13233f;--muted:#67768a;--soft:#8a97a5;
			--line:#e3e9ee;--card:#ffffff;--enterprise-bg:#f3f5f7;
			--popular:#1aa05a;--popular-tab:#2f6ee6;--badge-bg:#dbe7ff;--badge-ink:#2f6ee6;
			color:var(--ink);font-family:inherit;
		}
		.hp-pricing-table *{box-sizing:border-box}
		.hp-pricing-toggle{display:flex;justify-content:center;margin:0 0 28px}
		.hp-pricing-toggle__group{
			display:inline-flex;background:#f3f5f7;border:1px solid var(--line);
			border-radius:999px;padding:4px;gap:2px;
		}
		.hp-pricing-table .hp-pricing-toggle__btn{
			appearance:none;border:0;background:transparent;color:var(--ink);
			font:600 14px/1 inherit;padding:9px 18px;border-radius:999px;cursor:pointer;
			display:inline-flex;align-items:center;gap:8px;
			transition:background .15s,color .15s,box-shadow .15s;
			box-shadow:none;text-shadow:none;
		}
		.hp-pricing-table .hp-pricing-toggle__btn:hover,
		.hp-pricing-table .hp-pricing-toggle__btn:focus{
			background:rgba(255,255,255,.55);color:var(--ink);outline:none;
		}
		.hp-pricing-table .hp-pricing-toggle__btn:focus-visible{
			outline:2px solid var(--ink);outline-offset:2px;
		}
		.hp-pricing-table .hp-pricing-toggle__btn[aria-pressed="true"],
		.hp-pricing-table .hp-pricing-toggle__btn[aria-pressed="true"]:hover,
		.hp-pricing-table .hp-pricing-toggle__btn[aria-pressed="true"]:focus{
			background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);
		}
		.hp-pricing-table .hp-pricing-toggle__save,
		.hp-pricing-table .hp-pricing-toggle__btn:hover .hp-pricing-toggle__save,
		.hp-pricing-table .hp-pricing-toggle__btn:focus .hp-pricing-toggle__save,
		.hp-pricing-table .hp-pricing-toggle__btn[aria-pressed="true"] .hp-pricing-toggle__save{
			display:inline-block;background:#c9f1d8;color:#0f7a40;
			font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;
			letter-spacing:.01em;text-shadow:none;
		}
		.hp-pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
		.hp-pricing-card{
			position:relative;background:var(--card);border:1px solid var(--line);
			border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:16px;
			transition:transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s ease,border-color .2s ease;
			will-change:transform;
		}
		.hp-pricing-card:hover,
		.hp-pricing-card:focus-within{
			transform:translateY(-4px);
			box-shadow:0 14px 30px -14px rgba(19,35,63,.22),0 4px 10px -6px rgba(19,35,63,.10);
			border-color:#d3dbe3;
		}
		.hp-pricing-card--popular{border-color:var(--popular);box-shadow:0 0 0 1px var(--popular) inset}
		.hp-pricing-card--popular:hover,
		.hp-pricing-card--popular:focus-within{
			border-color:var(--popular);
			box-shadow:0 0 0 1px var(--popular) inset,
				0 16px 32px -14px rgba(26,160,90,.30),0 4px 10px -6px rgba(26,160,90,.15);
		}
		.hp-pricing-card--enterprise{background:var(--enterprise-bg);border-color:transparent}
		.hp-pricing-card--enterprise:hover,
		.hp-pricing-card--enterprise:focus-within{
			background:#ebeef2;border-color:transparent;
		}
		.hp-pricing-card__badge{
			position:absolute;top:-12px;left:50%;transform:translateX(-50%);
			background:var(--popular-tab);color:#fff;font-size:11px;font-weight:700;
			padding:4px 12px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;
		}
		.hp-pricing-card__name{font-size:13px;color:var(--muted);margin:0 0 4px}
		.hp-pricing-card__users{font-weight:700;font-size:16px;line-height:1.25}
		.hp-pricing-card__contacts{font-size:13px;color:var(--muted);margin-top:2px}
		.hp-pricing-card--popular .hp-pricing-card__contacts{color:var(--cta)}
			.hp-pricing-card__extra{font-size:11px;color:var(--soft);margin-top:2px;line-height:1.3}
			.hp-pricing-card--popular .hp-pricing-card__extra{color:var(--cta);opacity:.85}
		.hp-pricing-card__price{display:flex;align-items:baseline;gap:2px;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.01em}
		.hp-pricing-card__price-suffix{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
		.hp-pricing-card--enterprise .hp-pricing-card__price{font-size:36px;font-weight:300}
		.hp-pricing-table[data-billing="annual"]  .hp-price--monthly{display:none}
		.hp-pricing-table[data-billing="monthly"] .hp-price--annual{display:none}
		.hp-pricing-table[data-billing="monthly"] .hp-pricing-card__billed-as{visibility:hidden}
		/* Per-card monthly disable: card is greyed in Monthly view, the monthly price
		   becomes an "Annual only" label, the monthly buy button becomes a disabled stub.
		   Annual view is unaffected. */
		.hp-pricing-table[data-billing="monthly"] .hp-pricing-card--no-monthly{opacity:.55;pointer-events:none}
		.hp-pricing-table[data-billing="monthly"] .hp-pricing-card--no-monthly:hover,
		.hp-pricing-table[data-billing="monthly"] .hp-pricing-card--no-monthly:focus-within{
			transform:none;box-shadow:none;border-color:var(--line);
		}
		.hp-price--annual-only{color:var(--muted);font-size:20px;font-weight:600;letter-spacing:-.01em}
		/* Variant options dropdown (sits below the billed-as line, drives price + buy URL via JS). */
		.hp-pricing-card__options-wrap{margin-top:2px}
		.hp-pricing-card__options{
			width:100%;padding:10px 38px 10px 14px;border:1px solid var(--line);border-radius:10px;
			background-color:#fff;font:600 14px/1.2 inherit;color:var(--ink);cursor:pointer;
			transition:border-color .15s ease,box-shadow .15s ease;
			-webkit-appearance:none;-moz-appearance:none;appearance:none;
			background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2367768a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1 L6 6 L11 1'/></svg>");
			background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
		}
		.hp-pricing-card__options::-ms-expand{display:none}
		.hp-pricing-card__options:hover{border-color:#c2cad4}
		.hp-pricing-card__options:focus-visible{
			outline:none;border-color:var(--ink);
			box-shadow:0 0 0 2px rgba(19,35,63,.15);
		}
		.hp-pricing-card--popular .hp-pricing-card__options{border-color:var(--popular)}
		.hp-pricing-card--popular .hp-pricing-card__options:hover{border-color:#13854a}
		.hp-pricing-card--popular .hp-pricing-card__options:focus-visible{
			border-color:#13854a;box-shadow:0 0 0 2px rgba(26,160,90,.20);
		}
		.hp-pricing-card__billed-as{font-size:12px;color:var(--muted);margin-top:-6px}
		.hp-pricing-card__features{list-style:none;padding:14px 0 0;margin:0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
		.hp-feature{
			display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.35;color:var(--ink);
			transition:color .15s ease;
		}
		.hp-feature__icon{
			flex:0 0 16px;width:16px;height:16px;color:var(--muted);margin-top:1px;
			transition:color .15s ease,transform .2s cubic-bezier(.2,.6,.2,1);
		}
		.hp-feature__svg{width:16px;height:16px;display:block}
		.hp-pricing-card--popular .hp-feature__icon{color:var(--cta)}
		.hp-feature:hover .hp-feature__icon{color:var(--accent);transform:scale(1.15)}
		.hp-pricing-card--popular .hp-feature:hover .hp-feature__icon{color:var(--cta)}
		.hp-pricing-card__footer-note{
			background:#f3f5f7;border-radius:10px;padding:12px 14px;font-size:12px;
			line-height:1.4;color:var(--muted);
		}
		.hp-pricing-card--popular .hp-pricing-card__footer-note{background:#fff6ef}
		/* Dock footer-note + buy button together at the bottom of the card so the
		   "Print mail…" pill and the Get Started button line up horizontally across
		   Starter / Growth / Pro regardless of how many features each card has. */
		.hp-pricing-card__bottom{margin-top:auto;display:flex;flex-direction:column;gap:16px}
		.hp-pricing-card__buy-wrap{display:flex}
		.hp-pricing-card__buy{
			flex:1;display:inline-flex;align-items:center;justify-content:center;
			background:var(--cta);color:#fff;font-weight:700;font-size:14px;
			padding:12px 18px;border-radius:999px;text-decoration:none;
			transition:background .15s ease,transform .15s ease,box-shadow .2s ease;
			white-space:nowrap;
		}
		.hp-pricing-card__buy:hover,.hp-pricing-card__buy:focus{
			background:var(--cta-hover);color:#fff;transform:translateY(-2px);
			box-shadow:0 10px 20px -10px rgba(244,122,32,.55),0 2px 6px -2px rgba(244,122,32,.30);
		}
		.hp-pricing-card__buy:active{transform:translateY(0)}
		/* Per-card buy-button color overrides. The article's inline style sets --cta /
		   --cta-hover / --cta-ink; CSS filter on hover gives consistent darkening regardless
		   of base color. The text color override only kicks in when the editor set it. */
		.hp-pricing-card--custom-buy-ink .hp-pricing-card__buy,
		.hp-pricing-card--custom-buy-ink .hp-pricing-card__buy:hover,
		.hp-pricing-card--custom-buy-ink .hp-pricing-card__buy:focus{color:var(--cta-ink, #fff)}
		.hp-pricing-card--custom-buy .hp-pricing-card__buy:hover,
		.hp-pricing-card--custom-buy .hp-pricing-card__buy:focus{filter:brightness(.92)}
		/* When the editor picked an explicit hover BG, disable filter:brightness so
		   the chosen color shows verbatim (background:var(--cta-hover) already comes
		   from the base .hp-pricing-card__buy:hover rule). */
		.hp-pricing-card--custom-buy-hover .hp-pricing-card__buy:hover,
		.hp-pricing-card--custom-buy-hover .hp-pricing-card__buy:focus{filter:none}
		/* When the editor picked an explicit hover text color, override the base ink. */
		.hp-pricing-card--custom-buy-ink-hover .hp-pricing-card__buy:hover,
		.hp-pricing-card--custom-buy-ink-hover .hp-pricing-card__buy:focus{color:var(--cta-ink-hover)}
		/* "Annual only" stub button shown in place of the monthly buy when monthly_disabled is on. */
		.hp-pricing-card__buy--disabled,
		.hp-pricing-card__buy--disabled:hover,
		.hp-pricing-card__buy--disabled:focus{
			background:#f3f5f7;color:var(--muted);font-weight:600;font-size:14px;
			padding:12px 18px;border-radius:999px;text-decoration:none;
			cursor:not-allowed;transform:none;box-shadow:none;
		}
		.hp-pricing-card__cta{
			display:inline-flex;align-items:center;gap:6px;justify-content:center;
			background:#fff;border:1px solid var(--line);border-radius:10px;
			padding:14px 16px;font-weight:600;font-size:14px;color:var(--ink);
			text-decoration:none;margin-top:auto;
			transition:border-color .15s ease,transform .15s ease,box-shadow .2s ease;
		}
		.hp-pricing-card__cta:hover,.hp-pricing-card__cta:focus{
			border-color:var(--ink);transform:translateY(-2px);
			box-shadow:0 8px 16px -10px rgba(19,35,63,.30);
		}
		.hp-pricing-card__cta:hover .hp-pricing-card__cta-arrow{transform:translate(2px,-2px)}
		.hp-pricing-card__cta-arrow{font-size:12px;opacity:.7;transition:transform .2s ease;display:inline-block}
		/* Stack of up to 3 CTAs on the Enterprise card (top: demo, middle: email, bottom: phone). */
		.hp-pricing-card__cta-stack{margin-top:auto;display:flex;flex-direction:column;gap:8px}
		.hp-pricing-card__cta-stack .hp-pricing-card__cta{margin-top:0}
		.hp-pricing-card__cta-icon{
			flex:0 0 16px;width:16px;height:16px;
			display:inline-flex;align-items:center;justify-content:center;color:currentColor;
		}
		.hp-pricing-card__cta-icon svg{width:16px;height:16px;display:block}
		.hp-pricing-bottom-strip{
			margin-top:18px;background:#f3f5f7;border-radius:10px;padding:14px 18px;
			font-size:13px;color:var(--muted);text-align:center;
		}
		.hp-pricing-bottom-strip span + span::before{content:"  |  ";color:#c2cad4}
		@media(max-width:980px){.hp-pricing-grid{grid-template-columns:repeat(2,1fr)}}
		@media(max-width:560px){.hp-pricing-grid{grid-template-columns:1fr}}
		@media (prefers-reduced-motion: reduce){
			.hp-pricing-card,
			.hp-pricing-card__buy,
			.hp-pricing-card__cta,
			.hp-pricing-card__cta-arrow,
			.hp-feature,
			.hp-feature__icon{transition:none}
			.hp-pricing-card:hover,
			.hp-pricing-card:focus-within,
			.hp-pricing-card__buy:hover,
			.hp-pricing-card__buy:focus,
			.hp-pricing-card__cta:hover,
			.hp-pricing-card__cta:focus,
			.hp-feature:hover .hp-feature__icon{transform:none}
		}
	</style>

	<div class="hp-pricing-toggle" role="group" aria-label="Billing interval">
		<div class="hp-pricing-toggle__group">
			<button type="button" class="hp-pricing-toggle__btn" data-billing="monthly"
				aria-pressed="<?php echo $default_billing === 'monthly' ? 'true' : 'false'; ?>">
				<?php echo esc_html($toggle_monthly_label); ?>
			</button>
			<button type="button" class="hp-pricing-toggle__btn" data-billing="annual"
				aria-pressed="<?php echo $default_billing === 'annual' ? 'true' : 'false'; ?>">
				<?php echo esc_html($toggle_annual_label); ?>
				<?php if (!empty($toggle_save_badge)) : ?>
					<span class="hp-pricing-toggle__save"><?php echo esc_html($toggle_save_badge); ?></span>
				<?php endif; ?>
			</button>
		</div>
	</div>

	<div class="hp-pricing-grid">
		<?php foreach ($plans as $plan) :
			$card_type      = $plan['card_type'] ?? 'standard';
			$is_monthly_off = !empty($plan['monthly_disabled']) && $card_type !== 'enterprise';
			$classes        = ['hp-pricing-card'];
			if ($card_type === 'popular') {
				$classes[] = 'hp-pricing-card--popular';
			} elseif ($card_type === 'enterprise') {
				$classes[] = 'hp-pricing-card--enterprise';
			}
			if ($is_monthly_off) {
				$classes[] = 'hp-pricing-card--no-monthly';
			}

			// Helper: turn a bare-number annual total like "$579" into "Billed as $579/yr".
			// If the editor already typed something containing "Billed" we use it verbatim.
			$format_billed_as = function (string $raw) : string {
				$raw = trim($raw);
				if ($raw === '') { return ''; }
				if (stripos($raw, 'billed') !== false) { return $raw; }
				return "Billed as {$raw}/yr";
			};

			// Variant-options dropdown. When enabled, the first option's per-month
			// figure becomes the displayed /mo number in both Monthly and Annual
			// views (the dropdown is currently gated to annual-only cards via the
			// field's conditional_logic). The first option's annual total
			// drives the "Billed as $X/yr" line under the price.
			$plan_options       = [];
			$has_options        = false;
			$display_pm         = (string) ($plan['price_monthly'] ?? '');
			$display_pa         = (string) ($plan['price_annual']  ?? '');
			$display_url        = '';
			$display_billed_as  = (string) ($plan['billed_as']     ?? '');
			if (!empty($plan['enable_options'])
				&& $is_monthly_off
				&& !empty($plan['options'])
				&& is_array($plan['options'])
			) {
				foreach ($plan['options'] as $o) {
					$lab = (string) ($o['label']         ?? '');
					$pm  = (string) ($o['price_monthly'] ?? '');
					$pa  = (string) ($o['price_annual']  ?? '');
					$ba  = (string) ($o['billed_as']     ?? '');
					$u   = (string) ($o['purchase_url']  ?? '');
					if ($lab === '' || $u === '') {
						continue;
					}
					$billed = $ba !== '' ? $format_billed_as($ba) : $format_billed_as($pa);
					$plan_options[] = [
						'label'    => $lab,
						'pm'       => $pm,
						'pa'       => $pa,
						'url'      => $u,
						'billed'   => $billed,
					];
				}
				if (!empty($plan_options)) {
					$has_options = true;
					$first       = $plan_options[0];
					if ($first['pm'] !== '') { $display_pm = $first['pm']; }
					// Annual-view /mo for option cards reuses the same per-month figure
					// (price_monthly), NOT the annual total — the total goes on the billed-as line.
					$display_pa        = $first['pm'] !== '' ? $first['pm'] : $display_pa;
					$display_url       = $first['url'];
					$display_billed_as = $first['billed'] !== '' ? $first['billed'] : $display_billed_as;
				}
			}

			// Per-card buy-button color overrides. Empty string → fall through to the
			// theme defaults. Non-empty → expose them as CSS custom properties on the
			// article via inline style; the existing button CSS reads var(--cta) etc.
			$button_color            = (string) ($plan['button_color']            ?? '');
			$button_hover_color      = (string) ($plan['button_hover_color']      ?? '');
			$button_text_color       = (string) ($plan['button_text_color']       ?? '');
			$button_hover_text_color = (string) ($plan['button_hover_text_color'] ?? '');
			$inline_style            = '';
			if ($button_color !== '') {
				$inline_style .= '--cta:' . esc_attr($button_color) . ';';
				$classes[]     = 'hp-pricing-card--custom-buy';
			}
			// Hover background. If explicit, use it verbatim AND disable the
			// brightness filter so the editor's chosen color shows exactly as picked.
			// If no explicit hover and a base color IS set, fall back to the base
			// color (the brightness filter then does the ~8% darken).
			if ($button_hover_color !== '') {
				$inline_style .= '--cta-hover:' . esc_attr($button_hover_color) . ';';
				$classes[]     = 'hp-pricing-card--custom-buy-hover';
			} elseif ($button_color !== '') {
				$inline_style .= '--cta-hover:' . esc_attr($button_color) . ';';
			}
			if ($button_text_color !== '') {
				$inline_style .= '--cta-ink:' . esc_attr($button_text_color) . ';';
				$classes[]     = 'hp-pricing-card--custom-buy-ink';
			}
			if ($button_hover_text_color !== '') {
				$inline_style .= '--cta-ink-hover:' . esc_attr($button_hover_text_color) . ';';
				$classes[]     = 'hp-pricing-card--custom-buy-ink-hover';
			}
			?>
			<article class="<?php echo esc_attr(implode(' ', $classes)); ?>"<?php if ($inline_style !== '') : ?> style="<?php echo esc_attr($inline_style); ?>"<?php endif; ?>>
				<?php if ($card_type === 'popular') : ?>
					<div class="hp-pricing-card__badge">Most popular</div>
				<?php endif; ?>

				<header class="hp-pricing-card__header">
					<?php if (!empty($plan['name'])) : ?>
						<div class="hp-pricing-card__name"><?php echo esc_html($plan['name']); ?></div>
					<?php endif; ?>
					<?php if (!empty($plan['users_line'])) : ?>
						<div class="hp-pricing-card__users"><?php echo esc_html($plan['users_line']); ?></div>
					<?php endif; ?>
					<?php if (!empty($plan['contacts_line'])) : ?>
						<div class="hp-pricing-card__contacts"><?php echo esc_html($plan['contacts_line']); ?></div>
					<?php endif; ?>
					<?php if (!empty($plan['extra_note'])) : ?>
						<div class="hp-pricing-card__extra"><?php echo esc_html($plan['extra_note']); ?></div>
					<?php endif; ?>
				</header>

				<?php if ($card_type === 'enterprise') : ?>
					<div class="hp-pricing-card__price">
						<?php echo esc_html($plan['enterprise_price_label'] ?? 'Custom'); ?>
					</div>
				<?php else : ?>
					<?php if ($has_options) : ?>
						<div class="hp-pricing-card__options-wrap">
							<select class="hp-pricing-card__options" aria-label="<?php echo esc_attr($plan['name'] ?? 'Plan'); ?> options">
								<?php foreach ($plan_options as $oi => $o) : ?>
									<option
										value="<?php echo (int) $oi; ?>"
										data-monthly="<?php echo esc_attr($o['pm']); ?>"
										data-annual="<?php echo esc_attr($o['pm']); ?>"
										data-billed-as="<?php echo esc_attr($o['billed']); ?>"
										data-url="<?php echo esc_attr($o['url']); ?>"
										<?php selected($oi, 0); ?>
									><?php echo esc_html($o['label']); ?></option>
								<?php endforeach; ?>
							</select>
						</div>
					<?php endif; ?>
					<div class="hp-pricing-card__price">
						<?php if ($display_pm !== '' && !$is_monthly_off) : ?>
							<span class="hp-price hp-price--monthly">
								<span class="hp-price__value"><?php echo esc_html($display_pm); ?></span><span class="hp-pricing-card__price-suffix">/mo</span>
							</span>
						<?php elseif ($is_monthly_off) : ?>
							<span class="hp-price hp-price--monthly hp-price--annual-only">Annual only</span>
						<?php endif; ?>
						<?php if ($display_pa !== '') : ?>
							<span class="hp-price hp-price--annual">
								<span class="hp-price__value"><?php echo esc_html($display_pa); ?></span><span class="hp-pricing-card__price-suffix">/mo</span>
							</span>
						<?php endif; ?>
					</div>
					<div class="hp-pricing-card__billed-as">
						<?php echo esc_html($display_billed_as); ?>
					</div>
				<?php endif; ?>

				<?php if (!empty($plan['features']) && is_array($plan['features'])) : ?>
					<ul class="hp-pricing-card__features">
						<?php foreach ($plan['features'] as $feature) :
							$icon  = $feature['icon']  ?? 'check';
							$label = $feature['label'] ?? '';
							if ($label === '') {
								continue;
							}
							?>
							<li class="hp-feature">
								<span class="hp-feature__icon"><?php echo hp_pricing_icon($icon); ?></span>
								<span class="hp-feature__label"><?php echo esc_html($label); ?></span>
							</li>
						<?php endforeach; ?>
					</ul>
				<?php endif; ?>

				<?php if ($card_type === 'enterprise') :
					// Build the CTA stack in visual top-to-bottom order. Each row needs
					// both a label and a URL — anything blank is silently dropped, so
					// editors can hide a button by clearing either field.
					$enterprise_ctas = [
						['text' => $plan['cta2_text'] ?? '', 'url' => $plan['cta2_url'] ?? '', 'icon' => 'calendar-range'],
						['text' => $plan['cta3_text'] ?? '', 'url' => $plan['cta3_url'] ?? '', 'icon' => 'mail'],
						['text' => $plan['cta_text']  ?? '', 'url' => $plan['cta_url']  ?? '', 'icon' => 'phone'],
					];
					$enterprise_ctas = array_values(array_filter(
						$enterprise_ctas,
						fn($c) => $c['text'] !== '' && $c['url'] !== ''
					));
					?>
					<?php if (!empty($enterprise_ctas)) : ?>
						<div class="hp-pricing-card__cta-stack">
							<?php foreach ($enterprise_ctas as $cta) : ?>
								<a class="hp-pricing-card__cta" href="<?php echo esc_url($cta['url']); ?>">
									<span class="hp-pricing-card__cta-icon" aria-hidden="true"><?php echo hp_pricing_icon($cta['icon']); ?></span>
									<span><?php echo esc_html($cta['text']); ?></span>
									<span class="hp-pricing-card__cta-arrow" aria-hidden="true">↗</span>
								</a>
							<?php endforeach; ?>
						</div>
					<?php endif; ?>
				<?php else :
					$btn_text          = $plan['button_text'] ?? 'Get Started';
					// When options are enabled, both monthly + annual buttons point at the
					// first option's purchase URL by default; the JS swaps it on change.
					$btn_m             = $has_options ? $display_url : ($plan['button_url_monthly'] ?? '');
					$btn_a             = $has_options ? $display_url : ($plan['button_url_annual']  ?? '');
					$has_footer        = !empty($plan['footer_note']);
					// The monthly slot renders one of: the real Stripe link (when monthly is
					// enabled), or a disabled "Annual only" stub (when monthly_disabled is on).
					$show_monthly_btn  = ($btn_m !== '' && !$is_monthly_off);
					$show_monthly_stub = $is_monthly_off;
					$show_annual_btn   = ($btn_a !== '');
					$has_button        = ($show_monthly_btn || $show_monthly_stub || $show_annual_btn);
					?>
					<?php if ($has_footer || $has_button) : ?>
						<div class="hp-pricing-card__bottom">
							<?php if ($has_footer) : ?>
								<div class="hp-pricing-card__footer-note"><?php echo esc_html($plan['footer_note']); ?></div>
							<?php endif; ?>
							<?php if ($has_button) : ?>
								<div class="hp-pricing-card__buy-wrap">
									<?php if ($show_monthly_stub) : ?>
										<span class="hp-pricing-card__buy hp-pricing-card__buy--disabled hp-price--monthly" aria-disabled="true">
											Annual only
										</span>
									<?php elseif ($show_monthly_btn) : ?>
										<a class="hp-pricing-card__buy hp-price--monthly" href="<?php echo esc_url($btn_m); ?>"
											target="_blank" rel="noopener">
											<?php echo esc_html($btn_text); ?>
										</a>
									<?php endif; ?>
									<?php if ($show_annual_btn) : ?>
										<a class="hp-pricing-card__buy hp-price--annual" href="<?php echo esc_url($btn_a); ?>"
											target="_blank" rel="noopener">
											<?php echo esc_html($btn_text); ?>
										</a>
									<?php endif; ?>
								</div>
							<?php endif; ?>
						</div>
					<?php endif; ?>
				<?php endif; ?>
			</article>
		<?php endforeach; ?>
	</div>

	<?php if (!empty($bottom_parts)) : ?>
		<div class="hp-pricing-bottom-strip">
			<?php foreach ($bottom_parts as $part) : ?>
				<span><?php echo esc_html($part); ?></span>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>

	<script>
		(function(){
			var root = document.getElementById(<?php echo wp_json_encode($id); ?>);
			if (!root || root.dataset.hpPricingInit) return;
			root.dataset.hpPricingInit = '1';
			var btns = root.querySelectorAll('.hp-pricing-toggle__btn');
			btns.forEach(function(btn){
				btn.addEventListener('click', function(){
					var b = btn.getAttribute('data-billing');
					if (!b) return;
					root.setAttribute('data-billing', b);
					btns.forEach(function(x){
						x.setAttribute('aria-pressed', x === btn ? 'true' : 'false');
					});
				});
			});

			// Variant-options dropdown — when the visitor changes the select,
			// rewrite the monthly + annual price numbers in place and update
			// every buy-button href in that card to the option's purchase URL.
			root.querySelectorAll('.hp-pricing-card__options').forEach(function(select){
				var card = select.closest('.hp-pricing-card');
				if (!card) return;
				select.addEventListener('change', function(){
					var opt = select.options[select.selectedIndex];
					if (!opt) return;
					var m  = opt.getAttribute('data-monthly')   || '';
					var a  = opt.getAttribute('data-annual')    || '';
					var ba = opt.getAttribute('data-billed-as') || '';
					var u  = opt.getAttribute('data-url')       || '';
					var mEl = card.querySelector('.hp-price--monthly .hp-price__value');
					if (mEl && m) { mEl.textContent = m; }
					var aEl = card.querySelector('.hp-price--annual .hp-price__value');
					if (aEl && a) { aEl.textContent = a; }
					var baEl = card.querySelector('.hp-pricing-card__billed-as');
					if (baEl) { baEl.textContent = ba; }
					if (u) {
						card.querySelectorAll('a.hp-pricing-card__buy').forEach(function(btn){
							btn.setAttribute('href', u);
						});
					}
				});
			});
		})();
	</script>
</div>
