---
import Section from '../content/Section.astro';
import Container from '../layout/Container.astro';
import Heading from '../typography/Heading.astro';
import Text from '../typography/Text.astro';
import { Icon } from 'astro-icon/components';

export interface Props {
	class?: string;
}

const { class: className } = Astro.props;
---

<Section id="ecosystem" background="subtle" class={className}>
	<Container>
		<div class="text-center mb-12">
			<Heading as="h2" size="3" class="mb-4"> Vernetzte Apps, die zusammen stark sind </Heading>
		</div>

		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
			<!-- Memoro Card -->
			<div
				class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-mana-blue dark:hover:border-mana-blue transition-all duration-300 hover:shadow-xl"
			>
				<div class="p-6">
					<div class="flex items-center gap-3 mb-4">
						<div class="w-12 h-12 bg-mana-blue/10 rounded-xl flex items-center justify-center">
							<Icon name="mdi:microphone" class="w-6 h-6 text-mana-blue" />
						</div>
						<Heading as="h3" size="h4" class="m-0">Memoro</Heading>
					</div>
					<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2">
						KI-Transkription & Analyse
					</Text>
					<Text size="sm" class="text-gray-500 dark:text-gray-500">
						Verwandle Sprache in durchsuchbares Wissen
					</Text>
					<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
						<span
							class="inline-flex items-center gap-2 text-sm font-medium text-green-600 dark:text-green-500"
						>
							<Icon name="mdi:check-circle" class="w-4 h-4" />
							Jetzt verfügbar
						</span>
					</div>
				</div>
			</div>

			<!-- Document AI Card -->
			<div
				class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300"
			>
				<div class="p-6">
					<div class="flex items-center gap-3 mb-4">
						<div
							class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center"
						>
							<Icon name="mdi:file-document" class="w-6 h-6 text-gray-400" />
						</div>
						<Heading as="h3" size="h4" class="m-0">Dokumenten-KI</Heading>
					</div>
					<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2"> Coming Soon </Text>
					<Text size="sm" class="text-gray-500 dark:text-gray-500">
						PDFs verstehen und vernetzen
					</Text>
					<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
						<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
							<Icon name="mdi:clock-outline" class="w-4 h-4" />
							Q2 2025
						</span>
					</div>
				</div>
			</div>

			<!-- Creative Suite Card -->
			<div
				class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300"
			>
				<div class="p-6">
					<div class="flex items-center gap-3 mb-4">
						<div
							class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center"
						>
							<Icon name="mdi:palette" class="w-6 h-6 text-gray-400" />
						</div>
						<Heading as="h3" size="h4" class="m-0">Kreativ-Suite</Heading>
					</div>
					<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2"> Coming Soon </Text>
					<Text size="sm" class="text-gray-500 dark:text-gray-500">
						Bilder und Videos mit KI bearbeiten
					</Text>
					<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
						<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
							<Icon name="mdi:clock-outline" class="w-4 h-4" />
							Q3 2025
						</span>
					</div>
				</div>
			</div>

			<!-- Code Assistant Card -->
			<div
				class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300"
			>
				<div class="p-6">
					<div class="flex items-center gap-3 mb-4">
						<div
							class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center"
						>
							<Icon name="mdi:code-braces" class="w-6 h-6 text-gray-400" />
						</div>
						<Heading as="h3" size="h4" class="m-0">Code-Assistent</Heading>
					</div>
					<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2"> Coming Soon </Text>
					<Text size="sm" class="text-gray-500 dark:text-gray-500">
						Programmieren mit KI-Unterstützung
					</Text>
					<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
						<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
							<Icon name="mdi:clock-outline" class="w-4 h-4" />
							Q4 2025
						</span>
					</div>
				</div>
			</div>

			<!-- Knowledge Graph Card -->
			<div
				class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all duration-300"
			>
				<div class="p-6">
					<div class="flex items-center gap-3 mb-4">
						<div
							class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center"
						>
							<Icon name="mdi:graph" class="w-6 h-6 text-gray-400" />
						</div>
						<Heading as="h3" size="h4" class="m-0">Wissens-Graph</Heading>
					</div>
					<Text size="base" class="text-gray-600 dark:text-gray-400 mb-2"> Coming Soon </Text>
					<Text size="sm" class="text-gray-500 dark:text-gray-500">
						Alle deine Inhalte vernetzt
					</Text>
					<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
						<span class="inline-flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
							<Icon name="mdi:clock-outline" class="w-4 h-4" />
							2026
						</span>
					</div>
				</div>
			</div>

			<!-- Join Ecosystem Card -->
			<div
				class="group relative overflow-hidden bg-gradient-to-br from-mana-blue/5 to-blue-500/5 dark:from-mana-blue/10 dark:to-blue-500/10 rounded-2xl border-2 border-dashed border-mana-blue/30 hover:border-mana-blue/50 transition-all duration-300 cursor-pointer"
			>
				<a href="/ecosystem/partner" class="block p-6 h-full">
					<div class="flex flex-col items-center justify-center h-full text-center">
						<div
							class="w-16 h-16 bg-mana-blue/10 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300"
						>
							<Icon name="mdi:plus" class="w-8 h-8 text-mana-blue" />
						</div>
						<Heading as="h3" size="h4" class="mb-2"> Werde Teil des Ökosystems </Heading>
						<Text size="sm" class="text-gray-600 dark:text-gray-400">
							Entwickle mit uns die nächste App
						</Text>
					</div>
				</a>
			</div>
		</div>
	</Container>
</Section>
