---
// Hero section for Clock landing page
---

<section class="relative overflow-hidden py-20 md:py-32">
	<!-- Background gradient -->
	<div class="absolute inset-0 bg-gradient-to-b from-primary-950/30 via-dark-bg to-dark-bg"></div>

	<!-- Grid pattern -->
	<div class="absolute inset-0 bg-[url('/grid.svg')] bg-center opacity-10"></div>

	<div class="container relative">
		<div class="mx-auto max-w-4xl text-center">
			<!-- Badge -->
			<div
				class="mb-8 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-2 text-sm text-primary-400"
			>
				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
				</svg>
				<span>Time Tracking & Focus</span>
			</div>

			<!-- Headline -->
			<h1 class="mb-6 text-4xl font-bold leading-tight md:text-6xl lg:text-7xl">
				Nutze deine Zeit
				<span class="gradient-text">effektiv</span>
			</h1>

			<!-- Subheadline -->
			<p class="mx-auto mb-10 max-w-2xl text-lg text-gray-400 md:text-xl">
				Pomodoro-Timer, Zeiterfassung und Focus-Sessions - steigere deine Produktivitat und behalte
				den Uberblick uber deine Arbeitszeit.
			</p>

			<!-- CTA Buttons -->
			<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
				<a href="#" class="btn btn-primary group text-lg">
					Kostenlos starten
					<svg
						class="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
					</svg>
				</a>
				<a href="#features" class="btn btn-secondary"> Funktionen entdecken </a>
			</div>

			<!-- Social proof -->
			<div class="mt-16 flex flex-col items-center gap-4">
				<div class="flex -space-x-2">
					{
						[1, 2, 3, 4, 5].map((i) => (
							<div class="h-10 w-10 rounded-full border-2 border-dark-bg bg-gradient-to-br from-primary-400 to-primary-600" />
						))
					}
				</div>
				<p class="text-sm text-gray-500">
					<span class="font-semibold text-white">300+</span> Nutzer tracken ihre Zeit
				</p>
			</div>
		</div>

		<!-- Preview mockup -->
		<div class="relative mx-auto mt-16 max-w-5xl">
			<div
				class="absolute -inset-4 rounded-2xl bg-gradient-to-r from-primary-500/20 via-transparent to-primary-500/20 blur-3xl"
			>
			</div>
			<div class="relative rounded-xl border border-dark-border bg-dark-card p-2 shadow-2xl">
				<div class="flex gap-2 px-4 py-3">
					<div class="h-3 w-3 rounded-full bg-red-500"></div>
					<div class="h-3 w-3 rounded-full bg-yellow-500"></div>
					<div class="h-3 w-3 rounded-full bg-green-500"></div>
				</div>
				<div class="aspect-[16/9] overflow-hidden rounded-lg bg-dark-surface">
					<!-- Timer preview placeholder -->
					<div class="flex h-full flex-col items-center justify-center p-6">
						<div class="mb-8 text-8xl font-bold text-primary-400">25:00</div>
						<div class="mb-6 flex gap-4">
							<button class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-medium">Start</button>
							<button class="rounded-lg bg-dark-card px-6 py-2 text-sm">Pause</button>
							<button class="rounded-lg bg-dark-card px-6 py-2 text-sm">Reset</button>
						</div>
						<div class="flex gap-2">
							<span class="rounded-full bg-primary-500/20 px-3 py-1 text-xs text-primary-400"
								>Focus</span
							>
							<span class="rounded-full bg-dark-card px-3 py-1 text-xs">Short Break</span>
							<span class="rounded-full bg-dark-card px-3 py-1 text-xs">Long Break</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>