---
import Layout from '../layouts/Layout.astro';
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';

// Shared components
import HeroSection from '@manacore/shared-landing-ui/sections/HeroSection.astro';
import FeatureSection from '@manacore/shared-landing-ui/sections/FeatureSection.astro';
import StepsSection from '@manacore/shared-landing-ui/sections/StepsSection.astro';
import FAQSection from '@manacore/shared-landing-ui/sections/FAQSection.astro';
import CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';
import PricingSection from '@manacore/shared-landing-ui/sections/PricingSection.astro';
import Card from '@manacore/shared-landing-ui/atoms/Card.astro';

// Feature data
const features = [
	{
		icon: '🧠',
		title: 'KI-generierte Karteikarten',
		description:
			'Lade deine Notizen, PDFs oder Texte hoch und lass die KI automatisch perfekte Karteikarten erstellen.',
	},
	{
		icon: '🔄',
		title: 'Spaced Repetition',
		description:
			'Unser intelligenter Algorithmus zeigt dir Karten genau dann, wenn du sie wiederholen solltest.',
	},
	{
		icon: '📊',
		title: 'Lernstatistiken',
		description:
			'Verfolge deinen Fortschritt mit detaillierten Statistiken und optimiere dein Lernen.',
	},
	{
		icon: '📱',
		title: 'Überall lernen',
		description: 'Synchronisiere deine Decks auf allen Geräten und lerne, wo immer du bist.',
	},
	{
		icon: '🎯',
		title: 'Personalisiertes Lernen',
		description:
			'Die KI passt sich deinem Lernstil an und erstellt maßgeschneiderte Wiederholungspläne.',
	},
	{
		icon: '🤝',
		title: 'Decks teilen',
		description:
			'Teile deine Karteikarten-Decks mit Freunden oder entdecke öffentliche Sammlungen.',
	},
];

// Steps data
const steps = [
	{
		number: '1',
		title: 'Inhalte hochladen',
		description:
			'Lade deine Notizen, PDFs oder Texte hoch. ManaDeck unterstützt verschiedene Formate.',
		image: '/screenshots/upload.png',
	},
	{
		number: '2',
		title: 'KI erstellt Karten',
		description:
			'Unsere KI analysiert deine Inhalte und erstellt automatisch strukturierte Karteikarten.',
		image: '/screenshots/generate.png',
	},
	{
		number: '3',
		title: 'Effizient lernen',
		description: 'Lerne mit Spaced Repetition und behalte das Gelernte langfristig im Gedächtnis.',
		image: '/screenshots/learn.png',
	},
];

// Pricing data
const pricingPlans = [
	{
		name: 'Free',
		price: '0',
		period: '/Monat',
		description: 'Perfekt zum Ausprobieren',
		features: [
			{ text: '50 Karteikarten', included: true },
			{ text: '3 Decks', included: true },
			{ text: 'Basis-KI-Generierung', included: true },
			{ text: 'Spaced Repetition', included: true },
			{ text: 'Unbegrenzte Karten', included: false },
			{ text: 'Deck-Sharing', included: false },
		],
		cta: {
			text: 'Kostenlos starten',
			href: '#download',
		},
	},
	{
		name: 'Pro',
		price: '9,99',
		period: '/Monat',
		description: 'Für ambitionierte Lerner',
		features: [
			{ text: 'Unbegrenzte Karteikarten', included: true },
			{ text: 'Unbegrenzte Decks', included: true },
			{ text: 'Erweiterte KI-Funktionen', included: true },
			{ text: 'Spaced Repetition', included: true },
			{ text: 'Deck-Sharing', included: true },
			{ text: 'Prioritäts-Support', included: true },
		],
		cta: {
			text: 'Pro werden',
			href: '#download',
		},
		highlighted: true,
		badge: 'Beliebt',
	},
	{
		name: 'Team',
		price: '24,99',
		period: '/Monat',
		description: 'Für Gruppen und Klassen',
		features: [
			{ text: 'Alles aus Pro', included: true },
			{ text: 'Team-Verwaltung', included: true },
			{ text: 'Gemeinsame Decks', included: true },
			{ text: 'Fortschritts-Tracking', included: true },
			{ text: 'Admin-Dashboard', included: true },
			{ text: 'Dedizierter Support', included: true },
		],
		cta: {
			text: 'Team starten',
			href: '#download',
		},
	},
];

// FAQ data
const faqs = [
	{
		question: 'Wie funktioniert die KI-Karteikarten-Generierung?',
		answer:
			'ManaDeck verwendet fortschrittliche KI-Modelle, um deine Texte zu analysieren und die wichtigsten Konzepte zu extrahieren. Daraus werden automatisch Frage-Antwort-Paare erstellt, die du als Karteikarten lernen kannst.',
	},
	{
		question: 'Was ist Spaced Repetition?',
		answer:
			'Spaced Repetition ist eine wissenschaftlich bewährte Lernmethode, bei der Karten in optimalen Zeitabständen wiederholt werden. Karten, die du gut kennst, siehst du seltener, während schwierige Karten häufiger erscheinen.',
	},
	{
		question: 'Kann ich meine eigenen Karteikarten erstellen?',
		answer:
			'Ja! Du kannst sowohl KI-generierte Karten nutzen als auch komplett eigene Karteikarten erstellen. Beide Varianten lassen sich beliebig kombinieren und bearbeiten.',
	},
	{
		question: 'Welche Dateiformate werden unterstützt?',
		answer:
			'ManaDeck unterstützt PDF, Word-Dokumente (.docx), Textdateien (.txt) und Markdown (.md). Du kannst auch direkt Text in die App einfügen.',
	},
	{
		question: 'Sind meine Daten sicher?',
		answer:
			'Ja, alle Daten werden verschlüsselt übertragen und gespeichert. Wir verkaufen keine Nutzerdaten an Dritte und sind DSGVO-konform.',
	},
	{
		question: 'Kann ich offline lernen?',
		answer:
			'Ja! Du kannst deine Decks für den Offline-Modus herunterladen und überall lernen, auch ohne Internetverbindung.',
	},
];
---

