const StatsSection = () => {
  const stats = [
    { number: "01", label: "Premium Locations", value: "500+ Hotels" },
    { number: "02", label: "Guest Satisfaction", value: "4.9 Rating" },
    { number: "03", label: "Years Experience", value: "15+ Years" },
    { number: "04", label: "Countries Served", value: "25+ Countries" },
    { number: "05", label: "Happy Customers", value: "50K+ Guests" },
  ];

  return (
    <section className="py-16 lg:py-24 bg-muted/30">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 md:grid-cols-5 gap-8">
          {stats.map((stat, index) => (
            <div key={index} className="text-center space-y-4">
              <div className="text-4xl lg:text-6xl font-light text-secondary">
                {stat.number}
              </div>
              <div className="space-y-2">
                <div className="text-sm text-muted-foreground uppercase tracking-wide">
                  {stat.label}
                </div>
                <div className="text-lg font-medium">
                  {stat.value}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default StatsSection;