const Roadmap = () => {
  const phases = [
    { phase: 'NOW · 2026', name: 'Landing & brand', items: ['Public site', 'Email beta list', 'Brand system'], now: true },
    { phase: 'Q3 2026', name: 'App MVP', items: ['Auth & profiles', 'Meal logging', 'Habit coaching', 'Wearable sync'] },
    { phase: 'Q4 2026', name: 'AI layer', items: ['AI nutrition engine', 'Weekly insights', 'Behavioural nudges'] },
    { phase: '2027', name: 'Health ecosystem', items: ['Diagnostics integration', 'Vector recommendations', 'Partner labs', 'Wellness coaching'] },
  ];

  return (
    <section id="roadmap">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Build in public · roadmap</span>
          <h2 className="display">Shipping in the open.</h2>
          <p className="lede">A clear path from launch landing page to a national-scale preventive health platform.</p>
        </div>

        <div className="roadmap reveal">
          {phases.map((p, i) => (
            <React.Fragment key={i}>
              <div className="roadmap-phase">
                <span className="ph">{p.phase}</span>
                <span className="ph-name">{p.name}</span>
              </div>
              <div className="roadmap-body">
                {p.items.map((it, j) => (
                  <span key={j} className={`roadmap-tag ${p.now && j === 0 ? 'now' : ''}`}>
                    {p.now && j === 0 ? '● ' : ''}{it}
                  </span>
                ))}
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Roadmap });