'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>

        {/* Market Context - Citation / AEO Trust Signal */}
        <div className="mt-12 pt-8 border-t border-gray-100 text-center">
          <p className="text-sm text-gray-500 max-w-3xl mx-auto leading-relaxed">
            Market Context: The global QR code payment market is projected to grow from <span className="font-semibold text-gray-700">$15.9B (2025)</span> to <span className="font-semibold text-gray-700">$38B (2030)</span> <a href="https://finance.yahoo.com/news/analysis-global-qr-code-payments-155300360.html" target="_blank" rel="nofollow external" className="text-blue-600 hover:underline decoration-blue-200 underline-offset-2">(Yahoo Finance)</a>.
            <span className="mx-2">•</span>
            94% of marketers increased their QR code usage in 2025 <a href="https://bitly.com/blog/qr-code-statistics/" target="_blank" rel="nofollow external" className="text-blue-600 hover:underline decoration-blue-200 underline-offset-2">(Bitly)</a>.
          </p>
        </div>
      </div>
    </section>
  );
};