import { Drama, Music, Palette, PersonStanding } 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.",
		color: "#d82560",
	},
	{
		icon: PersonStanding,
		title: "Dans",
		description:
			"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
		color: "#52979b",
	},
	{
		icon: Palette,
		title: "Beeldende Kunst",
		description:
			"Live schilderen, illustraties maken, of mixed media performances. Toon je creatieve proces terwijl het publiek toekijkt.",
		color: "#d09035",
	},
	{
		icon: Drama,
		title: "Drama",
		description:
			"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
		color: "#214e51",
	},
];

export default function ArtForms() {
	return (
		<section className="relative z-25 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 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-4">
					{artForms.map((art, index) => {
						const IconComponent = art.icon;
						return (
							<article
								key={art.title}
								className="relative overflow-hidden bg-white p-8"
								aria-labelledby={`art-title-${index}`}
							>
								{/* Color bar at top */}
								<div
									className="absolute top-0 left-0 h-1 w-full"
									style={{ backgroundColor: art.color }}
									aria-hidden="true"
								/>

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

								<p className="mb-6 text-gray-600 leading-relaxed">
									{art.description}
								</p>
							</article>
						);
					})}
				</div>
			</div>
		</section>
	);
}