function Hero() {
  const { lang, t } = useLang();

  const goTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <section id="home" className="relative min-h-[100svh] flex items-center pt-32 pb-20 overflow-hidden">
      {/* aurora blobs */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute -top-40 -start-40 w-[640px] h-[640px] rounded-full blob-1 blob-blue"
          style={{ background: 'radial-gradient(circle, rgba(59,130,246,0.35) 0%, transparent 60%)', filter: 'blur(40px)' }} />
        <div className="absolute top-40 end-0 w-[720px] h-[720px] rounded-full blob-2 blob-purple"
          style={{ background: 'radial-gradient(circle, rgba(168,85,247,0.32) 0%, transparent 60%)', filter: 'blur(40px)' }} />
        <div className="absolute -bottom-40 start-1/3 w-[560px] h-[560px] rounded-full blob-3 blob-cyan"
          style={{ background: 'radial-gradient(circle, rgba(6,182,212,0.28) 0%, transparent 60%)', filter: 'blur(40px)' }} />
      </div>

      {/* dot grid overlay */}
      <div className="absolute inset-0 -z-10 grid-dots opacity-50 [mask-image:radial-gradient(circle_at_50%_40%,black_30%,transparent_75%)]" />

      <div className="mx-auto max-w-7xl px-5 lg:px-8 w-full">
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7 reveal in">
            {/* eyebrow chip */}
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full glass text-[12px] text-white/75 mb-7">
              <span className="relative flex h-1.5 w-1.5">
                <span className="absolute inset-0 rounded-full bg-cyan-400 animate-ping opacity-70" />
                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-cyan-400" />
              </span>
              <span>{t.hero.eyebrow}</span>
              <span className="text-white/30">·</span>
              <span style={{ fontFamily: 'Inter, sans-serif' }} className="text-white/55 tracking-wider">ofuq.tech</span>
            </div>

            <h1 className={`font-extrabold tracking-tight ${lang === 'ar' ? 'text-[clamp(2.4rem,6.5vw,5.5rem)] leading-[1.25]' : 'text-[clamp(2.6rem,6.8vw,5.8rem)] leading-[1.05]'}`}>
              <span className="block text-grad-cool" style={{ paddingBottom: lang === 'ar' ? '0.12em' : 0 }}>{t.hero.title1}</span>
              <span className="block text-grad mt-1" style={{ paddingBottom: lang === 'ar' ? '0.18em' : 0 }}>{t.hero.title2}</span>
            </h1>

            <p className={`mt-7 max-w-2xl text-white/65 leading-relaxed ${lang === 'ar' ? 'text-[17px]' : 'text-[18px]'}`}>
              {t.hero.subtitle}
            </p>

            <div className="mt-10 flex flex-wrap items-center gap-4">
              <button
                onClick={() => goTo('contact')}
                className="cta-glow group inline-flex items-center gap-2.5 px-7 py-3.5 rounded-full text-white font-semibold text-[14.5px] transition-all"
              >
                <span>{t.hero.cta}</span>
                <I.ArrowRight size={16} className={lang === 'ar' ? 'flip-x' : ''} />
              </button>
              <button
                onClick={() => goTo('services')}
                className="inline-flex items-center gap-2.5 px-7 py-3.5 rounded-full glass-strong text-white font-medium text-[14px] hover:border-white/20 transition"
              >
                <span>{t.hero.ctaSecondary}</span>
              </button>
            </div>

            {/* stats strip */}
            <div className="mt-14 grid grid-cols-3 max-w-2xl gap-px bg-white/8 rounded-2xl overflow-hidden ring-stroke">
              {[
                { l: t.hero.stat1Label, v: t.hero.stat1Value },
                { l: t.hero.stat2Label, v: t.hero.stat2Value },
                { l: t.hero.stat3Label, v: t.hero.stat3Value },
              ].map((s, i) => (
                <div key={i} className="bg-ink-950 px-5 py-4">
                  <div className="text-[11px] uppercase tracking-wider text-white/45 mb-1.5" style={{ fontFamily: 'Inter, sans-serif', letterSpacing: '0.12em' }}>
                    {s.l}
                  </div>
                  <div className={`text-white font-semibold ${lang === 'ar' ? 'text-[15px]' : 'text-[14px]'}`} style={{ fontFamily: lang === 'en' || /[A-Za-z]/.test(s.v) ? 'Inter, sans-serif' : undefined }}>
                    {s.v}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* visual: orbital horizon */}
          <div className="lg:col-span-5 relative reveal in">
            <HeroVisual />
          </div>
        </div>

        {/* scroll cue */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/40">
          <span className="text-[10px] uppercase tracking-[0.2em]" style={{ fontFamily: 'Inter, sans-serif' }}>{t.hero.scroll}</span>
          <I.ArrowDown size={14} className="scroll-bounce" />
        </div>
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="relative aspect-square max-w-md mx-auto">
      {/* concentric orbits */}
      <svg viewBox="0 0 400 400" className="w-full h-full">
        <defs>
          <linearGradient id="orb-grad" x1="0" y1="0" x2="400" y2="400">
            <stop offset="0" stopColor="#3B82F6" stopOpacity="0.6" />
            <stop offset="0.5" stopColor="#A855F7" stopOpacity="0.6" />
            <stop offset="1" stopColor="#06B6D4" stopOpacity="0.6" />
          </linearGradient>
          <linearGradient id="orb-fill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#A855F7" stopOpacity="0.25" />
            <stop offset="1" stopColor="#3B82F6" stopOpacity="0.05" />
          </linearGradient>
          <radialGradient id="core-grad" cx="0.5" cy="0.5">
            <stop offset="0" stopColor="#A855F7" />
            <stop offset="0.5" stopColor="#3B82F6" />
            <stop offset="1" stopColor="#06B6D4" />
          </radialGradient>
        </defs>

        {/* outer rings */}
        {[180, 145, 110].map((r, i) => (
          <circle key={r} cx="200" cy="200" r={r} fill="none" stroke="url(#orb-grad)" strokeWidth={i === 1 ? 1.2 : 0.6} strokeDasharray={i === 0 ? '2 6' : i === 2 ? '1 4' : '0'} opacity={0.55 - i * 0.1}>
            <animateTransform attributeName="transform" type="rotate" from={`${i * 30} 200 200`} to={`${360 + i * 30} 200 200`} dur={`${30 + i * 12}s`} repeatCount="indefinite" />
          </circle>
        ))}

        {/* horizon arc */}
        <path d="M40 240 Q200 100 360 240" fill="none" stroke="url(#orb-grad)" strokeWidth="1.5" opacity="0.6" />
        <path d="M40 240 L360 240" stroke="rgba(255,255,255,0.1)" strokeWidth="0.8" />

        {/* sun core */}
        <circle cx="200" cy="240" r="28" fill="url(#core-grad)" />
        <circle cx="200" cy="240" r="44" fill="url(#orb-fill)" />

        {/* orbit dots */}
        {[
          { r: 180, a: 30, c: '#06B6D4' },
          { r: 180, a: 200, c: '#A855F7' },
          { r: 145, a: 130, c: '#3B82F6' },
          { r: 110, a: 290, c: '#06B6D4' },
        ].map((d, i) => {
          const x = 200 + d.r * Math.cos((d.a * Math.PI) / 180);
          const y = 200 + d.r * Math.sin((d.a * Math.PI) / 180);
          return <circle key={i} cx={x} cy={y} r="3" fill={d.c} />;
        })}

        {/* small data nodes around */}
        <g opacity="0.7">
          <rect x="60" y="60" width="64" height="22" rx="6" className="hero-node-bg" fill="rgba(15,17,32,0.85)" stroke="rgba(255,255,255,0.12)" />
          <text x="92" y="74" fontSize="10" fill="#9CB0FF" fontFamily="JetBrains Mono, monospace" textAnchor="middle" className="hero-node-text">api/v1</text>

          <rect x="280" y="80" width="78" height="22" rx="6" className="hero-node-bg" fill="rgba(15,17,32,0.85)" stroke="rgba(255,255,255,0.12)" />
          <text x="319" y="94" fontSize="10" fill="#C4B5FD" fontFamily="JetBrains Mono, monospace" textAnchor="middle" className="hero-node-text">queue.live</text>

          <rect x="50" y="320" width="86" height="22" rx="6" className="hero-node-bg" fill="rgba(15,17,32,0.85)" stroke="rgba(255,255,255,0.12)" />
          <text x="93" y="334" fontSize="10" fill="#67E8F9" fontFamily="JetBrains Mono, monospace" textAnchor="middle" className="hero-node-text">realtime: ok</text>

          <rect x="270" y="320" width="80" height="22" rx="6" className="hero-node-bg" fill="rgba(15,17,32,0.85)" stroke="rgba(255,255,255,0.12)" />
          <text x="310" y="334" fontSize="10" fill="#FDA4AF" fontFamily="JetBrains Mono, monospace" textAnchor="middle" className="hero-node-text">ofuq.tech</text>
        </g>
      </svg>

      {/* glassy card on top */}
      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 glass-strong rounded-2xl px-5 py-3 flex items-center gap-3" style={{ direction: 'ltr' }}>
        <span className="relative flex h-2 w-2">
          <span className="absolute inset-0 rounded-full bg-emerald-400 animate-ping opacity-60" />
          <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400" />
        </span>
        <span className="text-[11px] uppercase tracking-[0.2em] text-white/70" style={{ fontFamily: 'Inter, sans-serif' }}>shipping new</span>
        <span className="text-[11px] text-white/50" style={{ fontFamily: 'JetBrains Mono, monospace' }}>v1.0</span>
      </div>
    </div>
  );
}

window.Hero = Hero;