import { motion } from "framer-motion";
import { CheckCircle2 } from "lucide-react";

const highlights = [
  "30+ Jahre IT-Betrieb in Behörden & Konzernen",
  "ITIL & BSI-Grundschutz Erfahrung",
  "Web- & Middleware (Apache, Tomcat, JBoss, Websphere)",
  "Docker, Ansible, Gitlab CI/CD",
  "Technische Redaktion & Betriebshandbücher",
  "KI-Automation seit 2023 (n8n, RAG, Pinecone)",
  "Tech-Blogger mit 300+ Fachartikeln",
];

const clients = [
  "Landesamt für Statistik Bayern",
  "Polizei Hessen",
  "Justiz Baden-Württemberg",
  "Amt des öff. Rechts Hamburg",
  "Finanzdienstleister München (EZB-geprüft)",
];

export function Bio() {
  return (
    <div className="py-24 bg-secondary/40 rounded-3xl">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.6 }}
        className="px-4 md:px-12"
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="section-number mb-3" data-testid="text-section-label-bio">Über mich</p>
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6" data-testid="text-section-title-bio">
              IT-Experte mit Tiefe — und dem Blick nach vorne
            </h2>
            <div className="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                Mehr als 25 Jahre Erfahrung im Aufbau, Betrieb und Management von IT-Infrastrukturen in Konzernen, Behörden und kritischen Umgebungen. Ich verbinde klassische ITIL-Prozesse und technische Betriebserfahrung mit innovativen Automatisierungslösungen auf Basis von KI und modernen Tools.
              </p>
              <p>
                Ich nutze KI nicht als Ersatz für Erfahrung, sondern als Werkzeug zur schnelleren Umsetzung. Architektur, Betriebssicherheit und nachvollziehbare Systeme bleiben dabei die Grundlage.
              </p>
            </div>

            <div className="mt-8">
              <p className="text-sm font-semibold text-foreground mb-4">Ausgewählte Kunden & Projekte</p>
              <div className="flex flex-wrap gap-2">
                {clients.map((client) => (
                  <span
                    key={client}
                    className="text-xs font-medium px-3 py-1.5 bg-white border border-border rounded-full text-foreground/70"
                    data-testid={`badge-client-${client.replace(/\s/g, '-').toLowerCase()}`}
                  >
                    {client}
                  </span>
                ))}
              </div>
            </div>
          </div>

          <div>
            <div className="bg-white rounded-2xl border border-border p-8">
              <p className="text-sm font-semibold text-foreground mb-6">Auf einen Blick</p>
              <ul className="space-y-3" data-testid="list-highlights">
                {highlights.map((item, index) => (
                  <motion.li
                    key={index}
                    initial={{ opacity: 0, x: 12 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.3, delay: index * 0.06 }}
                    className="flex items-start gap-3 text-sm text-muted-foreground"
                    data-testid={`item-highlight-${index}`}
                  >
                    <CheckCircle2 className="w-4 h-4 text-primary mt-0.5 shrink-0" />
                    {item}
                  </motion.li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  );
}