import Image from "next/image";
import { StudioNav } from "@/components/ui/studio-nav";
import { cats, memorialDetails } from "@/data/cats";

export default function CatsPage() {
	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/85 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">Cat Universe</p>
							<h1 className="font-display text-4xl text-coffee">Portraits, memorials, and mood sliders.</h1>
							<p className="text-coffee/90">
								Landing grid showcases Miso Soup, Honey-Boy, Coffee June-Bean, and Mochi with arched frames.
							</p>
						</section>
						<section className="rounded-[28px] border border-brass/50 bg-parchment/85 p-6">
							<p className="font-display text-xl text-coffee">Page Anatomy</p>
							<ul className="mt-6 space-y-4 text-sm text-coffee/90">
								<li>Profile cards with brass borders + cat badges.</li>
								<li>Individual pages will host gallery, timeline, and letter box.</li>
								<li>Mochi&rsquo;s memorial adds sparkles + music toggle.</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">
					{cats.map((cat) => (
						<article
							key={cat.name}
							className={`rounded-[30px] border border-brass/60 bg-parchment p-0 ${
								cat.isMemorial ? "shadow-[0_18px_60px_rgba(148,74,39,0.2)]" : "shadow-[0_12px_40px_rgba(26,26,26,0.08)]"
							}`}
						>
							<div className="relative h-64 overflow-hidden rounded-t-[30px] border-b border-brass/40">
								<Image
									src={cat.gallery[0]}
									alt={`${cat.name} portrait`}
									fill
									className="object-cover"
									sizes="(min-width: 1024px) 50vw, 100vw"
									priority={cat.name === "Miso Soup"}
								/>
								<div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[rgba(37,23,8,0.45)]" />
								<p className="absolute left-6 top-6 rounded-full border border-white/50 bg-white/20 px-3 py-1 text-xs uppercase tracking-[0.3em] text-white">
									{cat.role}
								</p>
							</div>
							<div className="p-6">
								<h2 className="font-display text-3xl text-coffee">{cat.name}</h2>
								<p className="mt-2 text-sm text-coffee/80">{cat.description}</p>
								<ul className="mt-4 space-y-1 text-xs text-coffee/70">
									{cat.favorites.map((fav) => (
										<li key={fav}>• {fav}</li>
									))}
								</ul>
								<div className="mt-4 inline-flex items-center rounded-full border border-brass/50 px-3 py-1 text-xs uppercase tracking-[0.3em] text-terracotta">
									Mood: {cat.mood}
								</div>
								<div className="mt-6 grid grid-cols-3 gap-2">
									{cat.gallery.slice(1, 4).map((src) => (
										<div key={src} className="relative h-20 overflow-hidden rounded-2xl border border-brass/40">
											<Image src={src} alt={`${cat.name} snapshot`} fill className="object-cover" sizes="(min-width: 1024px) 12vw, 33vw" />
										</div>
									))}
								</div>
								{cat.isMemorial && (
									<p className="mt-4 text-xs uppercase tracking-[0.3em] text-coffee/70">Memorial mode enabled</p>
								)}
							</div>
						</article>
					))}
				</section>
				<section className="grid gap-8 lg:grid-cols-[3fr_2fr]">
					<div className="rounded-[34px] border border-brass/50 bg-terracotta/85 p-8 text-parchment shadow-[0_25px_80px_rgba(148,74,39,0.3)]">
						<h2 className="font-display text-3xl">Mochi Memorial</h2>
						<p className="mt-4 text-sm">{memorialDetails.note}</p>
						<p className="mt-4 text-sm">{memorialDetails.music}</p>
						<p className="mt-4 text-sm">{memorialDetails.animation}</p>
						<p className="mt-4 text-xs uppercase tracking-[0.3em] text-parchment/80">Letter box saves locally for privacy.</p>
					</div>
					<div className="rounded-[34px] border border-brass/50 bg-parchment/90 p-8">
						<h2 className="font-display text-2xl text-coffee">Gallery Highlights</h2>
						<div className="mt-4 grid gap-3 sm:grid-cols-2">
							{cats
								.filter((cat) => cat.gallery.length > 2)
								.map((cat) => (
										<div key={cat.name} className="space-y-2">
											<p className="font-display text-xl text-terracotta">{cat.name}</p>
											<div className="relative h-28 overflow-hidden rounded-2xl border border-brass/40">
												<Image
													src={cat.gallery[cat.gallery.length - 1] ?? cat.gallery[0]}
													alt={`${cat.name} highlight`}
													fill
													className="object-cover"
													sizes="(min-width:1024px)25vw,50vw"
												/>
											</div>
										</div>
								))}
						</div>
						<ul className="mt-4 space-y-2 text-sm text-coffee/80">
							<li>• Photo gallery with filmstrip slider</li>
							<li>• Mood slider (sleepy → chaotic)</li>
							<li>• Toy + snack checklist tied to the pantry inventory</li>
						</ul>
					</div>
				</section>
			</div>
		</main>
	);
}
