import {
  ArrowLeft,
  ArrowRight,
  Check,
  Globe,
  Headset,
  Mail,
  ShieldCheck,
  Users,
} from 'lucide-react';

type Variant = 'iran' | 'international';

export default function OrgEmailLanding({
  locale,
  variant,
}: {
  locale: string;
  variant: Variant;
}) {
  const isFa = locale === 'fa';
  const dir = isFa ? 'rtl' : 'ltr';

  const copy = {
    badge: isFa ? 'ایمیل سازمانی' : 'Business Email',
    badge2:
      variant === 'iran'
        ? isFa
          ? 'ایران'
          : 'Iran'
        : isFa
          ? 'بین‌الملل'
          : 'International',
    eyebrow: isFa ? 'ایمیل سازمانی' : 'Business Email',
    title1: isFa ? 'ایمیل سازمانی حرفه‌ای' : 'Professional business email',
    title2: isFa ? 'برای تیم‌های مدرن' : 'for modern teams',
    subtitle: isFa
      ? 'با ایمیل سازمانی MugCloud، ارتباطات کاری خود را امن، سریع و حرفه‌ای مدیریت کنید.'
      : 'With MugCloud business email, manage your work communications securely, fast, and professionally.',
    cta: isFa ? 'شروع کنید' : 'Get started',
    placeholder: isFa ? 'name@yourbrand.com' : 'name@yourbrand.com',
    chips: isFa
      ? [
          { t: 'امنیت پیشرفته', icon: ShieldCheck },
          { t: 'بدون تبلیغات', icon: Check },
          { t: 'دسترسی جهانی', icon: Globe },
        ]
      : [
          { t: 'Advanced security', icon: ShieldCheck },
          { t: 'No ads', icon: Check },
          { t: 'Global access', icon: Globe },
        ],
    featureTitle: isFa ? 'ویژگی‌ها' : 'Features',
    featureCards: isFa
      ? [
          {
            t: 'صندوق ورودی هوشمند',
            d: 'دسته‌بندی خودکار و فیلترهای هوشمند برای مدیریت بهتر ایمیل‌ها',
            icon: Mail,
          },
          {
            t: 'محافظت پیشرفته',
            d: 'ضد اسپم و ضد فیشینگ با تکنولوژی هوش مصنوعی',
            icon: ShieldCheck,
          },
          {
            t: 'همکاری تیمی',
            d: 'تقویم مشترک، پوشه‌های تیمی و مدیریت دسترسی‌ها',
            icon: Users,
          },
          {
            t: 'همگام‌سازی کامل',
            d: 'دسترسی به ایمیل‌ها از تمامی دستگاه‌ها در هر زمان و مکان',
            icon: Globe,
          },
        ]
      : [
          {
            t: 'Smart inbox',
            d: 'Auto categorization and smart filters to manage mail better',
            icon: Mail,
          },
          {
            t: 'Advanced protection',
            d: 'Anti-spam and anti-phishing with AI-powered protection',
            icon: ShieldCheck,
          },
          {
            t: 'Team collaboration',
            d: 'Shared calendar, team folders, and access management',
            icon: Users,
          },
          {
            t: 'Full sync',
            d: 'Access your emails on all devices anytime, anywhere',
            icon: Globe,
          },
        ],
    flowTitle: isFa ? 'ارتباط امن، سریع و همیشه در دسترس' : 'Secure, fast, always available',
    flow: isFa
      ? [
          { t: 'شما', d: 'ارسال ایمیل', icon: Users },
          { t: 'رمزگذاری', d: 'امنیت انتها به انتها', icon: ShieldCheck },
          { t: 'ایمیل', d: 'صندوق هوشمند', icon: Mail },
          { t: 'زیرساخت مطمئن', d: 'سرورهای پرسرعت', icon: Globe },
          { t: 'تحویل موفق', d: 'دریافت در لحظه', icon: Check },
        ]
      : [
          { t: 'You', d: 'Send mail', icon: Users },
          { t: 'Encryption', d: 'End-to-end security', icon: ShieldCheck },
          { t: 'Email', d: 'Smart inbox', icon: Mail },
          { t: 'Reliable infra', d: 'Fast servers', icon: Globe },
          { t: 'Delivered', d: 'Instant delivery', icon: Check },
        ],
    plansTitle: isFa ? 'پلن‌های ایمیل سازمانی' : 'Business email plans',
    plans: isFa
      ? [
          {
            tag: '',
            name: 'Starter',
            desc: 'برای تیم‌های کوچک',
            price: '۱۹,۹۰۰',
            items: ['۵ گیگابایت فضای ایمیل', 'ایمیل‌های نامحدود', 'پشتیبانی استاندارد'],
          },
          {
            tag: 'محبوب‌ترین',
            name: 'Business',
            desc: 'برای تیم‌های در حال رشد',
            price: '۴۹,۹۰۰',
            items: ['۵۰ گیگابایت فضای ایمیل', 'ایمیل‌های نامحدود', 'پشتیبانی اولویت‌دار', 'ابزارهای همکاری تیمی'],
          },
          {
            tag: '',
            name: 'Enterprise',
            desc: 'برای سازمان‌های بزرگ',
            price: '۹۹,۹۰۰',
            items: ['فضای نامحدود', 'ایمیل‌های نامحدود', 'پشتیبانی ۲۴/۷ اختصاصی', 'امنیت پیشرفته و سفارشی‌سازی'],
          },
        ]
      : [
          {
            tag: '',
            name: 'Starter',
            desc: 'For small teams',
            price: '19.9',
            items: ['5GB mailbox', 'Unlimited emails', 'Standard support'],
          },
          {
            tag: 'Most popular',
            name: 'Business',
            desc: 'For growing teams',
            price: '49.9',
            items: ['50GB mailbox', 'Unlimited emails', 'Priority support', 'Team collaboration tools'],
          },
          {
            tag: '',
            name: 'Enterprise',
            desc: 'For large orgs',
            price: '99.9',
            items: ['Unlimited storage', 'Unlimited emails', '24/7 dedicated support', 'Advanced security & customization'],
          },
        ],
    stats: isFa
      ? [
          { t: '+120K', d: 'کاربر فعال', icon: Users },
          { t: '99.99%', d: 'آپتایم سرویس', icon: ShieldCheck },
          { t: '24/7', d: 'پشتیبانی دائمی', icon: Headset },
          { t: '+20', d: 'لوکیشن سرور جهانی', icon: Globe },
        ]
      : [
          { t: '+120K', d: 'Active users', icon: Users },
          { t: '99.99%', d: 'Service uptime', icon: ShieldCheck },
          { t: '24/7', d: 'Support', icon: Headset },
          { t: '+20', d: 'Global locations', icon: Globe },
        ],
    testimonialsTitle: isFa ? 'سازمان‌های موفق، تجربه‌ای مطمئن' : 'Trusted by successful teams',
    testimonials: isFa
      ? [
          {
            n: 'علی رضایی',
            r: 'مدیر فناوری، دیجی‌کالا',
            q: 'ایمیل سازمانی MugCloud ارتباطات تیم ما را کاملاً حرفه‌ای و امن کرده است.',
          },
          {
            n: 'سارا محمدی',
            r: 'مدیر مارکتینگ، تپسی',
            q: 'سرعت بالا، امنیت فوق‌العاده و پشتیبانی عالی. همه‌چیز عالیه!',
          },
          {
            n: 'آرمان فرهادی',
            r: 'مدیرعامل، اسنپ!',
            q: 'مدیریت کاربران و ابزارهای همکاری تیمی واقعاً بی‌نظیر است.',
          },
        ]
      : [
          {
            n: 'Ali Rezaei',
            r: 'CTO, Example Co.',
            q: 'MugCloud business email made our communication professional and secure.',
          },
          {
            n: 'Sara Mohammadi',
            r: 'Marketing Lead, Example',
            q: 'High speed, great security, and responsive support. Solid experience.',
          },
          {
            n: 'Arman Farhadi',
            r: 'CEO, Example',
            q: 'User management and team collaboration tools are excellent.',
          },
        ],
  } as const;

  return (
    <section className="px-4 sm:px-6 pt-28 pb-16" dir={dir}>
      <div className="max-w-7xl mx-auto">
        <div className="relative overflow-hidden rounded-[2.5rem] border border-[color:var(--border-10)] bg-[#050b1a]">
          <div className="pointer-events-none absolute inset-0">
            <div className="absolute inset-0 bg-[radial-gradient(900px_520px_at_18%_30%,rgba(34,211,238,0.12),transparent_58%),radial-gradient(1000px_560px_at_70%_30%,rgba(167,139,250,0.12),transparent_62%),radial-gradient(900px_560px_at_50%_110%,rgba(16,185,129,0.10),transparent_62%)]" />
            <div className="absolute inset-0 opacity-[0.08] [background-image:radial-gradient(rgba(255,255,255,0.75)_1px,transparent_1px)] [background-size:34px_34px]" />
          </div>

          <div className="relative p-6 sm:p-8 md:p-10">
            {/* Hero */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
              <div className="lg:col-span-6 order-2">
                <div className="relative mx-auto w-full max-w-[560px] aspect-[6/5]">
                  <div className="absolute inset-0 rounded-[2rem] bg-[radial-gradient(closest-side_at_40%_45%,rgba(34,211,238,0.10),transparent_60%),radial-gradient(closest-side_at_70%_40%,rgba(167,139,250,0.10),transparent_62%)]" />

                  {/* Orbit lines */}
                  <svg className="absolute inset-0 w-full h-full" viewBox="0 0 600 500" aria-hidden="true">
                    <defs>
                      <linearGradient id="mailOrbit" x1="0" y1="0" x2="1" y2="0">
                        <stop offset="0" stopColor="rgba(34,211,238,0.0)" />
                        <stop offset="0.5" stopColor="rgba(34,211,238,0.85)" />
                        <stop offset="1" stopColor="rgba(167,139,250,0.0)" />
                      </linearGradient>
                      <filter id="mailGlow">
                        <feGaussianBlur stdDeviation="2.5" result="b" />
                        <feMerge>
                          <feMergeNode in="b" />
                          <feMergeNode in="SourceGraphic" />
                        </feMerge>
                      </filter>
                    </defs>
                    <path
                      d="M72 250 C 160 120, 380 110, 520 190"
                      fill="none"
                      stroke="url(#mailOrbit)"
                      strokeWidth="2"
                      strokeLinecap="round"
                      opacity="0.65"
                      filter="url(#mailGlow)"
                    />
                    <path
                      d="M90 300 C 200 410, 420 410, 535 300"
                      fill="none"
                      stroke="url(#mailOrbit)"
                      strokeWidth="2"
                      strokeLinecap="round"
                      opacity="0.55"
                      filter="url(#mailGlow)"
                    />
                    {[
                      { cx: 124, cy: 318 },
                      { cx: 505, cy: 210 },
                      { cx: 452, cy: 360 },
                    ].map((p, i) => (
                      <g key={i} filter="url(#mailGlow)">
                        <circle cx={p.cx} cy={p.cy} r="8" fill="rgba(34,211,238,0.10)" />
                        <circle cx={p.cx} cy={p.cy} r="3.6" fill="rgba(167,139,250,0.95)" />
                      </g>
                    ))}
                  </svg>

                  {/* Main mail UI mock */}
                  <div className="absolute left-1/2 top-1/2 w-[76%] -translate-x-1/2 -translate-y-1/2 rounded-[1.6rem] border border-white/10 bg-[rgba(2,6,23,0.50)] backdrop-blur-xl shadow-[0_0_70px_rgba(59,130,246,0.14)]">
                    <div className="p-4">
                      <div className="h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center px-3 gap-2 text-xs text-slate-200/70">
                        <div className="w-6 h-6 rounded-lg border border-white/10 bg-[rgba(255,255,255,0.02)]" />
                        <span className="opacity-70">{isFa ? 'جستجو در ایمیل…' : 'Search mail…'}</span>
                      </div>
                      <div className="mt-4 grid grid-cols-[0.9fr_1.6fr] gap-3">
                        <div className="rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] p-3">
                          {[
                            isFa ? 'Inbox' : 'Inbox',
                            isFa ? 'Starred' : 'Starred',
                            isFa ? 'Sent' : 'Sent',
                            isFa ? 'Drafts' : 'Drafts',
                            isFa ? 'Spam' : 'Spam',
                            isFa ? 'Trash' : 'Trash',
                          ].map((t, i) => (
                            <div
                              key={t}
                              className={`flex items-center justify-between rounded-lg px-2 py-1.5 text-[11px] ${i === 0 ? 'bg-[rgba(34,211,238,0.10)] text-slate-100' : 'text-slate-200/70'
                                }`}
                            >
                              <span className="flex items-center gap-2">
                                <span className="w-1.5 h-1.5 rounded-full bg-[#22d3ee]" />
                                {t}
                              </span>
                              {i === 0 ? (
                                <span className="px-2 py-0.5 rounded-full border border-white/10 bg-[rgba(255,255,255,0.03)] text-[10px]">
                                  24
                                </span>
                              ) : null}
                            </div>
                          ))}
                        </div>
                        <div className="rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] p-3">
                          {[
                            { n: isFa ? 'Ali Rezaei' : 'Ali Rezaei', s: isFa ? 'Project update' : 'Project update' },
                            { n: isFa ? 'Sara Mohammadi' : 'Sara Mohammadi', s: isFa ? 'Meeting notes' : 'Meeting notes' },
                            { n: isFa ? 'Design Team' : 'Design Team', s: isFa ? 'New design system' : 'New design system' },
                            { n: isFa ? 'Support' : 'Support', s: isFa ? 'Ticket resolved' : 'Ticket resolved' },
                            { n: 'MugCloud', s: isFa ? 'Welcome to your inbox' : 'Welcome to your inbox' },
                          ].map((r) => (
                            <div key={r.s} className="flex items-center justify-between py-2 border-b border-white/5 last:border-0">
                              <div className="flex items-center gap-2">
                                <div className="w-7 h-7 rounded-full border border-white/10 bg-[rgba(255,255,255,0.02)]" />
                                <div>
                                  <div className="text-[11px] text-slate-100/90">{r.n}</div>
                                  <div className="text-[10px] text-slate-200/55">{r.s}</div>
                                </div>
                              </div>
                              <div className="text-[10px] text-slate-200/45">10:30</div>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Floating info cards */}
                  <div className="absolute left-0 top-12 w-[220px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(59,130,246,0.12)]">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(34,211,238,0.08)] flex items-center justify-center">
                        <ShieldCheck className="w-5 h-5 text-[#22d3ee]" />
                      </div>
                      <div>
                        <div className="text-xs text-slate-100/90">Encrypted</div>
                        <div className="text-[11px] text-slate-200/55">End-to-End</div>
                      </div>
                    </div>
                  </div>
                  <div className="absolute left-6 bottom-8 w-[230px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(34,211,238,0.10)]">
                    <div className="text-xs text-slate-100/90">99.99%</div>
                    <div className="text-[11px] text-slate-200/55">{isFa ? 'نرخ تحویل' : 'Delivery rate'}</div>
                    <div className="mt-3 h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.02)] relative overflow-hidden">
                      <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(34,211,238,0.0),rgba(34,211,238,0.22),rgba(167,139,250,0.0))] opacity-70" />
                      <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 30" aria-hidden="true">
                        <path
                          d="M0 26 C 20 22, 35 18, 52 18 C 70 18, 80 10, 100 6"
                          fill="none"
                          stroke="rgba(34,211,238,0.85)"
                          strokeWidth="2"
                        />
                      </svg>
                    </div>
                  </div>
                  <div className="absolute right-0 bottom-20 w-[190px] rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.55)] backdrop-blur-xl p-4 shadow-[0_0_55px_rgba(167,139,250,0.10)]">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(167,139,250,0.10)] flex items-center justify-center">
                        <Mail className="w-5 h-5 text-[#a78bfa]" />
                      </div>
                      <div>
                        <div className="text-xs text-slate-100/90">AI Spam</div>
                        <div className="text-[11px] text-slate-200/55">Protection</div>
                      </div>
                    </div>
                  </div>

                  {/* Small floating avatars */}
                  <div className="absolute left-20 top-4 w-14 h-14 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.30),rgba(2,6,23,0.10)_55%,rgba(2,6,23,0.55)_100%)] backdrop-blur-md flex items-center justify-center text-slate-100/80 font-bold">
                    A
                  </div>
                  <div className="absolute left-4 top-60 w-14 h-14 rounded-full border border-white/10 bg-[radial-gradient(circle_at_30%_30%,rgba(167,139,250,0.30),rgba(2,6,23,0.10)_55%,rgba(2,6,23,0.55)_100%)] backdrop-blur-md flex items-center justify-center text-slate-100/80 font-bold">
                    S
                  </div>
                </div>
              </div>

              <div className="lg:col-span-6" dir={dir}>
                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[rgba(255,255,255,0.04)] border border-white/10 text-xs text-slate-200/70">
                  <span>{copy.badge}</span>
                  <span className="w-1 h-1 rounded-full bg-emerald-400/70" />
                  <span>{copy.badge2}</span>
                </div>

                <div className="mt-6">
                  <div className="text-emerald-300/90 text-sm font-semibold">{copy.eyebrow}</div>
                  <h1 className="mt-3 text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-100">
                    {copy.title1}{' '}
                    <span className="text-emerald-300">{copy.title2}</span>
                  </h1>
                  <p className="mt-5 text-sm sm:text-base text-slate-200/60 leading-relaxed max-w-xl">
                    {copy.subtitle}
                  </p>
                </div>

                <div className="mt-7 flex flex-col sm:flex-row gap-3 items-stretch">
                  <div className="flex-1 rounded-2xl border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-xl flex items-center px-4 gap-3 h-14">
                    <Mail className="w-5 h-5 text-slate-200/60" />
                    <input
                      type="email"
                      placeholder={copy.placeholder}
                      className={`w-full bg-transparent outline-none text-sm text-slate-100 placeholder:text-slate-200/35 ${isFa ? 'text-right' : 'text-left'
                        }`}
                    />
                  </div>
                  <button className="h-14 rounded-2xl px-6 bg-gradient-to-r from-emerald-400 to-sky-400 text-slate-950 font-bold flex items-center justify-center gap-2 shadow-[0_0_35px_rgba(34,211,238,0.15)]">
                    <span>{copy.cta}</span>
                    {isFa ? <ArrowLeft className="w-5 h-5" /> : <ArrowRight className="w-5 h-5" />}
                  </button>
                </div>

                <div className={`mt-5 flex flex-wrap gap-4 text-xs text-slate-200/65 ${isFa ? 'justify-end' : 'justify-start'}`}>
                  {copy.chips.map((c) => (
                    <div key={c.t} className="flex items-center gap-2">
                      <span className="w-7 h-7 rounded-full border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-md flex items-center justify-center">
                        <c.icon className="w-4 h-4 text-emerald-300/90" />
                      </span>
                      <span>{c.t}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Feature cards */}
            <div className="mt-10 rounded-[2.2rem] border border-white/10 bg-[rgba(2,6,23,0.28)] overflow-hidden shadow-[0_0_80px_rgba(0,0,0,0.25)]">
              <svg className="absolute w-0 h-0" aria-hidden="true">
                <defs>
                  <linearGradient id="emailFeatGrad" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0" stopColor="#22d3ee" />
                    <stop offset="1" stopColor="#a78bfa" />
                  </linearGradient>
                </defs>
              </svg>
              <div
                className={`grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x ${isFa ? 'md:divide-x' : ''
                  } divide-white/10`}
              >
                {copy.featureCards.map((f) => (
                  <div key={f.t} className="px-6 py-9 md:px-8 md:py-10 flex flex-col items-center text-center">
                    <div className="h-14 w-14 flex items-center justify-center">
                      <f.icon
                        className="w-12 h-12 drop-shadow-[0_0_18px_rgba(34,211,238,0.16)]"
                        color="url(#emailFeatGrad)"
                        strokeWidth={1.8}
                      />
                    </div>
                    <div className="mt-5 font-extrabold text-slate-100">{f.t}</div>
                    <div className="mt-3 text-sm text-slate-200/55 leading-relaxed max-w-[240px]">{f.d}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Flow */}
            <div className="mt-10 rounded-[2rem] border border-white/10 bg-[rgba(2,6,23,0.35)] overflow-hidden">
              <div className="p-7 md:p-8">
                <div className="text-center text-xl md:text-2xl font-bold text-slate-100">{copy.flowTitle}</div>

                <div className="mt-8 relative" dir="ltr">
                  {/* Desktop: pixel-perfect timeline (matches design) */}
                  <div className="hidden md:block relative h-[320px]">
                    {/* main line */}
                    <div className="absolute left-10 right-10 top-[45%] -translate-y-1/2 h-px bg-[linear-gradient(90deg,rgba(34,211,238,0.0),rgba(34,211,238,0.85),rgba(167,139,250,0.95),rgba(34,211,238,0.85),rgba(34,211,238,0.0))]" />

                    {/* dots */}
                    {[
                      { x: '18%', c: 'bg-[#22d3ee]' },
                      { x: '25%', c: 'bg-[#22d3ee]' },
                      { x: '32%', c: 'bg-[#22d3ee]' },
                      { x: '40%', c: 'bg-[#22d3ee]' },
                      { x: '44%', c: 'bg-[#a78bfa]' },
                      { x: '48%', c: 'bg-[#a78bfa]' },
                      { x: '52%', c: 'bg-[#a78bfa]' },
                      { x: '56%', c: 'bg-[#a78bfa]' },
                      { x: '64%', c: 'bg-[#22d3ee]' },
                      { x: '71%', c: 'bg-[#22d3ee]' },
                      { x: '78%', c: 'bg-[#22d3ee]' },
                      { x: '85%', c: 'bg-[#22d3ee]' },
                    ].map((d, i) => (
                      <div
                        key={i}
                        className={`absolute top-[45%] -translate-y-1/2 ${d.c} rounded-full shadow-[0_0_16px_rgba(34,211,238,0.35)]`}
                        style={{ left: d.x, width: 8, height: 8 }}
                      />
                    ))}

                    {/* nodes */}
                    <div className="absolute inset-x-6 top-[45%] -translate-y-1/2 flex items-start justify-between">
                      {/* node 1 */}
                      <div className="flex flex-col items-center text-center w-[170px]">
                        <div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(59,130,246,0.16)] flex items-center justify-center">
                          <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.08),transparent_62%)]" />
                          <Users className="relative w-12 h-12 text-[#60a5fa] drop-shadow-[0_0_18px_rgba(96,165,250,0.25)]" />
                        </div>
                        <div className="mt-4 font-bold text-slate-100">{copy.flow[0]?.t}</div>
                        <div className="mt-1 text-xs text-slate-200/55">{copy.flow[0]?.d}</div>
                      </div>

                      {/* node 2 */}
                      <div className="flex flex-col items-center text-center w-[170px]">
                        <div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(59,130,246,0.16)] flex items-center justify-center">
                          <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.08),transparent_62%)]" />
                          <ShieldCheck className="relative w-12 h-12 text-[#22d3ee] drop-shadow-[0_0_18px_rgba(34,211,238,0.25)]" />
                        </div>
                        <div className="mt-4 font-bold text-slate-100">{copy.flow[1]?.t}</div>
                        <div className="mt-1 text-xs text-slate-200/55">{copy.flow[1]?.d}</div>
                      </div>

                      {/* node 3 (center) */}
                      <div className="flex flex-col items-center text-center w-[200px]">
                        <div className="relative w-[170px] h-[170px] rounded-full border border-[#2748ff]/40 bg-[rgba(2,6,23,0.30)] backdrop-blur-md shadow-[0_0_95px_rgba(34,211,238,0.20)] flex items-center justify-center">
                          <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(39,72,255,0.18),transparent_62%)]" />
                          <div className="absolute inset-[-28px] rounded-full border border-[#2748ff]/20" />
                          <div className="absolute inset-[-54px] rounded-full border border-[#2748ff]/10" />
                          <div className="absolute inset-[-78px] rounded-full border border-[#2748ff]/10 opacity-50" />
                          <div className="absolute inset-[10px] rounded-full border border-[#22d3ee]/35" />
                          <div className="absolute inset-[22px] rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.22),transparent_62%)]" />
                          <svg
                            viewBox="0 0 200 200"
                            className="relative w-[130px] h-[130px] drop-shadow-[0_0_34px_rgba(34,211,238,0.26)]"
                            aria-hidden="true"
                          >
                            <defs>
                              <linearGradient id="flowCenterGrad" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0" stopColor="#22d3ee" />
                                <stop offset="1" stopColor="#a78bfa" />
                              </linearGradient>
                              <filter id="flowCenterGlow">
                                <feGaussianBlur stdDeviation="2.4" result="b" />
                                <feMerge>
                                  <feMergeNode in="b" />
                                  <feMergeNode in="SourceGraphic" />
                                </feMerge>
                              </filter>
                            </defs>

                            <circle cx="100" cy="100" r="64" fill="rgba(2,6,23,0.22)" stroke="rgba(255,255,255,0.10)" />
                            <path
                              d="M58 76 H142 C148 76 152 80 152 86 V122 C152 128 148 132 142 132 H58 C52 132 48 128 48 122 V86 C48 80 52 76 58 76 Z"
                              fill="rgba(2,6,23,0.10)"
                              stroke="url(#flowCenterGrad)"
                              strokeWidth="4"
                              filter="url(#flowCenterGlow)"
                              strokeLinejoin="round"
                            />
                            <path
                              d="M52 84 L100 118 L148 84"
                              fill="none"
                              stroke="url(#flowCenterGrad)"
                              strokeWidth="4"
                              filter="url(#flowCenterGlow)"
                              strokeLinecap="round"
                              strokeLinejoin="round"
                            />
                            <path
                              d="M70 116 L52 130"
                              fill="none"
                              stroke="rgba(34,211,238,0.75)"
                              strokeWidth="3.2"
                              strokeLinecap="round"
                              opacity="0.9"
                            />
                            <path
                              d="M130 116 L148 130"
                              fill="none"
                              stroke="rgba(167,139,250,0.65)"
                              strokeWidth="3.2"
                              strokeLinecap="round"
                              opacity="0.9"
                            />
                          </svg>
                        </div>
                        <div className="mt-4 font-bold text-slate-100">{copy.flow[2]?.t}</div>
                        <div className="mt-1 text-xs text-slate-200/55">{copy.flow[2]?.d}</div>
                      </div>

                      {/* node 4 */}
                      <div className="flex flex-col items-center text-center w-[170px]">
                        <div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(167,139,250,0.12)] flex items-center justify-center">
                          {/* <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(167,139,250,0.08),transparent_62%)]" /> */}
                          <Globe className="relative w-12 h-12 text-[#a78bfa] drop-shadow-[0_0_18px_rgba(167,139,250,0.20)]" />
                        </div>
                        <div className="mt-4 font-bold text-slate-100">{copy.flow[3]?.t}</div>
                        <div className="mt-1 text-xs text-slate-200/55">{copy.flow[3]?.d}</div>
                      </div>

                      {/* node 5 */}
                      <div className="flex flex-col items-center text-center w-[170px]">
                        <div className="relative w-[132px] h-[132px] rounded-full border border-[#2b3d86] bg-[rgba(2,6,23,0.42)] backdrop-blur-md shadow-[0_0_65px_rgba(34,211,238,0.12)] flex items-center justify-center">
                          <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,rgba(34,211,238,0.08),transparent_62%)]" />
                          <Check className="relative w-12 h-12 text-[#22d3ee] drop-shadow-[0_0_18px_rgba(34,211,238,0.22)]" />
                        </div>
                        <div className="mt-4 font-bold text-slate-100">{copy.flow[4]?.t}</div>
                        <div className="mt-1 text-xs text-slate-200/55">{copy.flow[4]?.d}</div>
                      </div>
                    </div>
                  </div>

                  {/* Mobile: keep readable stack */}
                  <div className="grid grid-cols-1 md:hidden gap-7 items-center">
                    {copy.flow.map((s, idx) => (
                      <div key={s.t} className="flex flex-col items-center text-center">
                        <div className="w-20 h-20 rounded-full border border-white/10 bg-[rgba(2,6,23,0.35)] backdrop-blur-md flex items-center justify-center shadow-[0_0_50px_rgba(59,130,246,0.12)]">
                          <div
                            className={`w-14 h-14 rounded-full border border-white/10 flex items-center justify-center ${idx === 2
                                ? 'bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.20),transparent_55%)]'
                                : 'bg-[rgba(255,255,255,0.03)]'
                              }`}
                          >
                            <s.icon className="w-7 h-7 text-emerald-300/95" />
                          </div>
                        </div>
                        <div className="mt-3 font-bold text-slate-100">{s.t}</div>
                        <div className="mt-1 text-xs text-slate-200/55">{s.d}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* Plans */}
            <div className="mt-10">
              <div className="text-center text-xl md:text-2xl font-bold text-slate-100">{copy.plansTitle}</div>
              <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-5">
                {copy.plans.map((p) => (
                  <div
                    key={p.name}
                    className={`relative rounded-[2rem] border border-white/10 bg-[rgba(2,6,23,0.35)] overflow-hidden p-7 ${p.tag ? 'ring-1 ring-emerald-400/25 shadow-[0_0_60px_rgba(16,185,129,0.08)]' : ''
                      }`}
                  >
                    {p.tag ? (
                      <div className="absolute top-4 right-4 px-3 py-1 rounded-full text-xs border border-white/10 bg-[rgba(16,185,129,0.14)] text-emerald-200/90">
                        {p.tag}
                      </div>
                    ) : null}

                    <div className="flex items-start justify-between gap-4">
                      <div>
                        <div className="text-lg font-extrabold text-slate-100">{p.name}</div>
                        <div className="mt-1 text-sm text-slate-200/55">{p.desc}</div>
                      </div>
                      <div className="w-14 h-14 rounded-2xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center justify-center">
                        <Mail className="w-7 h-7 text-[#a78bfa]" />
                      </div>
                    </div>

                    <div className="mt-6">
                      <div className="text-sm text-slate-200/55">{isFa ? 'ماهانه' : 'Monthly'}</div>
                      <div className="mt-2 flex items-end gap-2">
                        <div className="text-3xl font-extrabold text-slate-100">{p.price}</div>
                        <div className="text-sm text-slate-200/55">{isFa ? 'تومان' : 'USD'}</div>
                      </div>
                    </div>

                    <div className="mt-6 space-y-3">
                      {p.items.map((it) => (
                        <div key={it} className="flex items-start gap-2 text-sm text-slate-200/60">
                          <span className="mt-1 w-5 h-5 rounded-full border border-white/10 bg-[rgba(16,185,129,0.10)] flex items-center justify-center">
                            <Check className="w-3.5 h-3.5 text-emerald-300" />
                          </span>
                          <span>{it}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Stats strip */}
            <div className="mt-10 rounded-[2rem] border border-white/10 bg-[rgba(2,6,23,0.35)] overflow-hidden">
              <div className={`grid grid-cols-2 md:grid-cols-4 divide-x ${isFa ? 'divide-x-reverse' : ''} divide-white/10`}>
                {copy.stats.map((s) => (
                  <div key={s.t} className="p-6 flex items-center gap-3">
                    <div className="w-12 h-12 rounded-2xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center justify-center">
                      <s.icon className="w-6 h-6 text-[#22d3ee]" />
                    </div>
                    <div>
                      <div className="text-lg font-extrabold text-slate-100">{s.t}</div>
                      <div className="text-xs text-slate-200/55">{s.d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Testimonials */}
            <div className="mt-10 pb-2">
              <div className="text-center text-xl md:text-2xl font-bold text-slate-100">{copy.testimonialsTitle}</div>
              <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-5">
                {copy.testimonials.map((t, idx) => (
                  <div key={t.n} className="rounded-[1.8rem] border border-white/10 bg-[rgba(2,6,23,0.35)] p-7">
                    <div className="flex items-start justify-between">
                      <div className="text-emerald-300 font-extrabold text-2xl leading-none">99</div>
                      <div
                        className={`w-12 h-12 rounded-full border border-white/10 overflow-hidden flex items-center justify-center font-bold text-slate-100/80 ${idx === 0
                          ? 'bg-[radial-gradient(circle_at_30%_30%,rgba(34,211,238,0.28),rgba(2,6,23,0.08)_55%,rgba(2,6,23,0.55)_100%)]'
                          : idx === 1
                            ? 'bg-[radial-gradient(circle_at_30%_30%,rgba(16,185,129,0.26),rgba(2,6,23,0.08)_55%,rgba(2,6,23,0.55)_100%)]'
                            : 'bg-[radial-gradient(circle_at_30%_30%,rgba(167,139,250,0.28),rgba(2,6,23,0.08)_55%,rgba(2,6,23,0.55)_100%)]'
                          }`}
                      >
                        {idx === 0 ? 'AR' : idx === 1 ? 'SM' : 'AF'}
                      </div>
                    </div>
                    <div className={`mt-4 text-sm text-slate-200/70 leading-relaxed ${isFa ? 'text-right' : 'text-left'}`}>{t.q}</div>
                    <div className="mt-6 flex items-center justify-between">
                      <div>
                        <div className="text-sm font-bold text-slate-100">{t.n}</div>
                        <div className="text-xs text-slate-200/55">{t.r}</div>
                      </div>
                      <div className="w-10 h-10 rounded-xl border border-white/10 bg-[rgba(255,255,255,0.03)] flex items-center justify-center">
                        <Mail className="w-5 h-5 text-[#a78bfa]" />
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-5 flex items-center justify-center gap-2">
                {[0, 1, 2].map((i) => (
                  <div
                    key={i}
                    className={`h-2 w-2 rounded-full ${i === 0 ? 'bg-emerald-300' : 'bg-white/15'}`}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
