// Comparison — NGI vs. industry
const Comparison = () => {
  const rows = [
    ['Time per run', '120 min', '4–10 hrs', '2–5×'],
    ['Cost per library', '½ of cheapest', 'Reference', '50%'],
    ['Hands-on time', '< 2 min', '45–90 min', '20–40×'],
    ['Sample input', '> 0.7 ng', '100–1,000 ng', '~150–1,400×'],
    ['Variance (CV)', '< 3%', '8–15%', '3–5×'],
    ['Throughput / shift', '9,600 libraries', '96–384', '25–100×'],
    ['Cross-contamination', 'Zero (closed flow)', 'Possible (open tubes)', '—'],
  ];

  return (
    <section id="comparison" className="section">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 2fr',
        gap: 64,
        marginBottom: 80,
        alignItems: 'start',
      }} className="cmp-header">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <span className="sec-num">— 06 / Comparison</span>
          <span className="eyebrow">Measured against the field</span>
        </div>
        <h2 className="h-section">
          Faster. Cheaper.<br/>
          <em>More precise.</em>
        </h2>
      </div>

      {/* Table */}
      <div style={{
        border: '1px solid var(--rule)',
        background: 'var(--paper)',
      }}>
        {/* Header row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 0.8fr',
          padding: '20px 32px',
          borderBottom: '1px solid var(--rule)',
          background: 'var(--bone-2)',
        }} className="cmp-row">
          <span className="mono" style={{fontSize: 11, color:'var(--ink-mute)', letterSpacing:'0.04em', textTransform:'uppercase'}}>Metric</span>
          <span className="mono" style={{fontSize: 11, color:'var(--ink)', letterSpacing:'0.04em', textTransform:'uppercase', fontWeight: 600}}>NGI</span>
          <span className="mono" style={{fontSize: 11, color:'var(--ink-mute)', letterSpacing:'0.04em', textTransform:'uppercase'}}>Industry standard</span>
          <span className="mono" style={{fontSize: 11, color:'var(--ink-mute)', letterSpacing:'0.04em', textTransform:'uppercase', textAlign:'right'}}>Advantage</span>
        </div>

        {rows.map(([metric, ngi, industry, advantage], i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '1.4fr 1fr 1fr 0.8fr',
            padding: '24px 32px',
            borderBottom: i < rows.length - 1 ? '1px solid var(--rule-soft)' : 'none',
            alignItems: 'baseline',
          }} className="cmp-row">
            <span style={{fontSize: 14.5, color:'var(--ink)'}}>{metric}</span>
            <span className="serif" style={{
              fontSize: 22,
              letterSpacing: '-0.02em',
              fontWeight: 380,
              color: 'var(--ink)',
            }}>{ngi}</span>
            <span style={{fontSize: 14, color: 'var(--ink-mute)'}}>{industry}</span>
            <span className="mono" style={{
              fontSize: 12,
              color: 'var(--accent)',
              letterSpacing: '0.04em',
              textAlign: 'right',
              fontWeight: 600,
            }}>{advantage}</span>
          </div>
        ))}
      </div>

      <p style={{
        marginTop: 24,
        fontFamily: 'var(--mono)',
        fontSize: 11,
        color: 'var(--ink-mute)',
        letterSpacing: '0.02em',
      }}>
        Industry standard reflects the median of the four highest-volume providers, measured at 96-library batch size, January 2026.
      </p>

      <style>{`
        @media (max-width: 900px) {
          .cmp-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .cmp-row { padding-left: 20px !important; padding-right: 20px !important; grid-template-columns: 1.4fr 1fr 1fr !important; }
          .cmp-row > :nth-child(4) { display: none; }
        }
        @media (max-width: 600px) {
          .cmp-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
          .cmp-row > :nth-child(3) { display: none; }
        }
      `}</style>
    </section>
  );
};

window.Comparison = Comparison;