'use client';

import React from 'react';

interface StatsStripProps {
  t: any; // i18n translation function
}

export const StatsStrip: React.FC<StatsStripProps> = ({ t }) => {
  const stats = [
    { key: 'users', value: '1,240+', label: t.trust.users },
    { key: 'codes', value: '8,500+', label: t.trust.codes },
    { key: 'scans', value: '1.2M+', label: t.trust.scans },
    { key: 'countries', value: '120+', label: t.trust.countries },
  ];

  return (
    <section className="py-20 bg-white border-y border-gray-100">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat, index) => (
            <div key={stat.key} className="text-center group hover:-translate-y-1 transition-transform duration-300">
              <div className="text-4xl lg:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 mb-2">
                {stat.value}
              </div>
              <div className="text-gray-500 font-medium uppercase tracking-wider text-sm">
                {stat.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};