import { TrendingUp, Globe, Handshake, Award, Target, Settings } from "lucide-react";
import accommodationImage from "../assets/accommodation-1.jpg";

const PartnerBenefits = () => {
  const brokerBenefits = [
    {
      icon: TrendingUp,
      title: "Lifetime-Provisionsmodell",
      description: "Profitieren Sie von kontinuierlichen Einnahmen durch unser innovatives Vergütungssystem"
    },
    {
      icon: Target,
      title: "Schnellere Vermarktung",
      description: "Durchdachte Wohnkonzepte verkürzen Vermarktungszeiten und erhöhen Ihre Erfolgsquote"
    },
    {
      icon: Award,
      title: "Mehrwert für Ihre Kunden",
      description: "Bieten Sie Ihren Kunden exklusive, kuratierte Immobilienerlebnisse"
    }
  ];

  const supplierBenefits = [
    {
      icon: Globe,
      title: "Zugang zu internationalen Märkten",
      description: "Erweitern Sie Ihre Reichweite über Grenzen hinweg mit unserem globalen Netzwerk"
    },
    {
      icon: Handshake,
      title: "Faire Konditionen",
      description: "Transparente und partnerschaftliche Geschäftsbedingungen für nachhaltigen Erfolg"
    },
    {
      icon: Settings,
      title: "Einfache Produktverwaltung",
      description: "Intuitive Plattform für die Verwaltung und Präsentation Ihrer Produkte"
    }
  ];

  return (
    <section className="py-16 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-section-title text-foreground mb-6">
            Warum Partner werden?
          </h2>
          <p className="text-muted-foreground text-lg max-w-3xl mx-auto">
            Entdecken Sie die Vorteile einer Partnerschaft mit B2in und
            wie Sie von unserem innovativen Ecosystem profitieren können.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-16">
          {/* Für Makler */}
          <div className="space-y-8">
            <div className="text-center lg:text-left">
              <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>
              <h3 className="text-3xl font-light text-foreground mb-6">
                Revolutionäres <span className="text-primary">Provisionsmodell</span>
              </h3>
            </div>

            <div className="space-y-6">
              {brokerBenefits.map((benefit, index) => (
                <div key={index} className="card-elevated p-6 rounded-xl">
                  <div 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>
                      <h4 className="text-lg font-semibold text-foreground mb-2">
                        {benefit.title}
                      </h4>
                      <p className="text-muted-foreground">
                        {benefit.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="bg-primary/5 rounded-xl p-6">
              <div className="text-center">
                <div className="text-3xl font-bold text-primary mb-2">3.5% - ∞</div>
                <p className="text-sm text-muted-foreground">
                  Erstprovision bis Lifetime-Vergütung
                </p>
              </div>
            </div>
          </div>

          {/* Für Lieferanten */}
          <div className="space-y-8">
            <div className="text-center lg:text-left">
              <div className="inline-flex items-center gap-2 bg-accent/50 text-accent-foreground px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Globe className="w-4 h-4" />
                Für Lieferanten
              </div>
              <h3 className="text-3xl font-light text-foreground mb-6">
                Globale <span className="text-primary">Marktchancen</span>
              </h3>
            </div>

            <div className="space-y-6">
              {supplierBenefits.map((benefit, index) => (
                <div key={index} className="card-elevated p-6 rounded-xl">
                  <div className="flex gap-4">
                    <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center">
                      <benefit.icon className="w-6 h-6 text-accent-foreground" />
                    </div>
                    <div>
                      <h4 className="text-lg font-semibold text-foreground mb-2">
                        {benefit.title}
                      </h4>
                      <p className="text-muted-foreground">
                        {benefit.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="relative">
              <div className="card-elevated p-0 overflow-hidden rounded-xl">
                <img
                  src={accommodationImage}
                  alt="Partner success visualization"
                  className="w-full h-48 object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                  <div className="p-6 text-white">
                    <div className="text-2xl font-bold mb-1">500+</div>
                    <p className="text-sm opacity-90">Erfolgreiche Partner</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default PartnerBenefits;
