import Link from "next/link";
import { StudioNav } from "@/components/ui/studio-nav";

const featureCards = [
	{
		title: "Virtual Scrapbook",
		description: "Drag, drop, pin, and noodle. A parchment canvas auto-saves every layer, sticker, and story.",
		meta: "Canvas • Autosave",
		accent: "from-terracotta/90 via-adobe/80 to-brass/80",
	},
	{
		title: "Flash Vault",
		description: "Curate tattoo flash by mood or motif. Brass hover borders hint at availability and drop-ins.",
		meta: "Gallery • Filters",
		accent: "from-olive/80 via-sage/70 to-stucco/90",
	},
	{
		title: "Music Corner",
		description: "Spotify embeds and cassette-style playlists soundtrack long studio nights.",
		meta: "Playlists • Audio",
		accent: "from-coffee/90 via-terracotta/80 to-olive/80",
	},
	{
		title: "Digital Pantry",
		description: "Recipes, prep lists, and a playful spinner wheel to decide the next comfort meal.",
		meta: "Recipes • Inventory",
		accent: "from-brass/90 via-parchment/80 to-terracotta/90",
	},
	{
		title: "Cat Universe",
		description: "Profiles, memorial notes, and photo galleries honoring every whiskered roommate.",
		meta: "Profiles • Galleries",
		accent: "from-sage/80 via-olive/80 to-coffee/90",
	},
	{
		title: "Secret Love Letter",
		description: "A hidden Casa Azul URL with handwritten overlays, voice memo, and soft fade-ins.",
		meta: "Hidden • Animated",
		accent: "from-adobe/90 via-terracotta/80 to-coffee/90",
	},
];

