const faqQuestions = [
	{
		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 minuten podiumtijd. Zo houden we de avond dynamisch en krijgt iedereen een kans om te shinen.",
	},
	{
		question: "Waar vindt het plaats?",
		answer:
			"De Open Mic Night vindt plaats op Lange Winkelstraat 5, 2000 Antwerpen.",
		mapUrl: "https://maps.app.goo.gl/kU6iug3QVKwWD1vR7",
	},
	{
		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 id="info" className="relative z-20 flex flex-col bg-[#d82560]/96">
			{/* Hero Section - Ongedesemd Woord */}
			<div className="relative w-full border-white/20 border-b-4">
				{/* Background pattern */}
				<div
					className="absolute inset-0 opacity-10"
					style={{
						backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
					}}
				/>

				<div className="relative flex flex-col items-center justify-center px-8 py-12 text-center">
					{/* Decorative top element */}
					<div className="mb-8 flex items-center gap-4">
						<div className="h-px w-24 bg-gradient-to-r from-transparent via-white/60 to-transparent" />
						<svg
							className="h-14 w-20 text-white/80"
							viewBox="0 0 80 56"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							aria-label="Ongedesemd Woord"
						>
							{/* Flat matzo cracker - slightly rounded rect */}
							<rect
								x="2"
								y="8"
								width="76"
								height="40"
								rx="4"
								fill="currentColor"
							/>
							{/* Perforation dots - characteristic matzo pattern */}
							{[16, 28, 40, 52, 64].map((x) =>
								[18, 28, 38].map((y) => (
									<circle
										key={`${x}-${y}`}
										cx={x}
										cy={y}
										r="2"
										fill="rgba(0,0,0,0.25)"
									/>
								)),
							)}
							{/* Score lines */}
							<line
								x1="2"
								y1="22"
								x2="78"
								y2="22"
								stroke="rgba(0,0,0,0.15)"
								strokeWidth="1"
							/>
							<line
								x1="2"
								y1="34"
								x2="78"
								y2="34"
								stroke="rgba(0,0,0,0.15)"
								strokeWidth="1"
							/>
						</svg>
						<div className="h-px w-24 bg-gradient-to-r from-transparent via-white/60 to-transparent" />
					</div>

					{/* Main Title */}
					<h2
						className="font-['Intro',sans-serif] font-black text-white uppercase tracking-tight"
						style={{ fontSize: "clamp(1rem, 8vw + 1rem, 8rem)" }}
					>
						Ongedesemd
						<span
							className="block"
							style={{ fontSize: "clamp(1rem, 6vw + 1rem, 6rem)" }}
						>
							Woord?!
						</span>
					</h2>

					{/* Subtitle / Tagline */}
					<p className="mt-8 max-w-3xl font-['Intro',sans-serif] font-light text-2xl text-white/90 uppercase tracking-widest md:text-3xl">
						Kunst zonder franje · Puur vanuit het hart
					</p>

					{/* Decorative bottom element */}
					<div className="mt-10 flex items-center gap-3">
						<div className="h-2 w-2 rotate-45 bg-white/60" />
						<div className="h-2 w-2 rotate-45 bg-white/40" />
						<div className="h-2 w-2 rotate-45 bg-white/60" />
					</div>
				</div>
			</div>

			{/* Content Section */}
			<div className="relative w-full px-12 py-16">
				{/* Background texture */}
				<div
					className="pointer-events-none absolute inset-0 opacity-10"
					style={{
						backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
					}}
				/>

				<div className="relative mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
					{/* Ongedesemd Woord Explanation - Full Width Special Treatment */}
					<div className="relative flex flex-col gap-6 rounded-2xl border-2 border-white/20 bg-white/5 p-8 md:p-12">
						<div className="absolute top-0 -left-4 h-full w-1 bg-gradient-to-b from-white/0 via-white/60 to-white/0" />

						<h3 className="font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
							Waarom deze naam?
						</h3>

						<div className="grid gap-8 md:grid-cols-2">
							<div className="flex flex-col gap-4">
								<p className="text-lg text-white/90 leading-relaxed">
									In de Bijbel staat ongedesemd brood (ook wel{" "}
									<em className="text-white">matzah</em> genoemd) symbool voor
									eenvoud en zuiverheid, zonder de &apos;ballast&apos; van
									desem.
								</p>
								<p className="text-lg text-white/80 leading-relaxed">
									Het werd gegeten tijdens Pesach als herinnering aan de
									haastige uittocht uit Egypte, toen er geen tijd was om brood
									te laten rijzen.
								</p>
							</div>
							<div className="flex flex-col gap-4">
								<p className="text-lg text-white/80 leading-relaxed">
									Bij ons staat het voor kunst zonder franje: geen ingewikkelde
									regels of hoge drempels, gewoon authentieke expressie vanuit
									het hart.
								</p>
								<div className="rounded-xl border border-white/30 bg-white/10 p-6">
									<p className="font-['Intro',sans-serif] font-semibold text-white text-xl">
										Kom vooral ook gewoon kijken!
									</p>
									<p className="mt-2 text-white/80">
										Je hoeft absoluut niet te performen om te genieten van een
										inspirerende avond vol muziek, poëzie en andere kunst.
									</p>
								</div>
							</div>
						</div>
					</div>

					{/* FAQ Section */}
					{faqQuestions.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 text-white/80 text-xl">{item.answer}</p>
							{"mapUrl" in item && (
								<a
									href={item.mapUrl}
									target="_blank"
									rel="noopener noreferrer"
									className="text-sm text-white/60 underline hover:text-white/90"
								>
									Bekijk op Google Maps →
								</a>
							)}
						</div>
					))}
				</div>
			</div>
		</section>
	);
}