/* Hero — manifesto with assemble-on-scroll + colorful highlights + moving stripe */

function AsmText({ text, baseDelay = 0, dir = "rtl" }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          el.classList.add('is-asm');
          io.unobserve(el);
        }
      });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // deterministic pseudo-random per index
  const r = (seed) => {
    const v = Math.sin(seed * 12.9898 + 78.233) * 43758.5453;
    return v - Math.floor(v);
  };

  const letters = Array.from(text).map((ch, i) => {
    if (ch === ' ') return <span key={i} className="sp-asm-l sp-asm-sp">&nbsp;</span>;
    const tx  = (r(i + 1) - 0.5) * 240;
    const ty  = (r(i + 11) - 0.5) * 200;
    const rot = (r(i + 21) - 0.5) * 60;
    const sc  = 0.4 + r(i + 31) * 0.6;
    return (
      <span
        key={i}
        className="sp-asm-l"
        style={{
          ['--tx']: `${tx.toFixed(1)}px`,
          ['--ty']: `${ty.toFixed(1)}px`,
          ['--rot']: `${rot.toFixed(1)}deg`,
          ['--sc']: sc.toFixed(2),
          ['--d']: `${(baseDelay + i * 0.045).toFixed(2)}s`
        }}
      >{ch}</span>
    );
  });

  return <span className="sp-asm" ref={ref} dir={dir}>{letters}</span>;
}
window.AsmText = AsmText;

function Hero() {
  return (
    <section className="sp-hero" data-screen-label="Hero">
      <span className="sp-section-num">/01</span>
      <span className="sp-section-meta">HERO · MANIFESTO</span>
      <div>
        <div className="sp-eyebrow-row">
          <span className="sp-eyebrow">EST. 2012 · BRANDING / MEDIA / PERFORMANCE</span>
          <span className="sp-eyebrow-line"></span>
        </div>

        <h1 className="sp-display sp-headline-rich" dir="rtl">
          <span className="sp-line-row">
            <AsmText text="משרד" baseDelay={0} />
          </span>
          <span className="sp-line-row">
            <span className="sp-w-blue sp-w-stripe">
              <AsmText text="פרסום" baseDelay={0.18} />
            </span>
          </span>
          <span className="sp-line-row">
            <AsmText text="בדיגיטל" baseDelay={0.36} />
            <span className="sp-period-dot">.</span>
          </span>
        </h1>

        <p className="lead" dir="rtl">
          שלוש עשרה שנים של פרסום שעובד. קמפיינים שמוכרים, מותגים שזוכרים, ומדיה שמחזירה את ההשקעה — מואצים על ידי <span className="sp-pill-ai">AI</span>.
        </p>
        <div className="cta-row">
          <button className="sp-btn" data-cursor-magnetic dir="rtl"><span className="arrow">←</span><span>בואו נדבר</span></button>
          <div className="stat"><span className="num">13Y</span><span className="label">on the market</span></div>
          <div className="stat"><span className="num">400+</span><span className="label">campaigns shipped</span></div>
        </div>
      </div>
      <Cube/>
    </section>
  );
}
window.Hero = Hero;