const ROADMAP_DATES = [
  { when: 'Q4 2022', date: new Date(2022, 11, 31), key: 's1' },
  { when: 'Q2 2025', date: new Date(2025, 5, 30), key: 's2' },
  { when: 'Q2 2026', date: new Date(2026, 5, 30), key: 's3' },
  { when: 'Q1 2027', date: new Date(2027, 2, 31), key: 's4' },
];

function getState(date, now, all) {
  if (date > now) return 'next';
  const lastPast = [...all].reverse().find(s => s.date <= now);
  if (lastPast && date.getTime() === lastPast.date.getTime()) return 'current';
  return 'done';
}

function calcProgress() {
  const now = new Date();
  const dates = ROADMAP_DATES.map(s => s.date);
  const last = dates.length - 1;

  if (now <= dates[0]) return 0;
  if (now >= dates[last]) return 100;

  for (let i = 0; i < last; i++) {
    if (now >= dates[i] && now <= dates[i + 1]) {
      const segProgress = (now - dates[i]) / (dates[i + 1] - dates[i]);
      return (i + segProgress) / last * 100;
    }
  }
  return 0;
}

function Roadmap() {
  const { t } = window.useT();
  const now = new Date();
  const steps = ROADMAP_DATES.map(s => ({
    ...s,
    title: t(`roadmap.${s.key}.title`),
    desc: t(`roadmap.${s.key}.desc`),
    state: getState(s.date, now, ROADMAP_DATES),
  }));

  return (
    <section className="roadmap">
      <div className="container">
        <div className="roadmap-header">
          <div className="hero-kicker roadmap-kicker">
            <span className="dot"></span>
            <span>{t('roadmap.kicker')}</span>
          </div>
          <span className="eyebrow">{t('roadmap.eyebrow')}</span>
          <h2>{t('roadmap.title')}</h2>
        </div>
        <div className="roadmap-track">
          <div className="roadmap-line">
            <div className="roadmap-line-progress" style={{ width: calcProgress() + '%' }}></div>
          </div>
          {steps.map((s, i) => (
            <div className={`roadmap-step ${s.state}`} key={i}>
              <div className="roadmap-dot"></div>
              <div className="when">{s.when}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Roadmap = Roadmap;