kunstenkamp/apps/web/src/components/homepage/Hero.tsx

import { useEffect, useState } from "react";

export default function Hero() {
	const [micVisible, setMicVisible] = useState(false);

	useEffect(() => {
		// Trigger entrance animation after component mounts
		const timer = setTimeout(() => {
			setMicVisible(true);
		}, 100);
		return () => clearTimeout(timer);
	}, []);

	const scrollToRegistration = () => {
		document
			.getElementById("registration")
			?.scrollIntoView({ behavior: "smooth" });
	};

	const scrollToInfo = () => {
		document.getElementById("info")?.scrollIntoView({ behavior: "smooth" });
	};

	return (
		<section className="relative h-[100dvh] w-full overflow-hidden bg-white">
			{/* Desktop Layout - hidden on mobile */}
			<div className="relative hidden h-full w-full flex-col gap-[10px] p-[10px] lg:flex">
				{/* Desktop Microphone - positioned on top of top sections, under bottom sections */}
				<div
					className={`pointer-events-none absolute z-20 transition-all duration-1000 ease-out motion-reduce:transition-none ${
						micVisible
							? "translate-x-0 translate-y-0 opacity-100"
							: "translate-x-24 -translate-y-24 opacity-0"
					}`}
					style={{
						right: "5%",
						top: "0",
						width: "38%",
					}}
				>
					<img
						src="/assets/mic.png"
						alt="Vintage microfoon - Open Mic Night"
						className="h-full w-full object-contain drop-shadow-2xl"
						loading="eager"
						fetchPriority="high"
					/>
				</div>

				{/* Top row - 2:1 ratio using flex */}
				<div className="relative flex h-[65%] min-h-0 flex-shrink-0 gap-[10px]">
					{/* Top Left - Magenta with title - under mic */}
					<div className="relative z-10 flex min-w-0 flex-[2] flex-col justify-center bg-[#d82560] px-[5%] py-[5%]">
						<h1 className="font-['Intro',sans-serif] font-normal text-[clamp(3rem,7vw,6rem)] text-white uppercase leading-[1]">
							OPEN MIC
							<br />
							NIGHT
						</h1>
						<button
							onClick={scrollToInfo}
							type="button"
							className="link-hover mt-4 cursor-pointer text-left font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white/70 transition-colors duration-200 hover:text-white"
						>
							Ongedesemd Woord
						</button>
					</div>

					{/* Top Right - Teal - under mic */}
					<div className="relative z-10 min-w-0 flex-1 bg-[#52979b]" />
				</div>

				{/* Bottom row - equal width */}
				<div className="relative z-30 flex min-h-0 flex-1 gap-[10px]">
					{/* Bottom Left - Mustard - above mic */}
					<div className="relative flex flex-1 items-center bg-[#d09035] px-[3%]">
						<p className="font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white leading-tight">
							Een kunstenkamp
							<br />
							initiatief
						</p>
					</div>

					{/* Bottom Right - Dark Teal with date - above mic */}
					<div className="relative flex flex-1 items-center justify-end bg-[#214e51]">
						<p className="px-12 text-right font-['Intro',sans-serif] font-normal text-[clamp(2rem,5vw,6rem)] text-white uppercase leading-[1.1]">
							VRIJDAG 24
							<br />
							april
						</p>
					</div>
				</div>

				{/* Desktop CTA Button - centered at bottom */}
				<div className="absolute bottom-[10px] left-1/2 z-30 -translate-x-1/2 py-12">
					<button
						onClick={scrollToRegistration}
						type="button"
						className="bg-black px-[40px] py-[10px] font-['Intro',sans-serif] font-normal text-[30px] text-white transition-all hover:scale-105 hover:bg-gray-900"
					>
						Registreer je nu!
					</button>
				</div>
			</div>

			{/* Mobile Responsive Layout */}
			<div className="relative flex h-full w-full flex-col lg:hidden">
				{/* Mobile: Single column stacked */}
				<div className="flex flex-1 flex-col gap-[10px] overflow-hidden p-[10px]">
					{/* Mobile Top - Magenta */}
					<div className="relative z-10 flex flex-1 flex-col justify-center overflow-hidden bg-[#d82560] px-6 py-8">
						<h1 className="font-['Intro',sans-serif] font-normal text-[15vw] text-white uppercase leading-[0.95]">
							OPEN MIC
							<br />
							NIGHT
						</h1>
						<p className="mt-4 font-['Intro',sans-serif] font-normal text-[5vw] text-white/90">
							Ongedesemd Woord
						</p>

						{/* Mobile Microphone - positioned inside magenta section, clipped by overflow */}
						<div
							className={`pointer-events-none absolute z-10 transition-all duration-1000 ease-out motion-reduce:transition-none ${
								micVisible
									? "translate-x-0 translate-y-0 opacity-100"
									: "translate-x-12 -translate-y-12 opacity-0"
							}`}
							style={{
								right: "-30%",
								bottom: "-55%",
								width: "70%",
								height: "130%",
							}}
						>
							<img
								src="/assets/mic.png"
								alt="Vintage microfoon - Open Mic Night"
								className="h-full w-full object-contain object-bottom drop-shadow-2xl"
								loading="lazy"
							/>
						</div>
					</div>

					{/* Mobile Bottom Row - Mustard + Dark Teal */}
					<div className="relative z-20 flex flex-1 gap-[10px]">
						<div className="flex flex-1 items-center bg-[#d09035] px-4">
							<p className="font-['Intro',sans-serif] font-normal text-[4vw] text-white leading-tight">
								Een kunstenkamp
								<br />
								initiatief
							</p>
						</div>
						<div className="flex flex-1 flex-col items-end justify-center bg-[#214e51] p-4">
							<p className="text-right font-['Intro',sans-serif] font-normal text-[8vw] text-white uppercase leading-tight">
								VRIJDAG
								<br />
								24 april
							</p>
						</div>
					</div>
				</div>

				{/* Mobile CTA */}
				<div className="px-[10px] pb-[calc(10px+env(safe-area-inset-bottom))]">
					<button
						onClick={scrollToRegistration}
						type="button"
						className="w-full bg-black py-3 font-['Intro',sans-serif] font-normal text-lg text-white transition-all hover:scale-105 hover:bg-gray-900"
					>
						Registreer je nu!
					</button>
				</div>
			</div>
		</section>
	);
}