---
import BaseLayout from '../layouts/BaseLayout.astro';
import HeroSection from '../components/HeroSection.astro';

// Shared components
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';

const appUrl = 'https://app.ulo.ad';

// Feature data
const features = [
	{
		icon: '🔗',
		title: 'Smart Links',
		description:
			'Kurze URLs mit Tracking, Ablaufdatum, Passwortschutz und UTM-Parametern für professionelles Marketing.',
	},
	{
		icon: '📊',
		title: 'Detaillierte Analytics',
		description:
			'Verfolge Klicks, geografische Herkunft, Geräte und Referrer in Echtzeit mit übersichtlichen Dashboards.',
	},
	{
		icon: '🎨',
		title: 'QR-Code Generator',
		description:
			'Erstelle anpassbare QR-Codes in verschiedenen Farben, Formen und mit deinem Logo für jeden Link.',
	},
	{
		icon: '💳',
		title: 'Profile Cards',
		description:
			'Beeindruckende Profilseiten mit Drag & Drop Builder - deine digitale Visitenkarte.',
	},
	{
		icon: '👥',
		title: 'Team Workspaces',
		description:
			'Arbeite im Team zusammen mit gemeinsamen Workspaces, Ordnern und granularen Berechtigungen.',
	},
	{
		icon: '🔌',
		title: 'API & Integrationen',
		description:
			'RESTful API für automatisierte Workflows und Integration in deine bestehenden Tools.',
	},
];

// Steps data
const steps = [
	{
		number: '1',
		title: 'Link einfügen',
		description: 'Füge deine lange URL ein - egal ob Website, Social Media Post oder Dokument.',
		image: '/screenshots/paste.png',
	},
	{
		number: '2',
		title: 'Anpassen',
		description: 'Wähle einen Custom Slug, setze Ablaufdatum, Passwort oder UTM-Parameter.',
		image: '/screenshots/customize.png',
	},
	{
		number: '3',
		title: 'Teilen & Tracken',
		description: 'Teile deinen kurzen Link und verfolge alle Klicks in Echtzeit.',
		image: '/screenshots/share.png',
	},
];

// Pricing data
const pricingPlans = [
	{
		name: 'Free',
		price: '0',
		period: '/Monat',
		description: 'Perfekt zum Ausprobieren',
		features: [
			{ text: '10 Links pro Monat', included: true },
			{ text: 'Basis Analytics', included: true },
			{ text: 'QR-Code Generator', included: true },
			{ text: 'Link Anpassung', included: true },
			{ text: 'Unbegrenzte Links', included: false },
			{ text: 'Team Features', included: false },
		],
		cta: {
			text: 'Kostenlos starten',
			href: `${appUrl}/register`,
		},
	},
	{
		name: 'Pro',
		price: '4,99',
		period: '/Monat',
		description: 'Für Freelancer & Creators',
		features: [
			{ text: 'Unbegrenzte Links', included: true },
			{ text: 'Erweiterte Analytics', included: true },
			{ text: 'Custom QR Codes', included: true },
			{ text: 'API Zugang', included: true },
			{ text: 'Priority Support', included: true },
			{ text: 'Passwortschutz', included: true },
		],
		cta: {
			text: 'Pro wählen',
			href: `${appUrl}/register?plan=pro`,
		},
	},
	{
		name: 'Pro Jährlich',
		price: '3,33',
		period: '/Monat',
		description: 'Spare 20€ pro Jahr',
		features: [
			{ text: 'Alle Pro Features', included: true },
			{ text: 'Unbegrenzte Links', included: true },
			{ text: 'Erweiterte Analytics', included: true },
			{ text: 'Custom QR Codes', included: true },
			{ text: 'API Zugang', included: true },
			{ text: 'Priority Support', included: true },
		],
		cta: {
			text: 'Jährlich sparen',
			href: `${appUrl}/register?plan=pro-yearly`,
		},
		highlighted: true,
		badge: 'Spare 20€',
	},
	{
		name: 'Lifetime',
		price: '129,99',
		period: 'einmalig',
		description: 'Einmal zahlen, für immer nutzen',
		features: [
			{ text: 'Alle Pro Features', included: true },
			{ text: 'Lebenslanger Zugang', included: true },
			{ text: 'Alle zukünftigen Features', included: true },
			{ text: 'Early Access', included: true },
			{ text: 'Priority Support', included: true },
			{ text: 'Keine Abo-Gebühren', included: true },
		],
		cta: {
			text: 'Lifetime sichern',
			href: `${appUrl}/register?plan=lifetime`,
		},
		badge: 'Einmalig',
	},
];

// FAQ data
const faqs = [
	{
		question: 'Wie lange bleiben meine Links aktiv?',
		answer:
			'Im Free-Plan bleiben Links 1 Jahr aktiv. Mit Pro sind alle Links unbegrenzt gültig - es sei denn, du setzt selbst ein Ablaufdatum.',
	},
	{
		question: 'Kann ich meine eigene Domain verwenden?',
		answer:
			'Ja! Mit Pro kannst du deine eigene Domain verbinden und branded Short-Links erstellen (z.B. links.deinefirma.de/kampagne).',
	},
	{
		question: 'Wie funktionieren die Analytics?',
		answer:
			'Wir tracken Klicks, Herkunftsland, Gerät, Browser und Referrer - DSGVO-konform ohne Cookies. Du siehst alle Daten in Echtzeit im Dashboard.',
	},
	{
		question: 'Was sind Profile Cards?',
		answer:
			'Profile Cards sind customizable Landing Pages für deine Links. Perfekt für Bio-Links, digitale Visitenkarten oder Link-in-Bio für Social Media.',
	},
	{
		question: 'Gibt es eine API?',
		answer:
			'Ja! Mit Pro erhältst du vollen API-Zugang. Erstelle Links, rufe Analytics ab und integriere uLoad in deine Workflows programmatisch.',
	},
	{
		question: 'Kann ich mein Abo jederzeit kündigen?',
		answer:
			'Ja, du kannst monatliche Abos jederzeit kündigen. Nach der Kündigung hast du noch bis zum Ende des Abrechnungszeitraums Zugang zu allen Pro-Features.',
	},
];
---

<BaseLayout title="Intelligenter URL-Shortener">
	<HeroSection />

	<FeatureSection
		id="features"
		title="Alles was du für professionelles Link-Management brauchst"
		subtitle="Von einfacher URL-Verkürzung bis hin zu Team-Kollaboration - uLoad bietet alle Features die du brauchst."
		features={features}
		columns={3}
		variant="cards"
	/>

	<StepsSection
		id="how-it-works"
		title="In 3 Schritten zum perfekten Link"
		subtitle="So einfach funktioniert uLoad"
		steps={steps}
		showImages={false}
		alternateLayout={true}
		class="bg-gray-50"
	/>

	<PricingSection
		id="pricing"
		title="Transparente Preise, keine versteckten Kosten"
		subtitle="Starte kostenlos und upgrade wenn du bereit bist. Jederzeit kündbar."
		plans={pricingPlans}
	/>

	<FAQSection
		id="faq"
		title="Häufig gestellte Fragen"
		subtitle="Alles was du über uLoad wissen musst"
		faqs={faqs}
		class="bg-gray-50"
	/>

	<CTASection
		id="cta"
		title="Bereit für smarte Links?"
		subtitle="Starte jetzt kostenlos und erlebe, wie einfach professionelles Link-Management sein kann."
		primaryCta={{ text: 'Kostenlos starten', href: `${appUrl}/register` }}
		secondaryCta={{ text: 'Features entdecken', href: '/features' }}
		variant="default"
	/>
</BaseLayout>