import { StudioNav } from "@/components/ui/studio-nav";
import { flashPieces } from "@/data/flash";

const vaultNotes = [
	{
		title: "Hover Wiggle",
		text: "Frames lean 3° with a terracotta drop shadow to mimic gallery curiosity.",
	},
	{
		title: "Modal Story",
		text: "Detail views reveal pricing, size, and stories with Fraunces headings + Crimson body text.",
	},
	{
		title: "Book Button",
		text: "Olive button with brass border launches GlossGenius for deposits.",
	},
];

const detailFlow = [
	"Enter /flash and browse a brass-framed grid.",
	"Hover to preview availability aura (terracotta = bookable, olive = waitlist).",
	"Click a frame to open the modal with tags, pricing, and related sets.",
	"Save favorites to a future admin dashboard or export as PDF for clients.",
];

export default function FlashVaultPage() {
	return (
		<main className="bg-parchment/80 text-coffee">
			<div className="mx-auto flex max-w-6xl flex-col gap-12 px-6 py-12 sm:px-10 lg:px-0">
				<header className="rounded-[36px] border border-brass/50 bg-stucco/90 px-6 py-8 shadow-[0_25px_80px_rgba(148,74,39,0.2)] sm:px-10">
					<StudioNav className="border-b border-brass/40 pb-6" />
					<div className="grid gap-8 pt-8 lg:grid-cols-[3fr_2fr]">
						<section className="space-y-5">
							<p className="text-sm uppercase tracking-[0.3em] text-brass">Flash Vault</p>
							<h1 className="font-display text-4xl text-coffee">Framed flash stories with brass-lined intent.</h1>
							<p className="text-coffee/90">
								Each tile recreates the inspiration board&rsquo;s ornate frames. Hover states wiggle, and modals retell the origin of
								every set.
							</p>
							<div className="flex flex-wrap gap-3">
								<span className="rounded-full border border-brass/60 px-4 py-1 text-xs uppercase tracking-[0.3em]">Grid • Modal • Checkout</span>
								<span className="rounded-full border border-brass/60 px-4 py-1 text-xs uppercase tracking-[0.3em]">Autosave Favorites</span>
							</div>
						</section>
						<section className="rounded-[28px] border border-brass/50 bg-parchment/80 p-6">
							<p className="font-display text-xl text-coffee">Microinteractions</p>
							<ul className="mt-6 space-y-4 text-sm text-coffee/90">
								{vaultNotes.map((note) => (
									<li key={note.title} className="rounded-2xl border border-brass/40 bg-white/60 p-4">
										<p className="font-display text-lg text-terracotta">{note.title}</p>
										<p>{note.text}</p>
									</li>
								))}
							</ul>
						</section>
					</div>
				</header>
				<section className="grid gap-6 rounded-[40px] border border-brass/40 bg-stucco/70 p-6 shadow-[0_30px_90px_rgba(26,26,26,0.1)] md:grid-cols-2 lg:grid-cols-3">
					{flashPieces.map((piece) => (
						<article key={piece.name} className="rounded-[28px] border border-brass/60 bg-parchment p-5 shadow-[0_18px_50px_rgba(55,30,7,0.15)]">
							<div className={`mb-4 h-36 rounded-[24px] border border-iron/10 bg-gradient-to-br ${piece.gradient} shadow-[inset_0_2px_10px_rgba(255,255,255,0.4)]`} aria-hidden />
							<p className="text-xs uppercase tracking-[0.3em] text-brass">{piece.theme}</p>
							<h2 className="mt-2 font-display text-2xl text-coffee">{piece.name}</h2>
							<p className="mt-2 text-sm text-coffee/90">{piece.story}</p>
							<div className="mt-4 flex flex-wrap gap-2 text-xs text-coffee/80">
								{piece.tags.map((tag) => (
									<span key={tag} className="rounded-full border border-brass/50 px-3 py-1 uppercase tracking-[0.2em]">
										{tag}
									</span>
								))}
							</div>
							<div className="mt-4 flex items-center justify-between text-sm">
								<span>{piece.size} • {piece.price}</span>
								<span className={`font-ui uppercase tracking-[0.3em] ${piece.availability === "bookable" ? "text-terracotta" : piece.availability === "waitlist" ? "text-olive" : "text-coffee/70"}`}>
									{piece.availability}
								</span>
							</div>
							<p className="mt-3 text-sm text-coffee/80">{piece.detail}</p>
							<button className="mt-5 inline-flex items-center gap-2 rounded-full border border-olive/50 px-4 py-2 text-xs uppercase tracking-[0.3em] text-olive">
								Book / Inquire
								<span aria-hidden>↗</span>
							</button>
						</article>
					))}
				</section>
				<section className="rounded-[40px] border border-brass/40 bg-terracotta/85 p-8 text-parchment shadow-[0_35px_90px_rgba(148,74,39,0.35)]">
					<h2 className="font-display text-3xl">Detail Flow</h2>
					<ol className="mt-6 list-decimal space-y-4 pl-6 text-sm">
						{detailFlow.map((step) => (
							<li key={step}>{step}</li>
						))}
					</ol>
					<p className="mt-6 text-xs uppercase tracking-[0.3em] text-parchment/80">Future: admin uploads, availability toggles, related suggestions.</p>
				</section>
			</div>
		</main>
	);
}
