import { Camera, Drama, Mic2, Music, Palette, PenTool } from "lucide-react";

const artForms = [
	{
		icon: Music,
		title: "Muziek",
		description:
			"Van akoestische singer-songwriter sets tot volledige band optredens. Ontdek je sound en deel je muziek met een warm publiek.",
		trajectory: "Muziek Traject",
		color: "#d82560",
	},
	{
		icon: Drama,
		title: "Theater",
		description:
			"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
		trajectory: "Theater Traject",
		color: "#52979b",
	},
	{
		icon: Palette,
		title: "Beeldende Kunst",
		description:
			"Live schilderen, illustraties maken, of mixed media performances. Toon je creatieve proces terwijl het publiek toekijkt.",
		trajectory: "Beeldende Kunst Traject",
		color: "#d09035",
	},
	{
		icon: PenTool,
		title: "Woordkunst",
		description:
			"Poëzie, spoken word, storytelling of rap. Laat je woorden dansen en raak het publiek met de kracht van taal.",
		trajectory: "Woordkunst Traject",
		color: "#214e51",
	},
	{
		icon: Camera,
		title: "Dans",
		description:
			"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
		trajectory: "Dans Traject",
		color: "#d82560",
	},
	{
		icon: Mic2,
		title: "Comedy",
		description:
			"Stand-up, improv of cabaret. Maak het publiek aan het lachen met je unieke kijk op de wereld.",
		trajectory: "Comedy Traject",
		color: "#52979b",
	},
];

export default function ArtForms() {
	return (
		<section className="snap-section relative z-25 min-h-screen w-full bg-[#f8f8f8] px-12 py-16">
			<div className="mx-auto max-w-6xl">
				<h2 className="mb-4 font-['Intro',sans-serif] text-5xl text-[#214e51]">
					Kies Je Traject
				</h2>
				<p className="mb-12 max-w-2xl font-['Intro',sans-serif] text-gray-600 text-xl">
					Kunstenkamp biedt trajecten aan voor verschillende kunstvormen. Ontdek
					waar jouw passie ligt en ontwikkel je talent onder begeleiding van
					ervaringsdeskundigen.
				</p>

				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
					{artForms.map((art) => {
						const IconComponent = art.icon;
						return (
							<div
								key={art.title}
								className="group relative overflow-hidden bg-white p-8 transition-all hover:-translate-y-2 hover:shadow-xl"
							>
								{/* Color bar at top */}
								<div
									className="absolute top-0 left-0 h-1 w-full transition-all group-hover:h-2"
									style={{ backgroundColor: art.color }}
								/>

								<div className="mb-4 flex items-center gap-4">
									<div
										className="flex h-14 w-14 items-center justify-center"
										style={{ backgroundColor: art.color }}
									>
										<IconComponent className="h-7 w-7 text-white" />
									</div>
									<h3 className="font-['Intro',sans-serif] text-2xl text-gray-900">
										{art.title}
									</h3>
								</div>

								<p className="mb-6 font-['Intro',sans-serif] text-gray-600 leading-relaxed">
									{art.description}
								</p>

								<div className="flex items-center justify-between border-gray-100 border-t pt-4">
									<span
										className="font-['Intro',sans-serif] font-medium text-sm"
										style={{ color: art.color }}
									>
										{art.trajectory}
									</span>
									<span className="text-2xl text-gray-300 transition-all group-hover:translate-x-1 group-hover:text-gray-600">
										→
									</span>
								</div>
							</div>
						);
					})}
				</div>
			</div>
		</section>
	);
}
