import { Zap, Cloud, Shield, Layers, Database, Cpu } from "lucide-react";

const DigitalCore = () => {
  const features = [
    {
      icon: Cloud,
      title: "Cloud-Native Architektur",
      description: "Skalierbare, sichere und hochverfügbare Infrastruktur für alle Ecosystem-Teilnehmer"
    },
    {
      icon: Shield,
      title: "Enterprise Security",
      description: "Modernste Sicherheitsstandards und Datenschutz für vertrauliche Geschäftsdaten"
    },
    {
      icon: Layers,
      title: "API-First Design",
      description: "Nahtlose Integration und Erweiterbarkeit für alle Plattform-Komponenten"
    },
    {
      icon: Database,
      title: "Real-Time Analytics",
      description: "Live-Einblicke und Datenanalyse für optimierte Geschäftsentscheidungen"
    },
    {
      icon: Cpu,
      title: "KI-gestützte Automation",
      description: "Intelligente Prozessoptimierung und personalisierte Nutzererfahrungen"
    },
    {
      icon: Zap,
      title: "Performance Excellence",
      description: "Blitzschnelle Ladezeiten und responsive Benutzeroberflächen"
    }
  ];

  return (
    <section className="py-20 px-4 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
            <Zap className="w-4 h-4" />
            Das digitale Herzstück
          </div>

          <h2 className="text-4xl lg:text-5xl font-light text-foreground mb-6">
            B2in <span className="text-primary">Portal</span>
          </h2>

          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Unsere zentrale technologische Plattform verbindet alle Ecosystem-Teilnehmer
            nahtlos miteinander. Modernste Technologie trifft auf intuitive Bedienung
            und schafft einzigartige digitale Erlebnisse.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-16 items-center mb-16">
          <div className="relative">
            <div className="card-elevated rounded-3xl overflow-hidden">
              <div className="bg-gradient-to-br from-primary/10 via-primary/5 to-background p-12">
                <div className="text-center mb-8">
                  <div className="w-24 h-24 mx-auto rounded-full bg-primary flex items-center justify-center mb-6">
                    <Zap className="w-12 h-12 text-white" />
                  </div>
                  <h3 className="text-2xl font-semibold text-foreground">
                    Zentrale Plattform
                  </h3>
                </div>

                <div className="space-y-4">
                  <div className="flex items-center gap-3 bg-background/50 rounded-xl p-4">
                    <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
                      <div className="w-3 h-3 rounded-full bg-white"></div>
                    </div>
                    <div>
                      <p className="font-medium text-sm">Endkunden Portal</p>
                      <p className="text-xs text-muted-foreground">Online & Verfügbar</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-3 bg-background/50 rounded-xl p-4">
                    <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
                      <div className="w-3 h-3 rounded-full bg-white"></div>
                    </div>
                    <div>
                      <p className="font-medium text-sm">Makler Dashboard</p>
                      <p className="text-xs text-muted-foreground">Online & Verfügbar</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-3 bg-background/50 rounded-xl p-4">
                    <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
                      <div className="w-3 h-3 rounded-full bg-white"></div>
                    </div>
                    <div>
                      <p className="font-medium text-sm">Lieferanten Plattform</p>
                      <p className="text-xs text-muted-foreground">Online & Verfügbar</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-3 bg-background/50 rounded-xl p-4">
                    <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
                      <div className="w-3 h-3 rounded-full bg-white"></div>
                    </div>
                    <div>
                      <p className="font-medium text-sm">B2A Integration</p>
                      <p className="text-xs text-muted-foreground">Online & Verfügbar</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="space-y-8">
            <div>
              <h3 className="text-3xl font-light text-foreground mb-6">
                Technische <span className="text-primary">Excellence</span>
              </h3>

              <p className="text-lg text-muted-foreground leading-relaxed">
                Das B2in-Portal ist mehr als nur eine Software – es ist das
                technologische Rückgrat unseres gesamten Ecosystems. Entwickelt
                mit modernsten Standards für Sicherheit, Performance und
                Benutzerfreundlichkeit.
              </p>
            </div>

            <div className="grid gap-4">
              <div className="flex items-center gap-3 bg-accent/30 rounded-xl p-4">
                <Shield className="w-6 h-6 text-primary" />
                <div>
                  <p className="font-semibold text-foreground">99.9% Uptime</p>
                  <p className="text-sm text-muted-foreground">Garantierte Verfügbarkeit</p>
                </div>
              </div>

              <div className="flex items-center gap-3 bg-accent/30 rounded-xl p-4">
                <Cpu className="w-6 h-6 text-primary" />
                <div>
                  <p className="font-semibold text-foreground">&lt; 200ms Response</p>
                  <p className="text-sm text-muted-foreground">Blitzschnelle Performance</p>
                </div>
              </div>

              <div className="flex items-center gap-3 bg-accent/30 rounded-xl p-4">
                <Database className="w-6 h-6 text-primary" />
                <div>
                  <p className="font-semibold text-foreground">ISO 27001 Certified</p>
                  <p className="text-sm text-muted-foreground">Enterprise Security</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="card-elevated rounded-2xl p-8">
              <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                <feature.icon className="w-7 h-7 text-primary" />
              </div>

              <h3 className="text-xl font-semibold text-foreground mb-4">
                {feature.title}
              </h3>

              <p className="text-muted-foreground leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default DigitalCore;
