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

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

$header_plan  = get_field('header_plan')  ?: 'Plan (contacts)';
$header_price = get_field('header_price') ?: 'Annual price';
$rows         = get_field('rows');

if (!is_array($rows)) {
	$rows = [];
}
?>
<div id="<?php echo esc_attr($id); ?>" class="hp-pricing">
	<style>
		.hp-pricing{
			--accent:#1aa05a;--cta:#f47a20;--cta-hover:#e06a12;--ink:#13233f;--line:#e3e9ee;
			max-width:760px;margin:0 auto;color:var(--ink);
		}
		.hp-pricing table{width:100%;border-collapse:collapse;font-size:16px}
		.hp-pricing th,.hp-pricing td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
		.hp-pricing thead th{background:var(--ink);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
		.hp-pricing tbody tr:nth-child(even) td{background:#f7faf8}
		.hp-pricing .plan{font-weight:700}
		.hp-pricing .sub{display:block;font-weight:400;font-size:12px;color:#8a97a5}
		.hp-pricing .price{font-weight:800;color:var(--accent);font-size:20px;white-space:nowrap}
		.hp-pricing td.act{text-align:right}
		.hp-pricing .buy{
			display:inline-block;background:var(--cta);color:#fff;font-weight:700;text-decoration:none;
			padding:11px 24px;border-radius:50px;font-size:14px;white-space:nowrap;
			transition:background .15s ease;
		}
		.hp-pricing .buy:hover{background:var(--cta-hover);color:#fff}
		@media(max-width:600px){
			.hp-pricing thead{display:none}
			.hp-pricing tbody tr{display:block;border:1px solid var(--line);border-radius:10px;margin-bottom:14px}
			.hp-pricing td{display:flex;justify-content:space-between;align-items:center;border:none;padding:12px 16px}
			.hp-pricing tbody tr:nth-child(even) td{background:transparent}
			.hp-pricing td.act{justify-content:center;padding-top:4px;padding-bottom:16px}
		}
	</style>
	<table>
		<thead>
			<tr>
				<th><?php echo esc_html($header_plan); ?></th>
				<th><?php echo esc_html($header_price); ?></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<?php foreach ($rows as $row) :
				$plan_label  = $row['plan_label']  ?? '';
				$price       = $row['price']       ?? '';
				$sub_text    = $row['sub_text']    ?? '';
				$button_text = $row['button_text'] ?? 'Get Started';
				$button_url  = $row['button_url']  ?? '';
				if ($plan_label === '' && $price === '') {
					continue;
				}
				?>
				<tr>
					<td class="plan"><?php echo esc_html($plan_label); ?></td>
					<td class="price">
						<?php echo esc_html($price); ?>
						<?php if ($sub_text !== '') : ?>
							<span class="sub"><?php echo esc_html($sub_text); ?></span>
						<?php endif; ?>
					</td>
					<td class="act">
						<?php if ($button_url !== '') : ?>
							<a class="buy" href="<?php echo esc_url($button_url); ?>"
								target="_blank" rel="noopener">
								<?php echo esc_html($button_text); ?>
							</a>
						<?php endif; ?>
					</td>
				</tr>
			<?php endforeach; ?>
		</tbody>
	</table>
</div>
