import { StudioNav } from "@/components/ui/studio-nav";
import { playlists, audioNotes } from "@/data/music";

export default function MusicPage() {
	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">Music Corner</p>
							<h1 className="font-display text-4xl text-coffee">Playlists, cassette vibes, and recorded whispers.</h1>
							<p className="text-coffee/90">
								Album cards echo the UI inspiration board&rsquo;s stacked layouts—complete with embedded players and captions.
							</p>
							<div className="flex flex-wrap gap-3 text-xs uppercase tracking-[0.3em]">
								<span className="rounded-full border border-brass/60 px-4 py-1">Spotify Embed</span>
								<span className="rounded-full border border-brass/60 px-4 py-1">Audio Uploads</span>
							</div>
						</section>
						<section className="rounded-[28px] border border-brass/50 bg-parchment/85 p-6">
							<p className="font-display text-xl text-coffee">Studio Soundtrack Guide</p>
							<ul className="mt-6 space-y-4 text-sm text-coffee/90">
								<li>Morning: nylon strings + birds for flash sketching.</li>
								<li>Afternoon: percussion loops to push outline energy.</li>
								<li>Evening: vinyl R&B and lullabies in the cat memorial nook.</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="grid gap-6 xl:grid-cols-2">
						{playlists.map((playlist) => (
							<article key={playlist.title} className="rounded-[30px] border border-brass/60 bg-parchment p-6 shadow-[0_18px_50px_rgba(55,30,7,0.12)]">
								<div className={`h-48 rounded-[24px] border border-iron/10 bg-gradient-to-br ${playlist.color} p-4 text-parchment`}>
									<p className="text-xs uppercase tracking-[0.3em]">{playlist.mood}</p>
									<p className="mt-6 font-display text-2xl">{playlist.title}</p>
									<p className="mt-2 text-sm">{playlist.length}</p>
								</div>
								<p className="mt-4 text-sm text-coffee/90">{playlist.caption}</p>
								<ul className="mt-4 space-y-1 text-xs text-coffee/70">
									{playlist.tracks.map((track) => (
										<li key={track}>• {track}</li>
									))}
								</ul>
								<div className="mt-5 overflow-hidden rounded-[24px] border border-brass/40">
									<iframe
										title={`${playlist.title} Spotify embed`}
										className="h-[300px] w-full"
										src={playlist.embedUrl}
										allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
										loading="lazy"
										allowFullScreen
										style={{ border: "none" }}
									/>
								</div>
								<button className="mt-5 inline-flex items-center gap-2 rounded-full border border-brass px-4 py-2 text-xs uppercase tracking-[0.3em] text-coffee">
									Open Playlist
									<span aria-hidden>↗</span>
								</button>
							</article>
						))}
					</div>
				</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">Personal Audio Uploads</h2>
						<p className="mt-4 text-sm">
							Drop WAV or MP3 files directly. UI mirrors a cassette deck with brass dials and terracotta buttons per the PRD.
						</p>
						<ul className="mt-6 space-y-4">
							{audioNotes.map((memo) => (
								<li key={memo.title} className="rounded-2xl border border-parchment/40 bg-parchment/15 p-4">
									<p className="font-display text-xl">{memo.title}</p>
									<p className="text-sm">{memo.detail}</p>
									<p className="mt-2 text-xs uppercase tracking-[0.3em] text-parchment/70">{memo.duration}</p>
								</li>
							))}
						</ul>
					</div>
					<div className="rounded-[34px] border border-brass/50 bg-parchment/90 p-8">
						<h2 className="font-display text-2xl text-coffee">Embeds & Accessibility</h2>
						<ul className="mt-4 space-y-3 text-sm text-coffee/80">
							<li>Spotify iframe theme recolored with CSS filters to stay on-brand.</li>
							<li>Keyboard controls for previous/next track buttons.</li>
							<li>Optional captions describing mood + instrumentation.</li>
						</ul>
					</div>
				</section>
			</div>
		</main>
	);
}
