// How it works — animated 4 steps
const HowItWorks = ({ t, lang }) => {
  const [active, setActive] = React.useState(0);
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const ob = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setInView(true); });
    }, { threshold: 0.25 });
    ob.observe(ref.current);
    return () => ob.disconnect();
  }, []);

  React.useEffect(() => {
    if (!inView) return;
    const id = setInterval(() => setActive(a => (a + 1) % 4), 2800);
    return () => clearInterval(id);
  }, [inView]);

  const Visual = () => {
    if (active === 0) return (
      <div className="hv-screen">
        <div className="hv-row hv-input">
          <span className="mono hv-prefix">+7</span>
          <span className="mono hv-typing">9{"·".repeat(2)} {"·".repeat(3)} {"·".repeat(2)} {"·".repeat(2)}</span>
        </div>
        <div className="hv-otp">
          {[1,2,3,4].map(i => <div key={i} className={`hv-otp-cell ${i <= 3 ? "filled" : ""}`}>{i <= 3 ? "•" : ""}</div>)}
        </div>
        <div className="hv-cap mono">SMS · 4 digits</div>
      </div>
    );
    if (active === 1) return (
      <div className="hv-screen">
        <div className="hv-passport">
          <div className="hv-pp-photo">
            <svg viewBox="0 0 40 40" width="40" height="40"><circle cx="20" cy="15" r="6" fill="var(--ink-4)"/><path d="M6 36 C 8 26, 32 26, 34 36 Z" fill="var(--ink-4)"/></svg>
          </div>
          <div className="hv-pp-data">
            <div className="hv-pp-line"><span className="mono">NAME</span><b>RAVI K.</b></div>
            <div className="hv-pp-line"><span className="mono">DOB</span><b>2003-04-12</b></div>
            <div className="hv-pp-line"><span className="mono">ID</span><b className="mono">P1238••</b></div>
          </div>
        </div>
        <div className="hv-check"><span className="check-dot" />{lang === "ru" ? "Документы приняты" : "Documents accepted"}</div>
      </div>
    );
    if (active === 2) return (
      <div className="hv-screen">
        <div className="hv-iban">
          <div className="hv-iban-lbl mono">IBAN</div>
          <div className="hv-iban-num mono">DE89 3704 0044 0532 0130 00</div>
        </div>
        <div className="hv-methods">
          {["IBAN","Card","USDT","WeChat"].map((m,i) => (
            <div key={m} className={`hv-method ${i === 0 ? "on" : ""}`}>{m}</div>
          ))}
        </div>
      </div>
    );
    return (
      <div className="hv-screen">
        <div className="hv-payout">
          <div className="hv-pay-row">
            <span>{lang === "ru" ? "Сумма" : "Amount"}</span>
            <b className="mono">₽ 76 240</b>
          </div>
          <div className="hv-pay-row">
            <span>{lang === "ru" ? "Получатель" : "To"}</span>
            <b>ПСБ · +7•• 4421</b>
          </div>
          <div className="hv-pay-row">
            <span>{lang === "ru" ? "Способ" : "Rail"}</span>
            <b className="mono">СБП</b>
          </div>
        </div>
        <div className="hv-success"><span className="check-dot" />{lang === "ru" ? "Отправлено" : "Sent"}</div>
      </div>
    );
  };

  return (
    <section className="how" id="how" ref={ref}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">{t.how.eyebrow}</div>
          <h2 className="h-section">{t.how.title_a}<em>{t.how.title_em}</em></h2>
        </div>

        <div className="how-grid">
          <div className="how-steps">
            {t.how.steps.map((s, i) => (
              <button
                key={i}
                className={`how-step ${active === i ? "on" : ""} ${i < active ? "done" : ""}`}
                onClick={() => setActive(i)}
              >
                <div className="hs-num mono">0{i+1}</div>
                <div className="hs-body">
                  <div className="hs-title">{s.t}</div>
                  <div className="hs-desc">{s.d}</div>
                  {active === i && <div className="hs-progress"><div className="hs-progress-bar" /></div>}
                </div>
              </button>
            ))}
          </div>

          <div className="how-visual">
            <div className="hv-frame">
              <div className="hv-chrome">
                <div className="hv-dot" /><div className="hv-dot" /><div className="hv-dot" />
                <div className="hv-chrome-title mono">step {active + 1} / 4</div>
              </div>
              <div className="hv-content" key={active}>
                <Visual />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.HowItWorks = HowItWorks;