HoushaWebsite/src/components/home/Hero.tsx

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { 
  Sparkles, 
  Bot, 
  ArrowLeft, 
  MessageSquare, 
  Zap, 
  Star,
  Flame,
  Atom,
  Briefcase,
  Search,
  CheckCircle2,
  ShieldCheck,
  Send,
  Cpu,
  TrendingUp,
  Award,
  Layers,
  Sparkle
} from 'lucide-react';
import { HeroAiVisual } from './HeroAiVisual';

interface HeroProps {
  onOpenAuth: () => void;
}

export const Hero: React.FC<HeroProps> = ({ onOpenAuth }) => {
  const navigate = useNavigate();
  const [activeCategory, setActiveCategory] = useState<'fiction' | 'science' | 'tech' | 'expert'>('fiction');
  const [searchPrompt, setSearchPrompt] = useState<string>('');

  const fictionalBots = [
    { name: 'هری پاتر', role: 'جادوگر هاگوارتز', tag: 'شخصیت داستانی', icon: '🪄', prompt: 'سلام هری! جادوی جدیدی یاد گرفتی؟', color: 'from-amber-600 to-red-600' },
    { name: 'بتمن', role: 'شوالیه تاریکی', tag: 'شخصیت داستانی', icon: '🦇', prompt: 'سلام بروس وین! شهر گاتهام امنه؟', color: 'from-slate-700 to-slate-900' },
    { name: 'شرلوک هولمز', role: 'کارآگاه مشاور', tag: 'شخصیت داستانی', icon: '🔍', prompt: 'سلام شرلوک! معمای جدیدی داری؟', color: 'from-amber-800 to-amber-950' },
    { name: 'اسپایدرمن', role: 'مرد عنکبوتی', tag: 'شخصیت داستانی', icon: '🕷️', prompt: 'سلام پیتر پارکر! نیویورک چه خبر؟', color: 'from-red-600 to-blue-700' },
    { name: 'جوکر', role: 'شاهزاده جرم و جنایت', tag: 'شخصیت داستانی', icon: '🃏', prompt: 'سلام جوکر! چرا اینقدر جدی؟', color: 'from-purple-700 to-emerald-700' },
  ];

  const scientistBots = [
    { name: 'آلبرت انیشتین', role: 'نظریه نسبیت و فیزیک', tag: 'دانشمند', icon: '🌌', prompt: 'سلام پروفسور انیشتین! درباره نسبیت برام توضیح بده.', color: 'from-blue-600 to-indigo-800' },
    { name: 'توماس ادیسون', role: 'مخترع و کارآفرین', tag: 'دانشمند', icon: '💡', prompt: 'سلام ادیسون! چطور تسلیم نشدی؟', color: 'from-yellow-600 to-amber-700' },
    { name: 'ماری کوری', role: 'پیشگام رادیواکتیویته', tag: 'دانشمند', icon: '🔬', prompt: 'سلام بانو کوری! از کشفیاتت بگو.', color: 'from-teal-600 to-cyan-800' },
    { name: 'آیزاک نیوتون', role: 'پایه‌گذار مکانیک کلاسیک', tag: 'دانشمند', icon: '🍎', prompt: 'سلام آقای نیوتون! داستان سیب واقعی بود؟', color: 'from-emerald-600 to-teal-800' },
  ];

  const techBots = [
    { name: 'ایلان ماسک', role: 'تسلا، اسپیس‌ایکس و xAI', tag: 'رهبر فناوری', icon: '🚀', prompt: 'سلام ایلان! مریخ کی مستعمره میشه؟', color: 'from-rose-600 to-purple-800' },
    { name: 'بیل گیتس', role: 'بنیان‌گذار مایکروسافت', tag: 'رهبر فناوری', icon: '💻', prompt: 'سلام بیل! آینده هوش مصنوعی چطوره؟', color: 'from-blue-600 to-cyan-700' },
    { name: 'مارک زاکربرگ', role: 'متا و هوش مصنوعی Llama', tag: 'رهبر فناوری', icon: '🌐', prompt: 'سلام مارک! عینک‌های واقعیت افزوده چی میشن؟', color: 'from-indigo-600 to-blue-800' },
    { name: 'جف بزوس', role: 'آمازون و بلو اوریجین', tag: 'رهبر فناوری', icon: '📦', prompt: 'سلام جف! راز موفقیت آمازون چی بود؟', color: 'from-amber-600 to-orange-700' },
  ];

  const expertBots = [
    { name: 'مشاور سئو و محتوا', role: 'رشد ارگانیک و کلمات کلیدی', tag: 'دستیار تخصصی', icon: '📈', prompt: 'یک استراتژی کلمات کلیدی برای یک سایت آموزشی بنویس.', color: 'from-emerald-600 to-teal-700' },
    { name: 'دستیار برنامه‌نویسی', role: 'معماری و کدنویسی فول‌استک', tag: 'دستیار تخصصی', icon: '👨‍💻', prompt: 'چگونه یک سیستم کش دو لایه در Node.js پیاده‌سازی کنم؟', color: 'from-blue-600 to-indigo-700' },
    { name: 'مشاور مدیریت و مالی', role: 'استراتژی و تحلیل جریان نقدینگی', tag: 'دستیار تخصصی', icon: '📊', prompt: 'روش‌های کاهش هزینه‌های عملیاتی در استارتاپ‌ها را بگو.', color: 'from-amber-600 to-orange-700' },
    { name: 'دستیار حقوقی و قراردادها', role: 'نگارش و بررسی بندهای قرارداد', tag: 'دستیار تخصصی', icon: '⚖️', prompt: 'بندهای مهم قرارداد محرمانگی (NDA) برای تیم فنی چیست؟', color: 'from-purple-600 to-indigo-800' },
  ];

  const currentBots = 
    activeCategory === 'fiction' ? fictionalBots : 
    activeCategory === 'science' ? scientistBots : 
    activeCategory === 'tech' ? techBots : expertBots;

  const quickPrompts = [
    'استراتژی بازاریابی برای رشد استارتاپ',
    'کد احراز هویت با JWT در پایتون',
    'تحلیل صورت‌های مالی شرکت',
    'تولید ایده برای سناریوی تبلیغاتی',
  ];

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchPrompt.trim()) {
      navigate(`/chat?prompt=${encodeURIComponent(searchPrompt.trim())}`);
    } else {
      navigate('/chat');
    }
  };

  return (
    <section className="relative pt-28 sm:pt-36 pb-20 overflow-hidden bg-radial-gradient">
      
      {/* Background Ambient Glows & Cyber Grid */}
      <div className="absolute top-12 left-1/2 -translate-x-1/2 w-[700px] h-[350px] bg-gradient-to-b from-indigo-600/20 via-cyan-500/10 to-transparent rounded-full blur-[130px] pointer-events-none" />
      <div className="absolute top-1/3 right-4 w-[350px] h-[300px] bg-cyan-500/10 rounded-full blur-[110px] pointer-events-none" />
      <div className="absolute top-2/3 left-4 w-[350px] h-[300px] bg-purple-600/10 rounded-full blur-[120px] pointer-events-none" />

      {/* Subtle Grid Lines Overlay */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b10_1px,transparent_1px),linear-gradient(to_bottom,#1e293b10_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Top Announcement Badge */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full bg-gradient-to-r from-indigo-900/60 via-slate-900/80 to-cyan-950/60 border border-cyan-500/30 text-cyan-300 text-xs sm:text-sm font-medium backdrop-blur-md shadow-lg hover:border-cyan-400/60 transition-all">
            <span className="flex h-2 w-2 relative">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
            </span>
            <span className="font-bold">هوشان ۲.۰ رونمایی شد:</span>
            <span className="text-slate-300">دسترسی بدون تحریم به GPT-4o، Claude 3.7 و DeepSeek R1</span>
            <ArrowLeft className="w-3.5 h-3.5 text-cyan-400" />
          </div>
        </div>

        {/* 2-Column Hero Grid: Left Visual Playground, Right High-Impact Copywriting */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-center mb-16 lg:mb-24">
          
          {/* Right Column: Hero Heading, Features & Search (lg:col-span-6 in RTL) */}
          <div className="lg:col-span-6 space-y-6 text-center lg:text-right">
            
            <h1 className="text-3xl sm:text-5xl lg:text-5xl xl:text-6xl font-black text-white tracking-tight leading-[1.25] font-vazir">
              قدرت برترین هوش‌های مصنوعی دنیا، <br />
              <span className="text-gradient-primary">یکپارچه و در خدمت شما</span>
            </h1>

            <p className="text-sm sm:text-base lg:text-lg text-slate-300 leading-relaxed max-w-xl mx-auto lg:mx-0">
              بدون نیاز به فیلترشکن، سیم‌کارت خارجی یا پرداخت دلاری؛ به قدرتمندترین مدل‌های زبانی جهان و دستیارهای هوشمند اختصاصی برای کسب‌وکارها، مدیران و متخصصان دسترسی داشته باشید.
            </p>

            {/* App Store & Web App Download Badges (Matching Original Houshan.ai) */}
            <div className="grid grid-cols-2 gap-3 max-w-xl mx-auto lg:mx-0 pt-2">
              
              {/* Cafe Bazaar */}
              <a
                href="https://cafebazaar.ir/app/com.example.hoshan"
                target="_blank"
                rel="noopener noreferrer"
                className="group p-3 rounded-2xl bg-slate-900/80 hover:bg-slate-800/90 border border-emerald-500/30 hover:border-emerald-400/60 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-emerald-500/10 hover:-translate-y-0.5"
              >
                <div className="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-emerald-400 font-bold">
                  🛍️
                </div>
                <div className="text-right">
                  <span className="text-[10px] text-emerald-400 block font-medium">دریافت از</span>
                  <span className="text-xs sm:text-sm font-bold text-white block">کافه‌بازار</span>
                </div>
              </a>

              {/* Myket */}
              <a
                href="https://myket.ir/app/com.example.hoshan"
                target="_blank"
                rel="noopener noreferrer"
                className="group p-3 rounded-2xl bg-slate-900/80 hover:bg-slate-800/90 border border-blue-500/30 hover:border-blue-400/60 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-blue-500/10 hover:-translate-y-0.5"
              >
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-blue-400 font-bold">
                  🏪
                </div>
                <div className="text-right">
                  <span className="text-[10px] text-blue-400 block font-medium">دریافت از</span>
                  <span className="text-xs sm:text-sm font-bold text-white block">مایکت</span>
                </div>
              </a>

              {/* Direct APK Download */}
              <a
                href="https://api.houshan.ai/apk"
                target="_blank"
                rel="noopener noreferrer"
                className="group p-3 rounded-2xl bg-slate-900/80 hover:bg-slate-800/90 border border-cyan-500/30 hover:border-cyan-400/60 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-cyan-500/10 hover:-translate-y-0.5"
              >
                <div className="w-10 h-10 rounded-xl bg-cyan-500/20 border border-cyan-500/30 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-cyan-400 font-bold">
                  🤖
                </div>
                <div className="text-right">
                  <span className="text-[10px] text-cyan-400 block font-medium">دانلود مستقیم</span>
                  <span className="text-xs sm:text-sm font-bold text-white block">نسخه اندروید (APK)</span>
                </div>
              </a>

              {/* Web App & iOS */}
              <a
                href="https://web.houshan.ai/"
                target="_blank"
                rel="noopener noreferrer"
                className="group p-3 rounded-2xl bg-gradient-to-r from-indigo-900/70 to-blue-900/70 hover:from-indigo-800/90 hover:to-blue-800/90 border border-indigo-500/40 hover:border-indigo-400/70 transition-all duration-300 flex items-center gap-3 shadow-lg hover:shadow-indigo-500/20 hover:-translate-y-0.5"
              >
                <div className="w-10 h-10 rounded-xl bg-indigo-500/30 border border-indigo-500/40 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform text-white font-bold">
                  🍎
                </div>
                <div className="text-right">
                  <span className="text-[10px] text-indigo-300 block font-medium">بدون نیاز به نصب</span>
                  <span className="text-xs sm:text-sm font-bold text-white block">نسخه وب و iOS</span>
                </div>
              </a>

            </div>

            {/* Quick Prompt Search / Input Bar */}
            <form 
              onSubmit={handleSearchSubmit} 
              className="relative max-w-xl mx-auto lg:mx-0 group pt-2"
            >
              <div className="relative flex items-center rounded-2xl bg-slate-900/90 border border-cyan-500/30 p-2 shadow-2xl backdrop-blur-xl group-focus-within:border-cyan-400 group-focus-within:shadow-[0_0_25px_rgba(6,182,212,0.25)] transition-all">
                <div className="p-2 text-slate-400">
                  <Bot className="w-5 h-5 text-cyan-400" />
                </div>
                <input
                  type="text"
                  value={searchPrompt}
                  onChange={(e) => setSearchPrompt(e.target.value)}
                  placeholder="از هوشان هر سوالی دارید بپرسید (مثال: طرح کسب‌وکار یا کد پایتون)..."
                  className="w-full bg-transparent text-white placeholder-slate-400 text-xs sm:text-sm px-2 focus:outline-none font-vazir"
                />
                <button
                  type="submit"
                  className="btn-donya-primary px-4 sm:px-6 py-2.5 rounded-xl font-bold text-xs sm:text-sm flex items-center gap-1.5 shrink-0"
                >
                  <span>شروع گفتگو</span>
                  <Send className="w-3.5 h-3.5 -scale-x-100" />
                </button>
              </div>

              {/* Quick Prompt Tags */}
              <div className="flex flex-wrap items-center justify-center lg:justify-start gap-2 mt-3 text-[11px] text-slate-400">
                <span className="text-slate-400 flex items-center gap-1">
                  <Sparkle className="w-3 h-3 text-amber-400" />
                  پیشنهاد سریع:
                </span>
                {quickPrompts.map((tag, idx) => (
                  <button
                    key={idx}
                    type="button"
                    onClick={() => {
                      setSearchPrompt(tag);
                      navigate(`/chat?prompt=${encodeURIComponent(tag)}`);
                    }}
                    className="px-2.5 py-1 rounded-lg bg-slate-900/60 border border-white/5 text-slate-300 hover:text-cyan-300 hover:border-cyan-500/30 transition-all cursor-pointer"
                  >
                    {tag}
                  </button>
                ))}
              </div>
            </form>

            {/* CTAs */}
            <div className="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-1">
              <Link
                to="/chat"
                className="btn-donya-primary px-8 py-3.5 rounded-xl font-bold flex items-center gap-2 text-base shadow-xl group"
              >
                <Sparkles className="w-5 h-5 text-cyan-300 group-hover:rotate-12 transition-transform" />
                <span>شروع گفتگوی آنلاین رایگان</span>
                <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
              </Link>

              <Link
                to="/models"
                className="btn-donya-outline px-6 py-3.5 rounded-xl font-medium text-slate-300 flex items-center gap-2 text-base"
              >
                <Zap className="w-5 h-5 text-cyan-400" />
                <span>مشاهده مدل‌های زبانی</span>
              </Link>
            </div>

            {/* Micro Trust Indicators */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-4 border-t border-white/10 text-[11px] text-slate-300">
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <CheckCircle2 className="w-4 h-4 text-cyan-400 shrink-0" />
                <span>دسترسی بدون فیلترشکن</span>
              </div>
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
                <span>پرداخت مستقیم ریالی</span>
              </div>
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <CheckCircle2 className="w-4 h-4 text-indigo-400 shrink-0" />
                <span>پاسخ‌دهی آنی (۰.۲s)</span>
              </div>
              <div className="flex items-center gap-2 justify-center lg:justify-start">
                <CheckCircle2 className="w-4 h-4 text-amber-400 shrink-0" />
                <span>پشتیبانی کامل زبان فارسی</span>
              </div>
            </div>

          </div>

          {/* Left Column: Interactive AI Visualizer & Live Sandbox (lg:col-span-6) */}
          <div className="lg:col-span-6">
            <HeroAiVisual />
          </div>

        </div>

        {/* AI Partners & Providers Logo Carousel (Matching Original Houshan.ai) */}
        <div className="mb-16 py-6 px-4 rounded-2xl bg-slate-900/40 border border-white/5 backdrop-blur-md">
          <div className="text-center mb-4">
            <span className="text-xs font-semibold text-slate-400">
              یکپارچه با پیشرفته‌ترین موتورها و زیرساخت‌های هوش مصنوعی جهان
            </span>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-6 sm:gap-10 opacity-80 hover:opacity-100 transition-opacity">
            {[
              { name: 'OpenAI ChatGPT', icon: '/storage/bot/llm/gpt.png' },
              { name: 'Anthropic Claude', icon: '/storage/bot/llm/claude.png' },
              { name: 'Google Gemini', icon: '/storage/bot/llm/gemini.png' },
              { name: 'DeepSeek AI', icon: '/storage/bot/llm/deepseek.png' },
              { name: 'Flux AI', icon: '/storage/bot/llm/flux.png' },
              { name: 'Ideogram', icon: '/storage/bot/llm/ideogram.png' },
              { name: 'Recraft AI', icon: '/storage/bot/llm/recraft.png' },
              { name: 'Stable Diffusion', icon: '/storage/bot/llm/sdxl.png' },
            ].map((p, i) => (
              <div key={i} className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-950/60 border border-white/5 hover:border-cyan-500/30 transition-all hover:scale-105">
                <img src={p.icon} alt={p.name} className="w-5 h-5 object-contain" />
                <span className="text-xs font-bold text-slate-300 font-english">{p.name}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Section: Interactive Character Bots & Specialized Personas */}
        <div className="glass-panel p-6 sm:p-8 rounded-3xl max-w-6xl mx-auto shadow-2xl border border-white/10 relative overflow-hidden">
          
          {/* Subtle Ambient Light in Card */}
          <div className="absolute top-0 right-1/4 w-96 h-32 bg-indigo-600/15 rounded-full blur-3xl pointer-events-none" />

          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mb-6 border-b border-white/10 pb-5 relative z-10">
            <div>
              <h2 className="text-lg sm:text-xl font-black text-white flex items-center gap-2">
                <Flame className="w-5 h-5 text-amber-400" />
                <span>دستیارهای تخصصی و گفتگو با چهره‌های سرشناس</span>
              </h2>
              <p className="text-xs sm:text-sm text-slate-400 mt-1">
                روی هر کاراکتر یا مشاور کلیک کنید تا وارد گفتگوی اختصاصی شوید
              </p>
            </div>

            {/* Category Switcher Tabs */}
            <div className="flex items-center gap-1.5 bg-slate-900/90 p-1 rounded-xl border border-white/5 overflow-x-auto max-w-full">
              <button
                onClick={() => setActiveCategory('fiction')}
                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
                  activeCategory === 'fiction' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
                }`}
              >
                شخصیت‌های داستانی
              </button>
              <button
                onClick={() => setActiveCategory('science')}
                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
                  activeCategory === 'science' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
                }`}
              >
                دانشمندان
              </button>
              <button
                onClick={() => setActiveCategory('tech')}
                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
                  activeCategory === 'tech' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
                }`}
              >
                پیشگامان فناوری
              </button>
              <button
                onClick={() => setActiveCategory('expert')}
                className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition-all whitespace-nowrap cursor-pointer ${
                  activeCategory === 'expert' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:text-white'
                }`}
              >
                مشاوران تخصصی
              </button>
            </div>
          </div>

          {/* Persona Cards Grid */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
            {currentBots.map((bot, idx) => (
              <Link
                key={idx}
                to={`/chat?prompt=${encodeURIComponent(bot.prompt)}&bot=${encodeURIComponent(bot.name)}`}
                className="group relative overflow-hidden rounded-2xl bg-slate-900/70 border border-white/5 p-4 hover:border-cyan-500/40 transition-all duration-300 hover:-translate-y-1.5 hover:shadow-xl flex flex-col justify-between"
              >
                <div className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl ${bot.color} opacity-20 rounded-full blur-xl group-hover:opacity-40 transition-opacity`} />
                
                <div className="flex items-start gap-3 mb-3 relative z-10">
                  <div className="w-12 h-12 rounded-2xl bg-slate-800/90 flex items-center justify-center text-2xl border border-white/10 group-hover:scale-110 transition-transform shadow-inner">
                    {bot.icon}
                  </div>
                  <div>
                    <h3 className="font-bold text-white text-base group-hover:text-cyan-300 transition-colors">{bot.name}</h3>
                    <span className="text-xs text-slate-400 block">{bot.role}</span>
                  </div>
                </div>

                <div className="flex items-center justify-between mt-3 pt-3 border-t border-white/5 relative z-10">
                  <span className="text-[11px] text-slate-400 flex items-center gap-1">
                    <MessageSquare className="w-3.5 h-3.5 text-indigo-400" />
                    گفتگوی فوری
                  </span>
                  <span className="text-xs text-indigo-400 font-bold group-hover:translate-x-[-3px] transition-transform">
                    گپ با {bot.name.split(' ')[0]} &larr;
                  </span>
                </div>
              </Link>
            ))}
          </div>

        </div>

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