<Layout title="ManaDeck - KI-gestützte Karteikarten für effektives Lernen">
	<Navigation />

	<main class="pt-16">
		<HeroSection
			title="Lerne smarter, nicht härter"
			subtitle="ManaDeck verwandelt deine Notizen in intelligente Karteikarten. Mit KI-Generierung und Spaced Repetition lernst du effizienter als je zuvor."
			variant="default"
			primaryCta={{
				text: 'Jetzt kostenlos starten',
				href: '#download',
			}}
			secondaryCta={{
				text: 'Features entdecken',
				href: '#features',
				variant: 'secondary',
			}}
			trustBadges={[
				{ icon: '✓', text: 'Kostenlos testen' },
				{ icon: '🔒', text: 'DSGVO-konform' },
				{ icon: '📱', text: 'iOS & Android' },
			]}
		/>

		<FeatureSection
			id="features"
			title="Alles was du zum Lernen brauchst"
			subtitle="ManaDeck kombiniert KI-Technologie mit bewährten Lernmethoden für maximalen Lernerfolg."
			features={features}
			columns={3}
			variant="cards"
			class="bg-[var(--color-background-card)]"
		>
			<!-- Mana System Highlight -->
			<div class="mt-12 md:mt-16 px-4" slot="highlight">
				<Card variant="glow" class="max-w-4xl mx-auto" padding="lg">
					<div class="flex flex-col md:flex-row items-center gap-6 md:gap-8">
						<div class="text-5xl sm:text-6xl">⚡</div>
						<div class="flex-1 text-center md:text-left">
							<h3
								class="font-bold text-xl sm:text-2xl text-[var(--color-text-primary)] mb-2 sm:mb-3"
							>
								Mana-System
							</h3>
							<p class="text-[var(--color-text-secondary)] text-sm sm:text-base leading-relaxed">
								Nutze Mana-Punkte für KI-Generierungen. Starte kostenlos mit 100 Mana und verdiene
								mehr durch regelmäßiges Lernen.
							</p>
						</div>
						<div class="flex items-center gap-2">
							<div
								class="w-10 h-10 sm:w-12 sm:h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center"
							>
								<span class="text-white font-bold text-sm sm:text-base">M</span>
							</div>
							<div class="text-left">
								<div class="text-[var(--color-text-primary)] font-semibold text-sm sm:text-base">
									100 Mana
								</div>
								<div class="text-[var(--color-text-secondary)] text-xs sm:text-sm">zum Start</div>
							</div>
						</div>
					</div>
				</Card>
			</div>
		</FeatureSection>

		<StepsSection
			id="how-it-works"
			title="So einfach geht's"
			subtitle="In nur drei Schritten zum effektiven Lernen"
			steps={steps}
			showImages={false}
			alternateLayout={true}
		/>

		<PricingSection
			id="pricing"
			title="Wähle deinen Plan"
			subtitle="Starte kostenlos und upgrade, wenn du bereit bist"
			plans={pricingPlans}
			class="bg-[var(--color-background-card)]"
		/>

		<FAQSection
			id="faq"
			title="Häufig gestellte Fragen"
			subtitle="Alles was du über ManaDeck wissen musst"
			faqs={faqs}
		/>

		<CTASection
			id="download"
			title="Bereit, smarter zu lernen?"
			subtitle="Lade ManaDeck jetzt herunter und erstelle deine ersten KI-generierten Karteikarten. Kostenlos und ohne Kreditkarte."
			primaryCta={{ text: 'App herunterladen', href: '#' }}
			variant="highlighted"
		>
			<!-- App Store Buttons -->
			<div class="flex flex-wrap items-center justify-center gap-4 mt-8">
				<a href="#" class="inline-block hover:opacity-80 transition-opacity">
					<img src="/app-store-badge.svg" alt="Download im App Store" class="h-12" />
				</a>
				<a href="#" class="inline-block hover:opacity-80 transition-opacity">
					<img src="/google-play-badge.svg" alt="Jetzt bei Google Play" class="h-12" />
				</a>
			</div>

			<!-- Trust Indicators -->
			<div class="flex flex-wrap items-center justify-center gap-4 sm:gap-6 mt-8">
				<div class="flex items-center gap-2">
					<svg class="w-5 h-5 text-[var(--color-primary)]" fill="currentColor" viewBox="0 0 20 20">
						<path
							fill-rule="evenodd"
							d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
							clip-rule="evenodd"></path>
					</svg>
					<span class="text-[var(--color-text-secondary)] text-sm">100% Kostenlos starten</span>
				</div>
				<div class="flex items-center gap-2">
					<svg class="w-5 h-5 text-[var(--color-primary)]" fill="currentColor" viewBox="0 0 20 20">
						<path
							fill-rule="evenodd"
							d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
							clip-rule="evenodd"></path>
					</svg>
					<span class="text-[var(--color-text-secondary)] text-sm">DSGVO-konform</span>
				</div>
				<div class="flex items-center gap-2">
					<svg class="w-5 h-5 text-[var(--color-primary)]" fill="currentColor" viewBox="0 0 20 20">
						<path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"></path>
					</svg>
					<span class="text-[var(--color-text-secondary)] text-sm">Keine Kreditkarte nötig</span>
				</div>
			</div>
		</CTASection>
	</main>

	<Footer />
</Layout>
