import { CreditCard, Star, Home, Shield } from "lucide-react";

const EndCustomerSection = () => {
  const benefits = [
    {
      icon: CreditCard,
      title: "Exklusive Login-Karte",
      description: "Personalisierter Zugang zu ausgewählten Immobilienerlebnissen und Premium-Services"
    },
    {
      icon: Star,
      title: "Personalisierte Erlebniswelt",
      description: "Maßgeschneiderte Immobilienangebote basierend auf individuellen Präferenzen und Bedürfnissen"
    },
    {
      icon: Home,
      title: "Kuratierte Wohnkonzepte",
      description: "Hochwertige, durchdachte Immobilienlösungen von verifizierten Partnern"
    },
    {
      icon: Shield,
      title: "Qualitätsgarantie",
      description: "Geprüfte Anbieter und standardisierte Qualitätsprozesse für maximale Sicherheit"
    }
  ];

  return (
    <section className="py-20 px-4 bg-accent/30">
      <div className="max-w-7xl mx-auto">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-8">
            <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">
                <Star className="w-4 h-4" />
                Für Endkunden
              </div>
              
              <h2 className="text-4xl lg:text-5xl font-light text-foreground mb-6">
                Exklusive <span className="text-primary">Erlebnisse</span> für Sie
              </h2>
              
              <p className="text-xl text-muted-foreground leading-relaxed">
                Mit Ihrer persönlichen Login-Karte erhalten Sie Zugang zu einer 
                einzigartigen Erlebniswelt, die speziell auf Ihre Wohnwünsche 
                und Lebensstil abgestimmt ist. Entdecken Sie kuratierte Immobilien 
                und Services, die sonst nicht verfügbar sind.
              </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 className="relative">
            <div className="card-elevated rounded-3xl overflow-hidden">
              <div className="bg-gradient-to-br from-primary/20 to-primary/5 p-12 h-96 flex flex-col justify-center items-center text-center">
                <div className="w-24 h-24 rounded-full bg-primary/20 backdrop-blur-sm flex items-center justify-center mb-6">
                  <CreditCard className="w-12 h-12 text-primary" />
                </div>
                <h3 className="text-2xl font-semibold text-foreground mb-4">
                  Login-Karte
                </h3>
                <p className="text-muted-foreground mb-6">
                  Ihr Schlüssel zu exklusiven Immobilienerlebnissen
                </p>
                <div className="bg-background/80 backdrop-blur-sm rounded-xl p-4 w-full max-w-xs">
                  <div className="text-sm text-muted-foreground mb-2">Mitgliedsnummer</div>
                  <div className="font-mono text-lg">B2IN-2024-VIP</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default EndCustomerSection;