---
// Path: Store/src/components/royal-pop/PreorderSection.astro
import styles from "./PreorderSection.module.scss";
---

<section id="preorder" class:list={[styles.section, "reveal"]}>
	<div class={styles.banner}>
		<p class={styles.sectionLabel}>Early Bird</p>
		<h2 class={styles.sectionHeadline}>
			Reserve
			<br />
			your kit.
		</h2>
		<p class={styles.sectionBody} data-preorder-body>Pre-orders typically ship in around 1 month. Each kit is matched to a specific Royal Pop colourway — lock in yours before the £49.99 early bird closes.</p>

		<div class={styles.priceRow}>
			<div class={styles.priceBlock}>
				<strong data-preorder-price-now>£49.99</strong>
				<span>Early Bird Price</span>
			</div>
			<span class={styles.vs}>vs</span>
			<div class={styles.priceBlock}>
				<strong class={styles.retailPrice} data-preorder-price-retail>£89.99</strong>
				<span>Retail Price</span>
			</div>
		</div>

		<div class={styles.actions}>
			<a href="/buy" class={styles.primaryButton}>Pre-Order Now</a>
			<a href="#colorways" class={styles.secondaryButton}>Choose your colour ›</a>
		</div>

		<p class={styles.footerNote}>Free worldwide shipping · 30-day returns · Secure checkout</p>
	</div>
</section>
