// ProjectX.jsx — the work. Missions named after lunar/space programs.
function ProjectX() {
  const missions = [
    {
      code: 'PX-07', name: 'Artemis', status: 'In flight',
      tag: 'Autonomous logistics',
      summary: 'A last-mile delivery fleet that refuses to depend on GPS. Dead-reckoning, visual odometry, no cloud in the loop.',
      risk: 0.84, reward: 0.91, year: '2026',
      sector: 'Robotics · Defense-adjacent',
    },
    {
      code: 'PX-05', name: 'Apollo', status: 'Orbit',
      tag: 'Synthetic biology',
      summary: 'A bench-top protein factory for orphan therapeutics. Sub-$2k per batch, shipped as a countertop appliance.',
      risk: 0.92, reward: 0.97, year: '2025',
      sector: 'Biotech',
    },
    {
      code: 'PX-04', name: 'Gemini', status: 'Orbit',
      tag: 'Small modular nuclear',
      summary: 'A 1-MW reactor in a shipping-container form factor, passively safe, fueled by spent LWR waste.',
      risk: 0.88, reward: 0.99, year: '2025',
      sector: 'Energy',
    },
    {
      code: 'PX-03', name: 'Voyager', status: 'Quiet',
      tag: 'Interface research',
      summary: 'A spatial OS for people who already think in 3D. Shipped to a private beta of 60 surgeons and one magician.',
      risk: 0.71, reward: 0.82, year: '2025',
      sector: 'Interfaces',
    },
    {
      code: 'PX-02', name: 'Icarus', status: 'Recovered',
      tag: 'Atmospheric compute',
      summary: 'Solar-gliding compute nodes that live at 60,000 ft. We flew eleven. Two made it home. The data was worth it.',
      risk: 0.95, reward: 0.74, year: '2024',
      sector: 'Infrastructure',
    },
    {
      code: 'PX-01', name: 'Mercury', status: 'Graduated',
      tag: 'Financial instruments',
      summary: 'A parametric insurance primitive for climate-adjacent events. Spun out in 18 months. Now self-funding.',
      risk: 0.66, reward: 0.88, year: '2024',
      sector: 'Fintech',
    },
  ];

  return (
    <section id="project-x" style={{ background: 'var(--void-2)', color: 'var(--fg)' }}>
      {/* Section header */}
      <div style={{ padding: '140px 80px 64px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 80, borderBottom: '1px solid var(--line)' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            <span style={{ color: 'var(--electric-2)' }}>§ 02</span>&nbsp;&nbsp;—&nbsp;&nbsp;Project X
          </div>
          <h2 className="display" style={{ margin: 0 }}>
            The work,<br/>on the record.
          </h2>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ color: 'var(--fg-muted)', marginBottom: 8 }}>six of forty-seven · the rest under NDA</div>
          <div className="mono" style={{ color: 'var(--fg-faint)' }}>index ordered by mission number, descending</div>
        </div>
      </div>

      {/* Mission rows */}
      <div>
        {missions.map((m, i) => <MissionRow key={m.code} m={m} odd={i % 2 === 1} last={i === missions.length - 1}/>)}
      </div>

      {/* Closing block */}
      <div style={{ padding: '72px 80px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid var(--line)' }}>
        <div className="lede" style={{ color: 'var(--dust-300)', maxWidth: 560 }}>
          Three missions are in quiet phase and will surface when they're ready to be held to.
        </div>
        <a href="#relay" className="btn btn--electric">Propose a mission →</a>
      </div>
    </section>
  );
}

function MissionRow({ m, odd, last }) {
  const [open, setOpen] = React.useState(false);
  const statusColor = {
    'In flight':  'var(--electric)',
    'Orbit':      'var(--earth)',
    'Quiet':      'var(--dust-400)',
    'Recovered':  'var(--ember)',
    'Graduated':  'var(--dust-200)',
  }[m.status];

  return (
    <div
      onClick={() => setOpen(v => !v)}
      style={{
        cursor: 'pointer',
        borderBottom: last ? 'none' : '1px solid var(--line)',
        padding: '32px 80px',
        display: 'grid',
        gridTemplateColumns: '90px 220px 1fr 280px 120px',
        gap: 32,
        alignItems: 'center',
        transition: 'background .2s ease',
      }}
      onMouseEnter={e => e.currentTarget.style.background = 'rgba(209,244,140,0.03)'}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >
      <div className="mono" style={{ color: 'var(--electric-2)' }}>{m.code}</div>

      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontWeight: 400, color: 'var(--fg-strong)', letterSpacing: '-0.02em', lineHeight: 1 }}>
          {m.name}
        </div>
        <div className="mono" style={{ marginTop: 6, color: 'var(--fg-muted)' }}>{m.sector}</div>
      </div>

      <div>
        <div className="eyebrow" style={{ marginBottom: 8, color: 'var(--dust-300)' }}>{m.tag}</div>
        <div className="body" style={{
          margin: 0, color: 'var(--dust-200)', fontSize: 15,
          maxHeight: open ? 200 : 48,
          overflow: 'hidden',
          transition: 'max-height .35s cubic-bezier(.4,0,.2,1)',
        }}>
          {m.summary}
        </div>
      </div>

      {/* Risk / reward bars */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Bar label="risk"   value={m.risk}   color="var(--ember)" />
        <Bar label="reward" value={m.reward} color="var(--electric)" />
      </div>

      <div style={{ textAlign: 'right' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-strong)',
          letterSpacing: '0.04em', textTransform: 'uppercase',
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: statusColor }}/>
          {m.status}
        </div>
        <div className="mono" style={{ marginTop: 8, color: 'var(--fg-faint)' }}>{m.year}</div>
      </div>
    </div>
  );
}

function Bar({ label, value, color }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--fg-faint)', textTransform: 'uppercase', letterSpacing: '.08em' }}>{label}</span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--fg-muted)' }}>{value.toFixed(2)}</span>
      </div>
      <div style={{ height: 2, background: 'var(--regolith-2)', position: 'relative' }}>
        <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${value * 100}%`, background: color }}/>
      </div>
    </div>
  );
}

Object.assign(window, { ProjectX });