import { TrendingUp, Globe, Handshake, Award, Target } from "lucide-react";

const PartnerHero = () => {
  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">
              Wachsen Sie mit uns.<br />
              Werden Sie <span className="text-primary">B2in Partner</span>.
            </h1>

            <p className="text-xl lg:text-2xl text-muted-foreground leading-relaxed">
              Werden Sie Teil des B2in Ecosystems und profitieren Sie von innovativen
              Geschäftsmodellen, die nachhaltiges Wachstum und langfristigen Erfolg ermöglichen.
              Gemeinsam gestalten wir die Zukunft der Immobilienbranche.
            </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">
                  <TrendingUp 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">
                  <Globe className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Lieferanten</p>
                  <p className="text-sm text-muted-foreground">Globale Märkte</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">
                  <Handshake className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Partnership</p>
                  <p className="text-sm text-muted-foreground">Faire Konditionen</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">
                  <Award className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Erfolg</p>
                  <p className="text-sm text-muted-foreground">Nachhaltiges Wachstum</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 Partnership Hub */}
                <div className="text-center">
                  <div className="w-24 h-24 mx-auto rounded-full bg-primary flex items-center justify-center mb-4">
                    <Handshake className="w-12 h-12 text-white" />
                  </div>
                  <h3 className="text-xl font-semibold text-foreground">Partner Network</h3>
                  <p className="text-sm text-muted-foreground">Werden Sie Teil unseres Ecosystems</p>
                </div>

                {/* Partner Types */}
                <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">
                      <TrendingUp className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">Makler</p>
                    <p className="text-xs text-muted-foreground">Lifetime-Modell</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">
                      <Globe className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">Lieferanten</p>
                    <p className="text-xs text-muted-foreground">Global Markets</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">
                      <Target className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">Erfolg</p>
                    <p className="text-xs text-muted-foreground">Messbare Ziele</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">
                      <Award className="w-8 h-8 text-accent-foreground" />
                    </div>
                    <p className="font-medium text-sm">Qualität</p>
                    <p className="text-xs text-muted-foreground">Premium Standards</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default PartnerHero;
