interface StatItemProps {
  value: string;
  label: string;
}

function StatItem({ value, label }: StatItemProps) {
  return (
    <div className="text-center">
      {/* Large Numeric Value */}
      <div className="mb-4">
        <span 
          className="text-6xl font-bold tracking-tight max-lg:text-5xl max-md:text-4xl"
          style={{ color: 'var(--color-brand-primary)' }}
        >
          {value}
        </span>
      </div>

      {/* Short Bold Title */}
      <h3 
        className="text-lg font-semibold max-lg:text-base max-md:text-sm"
        style={{ color: 'var(--color-brand-black)' }}
      >
        {label}
      </h3>
    </div>
  );
}

export function TrustStatsSection() {
  const stats = [
    {
      value: "27,000+",
      label: "Leaders Developed"
    },
    {
      value: "150+", 
      label: "Corporate Clients"
    },
    {
      value: "20+",
      label: "Countries Served"
    }
  ];

  return (
    <section 
      className="py-20 px-[200px] max-lg:px-8 max-md:py-16"
      style={{ backgroundColor: 'var(--color-brand-bg-white)' }}
    >
      {/* Centered content block with max-width: 1200px */}
      <div className="max-w-[1200px] mx-auto">
        {/* 3 Equal Columns Grid - Desktop / Stack Vertically - Mobile */}
        <div className="grid grid-cols-3 gap-12 max-lg:gap-8 max-md:grid-cols-1 max-md:gap-16">
          {stats.map((stat, index) => (
            <StatItem
              key={index}
              value={stat.value}
              label={stat.label}
            />
          ))}
        </div>
      </div>
    </section>
  );
}