/* WalletLab — cinematic hero */
function HeroCard({ stamps, total, justFilled }) {
  const c = window.CONTENT[window.LANG].hero;
  const cells = Array.from({ length: total }, (_, i) => i);
  return (
    <div className="loy-card" id="loy-card">
      <div className="loy-top">
        <div className="loy-brand">
          <div className="loy-logo">P</div>
          <div>
            <div className="loy-name">PizzaNShake</div>
            <div className="loy-sub">{c.cardSub}</div>
          </div>
        </div>
        <div className="loy-chip">&middot;9F2A</div>
      </div>
      <div className="loy-count">
        <span className="big">{stamps}<span className="of">/{total}</span></span>
        <span className="reward">{c.cardReward.replace("{n}", total)}</span>
      </div>
      <div className="loy-stamps">
        {cells.map(i => (
          <div key={i} className={"stamp " + (i < stamps ? "on" : "off") + " " + (justFilled === i ? "pop" : "")}>
            {i < stamps && <Icon name="check" size={13} sw={3} />}
          </div>
        ))}
      </div>
      <div className="loy-bar"><div className="loy-fill" style={{ width: `${(stamps / total) * 100}%` }}></div></div>
      <div className="loy-foot">
        <span>Marie Dupont</span>
        <span><strong>{total - stamps}</strong> {c.cardBefore}</span>
      </div>
    </div>
  );
}

function Hero() {
  const c = window.CONTENT[window.LANG];
  const fc = c.hero;
  const total = 10;
  const [stamps, setStamps] = useState(7);
  const [justFilled, setJustFilled] = useState(-1);
  const [pushOn, setPushOn] = useState(false);
  const [confetti, setConfetti] = useState([]);
  const stageRef = useRef(null);
  const heroRef = useRef(null);

  useEffect(() => {
    const el = heroRef.current;
    const id = requestAnimationFrame(() => requestAnimationFrame(() => el && el.classList.add("lit")));
    return () => cancelAnimationFrame(id);
  }, []);

  useEffect(() => {
    const t = setTimeout(() => setPushOn(true), 1300);
    return () => clearTimeout(t);
  }, []);

  useEffect(() => {
    const stage = stageRef.current; if (!stage) return;
    if (window.matchMedia("(pointer: coarse)").matches) return;
    const el = stage.querySelector(".stage-3d");
    let raf, tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e) => {
      const r = stage.getBoundingClientRect();
      tx = ((e.clientX - r.left) / r.width - 0.5) * 2;
      ty = ((e.clientY - r.top) / r.height - 0.5) * 2;
    };
    const loop = () => {
      cx += (tx - cx) * 0.06; cy += (ty - cy) * 0.06;
      if (el) el.style.transform = `rotateY(${cx * 9}deg) rotateX(${-cy * 7}deg)`;
      raf = requestAnimationFrame(loop);
    };
    window.addEventListener("mousemove", onMove);
    loop();
    return () => { window.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf); };
  }, []);

  const fireConfetti = () => {
    const colors = ["#2FD46A", "#0E9D5C", "#9FE8B8", "#F4FBF6"];
    const pieces = Array.from({ length: 26 }, (_, i) => ({
      id: Date.now() + i,
      left: 40 + Math.random() * 20,
      dx: (Math.random() - 0.5) * 240,
      delay: Math.random() * 0.15,
      color: colors[i % colors.length],
      rot: Math.random() * 360,
    }));
    setConfetti(pieces);
    setTimeout(() => setConfetti([]), 1400);
  };

  const addStamp = () => {
    setStamps(s => {
      if (s >= total) { return 0; }
      const ns = s + 1;
      setJustFilled(s);
      setTimeout(() => setJustFilled(-1), 500);
      if (ns >= total) fireConfetti();
      return ns;
    });
  };
  const reset = () => { setStamps(0); setJustFilled(-1); };

  const now = new Date();
  const localeMap = { fr: "fr-BE", en: "en-GB", nl: "nl-BE" };
  const dateStr = now.toLocaleDateString(localeMap[window.LANG] || "fr-BE", { weekday: "long", day: "numeric", month: "long" });
  const hour = now.getHours().toString().padStart(2, "0");
  const min  = now.getMinutes().toString().padStart(2, "0");

  return (
    <section className="hero" id="top" ref={heroRef}>
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="hero-eyebrow"><span className="pulse"></span>{fc.eyebrow}</div>
            <h1>
              <span className="reveal-line"><span>{fc.line1}</span></span>
              <span className="reveal-line"><span>{fc.line2}</span></span>
              <span className="reveal-line"><span className="em">{fc.em}</span></span>
            </h1>
            <p className="hero-sub">{fc.sub}</p>
            <div className="hero-actions">
              <button className="btn green" data-mag>{fc.primary}<Icon name="arrow" size={17} style={{ position: "relative" }} /></button>
              <button className="btn ghost" data-mag><Icon name="play" size={15} />{fc.secondary}</button>
            </div>
            <div className="hero-trust">
              <div className="avatars">
                {["SL", "KB", "LV", "MD"].map(a => <div key={a} className="av">{a}</div>)}
              </div>
              <div>
                <div className="hero-stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                <div>{fc.trust}</div>
              </div>
            </div>
          </div>

          <div className="hero-stage" ref={stageRef}>
            <div className="stage-3d">
              <div className="phone">
                <div className="phone-screen">
                  <div className="lock-glow"></div>
                  <div className="phone-notch"></div>
                  <div className="lock-time">
                    <div className="d">{dateStr}</div>
                    <div className="t">{hour}:{min}</div>
                  </div>
                  <div className={"push " + (pushOn ? "show" : "")}>
                    <div className="push-ic"><Icon name="wallet" size={20} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="push-meta">{fc.push.app}</div>
                      <div className="push-title">{fc.push.title}</div>
                      <div className="push-body">{fc.push.body}</div>
                    </div>
                  </div>
                </div>
              </div>
              <HeroCard stamps={stamps} total={total} justFilled={justFilled} />
              <div className="burst">
                {confetti.map(p => (
                  <span key={p.id} className="confetti" style={{
                    left: p.left + "%", background: p.color,
                    animation: `heroConfetti 1.2s ${p.delay}s var(--ease-out) forwards`,
                    "--dx": p.dx + "px", "--rot": p.rot + "deg",
                  }}></span>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="hero-card-ctl">
          <button className="mini-btn" onClick={addStamp} data-hot><Icon name="plus" size={15} />{fc.addStamp}</button>
          <button className="mini-btn ghost" onClick={reset} data-hot><Icon name="rotate" size={15} />Reset</button>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;