function Timeline() {
  const { t } = useApp();
  const now = new Date();
  const dDay = new Date("2026-05-22T00:00:00+07:00");

  // 각 아이템의 상태(과거/현재/미래) 계산 — 단순 규칙: 월 단위
  const status = (when) => {
    // 'YYYY. MM' 또는 'YYYY. MM. DD' 형태
    const m = when.match(/(\d{4})\.\s*(\d{1,2})(?:[-–.]|\s|$)/);
    if (!m) return "future";
    const y = +m[1], mo = +m[2];
    const end = new Date(y, mo, 1); // 그 달 말
    const start = new Date(y, mo - 1, 1);
    if (now >= end) return "past";
    if (now >= start) return "current";
    return "future";
  };

  return (
    <section className="timeline-wrap section-pad" id="timeline" aria-label={t.a11y?.timelineSection}>
      <div className="container">
        <div className="reveal" style={{maxWidth:"56ch"}}>
          <div className="eyebrow" style={{marginBottom:"18px"}}>{t.timeline.eyebrow}</div>
          <h2 className="h-section">{t.timeline.title}</h2>
          <p className="body-lg" style={{marginTop:"20px"}}>{t.timeline.lede}</p>
        </div>

        <ol className="timeline">
          {t.timeline.items.map((item, i) => {
            // D-Day 아이템은 항상 현재로 처리하여 강조
            const isDDay = item.when.includes("05. 22");
            let s = status(item.when);
            if (isDDay && now < dDay) s = "current";
            const side = i % 2 === 0 ? "tl-right" : "tl-left";
            return (
              <li key={i} className={`tl-item is-${s} ${side} reveal`}>
                <div className="tl-dot" />
                <div className="tl-body">
                  <div className="tl-when">
                    <span>{item.when}</span>
                    {item.tag && <span className="tl-tag">{item.tag}</span>}
                  </div>
                  <h3 className="tl-title">{item.title}</h3>
                  <p className="tl-desc">{item.desc}</p>
                </div>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

window.Timeline = Timeline;