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

<section class:list={[styles.heroSection, "reveal"]}>
	<div class={styles.inner}>
		<p class={styles.eyebrow}>Introducing the Conversion Kit</p>
		<h1 class={styles.headline}>
			Wear the Pop
			<br />
			on Your Wrist.
		</h1>
		<p class={styles.summary}>The first precision-engineered wrist conversion kit for your Swatch × AP Royal Pop. Eight vibrant pop-art colorways. One obsessive luxury standard.</p>

		<div class={styles.actions}>
			<a href="/buy" class={styles.primaryButton} data-hero-cta>Pre-Order - Early Bird</a>
			<a href="#features" class={styles.secondaryButton}>Learn more ›</a>
		</div>

		<div class={styles.heroImageWrap}>
			<img class={styles.watchImage} src="/images/royal-pop/gallery/ocho-negro-card.webp" alt="Royal Pop wrist conversion kit hero watch" loading="eager" />
		</div>
	</div>
</section>
