import { motion } from "framer-motion";
import { TerminalSquare, BrainCircuit, Wrench } from "lucide-react";

const strengths = [
  {
    number: "01",
    icon: TerminalSquare,
    title: "Klassischer IT-Betrieb",
    desc: "Server, Netzwerke, Logs, Zertifikate, Mailserver — aus über 30 Jahren produktivem Betrieb in Konzernen und Behörden. Ein Fundament, das hält.",
    highlight: "Behörden & Konzernprojekte",
  },
  {
    number: "02",
    icon: BrainCircuit,
    title: "KI-gestützte Entwicklung",
    desc: "KI-gestützte Softwareentwicklung, die auf 30 Jahren Betriebserfahrung aufbaut. KI als Werkzeug zur schnelleren Umsetzung — Architektur und Betriebssicherheit bleiben die Grundlage.",
    highlight: "Idee → Produktion",
  },
  {
    number: "03",
    icon: Wrench,
    title: "Praxisnahe Umsetzung",
    desc: "Bauen, testen, betreiben, dokumentieren — und verbessern. Keine Konzepte ohne Ausführung. Kein Deployment ohne Betrieb.",
    highlight: "Nachvollziehbar & betreibbar",
  },
];

export function Strengths() {
  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="text-center max-w-2xl mx-auto mb-16">
          <p className="section-number mb-3" data-testid="text-section-label-strengths">Besondere Stärke</p>
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4" data-testid="text-section-title-strengths">
            Drei Welten — eine Person
          </h2>
          <p className="text-muted-foreground text-lg">
            Die Kombination macht den Unterschied: klassisches IT-Handwerk trifft auf modernste KI-Werkzeuge und konsequente Umsetzungsstärke.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {strengths.map((item, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: index * 0.1 }}
              className="relative p-8 rounded-2xl bg-white border border-border card-hover flex flex-col"
              data-testid={`card-strength-${index}`}
            >
              <div className="flex items-start justify-between mb-6">
                <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
                  <item.icon className="w-6 h-6 text-primary" />
                </div>
                <span className="text-4xl font-black text-border">{item.number}</span>
              </div>
              <h3 className="text-lg font-bold text-foreground mb-3">{item.title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed mb-6 flex-grow">{item.desc}</p>
              <span className="inline-block px-3 py-1 text-xs font-semibold bg-accent text-accent-foreground rounded-full self-start">
                {item.highlight}
              </span>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </div>
  );
}
