---
import type { SpecRow } from "../../data/royalPop";
import styles from "./SpecsSection.module.scss";

interface Props {
	rows: SpecRow[];
}

const { rows } = Astro.props;
---

<section id="specs" class:list={[styles.section, "reveal"]}>
	<div class={styles.inner}>
		<div class={styles.grid}>
			<div class={styles.copyBlock}>
				<p class={styles.sectionLabel}>Details</p>
				<h2 class={styles.sectionHeadline}>
					Technical
					<br />
					specifications.
				</h2>
				<p class={styles.sectionBody}>
					Every measurement exists for a reason. Zero compromises, zero guesswork.
				</p>
			</div>

			<div class={styles.specRows} role="table" aria-label="Royal Pop technical specifications">
				{
					rows.map((row) => (
						<div class={styles.specRow} role="row">
							<span class={styles.specKey} role="rowheader">{row.label}</span>
							<strong class={styles.specValue} role="cell" data-spec-id={row.dynamic}>
								{row.value}
							</strong>
						</div>
					))
				}
			</div>
		</div>
	</div>
</section>
