---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import Navbar from '../../components/navigation/Navbar.astro';
import Footer from '../../components/navigation/Footer.astro';
import Section from '../../components/content/Section.astro';
import Container from '../../components/layout/Container.astro';
import Heading from '../../components/typography/Heading.astro';
import Text from '../../components/typography/Text.astro';
import Card from '../../components/ui/Card.astro';
import Grid from '../../components/layout/Grid.astro';
import HeroSection from '../../components/content/HeroSection.astro';
import { Icon } from 'astro-icon/components';

const clients = await getCollection('clients');
const sortedClients = clients.sort((a, b) => a.data.order - b.data.order);

// Group clients by size
const clientsBySize = {
	enterprise: sortedClients.filter((c) => c.data.size === 'enterprise'),
	mittelstand: sortedClients.filter((c) => c.data.size === 'mittelstand'),
	startup: sortedClients.filter((c) => c.data.size === 'startup'),
};
---

<Layout title="Erfolgsgeschichten - Kunden berichten über Mana">
	<div
		class="bg-gradient-to-b from-blue-50/30 via-white to-blue-50/30 dark:from-gray-900 dark:via-gray-900 dark:to-gray-900"
	>
		<Navbar />

		<!-- Hero Section -->
		<div class="relative">
			<div class="absolute inset-0 -bottom-32">
				<div
					class="absolute inset-0 bg-gradient-to-b from-blue-50/50 to-transparent dark:from-gray-900 dark:to-transparent"
				>
				</div>
				<div
					class="absolute top-0 right-0 w-96 h-96 bg-mana-blue/10 dark:bg-mana-blue/5 rounded-full blur-3xl"
				>
				</div>
				<div
					class="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/10 dark:bg-blue-500/5 rounded-full blur-3xl"
				>
				</div>
			</div>

			<HeroSection
				title="Erfolgsgeschichten unserer Kunden"
				subtitle="Von Startups bis zu Großunternehmen - entdecken Sie, wie Teams mit Mana ihre KI-Nutzung revolutioniert haben."
				background="none"
				minHeight="small"
				spacing="small"
				containerClass="py-16 relative z-10"
				centered={true}
				debug={false}
			/>
		</div>

		<!-- Summary Stats Section -->
		<Section spacing="medium" class="relative -mt-16">
			<Container class="relative z-10">
				<div class="grid grid-cols-3 gap-8 max-w-3xl mx-auto">
					{/* Kostenersparnis */}
					<div class="group relative h-full">
						<div
							class="absolute inset-0 bg-gradient-to-br from-green-500/0 to-emerald-500/0 rounded-2xl group-hover:from-green-500/10 group-hover:to-emerald-500/10 transition-all duration-300"
						>
						</div>
						<div
							class="relative bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-2xl p-6 text-center border border-gray-200 dark:border-gray-700 group-hover:border-green-500/30 transition-all duration-300 h-full flex flex-col justify-center"
						>
							<div
								class="text-4xl font-bold bg-gradient-to-br from-green-600 to-emerald-600 bg-clip-text text-transparent mb-2"
							>
								60%
							</div>
							<div class="text-sm text-gray-600 dark:text-gray-400">
								Durchschnittliche<br />Kostenersparnis
							</div>
						</div>
					</div>

					{/* Produktivität */}
					<div class="group relative h-full">
						<div
							class="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-pink-500/0 rounded-2xl group-hover:from-purple-500/10 group-hover:to-pink-500/10 transition-all duration-300"
						>
						</div>
						<div
							class="relative bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-2xl p-6 text-center border border-gray-200 dark:border-gray-700 group-hover:border-purple-500/30 transition-all duration-300 h-full flex flex-col justify-center"
						>
							<div
								class="text-4xl font-bold bg-gradient-to-br from-purple-600 to-pink-600 bg-clip-text text-transparent mb-2"
							>
								3x
							</div>
							<div class="text-sm text-gray-600 dark:text-gray-400">
								Produktivitäts-<br />steigerung
							</div>
						</div>
					</div>

					{/* Nutzer */}
					<div class="group relative h-full">
						<div
							class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-cyan-500/0 rounded-2xl group-hover:from-blue-500/10 group-hover:to-cyan-500/10 transition-all duration-300"
						>
						</div>
						<div
							class="relative bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-2xl p-6 text-center border border-gray-200 dark:border-gray-700 group-hover:border-blue-500/30 transition-all duration-300 h-full flex flex-col justify-center"
						>
							<div
								class="text-4xl font-bold bg-gradient-to-br from-blue-600 to-cyan-600 bg-clip-text text-transparent mb-2"
							>
								5000+
							</div>
							<div class="text-sm text-gray-600 dark:text-gray-400">Zufriedene<br />Nutzer</div>
						</div>
					</div>
				</div>
			</Container>
		</Section>

		<!-- Enterprise Clients -->
		{
			clientsBySize.enterprise.length > 0 && (
				<Section spacing="xlarge" class="relative">
					<div class="absolute inset-0 -top-32 -bottom-32" />
					<div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/15 dark:bg-blue-500/5 rounded-full blur-3xl" />
					<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-mana-blue/15 dark:bg-mana-blue/5 rounded-full blur-3xl" />

					<Container class="relative z-10">
						<div class="text-center mb-16">
							<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-2xl mb-4">
								<Icon name="mdi:domain" class="w-8 h-8 text-blue-600 dark:text-blue-500" />
							</div>
							<Heading as="h2" size="2" class="mb-4 text-center">
								Enterprise
							</Heading>
							<Text
								size="xl"
								class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center"
							>
								Große Organisationen vertrauen auf Mana für ihre unternehmensweite KI-Strategie
							</Text>
						</div>

						<Grid
							cols={clientsBySize.enterprise.length === 1 ? 1 : 2}
							gap="large"
							class="max-w-5xl mx-auto"
						>
							{clientsBySize.enterprise.map((client) => (
								<a href={`/clients/${client.slug}`} class="block group">
									<div class="relative h-full">
										<div class="absolute -inset-0.5 bg-gradient-to-r from-mana-blue/0 via-mana-blue/20 to-mana-blue/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur" />

										<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue/50 transition-all duration-300 overflow-hidden">
											<div class="p-8">
												{/* Logo */}
												<div class="mb-6">
													<img
														src={client.data.logo}
														alt={client.data.company}
														class="h-16 w-auto max-w-[200px]"
													/>
												</div>

												{/* Company Info */}
												<Heading
													as="h3"
													size="4"
													class="mb-3 group-hover:text-mana-blue transition-colors"
												>
													{client.data.company}
												</Heading>

												<div class="flex items-center gap-4 mb-6">
													<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
														{client.data.industry}
													</span>
													<span class="text-sm text-gray-600 dark:text-gray-400">
														{client.data.manaUsage.teamSize} Nutzer
													</span>
												</div>

												{/* Quote */}
												<div class="relative mb-6">
													<Icon
														name="mdi:format-quote-open"
														class="absolute -top-2 -left-2 w-8 h-8 text-mana-blue/20"
													/>
													<Text size="base" class="italic text-gray-700 dark:text-gray-300 pl-6">
														{client.data.testimonial.quote}
													</Text>
												</div>

												{/* Stats */}
												<div class="flex items-end justify-between pt-6 border-t border-gray-100 dark:border-gray-700">
													<div class="grid grid-cols-2 gap-4">
														{client.data.stats.slice(0, 2).map((stat) => (
															<div>
																<div class="text-2xl font-bold bg-gradient-to-br from-mana-blue to-blue-600 bg-clip-text text-transparent">
																	{stat.value}
																</div>
																<Text size="xs" class="text-gray-600 dark:text-gray-400">
																	{stat.label}
																</Text>
															</div>
														))}
													</div>
													<Icon
														name="mdi:arrow-right"
														class="w-6 h-6 text-gray-400 group-hover:text-mana-blue group-hover:translate-x-1 transition-all"
													/>
												</div>
											</div>
										</div>
									</div>
								</a>
							))}
						</Grid>
					</Container>
				</Section>
			)
		}

		<!-- Mittelstand Clients -->
		{
			clientsBySize.mittelstand.length > 0 && (
				<Section spacing="xlarge" class="relative">
					<div class="absolute inset-0 -top-32 -bottom-32 bg-gradient-to-b from-transparent via-purple-50/30 to-transparent dark:from-transparent dark:via-purple-500/3 dark:to-transparent" />
					<div class="absolute top-1/3 right-0 w-[500px] h-[500px] bg-purple-500/20 dark:bg-purple-500/5 rounded-full blur-3xl" />
					<div class="absolute bottom-1/3 left-0 w-[500px] h-[500px] bg-pink-500/20 dark:bg-pink-500/5 rounded-full blur-3xl" />

					<Container class="relative z-10">
						<div class="text-center mb-16">
							<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl mb-4">
								<Icon
									name="mdi:office-building"
									class="w-8 h-8 text-purple-600 dark:text-purple-500"
								/>
							</div>
							<Heading as="h2" size="2" class="mb-4 text-center">
								Mittelstand
							</Heading>
							<Text
								size="xl"
								class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center"
							>
								Mittelständische Unternehmen optimieren ihre Prozesse mit flexiblen KI-Tools
							</Text>
						</div>

						<Grid
							cols={clientsBySize.mittelstand.length === 1 ? 1 : 2}
							gap="large"
							class="max-w-5xl mx-auto"
						>
							{clientsBySize.mittelstand.map((client) => (
								<a href={`/clients/${client.slug}`} class="block group">
									<div class="relative h-full">
										<div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500/0 via-purple-500/20 to-purple-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur" />

										<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 group-hover:border-purple-500/50 transition-all duration-300 overflow-hidden">
											<div class="p-8">
												{/* Logo */}
												<div class="mb-6">
													<img
														src={client.data.logo}
														alt={client.data.company}
														class="h-16 w-auto max-w-[200px]"
													/>
												</div>

												{/* Company Info */}
												<Heading
													as="h3"
													size="4"
													class="mb-3 group-hover:text-purple-600 transition-colors"
												>
													{client.data.company}
												</Heading>

												<div class="flex items-center gap-4 mb-6">
													<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
														{client.data.industry}
													</span>
													<span class="text-sm text-gray-600 dark:text-gray-400">
														{client.data.manaUsage.teamSize} Nutzer
													</span>
												</div>

												{/* Quote */}
												<div class="relative mb-6">
													<Icon
														name="mdi:format-quote-open"
														class="absolute -top-2 -left-2 w-8 h-8 text-purple-500/20"
													/>
													<Text size="base" class="italic text-gray-700 dark:text-gray-300 pl-6">
														{client.data.testimonial.quote}
													</Text>
												</div>

												{/* Stats */}
												<div class="flex items-end justify-between pt-6 border-t border-gray-100 dark:border-gray-700">
													<div class="grid grid-cols-2 gap-4">
														{client.data.stats.slice(0, 2).map((stat) => (
															<div>
																<div class="text-2xl font-bold bg-gradient-to-br from-purple-600 to-pink-600 bg-clip-text text-transparent">
																	{stat.value}
																</div>
																<Text size="xs" class="text-gray-600 dark:text-gray-400">
																	{stat.label}
																</Text>
															</div>
														))}
													</div>
													<Icon
														name="mdi:arrow-right"
														class="w-6 h-6 text-gray-400 group-hover:text-purple-600 group-hover:translate-x-1 transition-all"
													/>
												</div>
											</div>
										</div>
									</div>
								</a>
							))}
						</Grid>
					</Container>
				</Section>
			)
		}

		<!-- Startup Clients -->
		{
			clientsBySize.startup.length > 0 && (
				<Section spacing="xlarge" class="relative">
					<div class="absolute inset-0 -top-32 -bottom-32" />
					<div class="absolute top-0 left-1/4 w-96 h-96 bg-green-500/15 dark:bg-green-500/5 rounded-full blur-3xl" />
					<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-emerald-500/15 dark:bg-emerald-500/5 rounded-full blur-3xl" />

					<Container class="relative z-10">
						<div class="text-center mb-16">
							<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-2xl mb-4">
								<Icon name="mdi:rocket-launch" class="w-8 h-8 text-green-600 dark:text-green-500" />
							</div>
							<Heading as="h2" size="2" class="mb-4 text-center">
								Startups
							</Heading>
							<Text
								size="xl"
								class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center"
							>
								Innovative Startups skalieren mit Mana ohne hohe Fixkosten
							</Text>
						</div>

						<Grid
							cols={clientsBySize.startup.length === 1 ? 1 : 2}
							gap="large"
							class="max-w-5xl mx-auto"
						>
							{clientsBySize.startup.map((client) => (
								<a href={`/clients/${client.slug}`} class="block group">
									<div class="relative h-full">
										<div class="absolute -inset-0.5 bg-gradient-to-r from-green-500/0 via-green-500/20 to-green-500/0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur" />

										<div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 group-hover:border-green-500/50 transition-all duration-300 overflow-hidden">
											<div class="p-8">
												{/* Logo */}
												<div class="mb-6">
													<img
														src={client.data.logo}
														alt={client.data.company}
														class="h-16 w-auto max-w-[200px]"
													/>
												</div>

												{/* Company Info */}
												<Heading
													as="h3"
													size="4"
													class="mb-3 group-hover:text-green-600 transition-colors"
												>
													{client.data.company}
												</Heading>

												<div class="flex items-center gap-4 mb-6">
													<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
														{client.data.industry}
													</span>
													<span class="text-sm text-gray-600 dark:text-gray-400">
														{client.data.manaUsage.teamSize} Nutzer
													</span>
												</div>

												{/* Quote */}
												<div class="relative mb-6">
													<Icon
														name="mdi:format-quote-open"
														class="absolute -top-2 -left-2 w-8 h-8 text-green-500/20"
													/>
													<Text size="base" class="italic text-gray-700 dark:text-gray-300 pl-6">
														{client.data.testimonial.quote}
													</Text>
												</div>

												{/* Stats */}
												<div class="flex items-end justify-between pt-6 border-t border-gray-100 dark:border-gray-700">
													<div class="grid grid-cols-2 gap-4">
														{client.data.stats.slice(0, 2).map((stat) => (
															<div>
																<div class="text-2xl font-bold bg-gradient-to-br from-green-600 to-emerald-600 bg-clip-text text-transparent">
																	{stat.value}
																</div>
																<Text size="xs" class="text-gray-600 dark:text-gray-400">
																	{stat.label}
																</Text>
															</div>
														))}
													</div>
													<Icon
														name="mdi:arrow-right"
														class="w-6 h-6 text-gray-400 group-hover:text-green-600 group-hover:translate-x-1 transition-all"
													/>
												</div>
											</div>
										</div>
									</div>
								</a>
							))}
						</Grid>
					</Container>
				</Section>
			)
		}

		<!-- CTA Section -->
		<Section spacing="xlarge" class="relative">
			{/* Continuous background flow - final crescendo */}
			<div class="absolute -inset-y-32 left-1/2 -translate-x-1/2 w-[200vw]"></div>
			<div
				class="absolute bottom-0 right-1/3 w-[600px] h-[600px] bg-mana-blue/25 dark:bg-mana-blue/8 rounded-full blur-3xl"
			>
			</div>
			<div
				class="absolute top-0 left-1/3 w-[600px] h-[600px] bg-blue-500/25 dark:bg-blue-500/8 rounded-full blur-3xl"
			>
			</div>

			<Container class="relative z-10">
				<div class="max-w-4xl mx-auto">
					{/* Main CTA Card */}
					<div class="relative group">
						<div
							class="relative bg-white/95 backdrop-blur-sm dark:bg-gray-800 rounded-3xl p-12 md:p-16 text-center border border-gray-200 dark:border-gray-700 shadow-xl"
						>
							{/* Icon */}
							<div class="relative inline-block mb-8">
								<div class="absolute inset-0 bg-mana-blue/20 rounded-full blur-2xl scale-150"></div>
								<div
									class="relative w-20 h-20 bg-gradient-to-br from-mana-blue to-blue-600 rounded-2xl flex items-center justify-center transform rotate-3 group-hover:rotate-6 transition-transform duration-300"
								>
									<Icon name="mdi:rocket-launch-outline" class="w-10 h-10 text-white" />
								</div>
							</div>

							<Heading as="h2" size="2" class="mb-4 text-center">
								Schreiben Sie Ihre eigene Erfolgsgeschichte
							</Heading>

							<Text
								size="xl"
								class="mb-10 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center"
							>
								Starten Sie noch heute mit Mana und transformieren Sie die Art, wie Ihr Team
								KI-Tools nutzt.
							</Text>

							<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
								<a
									href="/start"
									class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-mana-blue to-blue-600 hover:from-blue-600 hover:to-mana-blue text-white rounded-lg text-lg font-medium shadow-lg hover:shadow-xl transition-all duration-300"
								>
									<Icon name="mdi:sparkles" class="w-5 h-5 mr-2" />
									Kostenlos starten mit 150 Mana
								</a>
								<a
									href="/demo"
									class="inline-flex items-center justify-center px-8 py-4 border-2 border-gray-300 dark:border-gray-600 hover:border-mana-blue dark:hover:border-mana-blue rounded-lg text-lg transition-all duration-300"
								>
									<Icon name="mdi:calendar-check" class="w-5 h-5 mr-2" />
									Demo vereinbaren
								</a>
							</div>

							{/* Trust indicators */}
							<div
								class="flex items-center justify-center gap-8 pt-8 border-t border-gray-100 dark:border-gray-700"
							>
								<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
									<Icon name="mdi:account-check" class="w-5 h-5 text-mana-blue" />
									<Text size="sm">Keine Kreditkarte nötig</Text>
								</div>
								<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
									<Icon name="mdi:shield-check" class="w-5 h-5 text-mana-blue" />
									<Text size="sm">DSGVO-konform</Text>
								</div>
								<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
									<Icon name="mdi:clock-start" class="w-5 h-5 text-mana-blue" />
									<Text size="sm">In 2 Minuten startklar</Text>
								</div>
							</div>
						</div>
					</div>
				</div>
			</Container>
		</Section>

		<Footer />
	</div>
</Layout>
