// Roadmap — vertical timeline tracking the 7 development phases.

function Roadmap() {
  const phases = [
    { tag: "Phase 1", title: "ProFamily Life MVP", when: "Now",     status: "In progress", desc: "Telegram bot, schedule, meals, reminders, breakfast & dinner planning, grocery lists, health reminders." },
    { tag: "Phase 2", title: "Memory Foundation",  when: "Q1 2026", status: "In progress", desc: "Save/edit/delete memory, family preferences, meal preferences, schedule preferences, child profile basics." },
    {
      tag: "Phase 3", title: "ProFamily Kids", when: "Q2 2026", status: "Planned",
      desc: "School reminders, homework & exams, activities, child profiles, growth notes, basic college planning.",
      links: [{ label: "LetsPlay", url: "https://lets-play-nine.vercel.app/", note: "Live now" }],
    },
    {
      tag: "Phase 4", title: "ProFamily Career", when: "Q3 2026", status: "Planned",
      desc: "Career goals, learning plans, certifications, resume & LinkedIn tasks, job search, Executive Signal sub-product.",
      links: [{ label: "Executive Signal", url: "https://www.mycareersignal.com/", note: "Live now" }],
    },
    { tag: "Phase 5", title: "ProFamily Money",    when: "Q4 2026", status: "Planned",     desc: "Bill reminders, subscriptions, expense entry, monthly budget, savings goals, wealth review, retirement reminders." },
    { tag: "Phase 6", title: "AI Enhancement",     when: "2027",    status: "Planned",     desc: "Natural-language parsing, smart schedule suggestions, busy-day meal suggestions, memory-based personalization." },
    { tag: "Phase 7", title: "Integrations",       when: "2027",    status: "Planned",     desc: "Google Calendar sync, Outlook (optional), document storage, bank integrations (later)." },
  ];

  return (
    <section className="vh-section" id="roadmap">
      <div className="vh-section-head">
        <div className="eyebrow">Roadmap</div>
        <h2>What we've launched. What's coming.</h2>
        <p className="vh-section-lede">
          ProFamily Life ships first — the useful daily family assistant. Memory comes alongside as the shared layer.
          Kids, Career, and Money build on top.
        </p>
      </div>

      <ol className="vh-roadmap">
        {phases.map((ph, i) => (
          <li key={ph.tag} className="vh-roadmap-item">
            <div className="vh-roadmap-rail">
              <div className="vh-roadmap-dot" data-status={ph.status} />
              {i < phases.length - 1 && <div className="vh-roadmap-line" />}
            </div>
            <div className="vh-roadmap-body">
              <div className="vh-roadmap-meta">
                <span className="vh-roadmap-phase">{ph.tag}</span>
                <span className="vh-roadmap-sep">·</span>
                <span className="vh-roadmap-when">{ph.when}</span>
                <StatusBadge status={ph.status} />
              </div>
              <h3 className="vh-roadmap-title">{ph.title}</h3>
              <p className="vh-roadmap-desc">{ph.desc}</p>
              {ph.links && (
                <div className="vh-roadmap-links">
                  {ph.links.map((l) => (
                    <a key={l.label} href={l.url} target="_blank" rel="noopener noreferrer" className="vh-roadmap-link">
                      <span className="vh-roadmap-link-dot" />
                      <span className="vh-roadmap-link-label">{l.label}</span>
                      {l.note && <span className="vh-roadmap-link-note">{l.note}</span>}
                      <Icon name="arrow-up-right" size={13} />
                    </a>
                  ))}
                </div>
              )}
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

window.Roadmap = Roadmap;