---
import Layout from '../layouts/Layout.astro';

const features = [
	{
		icon: '📸',
		title: 'Foto-Analyse',
		description: 'Mach einfach ein Foto von deinem Essen und lass die KI die Nährwerte berechnen.',
	},
	{
		icon: '🥗',
		title: 'Vollständige Nährwerte',
		description: 'Kalorien, Makros, Vitamine und Mineralstoffe auf einen Blick.',
	},
	{
		icon: '🎯',
		title: 'Persönliche Ziele',
		description: 'Setze deine Tagesziele und verfolge deinen Fortschritt in Echtzeit.',
	},
	{
		icon: '🤖',
		title: 'KI-Coaching',
		description: 'Erhalte personalisierte Empfehlungen basierend auf deinem Ernährungsverlauf.',
	},
	{
		icon: '⭐',
		title: 'Favoriten',
		description: 'Speichere häufige Mahlzeiten und füge sie mit einem Klick hinzu.',
	},
	{
		icon: '🔒',
		title: 'Maximaler Datenschutz',
		description: 'Deine Fotos werden nie gespeichert. Nur die Analyseergebnisse bleiben.',
	},
];

const steps = [
	{
		number: '1',
		title: 'Foto machen',
		description: 'Fotografiere deine Mahlzeit mit der Kamera oder wähle ein bestehendes Bild.',
	},
	{
		number: '2',
		title: 'KI analysiert',
		description: 'Unsere KI erkennt die Lebensmittel und berechnet alle Nährwerte in Sekunden.',
	},
	{
		number: '3',
		title: 'Insights erhalten',
		description: 'Sieh deine Tagesbilanz, verfolge Trends und erhalte personalisierte Tipps.',
	},
];

const faqs = [
	{
		question: 'Wie genau ist die KI-Analyse?',
		answer:
			'Unsere KI erreicht eine Genauigkeit von 85-95% bei der Erkennung von Lebensmitteln. Bei komplexen Gerichten zeigen wir dir einen Konfidenz-Score an.',
	},
	{
		question: 'Was passiert mit meinen Fotos?',
		answer:
			'Maximaler Datenschutz: Deine Fotos werden nach der Analyse sofort gelöscht und niemals auf unseren Servern gespeichert. Nur die Nährwertdaten werden gesichert.',
	},
	{
		question: 'Kann ich auch ohne Foto tracken?',
		answer:
			'Ja! Du kannst Mahlzeiten auch per Text eingeben. Die KI schätzt dann die Nährwerte basierend auf deiner Beschreibung.',
	},
	{
		question: 'Funktioniert die App mit allen Gerichten?',
		answer:
			'NutriPhi erkennt die meisten Gerichte weltweit, von klassischer deutscher Küche bis zu asiatischen Spezialitäten. Bei unbekannten Gerichten kannst du manuell nachhelfen.',
	},
	{
		question: 'Wie funktioniert das Credit-System?',
		answer:
			'Jede Foto-Analyse kostet 5 Credits, Text-Analysen 2 Credits. Du erhältst täglich kostenlose Credits, oder du nutzt ManaCore Premium für unbegrenzte Analysen.',
	},
	{
		question: 'Gibt es eine kostenlose Version?',
		answer:
			'Ja! Du kannst NutriPhi kostenlos nutzen mit täglich 3 Foto-Analysen. Für mehr Analysen und Premium-Features gibt es ManaCore Credits.',
	},
];
---

