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

const BrokerSection = () => {
  const benefits = [
    {
      icon: TrendingUp,
      title: "Lifetime-Vergütungsmodell",
      description: "Kontinuierliche Provisionen durch langfristige Kundenbeziehungen und wiederkehrende Geschäfte"
    },
    {
      icon: Clock,
      title: "Schnellere Vermarktung",
      description: "Durchdachte Wohnkonzepte reduzieren die Verkaufszeit und erhöhen die Erfolgschancen"
    },
    {
      icon: Target,
      title: "Qualifizierte Leads",
      description: "Vorgefilterte, interessierte Kunden durch das B2in-Portal und Premium-Mitgliedschaften"
    },
    {
      icon: Award,
      title: "Premium-Positioning",
      description: "Exklusive Vermarktung hochwertiger Wohnkonzepte für anspruchsvolle Zielgruppen"
    }
  ];

  return (
    <section className="py-20 px-4 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="relative order-2 lg:order-1">
            <div className="card-elevated rounded-3xl p-12">
              <div className="text-center mb-8">
                <div className="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center mb-6">
                  <TrendingUp className="w-10 h-10 text-white" />
                </div>
                <h3 className="text-2xl font-semibold text-foreground mb-4">
                  Lifetime-Vergütung
                </h3>
              </div>

              <div className="space-y-6">
                <div className="bg-accent/30 rounded-xl p-6">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-sm text-muted-foreground">Erstverkauf</span>
                    <span className="text-lg font-semibold text-primary">3.5%</span>
                  </div>
                  <div className="w-full bg-accent/50 rounded-full h-2">
                    <div className="bg-primary h-2 rounded-full w-[35%]"></div>
                  </div>
                </div>

                <div className="bg-accent/30 rounded-xl p-6">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-sm text-muted-foreground">Folgegeschäfte</span>
                    <span className="text-lg font-semibold text-primary">1.5%</span>
                  </div>
                  <div className="w-full bg-accent/50 rounded-full h-2">
                    <div className="bg-primary h-2 rounded-full w-[60%]"></div>
                  </div>
                </div>

                <div className="bg-primary/10 rounded-xl p-6">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-sm font-medium text-foreground">Lifetime Value</span>
                    <span className="text-xl font-bold text-primary">∞</span>
                  </div>
                  <p className="text-xs text-muted-foreground">
                    Kontinuierliche Einnahmen durch Kundenbeziehung
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="space-y-8 order-1 lg:order-2">
            <div>
              <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">
                <TrendingUp className="w-4 h-4" />
                Für Makler
              </div>

              <h2 className="text-4xl lg:text-5xl font-light text-foreground mb-6">
                Nachhaltiger <span className="text-primary">Erfolg</span> durch Innovation
              </h2>

              <p className="text-xl text-muted-foreground leading-relaxed">
                Unser revolutionäres Lifetime-Vergütungsmodell belohnt langfristige
                Kundenbeziehungen. Durch durchdachte Wohnkonzepte vermarkten Sie
                Immobilien nicht nur schneller, sondern bauen nachhaltige
                Einnahmequellen auf.
              </p>
            </div>

            <div className="space-y-6">
              {benefits.map((benefit, index) => (
                <div key={index} className="flex gap-4">
                  <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
                    <benefit.icon className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-foreground mb-2">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground">
                      {benefit.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default BrokerSection;
