// Quality — benchmark numbers + simple bar chart vs. competitors
const Quality = () => {
  // Each metric: better = lower (true) or higher
  const metrics = [
    { label: 'Q30 (% bases)',         ngi: 92.4, ngiLabel: '92.4%', industry: 88.1, indLabel: '88.1%', higherIsBetter: true,  unit: '%' },
    { label: 'Duplication rate',      ngi: 4.2,  ngiLabel: '4.2%',  industry: 11.8, indLabel: '11.8%', higherIsBetter: false, unit: '%' },
    { label: 'On-target enrichment',  ngi: 88.0, ngiLabel: '88%',   industry: 72.0, indLabel: '72%',   higherIsBetter: true,  unit: '%' },
    { label: 'GC bias (deviation)',   ngi: 1.4,  ngiLabel: '1.4%',  industry: 5.2,  indLabel: '5.2%',  higherIsBetter: false, unit: '%' },
    { label: 'Library yield CV',      ngi: 2.8,  ngiLabel: '2.8%',  industry: 12.5, indLabel: '12.5%', higherIsBetter: false, unit: '%' },
  ];

  return (
    <section id="quality" className="section">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 2fr',
        gap: 64,
        marginBottom: 72,
        alignItems: 'start',
      }} className="qa-header">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <span className="sec-num">— 05 / Quality</span>
          <span className="eyebrow">Benchmarks · application notes</span>
        </div>
        <h2 className="h-section">
          The numbers,<br/>
          <em>side by side.</em>
        </h2>
      </div>

      {/* Bar chart */}
      <div style={{
        border: '1px solid var(--rule)',
        background: 'var(--paper)',
        padding: '32px 0 8px',
      }}>
        {/* Legend */}
        <div style={{
          display: 'flex',
          gap: 32,
          padding: '0 32px 24px',
          fontFamily: 'var(--mono)',
          fontSize: 11,
          color: 'var(--ink-mute)',
          letterSpacing: '0.04em',
          textTransform: 'uppercase',
          borderBottom: '1px solid var(--rule-soft)',
        }}>
          <span style={{display: 'flex', gap: 8, alignItems: 'center'}}>
            <span style={{display:'inline-block', width: 10, height: 10, background: 'var(--accent)'}}></span>
            NGI
          </span>
          <span style={{display: 'flex', gap: 8, alignItems: 'center'}}>
            <span style={{display:'inline-block', width: 10, height: 10, background: 'var(--ink-mute)', opacity: 0.4}}></span>
            Industry median
          </span>
        </div>

        {/* Rows */}
        {metrics.map((m, i) => {
          const max = Math.max(m.ngi, m.industry);
          const ngiW = (m.ngi / max) * 100;
          const indW = (m.industry / max) * 100;
          return (
            <div key={i} style={{
              padding: '24px 32px',
              borderBottom: i < metrics.length - 1 ? '1px solid var(--rule-soft)' : 'none',
            }}>
              {/* Label row */}
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'baseline',
                marginBottom: 14,
              }}>
                <span style={{fontSize: 14.5, color: 'var(--ink)', fontWeight: 500}}>
                  {m.label}
                  <span className="mono" style={{
                    fontSize: 10.5, color: 'var(--ink-mute)',
                    letterSpacing: '0.04em', marginLeft: 10,
                  }}>
                    {m.higherIsBetter ? 'higher = better' : 'lower = better'}
                  </span>
                </span>
              </div>

              {/* NGI bar */}
              <div style={{display: 'grid', gridTemplateColumns: '1fr 70px', gap: 12, alignItems: 'center', marginBottom: 6}}>
                <div style={{
                  height: 14,
                  background: 'var(--bone-2)',
                  position: 'relative',
                }}>
                  <div style={{
                    height: '100%',
                    width: `${ngiW}%`,
                    background: 'var(--accent)',
                    transition: 'width 600ms cubic-bezier(.2,.7,.2,1)',
                  }}></div>
                </div>
                <span className="serif" style={{
                  fontSize: 18,
                  letterSpacing: '-0.02em',
                  fontWeight: 400,
                  color: 'var(--ink)',
                  textAlign: 'right',
                }}>{m.ngiLabel}</span>
              </div>

              {/* Industry bar */}
              <div style={{display: 'grid', gridTemplateColumns: '1fr 70px', gap: 12, alignItems: 'center'}}>
                <div style={{
                  height: 14,
                  background: 'var(--bone-2)',
                  position: 'relative',
                }}>
                  <div style={{
                    height: '100%',
                    width: `${indW}%`,
                    background: 'var(--ink-mute)',
                    opacity: 0.4,
                  }}></div>
                </div>
                <span className="serif" style={{
                  fontSize: 16,
                  letterSpacing: '-0.02em',
                  color: 'var(--ink-mute)',
                  textAlign: 'right',
                }}>{m.indLabel}</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Methods callout + SLA strip */}
      <div style={{
        marginTop: 32,
        display: 'grid',
        gridTemplateColumns: '1.2fr 1fr',
        gap: 32,
        alignItems: 'start',
      }} className="qa-foot">
        <div style={{
          border: '1px solid var(--rule)',
          background: 'var(--bone-2)',
          padding: '20px 24px',
          display: 'flex',
          flexDirection: 'column',
          gap: 12,
        }}>
          <div className="mono" style={{
            fontSize: 10.5, color: 'var(--ink-mute)',
            letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>Service-level guarantee</div>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16}}>
            <div>
              <div className="serif" style={{fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em'}}>2 days</div>
              <div style={{fontSize: 12, color: 'var(--ink-mute)'}}>libraries returned, excl. shipping</div>
            </div>
            <div>
              <div className="serif" style={{fontSize: 22, fontWeight: 400, letterSpacing: '-0.02em'}}>5 days</div>
              <div style={{fontSize: 12, color: 'var(--ink-mute)'}}>P95, contractual</div>
            </div>
          </div>
          <div style={{
            fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.45,
            paddingTop: 8, borderTop: '1px solid var(--rule-soft)',
          }}>
            Free re-prep on any sample failing QC. Expedited 12–24 hour turnaround available.
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .qa-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .qa-foot { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
          .qa-bar { padding: 20px !important; }
          .qa-bar-row { padding: 20px !important; }
        }
      `}</style>
    </section>
  );
};

window.Quality = Quality;