/* global React, window */
const { MILESTONES } = window;

function Milestones() {
  const done = MILESTONES.filter(m => m.s === 'done');
  const next = MILESTONES.filter(m => m.s === 'next');
  const wait = MILESTONES.filter(m => m.s === 'wait');

  return (
    <div>
      <div className="prose" style={{ maxWidth: '74ch', marginBottom: 32 }}>
        <p>
          Ten tracked milestones between pilot and first licensed plant. Six achieved. One imminent. Price impact ranges represent incremental expected repricing from removal of specific risk factors, not cumulative targets.
        </p>
      </div>

      <div className="milestones-summary" style={{ marginBottom: 32 }}>
        {[
          { l: 'Completed', v: done.length, c: 'var(--pos)' },
          { l: 'Imminent', v: next.length, c: 'var(--warn)' },
          { l: 'Future', v: wait.length, c: 'var(--fg-3)' },
        ].map((s, i) => (
          <div key={i} className="minibox" style={{ borderTop: `2px solid ${s.c}` }}>
            <div className="card-label">{s.l}</div>
            <div className="num" style={{ fontSize: 32, color: s.c, marginTop: 4 }}>{s.v}</div>
          </div>
        ))}
      </div>

      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', left: 12, top: 0, bottom: 0, width: 1, background: 'var(--line)' }} />
        {MILESTONES.map((m, i) => {
          const dotColor = m.s === 'done' ? 'var(--pos)' : m.s === 'next' ? 'var(--warn)' : 'var(--fg-4)';
          return (
            <div key={i} style={{ position: 'relative', paddingLeft: 40, paddingBottom: 22 }}>
              <div style={{
                position: 'absolute', left: 6, top: 6,
                width: 13, height: 13, borderRadius: '50%',
                background: m.s === 'done' ? dotColor : 'var(--bg-0)',
                border: `2px solid ${dotColor}`,
                zIndex: 2,
              }} />
              <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 6, padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6, flexWrap: 'wrap' }}>
                  <div className="num" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em' }}>{m.y.toUpperCase()}</div>
                  <span className={`chip ${m.s === 'done' ? 'pos' : m.s === 'next' ? 'warn' : ''}`}>
                    {m.s === 'done' ? '✓ Completed' : m.s === 'next' ? '◐ Imminent' : 'Future'}
                  </span>
                  {m.p && (
                    <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--accent)', fontFamily: 'var(--mono)' }}>
                      Price impact: +${m.p[0]}–${m.p[1]}
                    </span>
                  )}
                </div>
                <div style={{ fontSize: 15, color: 'var(--fg-0)', fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 6 }}>{m.e}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6 }}>{m.note}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.Milestones = Milestones;