// Hero — large typography, dynamic mesh background, typewriter on accent line
const { useEffect, useRef, useState: useStateHero } = React;

function Reveal({ children, delay = 0, as: Tag = 'div', ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reveal = () => el.classList.add('is-in');
    const check = () => {
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (rect.top < vh * 0.92 && rect.bottom > 0) { reveal(); return true; }
      return false;
    };
    if (check()) return;
    const onScroll = () => { if (check()) {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    } };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    const safety = window.setTimeout(reveal, 1200);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      window.clearTimeout(safety);
    };
  }, []);
  return (
    <Tag ref={ref} data-reveal style={{ transitionDelay: delay + 'ms' }} {...rest}>
      {children}
    </Tag>
  );
}

// Typewriter that re-runs whenever `text` changes (language switch).
// Reveal-pacing: ~45ms/char with a 400ms head-start.
function useTypewriter(text, opts = {}) {
  const { speed = 48, startDelay = 400 } = opts;
  const [out, setOut] = useStateHero('');
  const [done, setDone] = useStateHero(false);
  useEffect(() => {
    setOut('');
    setDone(false);
    let i = 0;
    let raf = null;
    const start = performance.now() + startDelay;
    const step = (now) => {
      if (now < start) { raf = requestAnimationFrame(step); return; }
      const target = Math.min(text.length, Math.floor((now - start) / speed));
      if (target !== i) {
        i = target;
        setOut(text.slice(0, i));
      }
      if (i < text.length) raf = requestAnimationFrame(step);
      else setDone(true);
    };
    raf = requestAnimationFrame(step);
    return () => { if (raf) cancelAnimationFrame(raf); };
  }, [text, speed, startDelay]);
  return [out, done];
}

function Hero({ copy }) {
  const [typed, typedDone] = useTypewriter(copy.title[1], { speed: 60, startDelay: 700 });
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__bg" aria-hidden="true">
        <div className="hero__grid" />
        <div className="hero__noise" />
      </div>
      <div className="container hero__inner">
        <Reveal>
          <div className="eyebrow-dot hero__eyebrow">{copy.eyebrow}</div>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="hero__title">
            {copy.title[0]}<br />
            <span className="grad typed" aria-label={copy.title[1]}>
              {typed}
              {!typedDone && <span className="caret" aria-hidden="true" />}
            </span>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="hero__sub">{copy.sub}</p>
        </Reveal>
        <Reveal delay={240}>
          <div className="hero__cta">
            <a className="btn btn--primary" href="/app.html">
              {copy.ctaPrimary}<span className="arrow">→</span>
            </a>
          </div>
        </Reveal>
        <Reveal delay={360}>
          <div className="hero__meta">
            <span className="hero__meta-line" />
            <span>{copy.meta}</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Reveal, useTypewriter });