export default function Home() {
	return (
		<main className="bg-[#a34f33] text-coffee">
			<div className="mx-auto flex max-w-6xl flex-col gap-12 px-4 pb-16 pt-12 sm:px-8">
				<StudioNav variant="dark" />
				<div className="grid gap-6 lg:grid-cols-12 auto-rows-[minmax(120px,_auto)]">
					<section className="relative rounded-[32px] border border-brass/60 bg-stucco p-8 text-coffee shadow-[0_25px_80px_rgba(64,32,12,0.35)] lg:col-span-7">
						<p className="text-sm uppercase tracking-[0.3em] text-brass">Casa Grimm</p>
						<h1 className="mt-3 font-display text-4xl text-coffee">Spanish Revival Sanctuary</h1>
						<p className="mt-4 text-base text-coffee/90">
							A warm landing page for Amari: flash sets, pantry rituals, playlists for late-night lining, and the cat universe all
							share one parchment wall inspired by her mood board.
						</p>
						<div className="mt-6 flex flex-wrap gap-3 text-xs uppercase tracking-[0.3em] text-coffee">
							<Link href="/flash-vault" className="rounded-full bg-terracotta px-6 py-3 text-stucco shadow-[0_12px_35px_rgba(146,53,24,0.45)]">
								Explore Vault
							</Link>
							<Link href="/scrapbook" className="rounded-full border border-coffee px-6 py-3 text-coffee">
								Visit Scrapbook
							</Link>
						</div>
						<div className="mt-10 flex flex-wrap gap-4 text-sm text-coffee/90">
							<div>
								<p className="font-display text-3xl text-coffee">24</p>
								<p>Flash pieces ready</p>
							</div>
							<div>
								<p className="font-display text-3xl text-coffee">6</p>
								<p>Studio corners to explore</p>
							</div>
						</div>
					</section>
					<section className="rounded-[32px] border border-brass/70 bg-parchment p-8 text-coffee lg:col-span-5">
						<p className="font-display text-2xl text-coffee">Studio Whisper</p>
						<div className="mt-4 space-y-4 text-sm text-coffee/90">
							<p>Morning cafecito + plant watering before tattooing.</p>
							<p>Afternoons are for recipe swaps and pantry planning.</p>
							<p>Evenings belong to playlists, journaling, and cuddling the cats.</p>
						</div>
					</section>
					<div className="rounded-[28px] border border-parchment/40 bg-parchment/30 p-6 text-coffee lg:col-span-6">
						<p className="font-display text-2xl">Spanish Garden Playlist</p>
						<p className="text-sm">Cassette buttons for playlists — just like the board.</p>
						<div className="mt-4 flex items-center gap-3">
							<button className="rounded-full border border-coffee/40 px-4 py-2">⏮</button>
							<button className="rounded-full border border-coffee/40 px-6 py-2">▶</button>
							<button className="rounded-full border border-coffee/40 px-4 py-2">⏭</button>
						</div>
						<p className="mt-4 text-xs uppercase tracking-[0.3em] text-coffee/70">Pairs with /music</p>
					</div>
					<div className="rounded-[28px] border border-parchment/40 bg-terracotta/70 p-6 text-parchment lg:col-span-3">
						<p className="font-display text-2xl">Flash Vault</p>
						<p className="mt-2 text-sm">Brass-framed arches waiting for appointments.</p>
						<Link className="mt-4 inline-flex items-center gap-2 rounded-full border border-parchment px-4 py-2 text-xs uppercase tracking-[0.3em]" href="/flash-vault">
							Enter Vault ↗
						</Link>
					</div>
					<div className="rounded-[28px] border border-parchment/40 bg-[#622f1d] p-6 text-parchment lg:col-span-3">
						<p className="font-display text-2xl">Casa Azul Secret</p>
						<p className="mt-2 text-sm">Hidden link with handwritten letter + slideshow.</p>
						<p className="mt-4 text-xs uppercase tracking-[0.3em] text-parchment/70">Password tucked in the arches.</p>
					</div>
				</div>
				<section className="rounded-[36px] border border-parchment/40 bg-[#7c3c25] p-8 text-parchment shadow-[0_30px_90px_rgba(26,26,26,0.4)]">
					<div className="flex flex-col gap-2 text-parchment sm:flex-row sm:items-end sm:justify-between">
						<div>
							<p className="text-xs uppercase tracking-[0.3em]">Studio Toolkit</p>
							<h2 className="font-display text-3xl">Feature Capsules</h2>
						</div>
						<p className="text-sm text-parchment/80">Every capsule references a card from the inspiration board.</p>
					</div>
					<div className="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
						{featureCards.map((feature) => (
							<article key={feature.title} className="relative overflow-hidden rounded-[28px] border border-brass/50 bg-parchment/80 p-5 text-coffee">
								<div className={`absolute inset-x-0 top-0 h-2 bg-gradient-to-r ${feature.accent}`} aria-hidden />
								<p className="text-xs font-ui uppercase tracking-[0.3em] text-brass">{feature.meta}</p>
								<h2 className="mt-4 font-display text-2xl text-coffee">{feature.title}</h2>
								<p className="mt-3 text-sm text-coffee/90">{feature.description}</p>
								<button className="mt-6 inline-flex items-center gap-2 text-sm font-ui uppercase tracking-[0.2em] text-terracotta">
									View Details
									<span aria-hidden>→</span>
								</button>
							</article>
						))}
					</div>
				</section>
				<section className="rounded-[40px] border border-parchment/40 bg-terracotta/80 p-8 text-parchment shadow-[0_35px_90px_rgba(26,26,26,0.45)]">
					<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
						<div className="max-w-2xl">
							<h3 className="font-display text-3xl">Spanish Revival Promise</h3>
							<p className="mt-4 text-base">
								Every corner should feel like Amari’s studio: terracotta warmth, archived stories, cats honored, meals planned, and
								flash ready for the next appointment.
							</p>
						</div>
						<div className="rounded-[28px] border border-parchment/40 bg-parchment/15 p-6 text-sm uppercase tracking-[0.3em] text-parchment">
							<span className="text-3xl font-display">∞</span>
							<p>Love Notes</p>
							<span className="mt-4 block text-xs text-parchment/80">Flash • Pantry • Cats</span>
						</div>
					</div>
				</section>
				<footer className="text-center text-xs uppercase tracking-[0.3em] text-parchment/70">
					© {new Date().getFullYear()} GrimmTattoo — Casa Azul is still hidden.
				</footer>
			</div>
		</main>
	);
}
