import { Network, Users, Building2, Zap } from "lucide-react";

const EcosystemHero = () => {
  return (
    <section className="min-h-screen flex items-center relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <h1 className="text-5xl lg:text-7xl font-light text-foreground">
              B2in <span className="text-primary">Ecosystem</span>
            </h1>

            <p className="text-xl lg:text-2xl text-muted-foreground leading-relaxed">
              Ein intelligentes Netzwerk, das Endkunden, Makler, Lieferanten und
              Technologie nahtlos miteinander verbindet. Jeder Teilnehmer profitiert
              vom gesamten System und schafft gemeinsam außergewöhnliche Immobilienerlebnisse.
            </p>

            <div className="grid grid-cols-2 gap-6">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <Users className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Endkunden</p>
                  <p className="text-sm text-muted-foreground">Exklusive Erlebnisse</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <Building2 className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Makler</p>
                  <p className="text-sm text-muted-foreground">Lifetime-Vergütung</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <Network className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Lieferanten</p>
                  <p className="text-sm text-muted-foreground">Kuratierte Plattform</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                  <Zap className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Technologie</p>
                  <p className="text-sm text-muted-foreground">Digitales Herzstück</p>
                </div>
              </div>
            </div>
          </div>

          <div className="relative">
            <div className="card-elevated rounded-3xl p-12 bg-background/80 backdrop-blur-sm">
              <div className="space-y-8">
                {/* Central Hub */}
                <div className="text-center">
                  <div className="w-24 h-24 mx-auto rounded-full bg-primary flex items-center justify-center mb-4">
                    <Network className="w-12 h-12 text-white" />
                  </div>
                  <h3 className="text-xl font-semibold text-foreground">B2in Portal</h3>
                  <p className="text-sm text-muted-foreground">Zentrale Plattform</p>
                </div>

                {/* Connection Lines */}
                <div className="grid grid-cols-2 gap-8">
                  <div className="text-center">
                    <div className="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                      <Users className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">Endkunden</p>
                  </div>

                  <div className="text-center">
                    <div className="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                      <Building2 className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">Makler</p>
                  </div>

                  <div className="text-center">
                    <div className="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                      <Network className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">Lieferanten</p>
                  </div>

                  <div className="text-center">
                    <div className="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
                      <Zap className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">B2A</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default EcosystemHero;
