import { StudioNav } from "@/components/ui/studio-nav";
import { scrapbookAssets, scrapbookTools, snapshotIdeas } from "@/data/scrapbook";

export default function ScrapbookPage() {
	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/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-[7fr_5fr]">
						<section className="space-y-5">
							<p className="text-sm uppercase tracking-[0.3em] text-brass">Virtual Scrapbook</p>
							<h1 className="font-display text-4xl text-coffee">Drag, drop, rotate, repeat — chaos but make it archival.</h1>
							<p className="text-coffee/90">
								Canvas uses parchment texture, asset drawer lives on the left, and toolbar anchors on the right just like the
								PRD calls out.
							</p>
							<div className="rounded-[28px] border border-brass/40 bg-parchment/80 p-6">
								<p className="font-display text-2xl text-coffee">Canvas Snapshot</p>
								<p className="mt-2 text-sm text-coffee/80">
									Arched viewport, dotted guidelines, and ghosted drop zones for mobile view-only mode.
								</p>
								<div className="mt-5 grid gap-3 sm:grid-cols-2">
									{snapshotIdeas.map((idea) => (
										<div key={idea} className="rounded-2xl border border-brass/40 bg-white/60 p-3 text-sm">
											{idea}
										</div>
									))}
								</div>
							</div>
						</section>
						<section className="rounded-[28px] border border-brass/50 bg-parchment/85 p-6">
							<p className="font-display text-xl text-coffee">Toolbar Actions</p>
							<ul className="mt-6 space-y-4 text-sm text-coffee/90">
								{scrapbookTools.map((tool) => (
									<li key={tool.name} className="rounded-2xl border border-brass/40 bg-white/60 p-4">
										<p className="font-display text-lg text-terracotta">{tool.name}</p>
										<p>{tool.detail}</p>
									</li>
								))}
							</ul>
						</section>
					</div>
				</header>
				<section className="rounded-[40px] border border-brass/40 bg-stucco/70 p-6 shadow-[0_30px_90px_rgba(26,26,26,0.1)]">
					<div className="flex flex-col gap-6 lg:flex-row lg:items-start">
						<div className="lg:w-1/3">
							<p className="font-display text-2xl text-coffee">Asset Sidebar</p>
							<p className="mt-2 text-sm text-coffee/80">
								Left-docked drawer with tabs for uploads, stickers, textures, swatches, and notes.
							</p>
						</div>
						<div className="grid flex-1 gap-5 sm:grid-cols-2">
							{scrapbookAssets.map((asset) => (
								<article key={asset.name} className="rounded-[28px] border border-brass/60 bg-parchment p-5 shadow-[0_18px_50px_rgba(55,30,7,0.12)]">
									<p className="text-xs uppercase tracking-[0.3em] text-brass">{asset.name}</p>
									<p className="mt-2 text-sm text-coffee/90">{asset.description}</p>
									<ul className="mt-4 space-y-1 text-xs text-coffee/80">
										{asset.items.map((item) => (
											<li key={item}>• {item}</li>
										))}
									</ul>
								</article>
							))}
						</div>
					</div>
				</section>
				<section className="grid gap-8 lg:grid-cols-2">
					<div className="rounded-[34px] border border-brass/40 bg-terracotta/85 p-8 text-parchment shadow-[0_25px_80px_rgba(148,74,39,0.35)]">
						<h2 className="font-display text-3xl">Export & Print</h2>
						<p className="mt-4 text-sm">
							Autosave each change via localStorage, then trigger PNG/JPG export thanks to canvas serialization. Print layout toggles
							adds safe margins for 8.5x11.
						</p>
						<p className="mt-4 text-xs uppercase tracking-[0.3em] text-parchment/80">Future: multi-notebook + share links.</p>
					</div>
					<div className="rounded-[34px] border border-brass/50 bg-parchment/90 p-8">
						<h2 className="font-display text-2xl text-coffee">Mobile View</h2>
						<p className="mt-3 text-sm text-coffee/80">
							View-only with ability to rearrange via simplified toolbar, while editing prompts the user to open desktop.
						</p>
						<ul className="mt-4 list-disc space-y-2 pl-6 text-sm">
							<li>Tap to reveal asset details</li>
							<li>Quick duplicate + delete actions pinned bottom-right</li>
							<li>Subtle vibration feedback when locking layers</li>
						</ul>
					</div>
				</section>
			</div>
		</main>
	);
}
