/* Animated monogram lockup intro */
const { useEffect, useRef, useState } = React;

const Intro = ({ onDone, skip }) => {
  const [phase, setPhase] = useState(0);
  // 0: V draws, 1: F draws, 2: rule + name, 3: dissolve
  const wrapRef = useRef(null);
  const vRef = useRef(null);
  const fRef = useRef(null);
  const ruleRef = useRef(null);
  const nameRef = useRef(null);
  const overlayRef = useRef(null);

  useEffect(() => {
    if (skip) {
      if (overlayRef.current) overlayRef.current.style.display = "none";
      onDone && onDone();
      document.body.classList.remove("no-scroll");
      return;
    }
    document.body.classList.add("no-scroll");

    const v = vRef.current, f = fRef.current, rule = ruleRef.current, name = nameRef.current, overlay = overlayRef.current;
    if (!v || !f || !rule || !name || !overlay) return;

    // initial state
    v.style.opacity = "0";
    v.style.transform = "translateY(40px)";
    v.style.filter = "blur(8px)";
    f.style.opacity = "0";
    f.style.transform = "translateY(40px)";
    f.style.filter = "blur(8px)";
    rule.style.width = "0";
    name.style.opacity = "0";
    name.style.letterSpacing = "1.2em";

    const t1 = setTimeout(() => {
      v.style.transition = "opacity 1100ms cubic-bezier(0.2,0.7,0.2,1), transform 1100ms cubic-bezier(0.2,0.7,0.2,1), filter 1100ms";
      v.style.opacity = "1"; v.style.transform = "translateY(0)"; v.style.filter = "blur(0)";
    }, 250);
    const t2 = setTimeout(() => {
      f.style.transition = "opacity 1100ms cubic-bezier(0.2,0.7,0.2,1), transform 1100ms cubic-bezier(0.2,0.7,0.2,1), filter 1100ms";
      f.style.opacity = "1"; f.style.transform = "translateY(0)"; f.style.filter = "blur(0)";
    }, 700);
    const t3 = setTimeout(() => {
      rule.style.transition = "width 900ms cubic-bezier(0.2,0.7,0.2,1)";
      rule.style.width = "180px";
    }, 1500);
    const t4 = setTimeout(() => {
      name.style.transition = "opacity 800ms ease, letter-spacing 1200ms cubic-bezier(0.2,0.7,0.2,1)";
      name.style.opacity = "1";
      name.style.letterSpacing = "0.5em";
    }, 1800);
    const t5 = setTimeout(() => {
      overlay.style.transition = "opacity 900ms cubic-bezier(0.4,0,0.2,1), transform 1200ms cubic-bezier(0.4,0,0.2,1)";
      overlay.style.opacity = "0";
      overlay.style.transform = "scale(1.04)";
    }, 3300);
    const t6 = setTimeout(() => {
      overlay.style.display = "none";
      document.body.classList.remove("no-scroll");
      onDone && onDone();
    }, 4300);

    return () => [t1, t2, t3, t4, t5, t6].forEach(clearTimeout);
  }, [skip]);

  return (
    <div className="intro" ref={overlayRef}>
      <div className="intro-wrap">
        <div className="intro-monogram">
          <span ref={vRef} style={{ display: "inline-block" }}>V</span>
          <span ref={fRef} style={{ display: "inline-block" }}>F</span>
        </div>
        <div className="intro-rule" ref={ruleRef}></div>
        <div className="intro-name" ref={nameRef}>VILLA · FRANCESCA</div>
      </div>
    </div>
  );
};

window.Intro = Intro;