/* How it works — 4 step process with sticky timeline. */

const STEPS = [
  {
    n: "01",
    title: "Konzultace zdarma",
    desc: "Zmapujeme vaše aktivum, právní strukturu a cíle. Bez závazku, bez fakturace. Po hovoru víte, jestli má tokenizace pro vás smysl.",
    detail: "30 min · online · NDA na vyžádání",
    icon: "chart",
  },
  {
    n: "02",
    title: "Návrh struktury",
    desc: "Připravíme právní wrapper, ekonomický model, distribuci výnosů a parametry tokenu. Vy schvalujete každý krok.",
    detail: "5–10 pracovních dní",
    icon: "lock",
  },
  {
    n: "03",
    title: "Vydání tokenu",
    desc: "Postavíme smart contract, nasadíme ho na vybranou síť, propojíme s KYC/AML providerem a otevřeme primární prodej.",
    detail: "audit · KYC · custody",
    icon: "bars",
  },
  {
    n: "04",
    title: "Provoz a výplaty",
    desc: "Distribuce výnosů investorům běží automaticky. Reportujeme, řešíme dotazy, držíme compliance.",
    detail: "automatizace · měsíční report",
    icon: "leaf",
  },
];

const HowItWorks = () => {
  const [activeIdx, setActiveIdx] = React.useState(0);
  const refs = React.useRef([]);

  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const idx = Number(e.target.dataset.idx);
            setActiveIdx(idx);
          }
        });
      },
      { rootMargin: "-40% 0px -40% 0px", threshold: 0 }
    );
    refs.current.forEach((el) => el && obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <section className="how" id="jak">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">Jak to funguje</span>
          <h2 className="h1">Od myšlenky k vydanému tokenu <span className="hl">za 4 kroky</span></h2>
          <p className="lead section-head__lead">
            Vedeme vás celým procesem. Vy se soustředíte na své aktivum, my na strukturu, právo a technologii.
          </p>
        </div>

        <div className="how__layout">
          <aside className="how__sticky">
            <div className="how__progress">
              {STEPS.map((s, i) => (
                <div key={s.n} className={`how__bullet ${i === activeIdx ? "how__bullet--active" : ""} ${i < activeIdx ? "how__bullet--done" : ""}`}>
                  <span className="how__bullet-num">{s.n}</span>
                  <span className="how__bullet-title">{s.title}</span>
                </div>
              ))}
            </div>
            <div className="how__visual">
              <Coin icon={STEPS[activeIdx].icon} size={140}/>
              <div className="how__visual-meta">
                <span className="eyebrow">Krok {STEPS[activeIdx].n}</span>
                <strong>{STEPS[activeIdx].detail}</strong>
              </div>
            </div>
          </aside>

          <div className="how__steps">
            {STEPS.map((s, i) => (
              <article
                key={s.n}
                ref={(el) => (refs.current[i] = el)}
                data-idx={i}
                className="how__step"
              >
                <div className="how__step-num">{s.n}</div>
                <h3 className="how__step-title h2">{s.title}</h3>
                <p className="how__step-desc lead">{s.desc}</p>
                <span className="how__step-meta">{s.detail}</span>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;