const highlights = [
  {
    icon: "01",
    title: "Analyse & Planung",
    description:
      "Wir analysieren Ihre bestehende Infrastruktur und planen die optimale Lösung für Ihre Anforderungen.",
  },
  {
    icon: "02",
    title: "Implementierung",
    description:
      "Professionelle Umsetzung mit bewährten technischen Methoden und modernsten Tools.",
  },
  {
    icon: "03",
    title: "Betrieb & Support",
    description:
      "Zuverlässiger Betrieb, Monitoring und Support – damit Ihre Systeme immer laufen.",
  },
];

export default function About() {
  return (
    <section id="about" className="py-24 px-4 sm:px-6 lg:px-8 relative">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(37,99,235,0.06)_0%,transparent_60%)]" />

      <div className="max-w-7xl mx-auto relative">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Left: Text */}
          <div>
            <span className="text-orange-400 font-mono text-xs font-bold tracking-[0.25em] uppercase">
              Über uns
            </span>
            <h2 className="text-4xl sm:text-5xl font-black text-white mt-3 mb-6 leading-tight">
              IT-Expertise,{" "}
              <span className="text-gradient">die Sie weiterbringt</span>
            </h2>
            <p className="text-slate-400 text-lg leading-relaxed mb-6">
              MBO-Tech-IT steht für über <strong className="text-white">30 Jahre IT-Erfahrung</strong> &mdash;
              angefangen bei der einfachen Hardware-Wartung, über den Aufbau großer
              Client-Server-Netzwerke, bis hin zu mehr als 20 Jahren Spezialisierung
              in der <strong className="text-white">IT-Security</strong>.
            </p>
            <p className="text-slate-400 text-lg leading-relaxed mb-8">
              Heute liegt der Fokus auf modernen Container-Technologien, Cloud-nativer
              Infrastruktur und Virtualisierung. Dieses breite Fundament ermöglicht es,
              Lösungen zu entwickeln, die nicht nur funktionieren &mdash; sondern auch
              sicher und langfristig tragfähig sind.
            </p>

            {/* Tagline callout */}
            <div className="mb-8 px-5 py-4 rounded-xl border-l-4 border-orange-500 bg-orange-500/5">
              <p className="text-orange-400 font-black text-sm tracking-[0.2em] uppercase">
                Digital Denken. Lokal Handeln.
              </p>
              <p className="text-slate-400 text-sm mt-1">
                Globales Know-how &mdash; persönlicher Service.
              </p>
            </div>

            {/* Key points */}
            <div className="space-y-3">
              {[
                "30+ Jahre IT-Erfahrung – von Hardware bis Cloud",
                "20+ Jahre IT-Security & Netzwerk-Expertise",
                "Spezialisiert auf Docker, Kubernetes & Proxmox",
                "Transparente Kommunikation & faire Preise",
              ].map((point) => (
                <div key={point} className="flex items-center gap-3">
                  <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">{point}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Process steps */}
          <div className="space-y-6">
            {highlights.map((item) => (
              <div
                key={item.title}
                className="flex gap-5 p-6 rounded-2xl bg-gray-900 border border-gray-800 hover:border-orange-500/30 transition-all duration-300"
              >
                <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center">
                  <span className="font-mono text-orange-400 font-black text-sm">{item.icon}</span>
                </div>
                <div>
                  <h3 className="text-white font-bold text-lg mb-2">{item.title}</h3>
                  <p className="text-slate-400 text-sm leading-relaxed">{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}