<?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}
		.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}
		.hp-pricing-card__buy-wrap{margin-top:auto;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)}
		.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}
		.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';
			$classes = ['hp-pricing-card'];
			if ($card_type === 'popular') {
				$classes[] = 'hp-pricing-card--popular';
			} elseif ($card_type === 'enterprise') {
				$classes[] = 'hp-pricing-card--enterprise';
			}
			?>
			<article class="<?php echo esc_attr(implode(' ', $classes)); ?>">
				<?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 : ?>
					<div class="hp-pricing-card__price">
						<?php if (!empty($plan['price_monthly'])) : ?>
							<span class="hp-price hp-price--monthly">
								<?php echo esc_html($plan['price_monthly']); ?><span class="hp-pricing-card__price-suffix">/mo</span>
							</span>
						<?php endif; ?>
						<?php if (!empty($plan['price_annual'])) : ?>
							<span class="hp-price hp-price--annual">
								<?php echo esc_html($plan['price_annual']); ?><span class="hp-pricing-card__price-suffix">/mo</span>
							</span>
						<?php endif; ?>
					</div>
					<div class="hp-pricing-card__billed-as">
						<?php echo esc_html($plan['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') : ?>
					<?php if (!empty($plan['cta_url'])) : ?>
						<a class="hp-pricing-card__cta" href="<?php echo esc_url($plan['cta_url']); ?>">
							<span><?php echo esc_html($plan['cta_text'] ?? 'Contact us'); ?></span>
							<span class="hp-pricing-card__cta-arrow" aria-hidden="true">↗</span>
						</a>
					<?php endif; ?>
				<?php else : ?>
					<?php if (!empty($plan['footer_note'])) : ?>
						<div class="hp-pricing-card__footer-note"><?php echo esc_html($plan['footer_note']); ?></div>
					<?php endif; ?>
					<?php
					$btn_text = $plan['button_text'] ?? 'Get Started';
					$btn_m    = $plan['button_url_monthly'] ?? '';
					$btn_a    = $plan['button_url_annual']  ?? '';
					if ($btn_m !== '' || $btn_a !== '') :
						?>
						<div class="hp-pricing-card__buy-wrap">
							<?php if ($btn_m !== '') : ?>
								<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 ($btn_a !== '') : ?>
								<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; ?>
				<?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');
					});
				});
			});
		})();
	</script>
</div>
