import React from 'react';
import { Users, Zap, BookOpen, Building2, ShieldCheck, Award } from 'lucide-react';
import siteInfo from '../../data/siteInfo.json';

export const StatsSection: React.FC = () => {
  const statIcons = [Users, Zap, BookOpen, Building2];

  return (
    <section className="relative py-12 bg-slate-950 border-y border-slate-800/80">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {siteInfo.stats.map((stat, idx) => {
            const Icon = statIcons[idx % statIcons.length];
            return (
              <div 
                key={stat.label}
                className="relative p-6 rounded-2xl bg-gradient-to-b from-slate-900/60 to-slate-950/80 border border-slate-800/80 text-center space-y-2 glass-panel-hover"
              >
                <div className="w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center mx-auto">
                  <Icon className="w-5 h-5" />
                </div>
                <div className="text-2xl sm:text-3xl font-black text-white font-vazir tracking-tight">
                  {stat.value}
                </div>
                <div className="text-xs text-slate-400 font-medium">
                  {stat.label}
                </div>
              </div>
            );
          })}
        </div>

        {/* Partner badges row */}
        <div className="mt-12 pt-8 border-t border-slate-900 flex flex-wrap items-center justify-center gap-8 sm:gap-16 text-slate-400 text-xs font-medium">
          <div className="flex items-center gap-2">
            <Award className="w-4 h-4 text-cyan-400" />
            <span>مستقر در شهرک علمی و تحقیقاتی اصفهان</span>
          </div>
          <div className="flex items-center gap-2">
            <Building2 className="w-4 h-4 text-indigo-400" />
            <span>همکاری با اعضای هیات علمی دانشگاه اصفهان</span>
          </div>
          <div className="flex items-center gap-2">
            <ShieldCheck className="w-4 h-4 text-emerald-400" />
            <span>دارای نشان اعتماد و مجوزهای فناوری</span>
          </div>
        </div>

      </div>
    </section>
  );
};
