---
/**
 * Demo page showcasing shared landing UI components in ManaCore
 */
import Layout from '../../layouts/Layout.astro';

// Import shared components
import Button from '@manacore/shared-landing-ui/atoms/Button.astro';
import Card from '@manacore/shared-landing-ui/atoms/Card.astro';
import Badge from '@manacore/shared-landing-ui/atoms/Badge.astro';
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
import HeroSection from '@manacore/shared-landing-ui/sections/HeroSection.astro';
import FeatureSection from '@manacore/shared-landing-ui/sections/FeatureSection.astro';
import FAQSection from '@manacore/shared-landing-ui/sections/FAQSection.astro';
import PricingSection from '@manacore/shared-landing-ui/sections/PricingSection.astro';
import CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';

const features = [
	{
		icon: '📊',
		title: 'Analytics Dashboard',
		description: 'Umfassende Einblicke in Team-Performance und Produktivität.',
	},
	{
		icon: '🤖',
		title: 'KI-Insights',
		description: 'Automatische Analysen und Empfehlungen durch Machine Learning.',
	},
	{
		icon: '👥',
		title: 'Team Management',
		description: 'Organisiere Teams, Rollen und Zugriffsrechte zentral.',
	},
	{
		icon: '🔗',
		title: 'Integrationen',
		description: 'Verbinde dich mit Slack, Jira, GitHub und mehr.',
	},
];

const faqs = [
	{
		question: 'Was ist ManaCore?',
		answer:
			'ManaCore ist eine KI-gestützte Plattform zur Messung und Verbesserung der Team-Performance.',
	},
	{
		question: 'Welche Apps sind enthalten?',
		answer:
			'ManaCore umfasst Memoro (Sprachaufnahmen), ManaDeck (Teammanagement) und Märchenzauber (Kindergeschichten).',
	},
	{
		question: 'Gibt es eine kostenlose Testversion?',
		answer: 'Ja, du kannst ManaCore 14 Tage kostenlos testen - keine Kreditkarte erforderlich.',
	},
];

const pricingPlans = [
	{
		name: 'Starter',
		price: '€0',
		period: 'Monat',
		features: ['1 Benutzer', '100 MB Speicher', 'Basic Analytics'],
		cta: { text: 'Kostenlos starten', href: '#' },
	},
	{
		name: 'Pro',
		price: '€29',
		period: 'Monat',
		features: ['5 Benutzer', '10 GB Speicher', 'Advanced Analytics', 'Priority Support'],
		cta: { text: 'Jetzt upgraden', href: '#' },
		highlighted: true,
		badge: 'Beliebt',
	},
	{
		name: 'Enterprise',
		price: 'Kontakt',
		features: [
			'Unbegrenzte Benutzer',
			'Unbegrenzter Speicher',
			'Custom Integrationen',
			'Dedicated Support',
		],
		cta: { text: 'Kontakt aufnehmen', href: '#' },
	},
];
---

<Layout title="Shared Components Demo - ManaCore">
	<HeroSection
		title="Shared Landing UI Demo"
		subtitle="Diese Seite demonstriert die wiederverwendbaren Komponenten aus @manacore/shared-landing-ui im ManaCore-Design."
		variant="centered"
		primaryCta={{
			text: 'Zurück zur Startseite',
			href: '/de',
		}}
		secondaryCta={{
			text: 'Features ansehen',
			href: '#features',
			variant: 'secondary',
		}}
	/>

	<section class="py-16">
		<Container>
			<h2 class="text-3xl font-bold text-center mb-8" style="color: var(--color-text-primary)">
				Atom Components
			</h2>

			<div class="grid md:grid-cols-3 gap-6">
				<Card variant="bordered" padding="lg">
					<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">
						Buttons
					</h3>
					<div class="space-y-3">
						<Button href="#" variant="primary" fullWidth>Primary</Button>
						<Button href="#" variant="secondary" fullWidth>Secondary</Button>
						<Button href="#" variant="outline" fullWidth>Outline</Button>
					</div>
				</Card>

				<Card variant="bordered" padding="lg">
					<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">
						Badges
					</h3>
					<div class="flex flex-wrap gap-2">
						<Badge variant="primary">Primary</Badge>
						<Badge variant="success">Success</Badge>
						<Badge variant="warning">Warning</Badge>
						<Badge variant="error">Error</Badge>
					</div>
				</Card>

				<Card variant="bordered" padding="lg">
					<h3 class="font-semibold text-lg mb-4" style="color: var(--color-text-primary)">Cards</h3>
					<div class="space-y-2">
						<Card variant="hover" padding="sm">
							<p class="text-sm" style="color: var(--color-text-secondary)">Hover Card</p>
						</Card>
						<Card variant="glow" padding="sm">
							<p class="text-sm" style="color: var(--color-text-secondary)">Glow Card</p>
						</Card>
					</div>
				</Card>
			</div>
		</Container>
	</section>

	<FeatureSection
		id="features"
		title="Feature Section"
		subtitle="Automatisch generiertes Feature-Grid"
		features={features}
		columns={4}
	/>

	<PricingSection title="Pricing Section" subtitle="Vergleiche unsere Pläne" plans={pricingPlans} />

	<FAQSection title="FAQ Section" faqs={faqs} />

	<CTASection
		title="Bereit loszulegen?"
		subtitle="Starte jetzt mit ManaCore und verbessere deine Team-Performance."
		primaryCta={{
			text: 'Kostenlos testen',
			href: '#',
		}}
		secondaryCta={{
			text: 'Demo anfragen',
			href: '#',
			variant: 'outline',
		}}
		variant="highlighted"
	/>
</Layout>
