/* Hero — one promise, one primary action. Parallax is limited to decorative
   patterns; the content block itself never transforms. */

function Hero({ lang, t }) {
  const p1Ref = React.useRef(null);
  const p2Ref = React.useRef(null);

  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        if (p1Ref.current) p1Ref.current.style.transform = `translate3d(0, ${y * 0.14}px, 0) rotate(${y * 0.015}deg)`;
        if (p2Ref.current) p2Ref.current.style.transform = `translate3d(0, ${-y * 0.1}px, 0) rotate(${-y * 0.012}deg)`;
        raf = null;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  return (
    <section className="hero" id="hero">
      <div className="hero-grid-bg"></div>
      <div ref={p1Ref} className="hero-pattern hero-pattern-1"><GeoPattern /></div>
      <div ref={p2Ref} className="hero-pattern hero-pattern-2"><GeoPattern /></div>

      <div className="hero-content">
        <div className="hero-tag">
          <span className="hero-tag-pill hero-tag-shine">{t.hero.tag_label}</span>
          <span>{t.hero.tag_text}</span>
        </div>

        <h1 className="hero-title">
          <SplitWords text={t.hero.title_1} />{' '}
          <span className="accent">
            <SplitWords text={t.hero.title_3} delay={220} />
            <svg viewBox="0 0 200 14" preserveAspectRatio="none" aria-hidden="true"><path d="M2 8 Q 50 2, 100 8 T 198 6" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" /></svg>
          </span>
          {lang === 'ar' ? <> {t.hero.title_2} {t.hero.title_4}</> : <> {t.hero.title_2}{t.hero.title_4}</>}
        </h1>

        <p className="hero-sub">{t.hero.sub}</p>

        <div className="hero-actions">
          <a href="https://app2.lamha.sa/register" className="btn btn-primary">
            {t.hero.cta_primary}
            <span className="arrow">{Icons.arrow}</span>
          </a>
          <a href="https://app2.lamha.sa/" className="btn btn-ghost">{t.hero.cta_secondary}</a>
        </div>
      </div>

      <div className="hero-foot">
        <div className="hero-foot-stat">
          <div className="num"><CountUp value={t.hero.stat1_num} /></div>
          <div className="label">{t.hero.stat1_label}</div>
        </div>
        <div className="hero-foot-stat">
          <div className="num"><CountUp value={t.hero.stat2_num} /></div>
          <div className="label">{t.hero.stat2_label}</div>
        </div>
        <div className="hero-foot-stat">
          <div className="num"><CountUp value="+1M" /></div>
          <div className="label">{lang === 'ar' ? 'شحنة ناجحة' : 'successful shipments'}</div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;