const EcosystemStats = () => {
  const stats = [
    {
      number: "1,745,678+",
      label: "Aktive Nutzer im Ecosystem",
      description: "Wachsende Community von Endkunden, Maklern und Lieferanten"
    },
    {
      number: "4,510+",
      label: "Erfolgreiche Projekte",
      description: "Realisierte Immobilienprojekte durch unser Netzwerk"
    },
    {
      number: "98%",
      label: "Zufriedenheitsrate",
      description: "Kundenzufriedenheit across alle Ecosystem-Teilnehmer"
    },
    {
      number: "24/7",
      label: "Platform Verfügbarkeit",
      description: "Kontinuierliche Verfügbarkeit der digitalen Infrastruktur"
    }
  ];

  return (
    <section className="py-20 px-4 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <h2 className="text-4xl lg:text-5xl font-light text-foreground mb-6">
            Unser <span className="text-primary">Ecosystem</span> in Zahlen
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Zahlen, die die Stärke und das Vertrauen in unser vernetztes 
            Geschäftsmodell widerspiegeln.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat, index) => (
            <div key={index} className="card-elevated rounded-2xl p-8 text-center">
              <div className="text-4xl lg:text-5xl font-bold text-primary mb-4">
                {stat.number}
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-3">
                {stat.label}
              </h3>
              <p className="text-sm text-muted-foreground leading-relaxed">
                {stat.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default EcosystemStats;