import { StudioNav } from "@/components/ui/studio-nav";
import { groceryList, mealPrep, pantryInventory, recipes, spinnerMeals } from "@/data/pantry";

export default function PantryPage() {
	return (
		<main className="bg-parchment/85 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">Digital Pantry</p>
							<h1 className="font-display text-4xl text-coffee">Recipes, meal prep, and a spinner wheel for indecisive nights.</h1>
							<p className="text-coffee/90">
								Tabs will segment recipes, meal plans, grocery lists, inventory, and the wheel just like the PRD spells out.
							</p>
						</section>
						<section className="rounded-[28px] border border-brass/50 bg-parchment/85 p-6">
							<p className="font-display text-xl text-coffee">Quick Toggles</p>
							<ul className="mt-6 space-y-3 text-sm text-coffee/90">
								<li>• Recipes</li>
								<li>• Meal Prep</li>
								<li>• Grocery List</li>
								<li>• Inventory</li>
								<li>• Spinner</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">
					{recipes.map((recipe) => (
						<article key={recipe.name} className="rounded-[28px] border border-brass/60 bg-parchment p-6">
							<div className={`h-24 rounded-[20px] border border-iron/10 bg-gradient-to-r ${recipe.accent}`} aria-hidden />
							<p className="mt-4 text-xs uppercase tracking-[0.3em] text-brass">{recipe.occasion}</p>
							<h2 className="mt-2 font-display text-2xl text-coffee">{recipe.name}</h2>
							<p className="mt-2 text-sm text-coffee/80">{recipe.description}</p>
							<ul className="mt-4 flex flex-wrap gap-2 text-xs text-coffee/70">
								{recipe.ingredients.map((ingredient) => (
									<li key={ingredient} className="rounded-full border border-brass/50 px-3 py-1 uppercase tracking-[0.2em]">
										{ingredient}
									</li>
								))}
							</ul>
						</article>
					))}
				</section>
				<section className="grid gap-8 lg:grid-cols-[3fr_2fr]">
					<div className="rounded-[34px] border border-brass/50 bg-parchment/90 p-8">
						<h2 className="font-display text-2xl text-coffee">Meal Prep Timeline</h2>
						<ul className="mt-4 space-y-4 text-sm text-coffee/80">
							{mealPrep.map((entry) => (
								<li key={entry.day} className="flex items-center justify-between rounded-2xl border border-brass/40 bg-white/60 p-4">
									<span className="font-display text-xl text-terracotta">{entry.day}</span>
									<span>{entry.plan}</span>
								</li>
							))}
						</ul>
					</div>
					<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">Grocery Spinner</h2>
						<p className="mt-4 text-sm">
							Wheel uses SVG segments tinted in terracotta, olive, and brass. Tap to spin and pick the next cozy meal.
						</p>
						<ul className="mt-4 list-disc space-y-2 pl-6 text-sm">
							{spinnerMeals.map((meal) => (
								<li key={meal}>{meal}</li>
							))}
						</ul>
					</div>
				</section>
				<section className="grid gap-8 lg:grid-cols-2">
					<div className="rounded-[34px] border border-brass/50 bg-stucco/80 p-8">
						<h2 className="font-display text-2xl text-coffee">Grocery List</h2>
						<ul className="mt-4 space-y-3 text-sm text-coffee/80">
							{groceryList.map((entry) => (
								<li key={entry.item} className="flex items-center justify-between rounded-2xl border border-brass/40 bg-white/60 p-4">
									<span>{entry.item}</span>
									<span className="uppercase tracking-[0.3em] text-terracotta">{entry.status}</span>
								</li>
							))}
						</ul>
					</div>
					<div className="rounded-[34px] border border-brass/50 bg-parchment/90 p-8">
						<h2 className="font-display text-2xl text-coffee">Pantry Inventory</h2>
						<div className="mt-4 grid gap-4 sm:grid-cols-2">
							{pantryInventory.map((section) => (
								<div key={section.category} className="rounded-2xl border border-brass/40 bg-white/60 p-4 text-sm">
									<p className="font-display text-xl text-terracotta">{section.category}</p>
									<ul className="mt-2 space-y-1">
										{section.items.map((item) => (
											<li key={item}>• {item}</li>
										))}
									</ul>
								</div>
							))}
						</div>
					</div>
				</section>
			</div>
		</main>
	);
}
