<script lang="ts">
	import logo from '$lib/assets/checkflo-logo.png';

	const features = [
		{
			icon: '📱',
			title: 'Kein App-Store',
			text: 'QR-Code scannen — fertig. Die App öffnet direkt im Browser, ohne Installation.'
		},
		{
			icon: '📶',
			title: 'Offline-fähig',
			text: 'Kein Empfang im Keller? Kein Problem. Daten werden lokal gespeichert und automatisch synchronisiert.'
		},
		{
			icon: '📄',
			title: 'PDF auf Knopfdruck',
			text: 'Monatsprotokolle für Lebensmittelkontrolleure automatisch generieren — rechtssicher und vollständig.'
		}
	];
</script>

<!-- NAV -->
<nav>
	<a href="/" class="logo">
		<img src={logo} alt="checkflo" height="36" />
	</a>
	<a href="/admin" class="btn-nav">Anmelden</a>
</nav>

<!-- HERO -->
<section class="hero">
	<div class="hero-inner">
		<p class="eyebrow">HACCP-Dokumentation für die Gastronomie</p>
		<h1>Prüfprotokolle.<br />Ohne Papier.<br />Ohne App-Store.</h1>
		<p class="subtitle">
			Kühlschranktemperaturen, Hygienekontrollen und Wartungsnachweise —
			digital erfasst, automatisch protokolliert, jederzeit abrufbar.
		</p>
		<div class="hero-actions">
			<a href="mailto:hallo@checkflo.de" class="btn-primary">Kostenlose Demo anfragen</a>
			<a href="#funktionen" class="btn-ghost">Wie es funktioniert ↓</a>
		</div>
	</div>
</section>

<!-- HOW IT WORKS -->
<section class="steps" id="funktionen">
	<div class="container">
		<h2>In 3 Schritten zum digitalen Protokoll</h2>
		<div class="steps-grid">
			<div class="step">
				<div class="step-num">1</div>
				<h3>QR-Code aufkleben</h3>
				<p>Robuste NFC/QR-Tags direkt am Kühlschrank, Warmhaltebehälter oder an der Hygiene-Station.</p>
			</div>
			<div class="step">
				<div class="step-num">2</div>
				<h3>Scannen & ausfüllen</h3>
				<p>Techniker scannt den Code, trägt Temperatur ein, macht bei Abweichung ein Foto — fertig.</p>
			</div>
			<div class="step">
				<div class="step-num">3</div>
				<h3>Protokoll abrufen</h3>
				<p>Vollständiges Monatsprotokoll als PDF — für Lebensmittelkontrolle, Franchise-Geber oder eigene Dokumentation.</p>
			</div>
		</div>
	</div>
</section>

<!-- FEATURES -->
<section class="features">
	<div class="container">
		<h2>Warum checkflo?</h2>
		<div class="features-grid">
			{#each features as f}
				<div class="feature-card">
					<span class="feature-icon">{f.icon}</span>
					<h3>{f.title}</h3>
					<p>{f.text}</p>
				</div>
			{/each}
		</div>
	</div>
</section>

<!-- CTA -->
<section class="cta">
	<div class="container">
		<h2>Bereit für papierlose HACCP-Dokumentation?</h2>
		<p>Für Gastronomie, Kantinen, Caterer und Lebensmittelverarbeiter.</p>
		<a href="mailto:hallo@checkflo.de" class="btn-primary btn-large">Jetzt Demo vereinbaren</a>
	</div>
</section>

<!-- FOOTER -->
<footer>
	<div class="container">
		<span class="logo"><span class="logo-check">check</span><span class="logo-flo">flo</span></span>

		<span>© 2026 checkflo · <a href="mailto:hallo@checkflo.de">hallo@checkflo.de</a></span>
	</div>
</footer>

<style>
	/* NAV */
	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		border-bottom: 1px solid #f0f0f0;
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 10;
	}

	.logo { display: flex; align-items: center; }
	.logo img { height: 48px; width: auto; }

	.btn-nav {
		padding: 0.5rem 1.25rem;
		border: 1.5px solid #0B1023;
		border-radius: 6px;
		font-weight: 600;
		font-size: 0.9rem;
		transition: all 0.15s;
	}
	.btn-nav:hover { background: #0B1023; color: #fff; }

	/* HERO */
	.hero {
		background: linear-gradient(135deg, #0B1023 0%, #16213e 100%);
		color: #fff;
		padding: 5rem 2rem 6rem;
		text-align: center;
	}
	.hero-inner { max-width: 720px; margin: 0 auto; }

	.eyebrow {
		font-size: 0.85rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1.5px;
		color: #F97316;
		margin-bottom: 1.5rem;
	}

	h1 {
		font-size: clamp(2.2rem, 6vw, 3.5rem);
		font-weight: 800;
		line-height: 1.15;
		margin-bottom: 1.5rem;
	}

	.subtitle {
		font-size: 1.15rem;
		color: #b0b8cc;
		max-width: 560px;
		margin: 0 auto 2.5rem;
	}

	.hero-actions {
		display: flex;
		gap: 1rem;
		justify-content: center;
		flex-wrap: wrap;
	}

	/* BUTTONS */
	.btn-primary {
		background: #F97316;
		color: #fff;
		padding: 0.85rem 2rem;
		border-radius: 8px;
		font-weight: 700;
		font-size: 1rem;
		transition: background 0.15s;
		display: inline-block;
	}
	.btn-primary:hover { background: #ea6c10; }
	.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }

	.btn-ghost {
		color: #b0b8cc;
		padding: 0.85rem 1.5rem;
		font-size: 1rem;
		transition: color 0.15s;
		display: inline-block;
	}
	.btn-ghost:hover { color: #fff; }

	/* STEPS */
	.steps {
		padding: 5rem 2rem;
		background: #F5F7FA;
	}
	.container { max-width: 1000px; margin: 0 auto; }

	h2 {
		font-size: 1.9rem;
		font-weight: 800;
		text-align: center;
		margin-bottom: 3rem;
	}

	.steps-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 2rem;
	}

	.step {
		background: #fff;
		border-radius: 12px;
		padding: 2rem;
		box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	}
	.step-num {
		width: 2.5rem;
		height: 2.5rem;
		background: #F97316;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 800;
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}
	.step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
	.step p   { color: #555; font-size: 0.95rem; }

	/* FEATURES */
	.features { padding: 5rem 2rem; }

	.features-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 2rem;
	}

	.feature-card {
		border: 1.5px solid #eee;
		border-radius: 12px;
		padding: 2rem;
		transition: border-color 0.15s;
	}
	.feature-card:hover { border-color: #F97316; }
	.feature-icon { font-size: 2rem; display: block; margin-bottom: 1rem; }
	.feature-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
	.feature-card p   { color: #555; font-size: 0.95rem; }

	/* CTA */
	.cta {
		background: #0B1023;
		color: #fff;
		padding: 5rem 2rem;
		text-align: center;
	}
	.cta h2  { color: #fff; margin-bottom: 1rem; }
	.cta p   { color: #b0b8cc; margin-bottom: 2rem; }

	/* FOOTER */
	footer {
		padding: 1.5rem 2rem;
		border-top: 1px solid #f0f0f0;
	}
	footer .container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.5rem;
		font-size: 0.9rem;
		color: #888;
	}
	footer a:hover { color: #F97316; }
</style>
