// Vertical milestone timeline — no overlapping labels, smooth fill animation
function Roadmap() {
  const [progress, setProgress] = React.useState(0);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      if (!wrapRef.current) return;
      const r = wrapRef.current.getBoundingClientRect();
      const start = window.innerHeight * 0.85;
      const end = window.innerHeight * 0.2;
      const t = Math.max(0, Math.min(1, (start - r.top) / (start - end + r.height * 0.5)));
      setProgress(t);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nodes = [
    { title: "Старт", sub: "Опитування", desc: "Кілька запитань про предмети, цілі та поточний рівень. На основі відповідей ШІ формує персональний план підготовки саме під тебе.", icon: "rocket", days: "День 1" },
    { title: "Базовий", sub: "Фундамент", desc: "Найважливіші теми, які з'являються на НМТ найчастіше. Гарантовані 100+ балів.", icon: "book", days: "Тижні 1–2" },
    { title: "Середній", sub: "Складніші теми", desc: "Прокачуєш ті розділи, де помиляєшся найбільше. Адаптивний алгоритм підбирає саме твої прогалини.", icon: "brain", days: "Тижні 3–5" },
    { title: "Поглиблений", sub: "Тонкі моменти", desc: "Каверзні формулювання, рідкісні правила, винятки. Те, що відрізняє 170 балів від 190.", icon: "target", days: "Тижні 6–8" },
    { title: "Експерт", sub: "Бойовий режим", desc: "Симуляція повного НМТ із таймером і форматом. Ти проживаєш іспит ще до іспиту.", icon: "flame", days: "Тиждень 9" },
    { title: "200 балів", sub: "Готовність 100%", desc: "Спокійно йдеш на іспит. Ти знаєш, чого очікувати, бо вже здавав це десятки разів.", icon: "trophy", days: "День Х" },
  ];

  // index of current "active" node based on scroll
  const active = Math.min(nodes.length - 1, Math.floor(progress * nodes.length));

  return (
    <section className="section-pad">
      <div className="container">
        <span className="section-eyebrow">Твій шлях</span>
        <h2 className="section-title">Карта прогресу — від нуля до 200 балів</h2>
        <p className="section-sub">Чітка послідовність. Жодного «з чого почати?» — наступний крок завжди очевидний.</p>

        <div className="roadmap-v" ref={wrapRef}>
          <div className="rv-line">
            <div className="rv-fill" style={{ height: `${progress * 100}%` }}/>
          </div>
          {nodes.map((n, i) => {
            const isPassed = i <= active;
            const isCurrent = i === active;
            return (
              <div key={i} className={"rv-step " + (isPassed ? "passed " : "") + (isCurrent ? "current" : "")}>
                <div className="rv-node">
                  {isCurrent && <span className="rv-pulse"/>}
                  <Icon name={n.icon} size={22}/>
                </div>
                <div className="rv-card">
                  <div className="rv-meta">
                    <span className="tag" style={{
                      background: isPassed ? "#FFEDD5" : "var(--bg-2)",
                      color: isPassed ? "var(--o-700)" : "var(--muted)"
                    }}>{n.days}</span>
                    <span className="rv-step-num">Етап {String(i+1).padStart(2,"0")}</span>
                  </div>
                  <h3>{n.title} <span>· {n.sub}</span></h3>
                  <p>{n.desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.Roadmap = Roadmap;