import React from 'react';
import { Link } from 'react-router-dom';
import { Cpu, Zap, ArrowLeft, Check, Sparkles, Star, Gauge } from 'lucide-react';
import modelsData from '../../data/models.json';

export const ModelsSection: React.FC = () => {
  return (
    <section className="py-20 relative bg-slate-950">
      {/* Background Glow */}
      <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        <div className="text-center max-w-2xl mx-auto space-y-3 mb-16">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-semibold">
            <Cpu className="w-3.5 h-3.5" />
            <span>پیشرفته‌ترین مدل‌های زبانی هوش مصنوعی دنیا</span>
          </div>
          <h2 className="text-2xl sm:text-4xl font-black text-white tracking-tight">
            دسترسی به غول‌های هوش مصنوعی در هوشان
          </h2>
          <p className="text-sm text-slate-400 leading-relaxed">
            بدون نیاز به تحریم‌شکن، سیم‌کارت خارجی یا پرداخت ارزی، با پیشرفته‌ترین مدل‌های GPT-4o، Claude 3.5 Sonnet و Gemini با بالاترین کیفیت زبان فارسی گفتگو کنید.
          </p>
        </div>

        {/* Models Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {modelsData.map((model) => (
            <div 
              key={model.id}
              className="relative p-6 sm:p-7 rounded-3xl bg-slate-900/50 border border-slate-800/80 hover:border-purple-500/40 glass-panel-hover flex flex-col justify-between space-y-5"
            >
              <div className="space-y-4">
                
                {/* Header */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {model.provider === 'OpenAI' && (
                      <div className="w-8 h-8 rounded-xl bg-slate-800 p-1.5 flex items-center justify-center">
                        <img src="/storage/bot/llm/gpt.png" alt="OpenAI" className="w-full h-full object-contain" />
                      </div>
                    )}
                    {model.provider === 'Anthropic' && (
                      <div className="w-8 h-8 rounded-xl bg-slate-800 p-1.5 flex items-center justify-center">
                        <img src="/storage/bot/llm/claude.png" alt="Anthropic" className="w-full h-full object-contain" />
                      </div>
                    )}
                    {model.provider === 'Google' && (
                      <div className="w-8 h-8 rounded-xl bg-slate-800 p-1.5 flex items-center justify-center">
                        <img src="/storage/bot/llm/gemini.png" alt="Google" className="w-full h-full object-contain" />
                      </div>
                    )}
                    {model.provider === 'DeepSeek' && (
                      <div className="w-8 h-8 rounded-xl bg-slate-800 p-1.5 flex items-center justify-center">
                        <img src="/storage/bot/llm/deepseek.png" alt="DeepSeek" className="w-full h-full object-contain" />
                      </div>
                    )}
                    {model.provider === 'Meta' && (
                      <div className="w-8 h-8 rounded-xl bg-slate-800 p-1.5 flex items-center justify-center">
                        <Cpu className="w-5 h-5 text-indigo-400" />
                      </div>
                    )}
                    <div>
                      <span className="text-base font-black text-white font-english block">
                        {model.name}
                      </span>
                      <span className="text-[10px] text-slate-400 font-mono">
                        {model.provider}
                      </span>
                    </div>
                  </div>

                  {model.badge && (
                    <span className="text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-purple-500/20 text-purple-300 border border-purple-500/30">
                      {model.badge}
                    </span>
                  )}
                </div>

                <p className="text-xs text-slate-400 leading-relaxed">
                  {model.description}
                </p>

                {/* Specs Bar */}
                <div className="grid grid-cols-2 gap-2 p-3 rounded-2xl bg-slate-950/70 border border-slate-800/60 text-xs">
                  <div>
                    <span className="text-[10px] text-slate-500 block">پنجره زمینه (Context):</span>
                    <span className="font-mono font-semibold text-slate-200 text-xs">{model.contextWindow}</span>
                  </div>
                  <div>
                    <span className="text-[10px] text-slate-500 block">امتیاز هوش:</span>
                    <div className="flex items-center gap-1">
                      <div className="w-16 h-1.5 rounded-full bg-slate-800 overflow-hidden">
                        <div 
                          className="h-full bg-gradient-to-r from-indigo-500 to-cyan-400"
                          style={{ width: `${model.intelligenceScore}%` }}
                        />
                      </div>
                      <span className="font-mono text-slate-200 text-[11px]">{model.intelligenceScore}%</span>
                    </div>
                  </div>
                </div>

                {/* Strengths */}
                <div className="space-y-1.5 pt-1">
                  <span className="text-[11px] font-bold text-slate-300 block">ویژگی‌های برجسته:</span>
                  {model.strengths.slice(0, 3).map((st, i) => (
                    <div key={i} className="flex items-center gap-2 text-[11px] text-slate-400">
                      <Check className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                      <span>{st}</span>
                    </div>
                  ))}
                </div>

              </div>

              {/* Action Button */}
              <div className="pt-2">
                <Link
                  to="/chat"
                  state={{ selectedModel: model.name }}
                  className="w-full py-2.5 rounded-xl bg-slate-800 hover:bg-gradient-to-r hover:from-purple-600 hover:to-indigo-600 text-slate-200 hover:text-white text-xs font-semibold transition-all flex items-center justify-center gap-2 shadow-sm"
                >
                  <Sparkles className="w-3.5 h-3.5" />
                  <span>شروع گفتگو با {model.name}</span>
                </Link>
              </div>

            </div>
          ))}
        </div>

        {/* Bottom CTA */}
        <div className="mt-12 text-center">
          <Link
            to="/models"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-300 hover:text-white text-xs font-bold transition-all"
          >
            <span>مقایسه جامع مشخصات و بنچمارک تمام مدل‌ها</span>
            <ArrowLeft className="w-4 h-4" />
          </Link>
        </div>

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