<Layout title="NutriPhi - Ernährung verstehen per Foto">
	<!-- Navigation -->
	<nav
		class="fixed top-0 left-0 right-0 z-50 bg-[#0F1F0F]/90 backdrop-blur border-b border-green-900/30"
	>
		<div class="container mx-auto px-4 max-w-6xl">
			<div class="flex items-center justify-between h-16">
				<div class="flex items-center gap-2">
					<div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
						<span class="text-white font-bold">N</span>
					</div>
					<span class="font-semibold text-white">NutriPhi</span>
				</div>
				<a
					href="https://app.nutriphi.manacore.app"
					class="px-4 py-2 bg-primary hover:bg-primary-hover text-white font-medium rounded-lg transition-colors"
				>
					Jetzt starten
				</a>
			</div>
		</div>
	</nav>

	<main>
		<!-- Hero Section -->
		<section class="pt-32 pb-20 px-4">
			<div class="container mx-auto max-w-4xl text-center">
				<!-- Trust Badges -->
				<div class="flex flex-wrap justify-center gap-3 mb-8">
					<span
						class="px-3 py-1 bg-green-900/30 border border-green-800/50 rounded-full text-sm text-green-300"
					>
						🔒 Datenschutz-First
					</span>
					<span
						class="px-3 py-1 bg-green-900/30 border border-green-800/50 rounded-full text-sm text-green-300"
					>
						🤖 Powered by Gemini AI
					</span>
					<span
						class="px-3 py-1 bg-green-900/30 border border-green-800/50 rounded-full text-sm text-green-300"
					>
						✨ Kostenlos starten
					</span>
				</div>

				<h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
					Fotografiere dein Essen.
					<span class="text-primary">Verstehe deinen Körper.</span>
				</h1>

				<p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
					NutriPhi analysiert deine Mahlzeiten per Foto und liefert dir sofort alle Nährwerte. Mit
					KI-Coaching erreichst du deine Gesundheitsziele.
				</p>

				<div class="flex flex-col sm:flex-row gap-4 justify-center">
					<a
						href="https://app.nutriphi.manacore.app"
						class="px-8 py-4 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl transition-colors text-lg"
					>
						Kostenlos starten
					</a>
					<a
						href="#features"
						class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl transition-colors text-lg"
					>
						Mehr erfahren
					</a>
				</div>
			</div>
		</section>

		<!-- Features Section -->
		<section id="features" class="py-20 px-4 bg-[#1A2F1A]">
			<div class="container mx-auto max-w-6xl">
				<div class="text-center mb-16">
					<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Alles was du brauchst</h2>
					<p class="text-gray-300 max-w-2xl mx-auto">
						NutriPhi macht Ernährungstracking so einfach wie ein Foto.
					</p>
				</div>

				<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
					{
						features.map((feature) => (
							<div class="p-6 bg-[#0F1F0F] border border-green-900/30 rounded-2xl hover:border-primary/50 transition-colors">
								<div class="text-4xl mb-4">{feature.icon}</div>
								<h3 class="text-xl font-semibold text-white mb-2">{feature.title}</h3>
								<p class="text-gray-400">{feature.description}</p>
							</div>
						))
					}
				</div>
			</div>
		</section>

		<!-- How it Works -->
		<section class="py-20 px-4">
			<div class="container mx-auto max-w-4xl">
				<div class="text-center mb-16">
					<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">So einfach geht's</h2>
					<p class="text-gray-300">In 3 Schritten zu besserer Ernährung</p>
				</div>

				<div class="space-y-8">
					{
						steps.map((step, index) => (
							<div class="flex items-start gap-6">
								<div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xl">
									{step.number}
								</div>
								<div>
									<h3 class="text-xl font-semibold text-white mb-2">{step.title}</h3>
									<p class="text-gray-400">{step.description}</p>
								</div>
							</div>
						))
					}
				</div>
			</div>
		</section>

		<!-- FAQ Section -->
		<section class="py-20 px-4 bg-[#1A2F1A]">
			<div class="container mx-auto max-w-3xl">
				<div class="text-center mb-16">
					<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Häufige Fragen</h2>
				</div>

				<div class="space-y-4">
					{
						faqs.map((faq) => (
							<details class="group bg-[#0F1F0F] border border-green-900/30 rounded-xl">
								<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
									<span class="font-medium text-white">{faq.question}</span>
									<span class="text-primary group-open:rotate-180 transition-transform">▼</span>
								</summary>
								<p class="px-5 pb-5 text-gray-400">{faq.answer}</p>
							</details>
						))
					}
				</div>
			</div>
		</section>

		<!-- CTA Section -->
		<section class="py-20 px-4">
			<div class="container mx-auto max-w-4xl text-center">
				<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Starte jetzt mit NutriPhi</h2>
				<p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
					Kostenlos. Ohne Kreditkarte. Sofort loslegen.
				</p>
				<a
					href="https://app.nutriphi.manacore.app"
					class="inline-block px-10 py-4 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl transition-colors text-lg"
				>
					Jetzt kostenlos registrieren
				</a>
			</div>
		</section>
	</main>

	<!-- Footer -->
	<footer class="py-10 px-4 border-t border-green-900/30">
		<div class="container mx-auto max-w-6xl">
			<div class="flex flex-col md:flex-row items-center justify-between gap-4">
				<div class="flex items-center gap-2">
					<div class="w-6 h-6 rounded bg-primary flex items-center justify-center">
						<span class="text-white font-bold text-xs">N</span>
					</div>
					<span class="text-sm text-gray-400">NutriPhi by ManaCore</span>
				</div>
				<div class="flex gap-6 text-sm text-gray-400">
					<a href="/privacy" class="hover:text-white transition-colors">Datenschutz</a>
					<a href="/terms" class="hover:text-white transition-colors">AGB</a>
					<a href="/imprint" class="hover:text-white transition-colors">Impressum</a>
				</div>
			</div>
		</div>
	</footer>
</Layout>
