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

type Variant = 'iran' | 'international';

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

  const badge2 =
    variant === 'iran'
      ? isFa
        ? 'ایران'
        : 'Iran'
      : isFa
        ? 'بین‌الملل'
        : 'International';

  const title1 = isFa ? 'ایمیل سازمانی حرفه‌ای' : 'Professional business email';
  const title2 = isFa ? 'برای تیم‌های مدرن' : 'for modern teams';
  const subtitle = isFa
    ? 'با ایمیل سازمانی MugCloud، ارتباطات کاری خود را امن، سریع و حرفه‌ای مدیریت کنید.'
    : 'With MugCloud business email, manage your work communications securely, fast, and professionally.';

  const cta = isFa ? 'شروع کنید' : 'Get started';
  const placeholder = 'name@yourbrand.com';

  const 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 },
      ];

  return (
    <section className="px-4 sm:px-6 pt-28 pb-14" dir={dir}>
      <div className="max-w-6xl 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">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
              {/* Left illustration */}
              <div className="lg:col-span-6">
                <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%)]" />

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

                  <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">
                          {['Inbox', 'Starred', 'Sent', 'Drafts', 'Spam', '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: 'Ali Rezaei', s: 'Project update' },
                            { n: 'Sara Mohammadi', s: 'Meeting notes' },
                            { n: 'Design Team', s: 'New design system' },
                            { n: 'Support', s: 'Ticket resolved' },
                            { n: 'MugCloud', s: '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>

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

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

              {/* Right copy */}
              <div className="lg:col-span-6">
                <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>{isFa ? 'ایمیل سازمانی' : 'Business Email'}</span>
                  <span className="w-1 h-1 rounded-full bg-emerald-400/70" />
                  <span>{badge2}</span>
                </div>

                <div className="mt-6">
                  <div className="text-emerald-300/90 text-sm font-semibold">{isFa ? 'ایمیل سازمانی' : 'Business Email'}</div>
                  <h1 className="mt-3 text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-100">
                    {title1} <span className="text-emerald-300">{title2}</span>
                  </h1>
                  <p className="mt-5 text-sm sm:text-base text-slate-200/60 leading-relaxed max-w-xl">
                    {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={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>{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-6 text-xs text-slate-200/65 ${isFa ? 'justify-end' : 'justify-start'}`}>
                  {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>
          </div>
        </div>
      </div>
    </section>
  );
}

