const UPDATES = [
  { date: '2026-05-04', app: 'Folium',   phase: 'UI iteration',     msg: 'Reading view refined; annotation flow cleaned up' },
  { date: '2026-05-03', app: 'Hustle',   phase: 'Internal testing', msg: 'Income-projection model validated against real planning sessions' },
  { date: '2026-05-02', app: 'Koinonia', phase: 'Active build',     msg: 'Parish calendar and member roles wired end-to-end' },
  { date: '2026-04-30', app: 'Folium',   phase: 'Active build',     msg: 'OCR pipeline holding accuracy on dense academic pages' },
  { date: '2026-04-29', app: 'Hustle',   phase: 'Design review',    msg: 'Goal-tracking screens consolidated into a single surface' },
];

const ROADMAP = [
  { state: 'shipping', label: 'This phase', items: [
    { app: 'Folium',   t: 'Closed alpha with a small group of students' },
    { app: 'Hustle',   t: 'Refining the goal \u2192 hours \u2192 schedule loop' },
  ]},
  { state: 'next', label: 'Next phase', items: [
    { app: 'Koinonia', t: 'Pilot with selected Orthodox parishes' },
    { app: 'Folium',   t: 'Study session export and revision review' },
  ]},
  { state: 'soon', label: 'On the horizon', items: [
    { app: 'Hustle',   t: 'Expansion into a broader productivity suite' },
  ]},
];

const ProgressSection = () => {
  const [tab, setTab] = React.useState('updates');
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick((x) => x + 1), 1200);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="progress" className="k-section k-section--progress" data-screen-label="Development">
      <div className="k-container">
        <div className="k-section__head">
          <span className="k-mono k-section__num">// 03 — development</span>
          <h2 className="k-section__title">Steady progress, transparently shared.</h2>
          <p className="k-section__sub">
            A look at where each application stands. We share the shape of the work without exposing its internals.
          </p>
        </div>

        <div className="k-prog">
          <div className="k-prog__tabs" role="tablist">
            <button role="tab" className={`k-prog__tab ${tab === 'updates' ? 'is-active' : ''}`} onClick={() => setTab('updates')}>
              <span className="k-mono">updates</span>
              <span className="k-prog__count">{UPDATES.length}</span>
            </button>
            <button role="tab" className={`k-prog__tab ${tab === 'roadmap' ? 'is-active' : ''}`} onClick={() => setTab('roadmap')}>
              <span className="k-mono">roadmap</span>
              <span className="k-prog__count">{ROADMAP.reduce((a, r) => a + r.items.length, 0)}</span>
            </button>
            <div className="k-prog__live">
              <span className={`k-dot k-dot--live ${tick % 2 === 0 ? 'is-pulse' : ''}`} />
              <span className="k-mono">in active development</span>
            </div>
          </div>

          {tab === 'updates' && (
            <ul className="k-commits">
              {UPDATES.map((c, i) => (
                <li key={i} className="k-commit">
                  <span className="k-mono k-commit__date">{c.date}</span>
                  <span className="k-commit__repo k-mono">{c.app}</span>
                  <span className="k-mono k-commit__sha">{c.phase}</span>
                  <span className="k-commit__msg">{c.msg}</span>
                  <span className="k-commit__author k-mono">internal</span>
                </li>
              ))}
            </ul>
          )}

          {tab === 'roadmap' && (
            <div className="k-roadmap">
              {ROADMAP.map((r) => (
                <div key={r.state} className={`k-roadmap__col k-roadmap__col--${r.state}`}>
                  <div className="k-roadmap__head">
                    <span className="k-dot" />
                    <span className="k-mono">{r.label}</span>
                  </div>
                  <ul>
                    {r.items.map((it, i) => (
                      <li key={i} className="k-roadmap__item">
                        <span className="k-mono k-roadmap__repo">{it.app}</span>
                        <span>{it.t}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

window.ProgressSection = ProgressSection;