---
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 CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';
import FAQSection from '@manacore/shared-landing-ui/sections/FAQSection.astro';
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';

// Feature data
const features = [
	{
		icon: '🎨',
		title: 'Schöne Themes',
		description: 'Wähle aus professionellen Themes oder erstelle dein eigenes Design.',
	},
	{
		icon: '📱',
		title: 'Überall verfügbar',
		description: 'Native Apps für iOS, Android und Web - deine Präsentationen sind immer dabei.',
	},
	{
		icon: '🔗',
		title: 'Einfach teilen',
		description: 'Teile Präsentationen per Link - ohne Download oder Account nötig.',
	},
	{
		icon: '🖥️',
		title: 'Präsentationsmodus',
		description: 'Vollbild-Präsentation mit Tastatursteuerung und Timer.',
	},
	{
		icon: '📝',
		title: 'Verschiedene Layouts',
		description: 'Titel, Inhalt, Bilder, Split-Views - für jeden Zweck das richtige Layout.',
	},
	{
		icon: '☁️',
		title: 'Cloud-Sync',
		description: 'Automatische Synchronisierung auf allen Geräten.',
	},
];

// How it works steps
const steps = [
	{
		number: '1',
		title: 'Deck erstellen',
		description: 'Starte mit einem leeren Deck oder wähle ein Template.',
	},
	{
		number: '2',
		title: 'Slides hinzufügen',
		description: 'Füge Titel, Text, Bilder und Bullet Points hinzu.',
	},
	{
		number: '3',
		title: 'Theme wählen',
		description: 'Wähle ein professionelles Theme für deine Präsentation.',
	},
	{
		number: '4',
		title: 'Präsentieren & Teilen',
		description: 'Präsentiere im Vollbild oder teile per Link.',
	},
];

// FAQ data
const faqs = [
	{
		question: 'Ist Presi kostenlos?',
		answer:
			'Ja, Presi ist kostenlos nutzbar. Du kannst unbegrenzt Präsentationen erstellen, teilen und präsentieren.',
	},
	{
		question: 'Kann ich Präsentationen offline bearbeiten?',
		answer:
			'Mit der mobilen App kannst du deine Präsentationen auch offline bearbeiten. Änderungen werden synchronisiert, sobald du wieder online bist.',
	},
	{
		question: 'Wie teile ich eine Präsentation?',
		answer:
			'Klicke auf "Teilen" und erstelle einen Link. Jeder mit dem Link kann die Präsentation ansehen - ohne Account oder Download.',
	},
	{
		question: 'Welche Slide-Typen gibt es?',
		answer:
			'Presi unterstützt Titel-Slides, Content-Slides mit Text und Bullet Points, Bild-Slides und Split-Views mit Text und Bild nebeneinander.',
	},
	{
		question: 'Kann ich eigene Themes erstellen?',
		answer:
			'Aktuell bieten wir vorgefertigte Themes. Custom Themes sind für zukünftige Versionen geplant.',
	},
];
---

<Layout title="Presi - Präsentationen erstellen leicht gemacht">
	<Navigation />

	<main class="pt-16">
		<!-- Hero Section -->
		<HeroSection
			title="Präsentationen erstellen leicht gemacht"
			subtitle="Erstelle beeindruckende Präsentationen in Minuten. Mit schönen Themes, einfacher Bedienung und überall verfügbar."
			variant="centered"
			primaryCta={{
				text: 'Kostenlos starten',
				href: 'https://presi.manacore.app',
			}}
			secondaryCta={{
				text: 'Features ansehen',
				href: '#features',
				variant: 'secondary',
			}}
			trustBadges={[
				{ icon: '🎨', text: 'Schöne Themes' },
				{ icon: '🆓', text: '100% Kostenlos' },
				{ icon: '📱', text: 'iOS & Android' },
			]}
		/>

		<!-- How it works Section -->
		<section id="how-it-works" class="py-20 bg-background-card">
			<Container>
				<div class="text-center mb-12">
					<h2 class="text-3xl md:text-4xl font-bold text-text-primary mb-4">So einfach geht's</h2>
					<p class="text-text-secondary text-lg max-w-2xl mx-auto">
						In vier Schritten zur perfekten Präsentation
					</p>
				</div>

				<div class="grid md:grid-cols-4 gap-6">
					{
						steps.map((step, index) => (
							<div class="relative">
								<div class="bg-background-page rounded-2xl p-6 border border-border hover:border-primary/30 transition-all duration-300 h-full">
									<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
										<span class="text-primary font-bold text-xl">{step.number}</span>
									</div>
									<h3 class="text-text-primary font-semibold text-lg mb-2">{step.title}</h3>
									<p class="text-text-secondary text-sm">{step.description}</p>
								</div>
								{index < steps.length - 1 && (
									<div class="hidden md:block absolute top-1/2 -right-3 transform -translate-y-1/2 text-text-muted">
										→
									</div>
								)}
							</div>
						))
					}
				</div>
			</Container>
		</section>

		<!-- Features Section -->
		<FeatureSection
			id="features"
			title="Alles was du für großartige Präsentationen brauchst"
			subtitle="Presi vereint einfache Bedienung mit professionellen Features"
			features={features}
			columns={3}
			variant="cards"
		/>

		<!-- Preview Section -->
		<section class="py-20 bg-background-card">
			<Container size="md">
				<div class="text-center">
					<h2 class="text-3xl md:text-4xl font-bold text-text-primary mb-6">
						Präsentiere wie ein Profi
					</h2>
					<p class="text-text-secondary text-lg mb-8 leading-relaxed">
						Der Präsentationsmodus bietet alles was du brauchst: Vollbild-Ansicht,
						Tastaturnavigation mit Pfeiltasten, Timer für perfektes Timing und Speaker Notes für
						deine Notizen.
					</p>
					<div class="bg-background-page rounded-2xl p-8 border border-border">
						<div class="flex flex-wrap justify-center gap-4 text-sm text-text-secondary">
							<div class="flex items-center gap-2">
								<kbd class="px-2 py-1 bg-background-card rounded border border-border">←</kbd>
								<kbd class="px-2 py-1 bg-background-card rounded border border-border">→</kbd>
								<span>Navigation</span>
							</div>
							<div class="flex items-center gap-2">
								<kbd class="px-2 py-1 bg-background-card rounded border border-border">F</kbd>
								<span>Vollbild</span>
							</div>
							<div class="flex items-center gap-2">
								<kbd class="px-2 py-1 bg-background-card rounded border border-border">ESC</kbd>
								<span>Beenden</span>
							</div>
						</div>
					</div>
				</div>
			</Container>
		</section>

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

		<!-- CTA Section -->
		<CTASection
			id="download"
			title="Bereit für bessere Präsentationen?"
			subtitle="Starte jetzt kostenlos und erstelle deine erste Präsentation in Minuten."
			primaryCta={{
				text: 'Web App öffnen',
				href: 'https://presi.manacore.app',
			}}
			secondaryCta={{
				text: 'Mobile App laden',
				href: '#',
				variant: 'secondary',
			}}
			variant="highlighted"
		/>
	</main>

	<Footer />
</Layout>
