const questions = [
	{
		question: "Wat is een open mic?",
		answer:
			"Een open mic is een podium waar iedereen zijn of haar talent kan tonen. Of je nu zingt, danst, een gedicht voordraagt of een instrument bespeelt — alle kunstvormen zijn welkom!",
	},
	{
		question: "Wie mag er deelnemen?",
		answer:
			"Iedereen! Of je nu een doorgewinterde artiest bent of voor het eerst op een podium staat — de open mic night is er voor alle niveaus en ervaringen.",
	},
	{
		question: "Hoelang mag mijn optreden duren?",
		answer:
			"Elke deelnemer krijgt 5-7 minuten podiumtijd. Zo houden we de avond dynamisch en krijgt iedereen een kans om te shinen.",
	},
	{
		question: "Wat moet ik meenemen?",
		answer:
			"We zorgen voor geluidstechniek en een microfoon. Breng je eigen instrument mee als je dat nodig hebt. Vragen? Neem contact op via de registratie!",
	},
];

export default function Info() {
	return (
		<section className="snap-section relative z-20 flex min-h-screen flex-col bg-[#d82560]/96 px-12 py-16">
			<div className="mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
				{questions.map((item, idx) => (
					<div
						key={item.question}
						className={`flex flex-col gap-4 ${
							idx % 2 === 0 ? "items-start text-left" : "items-end text-right"
						}`}
					>
						<h3 className="font-['Intro',sans-serif] text-4xl text-white">
							{item.question}
						</h3>
						<p className="max-w-xl font-['Intro',sans-serif] text-white/80 text-xl">
							{item.answer}
						</p>
					</div>
				))}
			</div>
		</section>
	);
}
