---
const appUrl = 'https://app.ulo.ad';
---

<section
	class="relative overflow-hidden bg-gradient-to-br from-primary-500/5 via-white to-purple-600/5 px-4 py-16 sm:px-6 lg:px-8 lg:py-24"
>
	<!-- Background decoration -->
	<div class="absolute inset-0 -z-10">
		<div
			class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-96 w-96 rounded-full bg-primary-500/10 blur-3xl"
		>
		</div>
		<div
			class="absolute bottom-0 right-0 translate-x-1/3 translate-y-1/3 h-96 w-96 rounded-full bg-purple-600/10 blur-3xl"
		>
		</div>
	</div>

	<div class="mx-auto max-w-7xl">
		<div class="text-center">
			<!-- Trust badges -->
			<div class="mb-6 flex flex-wrap justify-center gap-4 text-sm text-gray-500">
				<span class="flex items-center gap-1">
					<svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
						></path>
					</svg>
					DSGVO-konform
				</span>
				<span class="flex items-center gap-1">
					<svg class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M13 10V3L4 14h7v7l9-11h-7z"></path>
					</svg>
					Blitzschnell
				</span>
				<span class="flex items-center gap-1">
					<svg
						class="h-4 w-4 text-purple-500"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
						></path>
					</svg>
					100% Sicher
				</span>
			</div>

			<!-- Main headline -->
			<h1 class="mb-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
				More than links.
				<span class="bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent">
					Your digital identity.
				</span>
			</h1>

			<p class="mx-auto mb-8 max-w-2xl text-lg text-gray-600 sm:text-xl">
				Der einzige Link-Shortener mit integriertem Profile-Builder. Erstelle kurze Links,
				beeindruckende Profilkarten und manage alles im Team.
			</p>

			<!-- CTA Buttons -->
			<div class="mb-12 flex flex-col justify-center gap-4 sm:flex-row">
				<a
					href={`${appUrl}/register`}
					class="rounded-lg bg-primary-600 px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-700 hover:shadow-xl"
				>
					Kostenlos starten →
				</a>
				<a
					href="#features"
					class="rounded-lg border-2 border-gray-200 bg-white px-8 py-3 font-semibold text-gray-900 transition hover:border-primary-500 hover:shadow-lg"
				>
					Features entdecken
				</a>
			</div>

			<!-- Shortener teaser -->
			<div class="mx-auto max-w-2xl">
				<div
					class="flex flex-col gap-3 rounded-xl border border-gray-200 bg-white/80 p-4 backdrop-blur sm:flex-row sm:p-2"
				>
					<input
						type="url"
						placeholder="Deine lange URL hier einfügen..."
						disabled
						class="flex-1 rounded-lg border-0 bg-transparent px-4 py-3 text-gray-900 placeholder-gray-400 focus:outline-none sm:py-2"
					/>
					<a
						href={`${appUrl}/register`}
						class="rounded-lg bg-primary-600 px-6 py-3 font-medium text-white transition hover:bg-primary-700 sm:py-2 text-center"
					>
						Kürzen →
					</a>
				</div>
				<p class="mt-2 text-sm text-gray-500">
					Keine Anmeldung erforderlich • Kostenlos • QR-Code inklusive
				</p>
			</div>
		</div>

		<!-- Visual preview -->
		<div class="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
			<!-- Link shortening preview -->
			<div
				class="group relative rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-xl"
			>
				<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-100">
					<svg
						class="h-6 w-6 text-primary-600"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
						></path>
					</svg>
				</div>
				<h3 class="mb-2 font-semibold text-gray-900">Smart Links</h3>
				<p class="text-sm text-gray-600">Kurze URLs mit Tracking, Ablaufdatum und Passwortschutz</p>
				<a
					href="/features"
					class="mt-4 inline-block text-xs text-primary-600 group-hover:underline"
				>
					Mehr erfahren →
				</a>
			</div>

			<!-- Profile cards preview -->
			<div
				class="group relative rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-xl"
			>
				<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100">
					<svg
						class="h-6 w-6 text-purple-600"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
						></path>
					</svg>
				</div>
				<h3 class="mb-2 font-semibold text-gray-900">Profile Cards</h3>
				<p class="text-sm text-gray-600">Beeindruckende Profilseiten mit Drag & Drop Builder</p>
				<a href="/features" class="mt-4 inline-block text-xs text-purple-600 group-hover:underline">
					Templates ansehen →
				</a>
			</div>

			<!-- Team collaboration preview -->
			<div
				class="group relative rounded-xl border border-gray-200 bg-white p-6 transition hover:shadow-xl"
			>
				<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-green-100">
					<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
						></path>
					</svg>
				</div>
				<h3 class="mb-2 font-semibold text-gray-900">Team Workspace</h3>
				<p class="text-sm text-gray-600">Gemeinsam Links verwalten mit granularen Berechtigungen</p>
				<a href="/features" class="mt-4 inline-block text-xs text-green-600 group-hover:underline">
					Für Teams →
				</a>
			</div>
		</div>
	</div>
</section>