---
import Layout from '../../layouts/Layout.astro';

import HeroSection from '@manacore/shared-landing-ui/sections/HeroSection.astro';
import FeatureSection from '@manacore/shared-landing-ui/sections/FeatureSection.astro';
import PrinciplesSection from '@manacore/shared-landing-ui/sections/PrinciplesSection.astro';
import TimelineSection from '@manacore/shared-landing-ui/sections/TimelineSection.astro';
import FAQSection from '@manacore/shared-landing-ui/sections/FAQSection.astro';
import CTASection from '@manacore/shared-landing-ui/sections/CTASection.astro';
import Container from '@manacore/shared-landing-ui/atoms/Container.astro';
import SectionHeader from '@manacore/shared-landing-ui/atoms/SectionHeader.astro';

import IndependenceBar from '../../components/IndependenceBar.astro';
import InfrastructureGrid from '../../components/InfrastructureGrid.astro';

import { infrastructure, stats } from '../../data/infrastructure';
import { roadmapItemsEn } from '../../data/roadmap';
---

<Layout
	title="Mana IT — Technological Sovereignty for Europe"
	description="75% self-hosted infrastructure in Germany. No US Cloud Act. GDPR compliant. Open Source stack."
	lang="en"
>
	<nav
		class="fixed top-0 z-50 w-full border-b border-border bg-background-page/95 backdrop-blur-sm"
	>
		<Container>
			<div class="flex h-16 items-center justify-between">
				<a href="/en/" class="text-xl font-bold text-primary">Mana IT</a>
				<div class="hidden items-center gap-6 md:flex">
					<a href="#problem" class="text-sm text-text-secondary hover:text-primary">Why?</a>
					<a href="#infrastructure" class="text-sm text-text-secondary hover:text-primary"
						>Infrastructure</a
					>
					<a href="#gdpr" class="text-sm text-text-secondary hover:text-primary">GDPR</a>
					<a href="#audiences" class="text-sm text-text-secondary hover:text-primary">For whom?</a>
					<a href="#roadmap" class="text-sm text-text-secondary hover:text-primary">Roadmap</a>
					<a href="#faq" class="text-sm text-text-secondary hover:text-primary">FAQ</a>
					<a href="/" class="text-sm text-text-muted hover:text-primary">DE</a>
					<a
						href="#contact"
						class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover"
						>Contact</a
					>
				</div>
			</div>
		</Container>
	</nav>

	<main class="pt-16">
		<HeroSection
			title="Technological Sovereignty for Europe"
			subtitle="75% of our infrastructure runs on self-hosted servers in Germany. No US Cloud Act. No third-party dependencies. Full GDPR compliance."
			variant="centered"
			primaryCta={{ text: 'Explore Infrastructure', href: '#infrastructure' }}
			secondaryCta={{ text: 'Get in Touch', href: '#contact' }}
			trustBadges={[
				{ icon: '🛡️', text: 'GDPR Compliant' },
				{ icon: '🇩🇪', text: 'Servers in Germany' },
				{ icon: '🔓', text: 'Open Source Stack' },
			]}
		/>

		<FeatureSection
			id="problem"
			title="Why Europe Needs Independent Technology"
			subtitle="Dependence on US cloud providers is a strategic risk for European organizations."
			features={[
				{
					icon: '🛡️',
					title: 'US Cloud Act',
					description:
						'US authorities can access data stored with American cloud providers at any time — even when servers are located in Europe.',
				},
				{
					icon: '🔒',
					title: 'Vendor Lock-in',
					description:
						'Proprietary systems from AWS, Google, and Microsoft create dependencies that cost millions and limit innovation.',
				},
				{
					icon: '⚠️',
					title: 'Lack of Control',
					description:
						'When cloud services go down or prices change, there is no plan B. European organizations are at the mercy of US corporations.',
				},
				{
					icon: '⚖️',
					title: 'GDPR Conflicts',
					description:
						'Schrems II showed: data transfers to the US are legally problematic. Every company using US cloud carries a compliance risk.',
				},
			]}
			columns={2}
		/>

		<section id="solution" class="py-16">
			<Container>
				<SectionHeader
					title="Our Answer: Self-Hosted Infrastructure"
					subtitle="The Mana platform proves that a full SaaS ecosystem works without US cloud dependencies."
				/>
				<IndependenceBar
					percent={stats.percentSelfHosted}
					target={stats.targetPercent}
					labelCurrent="Self-Hosted"
					labelTarget="Target"
				/>
			</Container>
		</section>

		<PrinciplesSection
			principles={[
				{
					icon: 'shield',
					title: 'Data in Germany',
					description:
						'All user data stays on our own servers in Germany. No data transfer to third countries. No US cloud dependency.',
				},
				{
					icon: 'code',
					title: 'Open Source Stack',
					description:
						'PostgreSQL, Redis, MinIO, Matrix — our infrastructure is built on proven open-source technologies. No proprietary lock-in.',
				},
				{
					icon: 'rocket',
					title: 'Local AI',
					description:
						'LLM, image generation, speech recognition, and text-to-speech run locally on our own hardware. No data leaves the server.',
				},
			]}
		/>

		<section id="infrastructure" class="py-16">
			<Container>
				<SectionHeader
					title="Our Infrastructure in Detail"
					subtitle="14 of 21 core components run entirely on our own hardware in Germany."
				/>
				<InfrastructureGrid items={infrastructure} />
			</Container>
		</section>

		<FeatureSection
			id="gdpr"
			title="GDPR Compliance at Every Level"
			subtitle="Not just on paper — technically and organizationally implemented."
			features={[
				{
					icon: '✅',
					title: 'Lawfulness & Transparency',
					description:
						'Only technically necessary cookies. Explicit consent for all data processing. No hidden data collection.',
				},
				{
					icon: '📉',
					title: 'Data Minimization',
					description:
						'Only email required for registration. Automatic deletion after purpose fulfillment. Anonymized analytics with self-hosted Umami.',
				},
				{
					icon: '👤',
					title: 'Data Subject Rights',
					description:
						'All 6 rights implemented: Access, Rectification, Erasure, Portability, Objection, Restriction — via self-service dashboard.',
				},
				{
					icon: '🔐',
					title: 'Technical Security',
					description:
						'TLS 1.3, AES-256 encryption, EdDSA JWT authentication, regular security audits.',
				},
				{
					icon: '🚨',
					title: '72h Breach Notification',
					description:
						'Automated detection of data breaches. Immediate internal escalation. Notification to authorities within 72 hours.',
				},
				{
					icon: '🤖',
					title: 'AI Without Training Risk',
					description:
						'No user data for AI training. Local models process data directly on the server — nothing leaves the infrastructure.',
				},
			]}
			columns={3}
		/>

		<FeatureSection
			id="stack"
			title="Open Technologies Instead of Proprietary Silos"
			subtitle="Proven open-source software replaces expensive cloud services — without quality loss."
			features={[
				{ icon: '🗄️', title: 'PostgreSQL 16', description: 'Instead of DynamoDB / Firestore' },
				{ icon: '⚡', title: 'Redis 7', description: 'Instead of ElastiCache' },
				{ icon: '📦', title: 'MinIO', description: 'Instead of AWS S3' },
				{ icon: '🔐', title: 'Better Auth', description: 'Instead of Auth0 / Okta' },
				{ icon: '🔍', title: 'SearXNG', description: 'Instead of Google / Algolia' },
				{ icon: '💬', title: 'Matrix/Synapse', description: 'Instead of Slack / Teams' },
				{ icon: '🤖', title: 'Ollama + Gemma', description: 'Instead of OpenAI API' },
				{ icon: '📊', title: 'VictoriaMetrics', description: 'Instead of Datadog' },
			]}
			columns={4}
		/>

		<FeatureSection
			id="audiences"
			title="Who Is This For?"
			subtitle="European organizations with high requirements for data protection and independence."
			features={[
				{
					icon: '🏛️',
					title: 'Public Administration',
					description:
						'Government agencies implementing digital sovereignty. GDPR compliant, no US cloud dependency, transparent open-source stack.',
				},
				{
					icon: '🏥',
					title: 'Healthcare',
					description:
						'Hospitals, practices, and health organizations with the highest data protection requirements. Patient data guaranteed to stay in Germany.',
				},
				{
					icon: '🎓',
					title: 'Education & Research',
					description:
						'Universities, schools, and research institutions needing independent AI tools and secure communication. Special conditions available.',
				},
				{
					icon: '🏢',
					title: 'SMBs (Mittelstand)',
					description:
						'European companies breaking free from Big Tech dependency while using state-of-the-art AI tools. Flexible credit system instead of subscription trap.',
				},
			]}
			columns={2}
		/>

		<section id="roadmap">
			<TimelineSection
				title="Our Path to 90%+ Independence"
				subtitle="Transparent roadmap — from today to full sovereignty."
				items={roadmapItemsEn}
			/>
		</section>

		<FAQSection
			id="faq"
			title="Frequently Asked Questions"
			faqs={[
				{
					question: 'What does technological sovereignty mean?',
					answer:
						'The ability to operate and control your IT infrastructure independently of foreign providers. At Mana, this means: 75% of our infrastructure runs on our own servers in Germany — with the goal of reaching 90%+.',
				},
				{
					question: 'Why is the US Cloud Act a problem?',
					answer:
						'The US Cloud Act obliges American companies to grant US authorities access to data — even when stored on servers in Europe. This directly contradicts GDPR and threatens European data sovereignty.',
				},
				{
					question: 'Which cloud dependencies remain?',
					answer:
						'Only two: Stripe for payment processing (there is no fully European payment gateway alternative) and Google OAuth for optional Google contacts import.',
				},
				{
					question: 'How does local AI work?',
					answer:
						'We run Ollama with models like Gemma 3 on our server in Germany. FLUX.2 generates images locally, Whisper transcribes speech, Piper and Kokoro synthesize speech — all without cloud API calls.',
				},
				{
					question: 'Is the open-source stack enterprise-ready?',
					answer:
						'Absolutely. PostgreSQL, Redis, and MinIO power the infrastructure of companies like Apple, Instagram, and Netflix. These technologies are more proven than many proprietary alternatives.',
				},
				{
					question: 'Can I use the Mana infrastructure for my organization?',
					answer:
						'Yes. We offer consulting and implementation for organizations looking to build similar independent infrastructure. Contact us for a custom offer.',
				},
				{
					question: 'Where are the servers located?',
					answer:
						'In Germany. The production infrastructure runs on own hardware with 74 Docker containers, connected via a Cloudflare Tunnel (which will be replaced by WireGuard in the medium term).',
				},
			]}
		/>

		<CTASection
			id="contact"
			title="Ready for Digital Sovereignty?"
			subtitle="Let us make your IT infrastructure independent together. We are happy to advise you — free of charge and transparent."
			primaryCta={{ text: 'Schedule a Consultation', href: 'mailto:info@mana.how' }}
			secondaryCta={{ text: 'Technical Documentation', href: 'https://mana.how' }}
		/>
	</main>

	<footer class="border-t border-border py-8">
		<Container>
			<div
				class="flex flex-col items-center justify-between gap-4 text-sm text-text-muted md:flex-row"
			>
				<p>&copy; 2026 Mana. All rights reserved.</p>
				<div class="flex gap-6">
					<a href="/impressum" class="hover:text-primary">Imprint</a>
					<a href="/datenschutz" class="hover:text-primary">Privacy</a>
					<a href="https://mana.how" class="hover:text-primary">mana.how</a>
				</div>
			</div>
		</Container>
	</footer>
</Layout>
