---
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 HeroSection from '../components/content/HeroSection.astro';
import { Icon } from 'astro-icon/components';
---

<Layout title="Impressum | Mana">
	<div
		class="bg-gradient-to-b from-gray-50/30 via-white to-gray-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-gray-50/50 to-transparent dark:from-gray-900 dark:to-transparent"
				>
				</div>
			</div>

			<HeroSection
				title="Impressum"
				subtitle="Angaben gemäß § 5 TMG"
				background="none"
				minHeight="small"
				spacing="small"
				containerClass="py-16 relative z-10"
				centered={true}
				debug={false}
			/>
		</div>

		<!-- Main Content -->
		<Section spacing="xlarge" class="relative">
			<Container class="relative z-10">
				<div class="max-w-4xl mx-auto">
					<Card
						variant="elevated"
						padding="xlarge"
						class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80"
					>
						<div class="prose prose-gray dark:prose-invert max-w-none">
							<!-- Anbieter / Betreiber -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon name="mdi:domain" class="w-6 h-6 text-mana-blue" />
									</div>
									<Heading as="h2" size="3" class="!mb-0"> Anbieter </Heading>
								</div>

								<div class="pl-15 space-y-2 text-gray-700 dark:text-gray-300">
									<p class="font-semibold text-lg">Mana GmbH</p>
									<p>Musterstraße 123</p>
									<p>12345 Musterstadt</p>
									<p>Deutschland</p>
								</div>
							</div>

							<!-- Kontakt -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon name="mdi:email" class="w-6 h-6 text-green-600 dark:text-green-500" />
									</div>
									<Heading as="h2" size="3" class="!mb-0"> Kontakt </Heading>
								</div>

								<div class="pl-15 space-y-3">
									<div class="flex items-center gap-2">
										<Icon name="mdi:phone" class="w-5 h-5 text-gray-500" />
										<a href="tel:+4912345678" class="text-mana-blue hover:underline"
											>+49 (0) 123 456 78</a
										>
									</div>
									<div class="flex items-center gap-2">
										<Icon name="mdi:email-outline" class="w-5 h-5 text-gray-500" />
										<a href="mailto:info@mana.ai" class="text-mana-blue hover:underline"
											>info@mana.ai</a
										>
									</div>
									<div class="flex items-center gap-2">
										<Icon name="mdi:web" class="w-5 h-5 text-gray-500" />
										<a href="https://mana.ai" class="text-mana-blue hover:underline">www.mana.ai</a>
									</div>
								</div>
							</div>

							<!-- Vertreten durch -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon
											name="mdi:account-tie"
											class="w-6 h-6 text-purple-600 dark:text-purple-500"
										/>
									</div>
									<Heading as="h2" size="3" class="!mb-0"> Vertreten durch </Heading>
								</div>

								<div class="pl-15 text-gray-700 dark:text-gray-300">
									<p>Geschäftsführer: [Name des Geschäftsführers]</p>
								</div>
							</div>

							<!-- Registereintrag -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon
											name="mdi:file-document"
											class="w-6 h-6 text-blue-600 dark:text-blue-500"
										/>
									</div>
									<Heading as="h2" size="3" class="!mb-0"> Registereintrag </Heading>
								</div>

								<div class="pl-15 space-y-2 text-gray-700 dark:text-gray-300">
									<p>Eintragung im Handelsregister</p>
									<p>Registergericht: Amtsgericht [Stadt]</p>
									<p>Registernummer: HRB [Nummer]</p>
								</div>
							</div>

							<!-- Umsatzsteuer-ID -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-orange-500/10 to-yellow-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon
											name="mdi:receipt-text"
											class="w-6 h-6 text-orange-600 dark:text-orange-500"
										/>
									</div>
									<Heading as="h2" size="3" class="!mb-0"> Umsatzsteuer-ID </Heading>
								</div>

								<div class="pl-15 text-gray-700 dark:text-gray-300">
									<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</p>
									<p class="font-mono">DE [Umsatzsteuer-ID]</p>
								</div>
							</div>

							<!-- Verantwortlich für den Inhalt -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon
											name="mdi:shield-account"
											class="w-6 h-6 text-indigo-600 dark:text-indigo-500"
										/>
									</div>
									<Heading as="h2" size="3" class="!mb-0"> Verantwortlich für den Inhalt </Heading>
								</div>

								<div class="pl-15 text-gray-700 dark:text-gray-300">
									<p>Verantwortlich nach § 55 Abs. 2 RStV:</p>
									<p class="mt-2">[Name]</p>
									<p>Musterstraße 123</p>
									<p>12345 Musterstadt</p>
								</div>
							</div>

							<!-- EU-Streitschlichtung -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-indigo-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon name="mdi:gavel" class="w-6 h-6 text-blue-600 dark:text-blue-500" />
									</div>
									<Heading as="h2" size="3" class="!mb-0"> EU-Streitschlichtung </Heading>
								</div>

								<div class="pl-15 text-gray-700 dark:text-gray-300">
									<p>
										Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS)
										bereit:
									</p>
									<a
										href="https://ec.europa.eu/consumers/odr/"
										target="_blank"
										rel="noopener noreferrer"
										class="text-mana-blue hover:underline block mt-2"
									>
										https://ec.europa.eu/consumers/odr/
									</a>
									<p class="mt-4">Unsere E-Mail-Adresse finden Sie oben im Impressum.</p>
								</div>
							</div>

							<!-- Verbraucherstreitbeilegung -->
							<div class="mb-12">
								<div class="flex items-center gap-3 mb-6">
									<div
										class="w-12 h-12 bg-gradient-to-br from-gray-500/10 to-slate-500/10 rounded-xl flex items-center justify-center"
									>
										<Icon
											name="mdi:scale-balance"
											class="w-6 h-6 text-gray-600 dark:text-gray-500"
										/>
									</div>
									<Heading as="h2" size="3" class="!mb-0"> Verbraucherstreitbeilegung </Heading>
								</div>

								<div class="pl-15 text-gray-700 dark:text-gray-300">
									<p>
										Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
										Verbraucherschlichtungsstelle teilzunehmen.
									</p>
								</div>
							</div>

							<!-- Haftungshinweis -->
							<div class="pt-8 border-t border-gray-200 dark:border-gray-700">
								<Heading as="h2" size="3" class="mb-6"> Haftung für Inhalte </Heading>

								<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
									<p>
										Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen
										Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind
										wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder
										gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen,
										die auf eine rechtswidrige Tätigkeit hinweisen.
									</p>
									<p>
										Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach
										den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung
										ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung
										möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir
										diese Inhalte umgehend entfernen.
									</p>
								</div>
							</div>

							<!-- Haftung für Links -->
							<div class="pt-8 border-t border-gray-200 dark:border-gray-700 mt-8">
								<Heading as="h2" size="3" class="mb-6"> Haftung für Links </Heading>

								<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
									<p>
										Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir
										keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine
										Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige
										Anbieter oder Betreiber der Seiten verantwortlich.
									</p>
									<p>
										Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche
										Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der
										Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten
										Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht
										zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links
										umgehend entfernen.
									</p>
								</div>
							</div>

							<!-- Urheberrecht -->
							<div class="pt-8 border-t border-gray-200 dark:border-gray-700 mt-8">
								<Heading as="h2" size="3" class="mb-6"> Urheberrecht </Heading>

								<div class="space-y-4 text-gray-700 dark:text-gray-300 text-sm">
									<p>
										Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten
										unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung,
										Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes
										bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
									</p>
									<p>
										Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen
										Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber
										erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden
										Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine
										Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden
										Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte
										umgehend entfernen.
									</p>
								</div>
							</div>
						</div>
					</Card>

					<!-- Quick Links -->
					<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
						<a href="/privacy" class="group">
							<div
								class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all"
							>
								<div class="flex items-center gap-3 mb-2">
									<Icon name="mdi:shield-check" class="w-5 h-5 text-mana-blue" />
									<Text size="base" weight="semibold">Datenschutz-Center</Text>
								</div>
								<Text size="sm" class="text-gray-600 dark:text-gray-400">
									DSGVO, Sicherheit & KI-Ethik
								</Text>
							</div>
						</a>

						<a href="/legal/datenschutz" class="group">
							<div
								class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all"
							>
								<div class="flex items-center gap-3 mb-2">
									<Icon name="mdi:file-document" class="w-5 h-5 text-mana-blue" />
									<Text size="base" weight="semibold">Datenschutzerklärung</Text>
								</div>
								<Text size="sm" class="text-gray-600 dark:text-gray-400">
									Vollständige Datenschutzerklärung
								</Text>
							</div>
						</a>

						<a href="/legal/agb" class="group">
							<div
								class="bg-white/80 backdrop-blur-sm dark:bg-gray-800/80 rounded-xl p-6 border border-gray-200 dark:border-gray-700 group-hover:border-mana-blue transition-all"
							>
								<div class="flex items-center gap-3 mb-2">
									<Icon name="mdi:scale-balance" class="w-5 h-5 text-mana-blue" />
									<Text size="base" weight="semibold">AGB</Text>
								</div>
								<Text size="sm" class="text-gray-600 dark:text-gray-400">
									Allgemeine Geschäftsbedingungen
								</Text>
							</div>
						</a>
					</div>
				</div>
			</Container>
		</Section>

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