import { Globe, Building, Users } from "lucide-react";

const EcosystemCore = () => {
  const pillars = [
    {
      icon: Globe,
      title: "Globaler Immobilienhandel",
      description: "Direkter Zugang zu exklusiven Investments und internationalen Märkten mit professioneller Begleitung."
    },
    {
      icon: Building,
      title: "Kuratierte Wohnkonzepte", 
      description: "Wertsteigerung durch professionelles Staging und durchdachte Design-Konzepte für Ihre Immobilien."
    },
    {
      icon: Users,
      title: "Starkes Partnernetzwerk",
      description: "Ein B2B-Arm für Lieferanten, Makler & den US-Export mit fairen Konditionen und digitalem Support."
    }
  ];

  return (
    <section className="section-padding">
      <div className="container-padding">
        {/* Section Title */}
        <div className="text-center mb-16">
          <h2 className="text-section-title">Ein Ökosystem, drei Stärken</h2>
          <p className="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
            Wir schaffen Synergien, die den Markt revolutionieren.
          </p>
        </div>
        
        {/* Pillars Grid */}
        <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
          {pillars.map((pillar, index) => (
            <div key={index} className="text-center spacing-content group">
              <div className="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
                <pillar.icon className="w-10 h-10 text-secondary" />
              </div>
              
              <div className="spacing-small">
                <h3 className="text-xl font-medium">{pillar.title}</h3>
                <p className="text-muted-foreground leading-relaxed">
                  {pillar.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default EcosystemCore;