// Intro / landing animated moment
const { useState, useEffect, useRef } = React;

function Intro({ onDone }) {
  const [phase, setPhase] = useState(0);
  // phase 0: counter counting up, 1: name reveal, 2: fade out
  const [count, setCount] = useState(0);
  const startRef = useRef(null);

  useEffect(() => {
    startRef.current = performance.now();
    let raf;
    const DURATION = 1600;
    const tick = (t) => {
      const elapsed = t - startRef.current;
      const p = Math.min(elapsed / DURATION, 1);
      // ease-out
      const eased = 1 - Math.pow(1 - p, 3);
      setCount(Math.floor(eased * 100));
      if (p < 1) {
        raf = requestAnimationFrame(tick);
      } else {
        setPhase(1);
        setTimeout(() => setPhase(2), 900);
        setTimeout(() => onDone && onDone(), 1500);
      }
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const pad = (n) => String(n).padStart(3, "0");

  return (
    <div className={`intro ${phase >= 2 ? "intro--out" : ""}`}>
      <div className="intro__grid">
        <div className="intro__tl mono">
          <div>MAPA LÓPEZ</div>
          <div className="muted">MX · 2016 — 2026</div>
        </div>
        <div className="intro__tr mono muted">
          <div>CARGANDO MUESTRA</div>
          <div>{pad(count)} / 100</div>
        </div>
        <div className="intro__center">
          {phase >= 1 ? (
            <div className="intro__name">
              <span className="intro__name-line">MAPA</span>
              <span className="intro__name-line">LÓPEZ</span>
            </div>
          ) : (
            <div className="intro__bar-wrap mono">
              <div className="intro__bar">
                <div
                  className="intro__bar-fill"
                  style={{ width: `${count}%` }}
                />
              </div>
              <div className="intro__bar-meta">
                <span>FRAME {pad(count * 3)}</span>
                <span>ISO 1600</span>
                <span>f/1.4</span>
                <span>1/125s</span>
              </div>
            </div>
          )}
        </div>
        <div className="intro__bl mono muted">
          <div>FOTOGRAFÍA · DOCUMENTAL · PRODUCCIÓN AUDIOVISUAL</div>
        </div>
        <div className="intro__br mono muted">
          <div>N 19.4326°</div>
          <div>W 99.1332°</div>
        </div>
      </div>
    </div>
  );
}

window.Intro = Intro;