import type { ReactElement } from "react";

const risks = [
  {
    title: "US Cloud Act (2018)",
    accent: "red",
    text:
      "Der Clarifying Lawful Overseas Use of Data Act verpflichtet US-amerikanische Unternehmen, gespeicherte Daten auf Anordnung US-amerikanischer Behörden herauszugeben – unabhängig davon, ob die Daten in Europa oder anderswo gespeichert sind. Microsoft, Google, Amazon und alle weiteren US-Konzerne unterliegen diesem Gesetz. Ein europäischer Serverstandort allein genügt daher nicht, wenn der Betreiber ein US-Unternehmen ist.",
  },
  {
    title: "DSGVO-Konflikt",
    accent: "red",
    text:
      "Die Datenschutz-Grundverordnung (DSGVO) verbietet die Weitergabe personenbezogener Daten an Drittländer ohne angemessenes Schutzniveau. Der US Cloud Act und die DSGVO stehen damit in direktem Widerspruch: US-Unternehmen können bei Herausgabeanordnungen nicht gleichzeitig DSGVO-konform handeln. Dieses Spannungsfeld ist bis heute rechtlich ungelöst.",
  },
  {
    title: "Wirtschaftsspionage & Datenabfluss",
    accent: "red",
    text:
      "Betriebsgeheimnisse, Kundendaten, Verträge und strategische Pläne – all das kann durch den Cloud Act für US-Behörden zugreifbar werden. Betroffen sind nicht nur große Konzerne: Jedes Unternehmen, das Daten bei US-Anbietern speichert, ist potenziell exponiert. Laut einer Studie des Bitkom haben 75 % der deutschen Unternehmen innerhalb von 3 Jahren Cyberattacken oder Datendiebstahl erlebt.",
  },
];

const solutions = [
  {
    title: "Europäische Cloud – Hetzner",
    icon: "shield",
    text: "Hetzner ist ein deutsches Unternehmen mit Rechenzentren in Deutschland und Finnland. Als europäischer Anbieter unterliegt Hetzner nicht dem US Cloud Act. Ihre Daten bleiben in deutschen Rechenzentren – rechtssicher und DSGVO-konform.",
  },
  {
    title: "Self-Hosting auf eigenem Server",
    icon: "server",
    text: "Mit Docker, Kubernetes oder Proxmox betreiben Sie Ihre Anwendungen auf Infrastruktur, die vollständig unter Ihrer Kontrolle liegt. Kein Drittanbieter hat Zugriff – kein Cloud Act, keine versteckten Klauseln, volle Datensouveränität.",
  },
  {
    title: "Nextcloud statt Google Drive",
    icon: "cloud",
    text: "Dateien, Kalender, Kontakte und Office-Dokumente auf Ihrem eigenen Server statt bei Google oder Microsoft. Funktionsgleich, aber ohne Abhängigkeit von US-Konzernen. Ideal für Unternehmen, Arztpraxen, Kanzleien und Behörden.",
  },
  {
    title: "Verschlüsselung & Datensouveränität",
    icon: "lock",
    text: "Ende-zu-Ende-Verschlüsselung, SSL/TLS und Festplattenverschlüsselung auf Serverebene. Kombiniert mit europäischer Infrastruktur ergibt sich ein Schutzniveau, das Cloud-Angeboten großer US-Konzerne deutlich überlegen ist.",
  },
];

const icons: Record<string, ReactElement> = {
  shield: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
    </svg>
  ),
  server: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
    </svg>
  ),
  cloud: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
    </svg>
  ),
  lock: (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
    </svg>
  ),
};

export default function DataSovereignty() {
  return (
    <section id="datensouveraenitaet" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 bg-[#e8eef4] dark:bg-[#111925]" />
      <div className="absolute inset-0 bg-grid opacity-30" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(239,68,68,0.04)_0%,transparent_60%)]" />

      <div className="max-w-7xl mx-auto relative">

        {/* Header */}
        <div className="text-center mb-16">
          <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
            Datenschutz & Souveränität
          </span>
          <h2 className="text-4xl sm:text-5xl font-black text-slate-900 dark:text-white mt-3 mb-4">
            Ihre Daten gehören{" "}
            <span className="text-gradient">Ihnen</span>
          </h2>
          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
            US Cloud Act, DSGVO und Datensouveränität &mdash; warum die Wahl
            Ihrer IT-Infrastruktur über mehr als Kosten entscheidet.
          </p>
        </div>

        {/* Warning banner */}
        <div className="mb-12 p-5 rounded-2xl border border-red-500/30 bg-red-500/5 flex items-start gap-4">
          <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center mt-0.5">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div>
            <p className="text-red-400 font-bold text-sm mb-1">Wichtig für deutsche Unternehmen</p>
            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
              Wer Daten bei US-amerikanischen Anbietern wie Microsoft Azure, Google Cloud oder AWS speichert, kann sich nicht sicher sein, dass diese Daten nicht auf Anordnung US-amerikanischer Behörden herausgegeben werden &mdash; auch wenn die Server physisch in Deutschland stehen. Der <strong className="text-slate-900 dark:text-white">US Cloud Act</strong> hebelt den geografischen Serverstandort als Schutzargument vollständig aus.
            </p>
          </div>
        </div>

        {/* Risks */}
        <div className="grid md:grid-cols-3 gap-6 mb-16">
          {risks.map((risk) => (
            <div key={risk.title} className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-red-500/20 hover:border-red-500/40 transition-all duration-300">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-2 h-2 rounded-full bg-red-400 flex-shrink-0" />
                <h3 className="text-slate-800 dark:text-white font-bold text-base">{risk.title}</h3>
              </div>
              <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{risk.text}</p>
            </div>
          ))}
        </div>

        {/* Divider with CTA */}
        <div className="flex items-center gap-6 mb-16">
          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-gray-700 to-transparent" />
          <div className="px-6 py-2 rounded-full border border-orange-500/40 bg-orange-500/5 text-orange-400 text-sm font-black tracking-wider whitespace-nowrap">
            Unsere Lösung
          </div>
          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-slate-300 dark:via-gray-700 to-transparent" />
        </div>

        {/* Solutions */}
        <div className="grid md:grid-cols-2 gap-6 mb-16">
          {solutions.map((sol) => (
            <div key={sol.title} className="flex gap-5 p-6 rounded-2xl bg-white dark:bg-gray-900 border border-orange-500/20 hover:border-orange-500/40 transition-all duration-300 hover:-translate-y-0.5">
              <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
                {icons[sol.icon]}
              </div>
              <div>
                <h3 className="text-slate-800 dark:text-white font-bold text-base mb-2">{sol.title}</h3>
                <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{sol.text}</p>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom callout */}
        <div className="p-8 rounded-2xl border border-orange-500/30 bg-orange-500/5 text-center">
          <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase mb-2">
            Digital Denken. Lokal Handeln.
          </p>
          <p className="text-slate-900 dark:text-white text-xl font-bold mb-2">
            Europäische Infrastruktur. Volle Kontrolle. Echter Datenschutz.
          </p>
          <p className="text-slate-600 dark:text-slate-400 text-sm max-w-xl mx-auto mb-6">
            Mit MBO-Tech-IT erhalten Sie IT-Infrastruktur, die nicht nur
            funktioniert, sondern auch rechtssicher und souverän ist. Keine
            Abhängigkeit von US-Konzernen, kein Cloud Act-Risiko.
          </p>
          <a
            href="#contact"
            className="btn-primary inline-flex px-8 py-3 text-sm"
          >
            Beratungsgespräch vereinbaren
          </a>
        </div>

      </div>
    </section>
  );
}