import { Store, Settings, CheckCircle, BarChart3 } from "lucide-react";

const SupplierSection = () => {
  const benefits = [
    {
      icon: Store,
      title: "Kuratierter Vertriebskanal",
      description: "Zugang zu einer exklusiven, vorqualifizierten Kundenbasis mit hohem Qualitätsanspruch"
    },
    {
      icon: Settings,
      title: "Selbstverwaltung",
      description: "Vollständige Kontrolle über Produktpräsentation, Preisgestaltung und Verfügbarkeit"
    },
    {
      icon: CheckCircle,
      title: "Zentrale Qualitätssicherung",
      description: "Standardisierte Prozesse und Qualitätskontrollen für maximales Kundenvertrauen"
    },
    {
      icon: BarChart3,
      title: "Analytics & Insights",
      description: "Detaillierte Verkaufsanalysen und Markteinblicke für optimierte Geschäftsentscheidungen"
    }
  ];

  return (
    <section className="py-20 px-4 bg-muted/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">
                <Store className="w-4 h-4" />
                Für Lieferanten
              </div>
              
              <h2 className="text-4xl lg:text-5xl font-light text-foreground mb-6">
                Premium <span className="text-primary">Vertriebsplattform</span>
              </h2>
              
              <p className="text-xl text-muted-foreground leading-relaxed">
                Unsere Lieferanten-Plattform bietet Ihnen einen kuratierten 
                Vertriebskanal zu anspruchsvollen Kunden. Mit vollständiger 
                Selbstverwaltung und zentraler Qualitätssicherung maximieren 
                Sie Ihren Erfolg bei minimalen Aufwand.
              </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="p-8">
                <h3 className="text-xl font-semibold text-foreground mb-6 text-center">
                  Lieferanten Dashboard
                </h3>
                
                <div className="space-y-4">
                  <div className="bg-accent/30 rounded-xl p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm font-medium">Monatliche Verkäufe</span>
                      <span className="text-green-600 text-sm">+24%</span>
                    </div>
                    <div className="text-2xl font-bold text-foreground">€89,420</div>
                  </div>
                  
                  <div className="bg-accent/30 rounded-xl p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm font-medium">Aktive Produkte</span>
                      <CheckCircle className="w-4 h-4 text-green-600" />
                    </div>
                    <div className="text-2xl font-bold text-foreground">247</div>
                  </div>
                  
                  <div className="bg-primary/10 rounded-xl p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm font-medium">Kundenbewertung</span>
                      <div className="flex gap-1">
                        {[1,2,3,4,5].map((star) => (
                          <div key={star} className="w-3 h-3 bg-primary rounded-full"></div>
                        ))}
                      </div>
                    </div>
                    <div className="text-2xl font-bold text-primary">4.9/5.0</div>
                  </div>
                  
                  <div className="grid grid-cols-2 gap-3">
                    <button className="bg-primary text-primary-foreground px-4 py-3 rounded-xl text-sm font-medium">
                      Produkt hinzufügen
                    </button>
                    <button className="bg-accent text-accent-foreground px-4 py-3 rounded-xl text-sm font-medium">
                      Analytics
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default SupplierSection;