export default function HoeInschrijven() {
	return (
		<section className="relative z-25 w-full bg-[#f8f8f8] px-6 py-16 md:px-12">
			<div className="mx-auto max-w-6xl">
				<h2 className="mb-4 font-['Intro',sans-serif] text-4xl text-[#214e51] md:text-5xl">
					Hoe schrijf ik mij in?
				</h2>
				<p className="mb-10 max-w-3xl text-[#214e51]/70 text-lg">
					Inschrijven doe je eenvoudig via deze website zodra de inschrijvingen
					openen.
				</p>

				{/* Step cards */}
				<div className="grid gap-6 md:grid-cols-3">
					{/* Step 1 */}
					<div className="flex flex-col gap-3 rounded-2xl border border-[#214e51]/15 bg-white p-6 shadow-sm">
						<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d82560] font-['Intro',sans-serif] font-bold text-lg text-white">
							1
						</div>
						<h3 className="font-['Intro',sans-serif] text-[#214e51] text-xl">
							Kies je rol
						</h3>
						<p className="text-[#214e51]/70 text-base leading-relaxed">
							Registreer je als{" "}
							<strong className="text-[#214e51]">artiest</strong> als je wil
							optreden, of als{" "}
							<strong className="text-[#214e51]">bezoeker</strong> als je wil
							komen kijken. Je kunt ook aangeven met hoeveel mensen je komt.
						</p>
					</div>

					{/* Step 2 */}
					<div className="flex flex-col gap-3 rounded-2xl border border-[#214e51]/15 bg-white p-6 shadow-sm">
						<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d82560] font-['Intro',sans-serif] font-bold text-lg text-white">
							2
						</div>
						<h3 className="font-['Intro',sans-serif] text-[#214e51] text-xl">
							Bevestig je plaats
						</h3>
						<p className="text-[#214e51]/70 text-base leading-relaxed">
							We vragen een bijdrage van{" "}
							<strong className="text-[#214e51]">€5 per inschrijving</strong> en{" "}
							<strong className="text-[#214e51]">€2 per extra persoon</strong>{" "}
							die je meebrengt.
						</p>
					</div>

					{/* Step 3 */}
					<div className="flex flex-col gap-3 rounded-2xl border border-[#214e51]/15 bg-white p-6 shadow-sm">
						<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d82560] font-['Intro',sans-serif] font-bold text-lg text-white">
							3
						</div>
						<h3 className="font-['Intro',sans-serif] text-[#214e51] text-xl">
							Geniet van de avond
						</h3>
						<p className="text-[#214e51]/70 text-base leading-relaxed">
							Je bijdrage gaat{" "}
							<strong className="text-[#214e51]">niet verloren</strong> — het
							wordt volledig op{" "}
							<strong className="text-[#214e51]">je drankkaart</strong> gezet.
							Zo kun je tijdens de avond iets drinken of een snack nemen.
						</p>
					</div>
				</div>

				{/* Bottom note */}
				<p className="mt-8 max-w-3xl text-[#214e51]/60 text-base leading-relaxed">
					Zo zorgen we ervoor dat iedereen die zich inschrijft ook echt een
					plaats heeft — en dat we samen kunnen genieten van een gezellige,
					inspirerende avond vol muziek, poëzie en andere kunst.
				</p>
			</div>
		</section>
	);
}
