// components/PaperlessSection.tsx
import ScrollReveal from "@/components/ScrollReveal";

const requirements = [
  {
    accent: "orange",
    title: "DSGVO-konforme Archivierung",
    text: "Alle Dokumente bleiben auf Ihrer eigenen Infrastruktur — in Deutschland oder bei Hetzner. Kein Zugriff durch Drittanbieter, keine US-Cloud. Vollständig DSGVO-konform.",
  },
  {
    accent: "blue",
    title: "GoBD-Anforderungen erfüllt",
    text: "Revisionssichere, unveränderliche Ablage steuerrelevanter Belege. Paperless-ngx protokolliert alle Änderungen und erfüllt die Anforderungen der GoBD an die digitale Buchführung.",
  },
  {
    accent: "orange",
    title: "Selbstgehostet & unter Kontrolle",
    text: "Betrieb auf Ihrem eigenen Server oder auf einem deutschen Hetzner-VPS. Sie haben die volle Kontrolle über Ihre Daten — heute, morgen und in 10 Jahren.",
  },
];

const services = [
  "Installation & Konfiguration von Paperless-ngx",
  "Einrichtung automatischer Dokumentenerkennung (OCR)",
  "Migration bestehender Dokumentenarchive",
  "Schulung & Dokumentation für Ihr Team",
];

const colorMap = {
  orange: {
    border: "border-orange-500/20 hover:border-orange-500/50",
    dot: "bg-orange-400",
    dotBg: "bg-orange-500/10",
  },
  blue: {
    border: "border-blue-500/20 hover:border-blue-500/50",
    dot: "bg-blue-400",
    dotBg: "bg-blue-500/10",
  },
};

export default function PaperlessSection() {
  return (
    <section id="paperless" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 bg-[#111925]" />
      <div className="absolute inset-0 bg-grid opacity-20" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(34,197,94,0.04)_0%,transparent_60%)]" />

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

        {/* Header */}
        <ScrollReveal>
          <div className="text-center mb-16">
            <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
              Compliance & Dokumentenmanagement
            </span>
            <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-4">
              DSGVO & GoBD mit{" "}
              <span className="text-gradient-orange">Paperless-ngx</span>
            </h2>
            <p className="text-slate-400 text-lg max-w-2xl mx-auto">
              Digitale Dokumentenverwaltung, die rechtssicher ist — DSGVO-konform,
              GoBD-tauglich, selbstgehostet. Kein Abo, keine US-Cloud, volle Kontrolle.
            </p>
          </div>
        </ScrollReveal>

        {/* What is Paperless */}
        <ScrollReveal delay={100}>
          <div className="mb-12 p-6 rounded-2xl bg-gray-900 border border-orange-500/20 flex flex-col md:flex-row gap-6 items-start">
            <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-orange-500/10 text-orange-400 flex items-center justify-center">
              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
            <div>
              <h3 className="text-white font-bold text-lg mb-2">Was ist Paperless-ngx?</h3>
              <p className="text-slate-400 text-sm leading-relaxed">
                Paperless-ngx ist ein Open-Source Dokumentenmanagementsystem (DMS), das Ihre Papierflut digitalisiert
                und durchsuchbar macht. Rechnungen, Verträge, Briefe — automatisch per OCR erkannt, kategorisiert und
                archiviert. Betrieben auf Ihrer eigenen Infrastruktur, ohne Abhängigkeit von Cloud-Anbietern.
              </p>
              <div className="flex flex-wrap gap-2 mt-3">
                {["Open Source", "Self-Hosted", "OCR", "Volltextsuche", "Automatische Tags"].map((tag) => (
                  <span key={tag} className="px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-mono">
                    {tag}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </ScrollReveal>

        {/* Requirements grid */}
        <div className="grid md:grid-cols-3 gap-6 mb-16">
          {requirements.map((req, index) => {
            const c = colorMap[req.accent as keyof typeof colorMap];
            return (
              <ScrollReveal key={req.title} delay={index * 100}>
                <div className={`p-6 rounded-2xl bg-gray-900 border ${c.border} transition-all duration-300 h-full`}>
                  <div className={`w-2 h-2 rounded-full ${c.dot} mb-4`} />
                  <h3 className="text-white font-bold text-base mb-3">{req.title}</h3>
                  <p className="text-slate-400 text-sm leading-relaxed">{req.text}</p>
                </div>
              </ScrollReveal>
            );
          })}
        </div>

        {/* Divider */}
        <div className="flex items-center gap-6 mb-12">
          <div className="flex-1 h-px bg-gradient-to-r from-transparent 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">
            Unser Leistungsumfang
          </div>
          <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent" />
        </div>

        {/* Services list */}
        <ScrollReveal delay={100}>
          <div className="grid sm:grid-cols-2 gap-4 mb-16">
            {services.map((item) => (
              <div key={item} className="flex items-center gap-3 p-4 rounded-xl bg-gray-900 border border-gray-800">
                <div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0">
                  <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <span className="text-slate-300 text-sm">{item}</span>
              </div>
            ))}
          </div>
        </ScrollReveal>

        {/* CTA */}
        <ScrollReveal delay={150}>
          <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">
              Compliance leicht gemacht
            </p>
            <p className="text-white text-xl font-bold mb-2">
              DSGVO & GoBD — ohne Kompromisse.
            </p>
            <p className="text-slate-400 text-sm max-w-xl mx-auto mb-6">
              Wir richten Paperless-ngx auf Ihrer Infrastruktur ein, migrieren
              Ihre bestehenden Dokumente und schulen Ihr Team. Rechtssicher,
              selbstgehostet, dauerhaft unter Ihrer Kontrolle.
            </p>
            <a href="#contact" className="btn-primary inline-flex px-8 py-3 text-sm">
              Jetzt Beratung anfragen
            </a>
          </div>
        </ScrollReveal>

      </div>
    </section>
  );
}