/* Facial Biometrics — auto-cycling mini sequence inside the project card.
   1) Scan (landing/key image): glowing scanner panel, face mesh, a scan line
      sweeping up & down, with a typed "tracking" caption.
   2) Features: three capability cards animating in.
   3) One identity: closing statement with type-on motion.
   Loops. */

const { useState: fbUseState, useEffect: fbUseEffect } = React;

/* types `text` once on mount; remounted (via key) each time its slide enters */
function TypeOn({ text, speed = 55, start = 280, className, caret = true }) {
  const [n, setN] = fbUseState(0);
  fbUseEffect(() => {
    let iv;
    const s = setTimeout(() => {
      iv = setInterval(() => {
        setN((v) => {
          if (v + 1 >= text.length) clearInterval(iv);
          return Math.min(v + 1, text.length);
        });
      }, speed);
    }, start);
    return () => { clearTimeout(s); clearInterval(iv); };
  }, [text, speed, start]);
  const done = n >= text.length;
  return (
    <span className={className}>
      {text.slice(0, n)}
      {caret ? <span className="fb-caret" style={{ opacity: done ? undefined : 1 }}></span> : null}
    </span>);
}

const FB_FEATURES = [
  { dot: "fb-d1", label: "Biometric Enrollment", title: "Active & Secure", card: "fb-f1" },
  { dot: "fb-d2", label: "Consent Management", title: "User Controlled", card: "fb-f2" },
  { dot: "fb-d3", label: "Privacy Settings", title: "Always Transparent", card: "fb-f3" }];

const FB_DUR = [4600, 3900, 4400];

function FaceBiometrics() {
  const [i, setI] = fbUseState(0);
  const [cycle, setCycle] = fbUseState(0);
  fbUseEffect(() => {
    const t = setTimeout(() => {
      setI((prev) => {
        const next = (prev + 1) % 3;
        if (next === 0) setCycle((c) => c + 1);
        return next;
      });
    }, FB_DUR[i]);
    return () => clearTimeout(t);
  }, [i]);

  return (
    <div className="fb-stage">
      {/* Slide 1 — scan */}
      <div className={"fb-slide fb-scan" + (i === 0 ? " active" : "")}>
        <div className="fb-scanner">
          <img className="fb-face" src="assets/face-mesh.png?v=1" alt="" />
          <div className="fb-scanline"></div>
        </div>
        <div className="fb-caption">
          {i === 0 ? <TypeOn key={"scan" + cycle} text="Tracking facial geometry" speed={46} caret={false} /> : null}
        </div>
      </div>

      {/* Slide 2 — features */}
      <div className={"fb-slide" + (i === 1 ? " active" : "")}>
        <div className={"fb-cards" + (i === 1 ? " in" : "")} key={"cards" + cycle}>
          {FB_FEATURES.map((f, k) =>
            <div className={"fb-fcard " + f.card} key={k}>
              <div className={"fb-dot " + f.dot}></div>
              <div>
                <div className="fb-flabel">{f.label}</div>
                <div className="fb-ftitle">{f.title}</div>
              </div>
            </div>)}
        </div>
      </div>

      {/* Slide 3 — one identity */}
      <div className={"fb-slide" + (i === 2 ? " active" : "")}>
        <div className="fb-id">
          <div className="fb-id-title">
            {i === 2 ? <TypeOn key={"id" + cycle} text="One identity" speed={78} caret={false} /> : <span>One identity</span>}
          </div>
          <div className="fb-id-sub">
            {i === 2 ? <TypeOn key={"sub" + cycle} text="Across every channel" speed={52} start={1500} caret={false} /> : null}
          </div>
        </div>
      </div>
    </div>);
}

Object.assign(window, { FaceBiometrics });