// Assays — supported sample types & library types
const Assays = () => {
  const inputs = [
    { name: 'Genomic DNA', detail: 'Fresh, frozen, blood, tissue', input: '600 pg – 10 ng', status: 'available' },
    { name: 'cfDNA / liquid biopsy', detail: 'Plasma, serum, urine', input: '0.1 – 50 ng', status: 'testing' },
    { name: 'FFPE', detail: 'DIN ≥ 3 recommended', input: '10 – 200 ng', status: 'testing' },
    { name: 'Low-input / single-cell', detail: 'Whole-genome amplification', input: '< 1 pg', status: 'testing' },
    { name: 'Total RNA', detail: 'Fresh-frozen, FFPE, depleted', input: '10 – 1,000 ng', status: 'testing' },
    { name: 'Microbial / metagenomic', detail: 'Stool, soil, swab, isolate', input: '1 – 100 ng', status: 'testing' },
  ];

  const libraries = [
    { name: 'Whole-genome', status: 'available' },
    { name: 'Whole-exome (Twist, Agilent panels)', status: 'testing' },
    { name: 'Targeted panels (custom & catalog)', status: 'testing' },
    { name: 'mRNA-seq · total RNA-seq', status: 'testing' },
    { name: 'Methylation (EM-seq, bisulfite)', status: 'testing' },
    { name: 'Amplicon · 16S · ITS', status: 'testing' },
    { name: 'HLA typing (Class I + II)', status: 'testing' },
    { name: 'Single-cell 3′ / 5′ (10x compatible)', status: 'testing' },
  ];

  return (
    <section id="assays" className="section">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 2fr',
        gap: 64,
        marginBottom: 72,
        alignItems: 'start',
      }} className="asy-header">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <span className="sec-num">— 02 / Assays</span>
          <span className="eyebrow">Sample types & library kits</span>
        </div>
        <h2 className="h-section">
          What we can run<br/>
          for <em>your samples.</em>
        </h2>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 1,
        background: 'var(--rule)',
        border: '1px solid var(--rule)',
      }} className="asy-grid">

        {/* Inputs column */}
        <div style={{ background: 'var(--paper)', padding: '32px 32px 16px' }}>
          <div className="mono" style={{
            fontSize: 11, color: 'var(--ink-mute)',
            letterSpacing: '0.06em', textTransform: 'uppercase',
            paddingBottom: 16, marginBottom: 8,
            borderBottom: '1px solid var(--rule-soft)',
            display: 'flex', justifyContent: 'space-between',
          }}>
            <span>Accepted sample types</span>
            <span>Input range</span>
          </div>
          {inputs.map((row, i) => {
            const testing = row.status === 'testing';
            return (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '1.6fr 1fr',
                gap: 16,
                padding: '16px 0',
                borderBottom: i < inputs.length - 1 ? '1px solid var(--rule-soft)' : 'none',
                alignItems: 'baseline',
                opacity: testing ? 0.78 : 1,
              }}>
                <div>
                  <div style={{fontSize: 15, color: 'var(--ink)', fontWeight: 500, marginBottom: 4, display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap'}}>
                    <span>{row.name}</span>
                    {testing && (
                      <span className="mono" style={{
                        fontSize: 9.5,
                        letterSpacing: '0.08em',
                        textTransform: 'uppercase',
                        color: 'var(--ink-mute)',
                        border: '1px solid var(--rule)',
                        padding: '2px 6px',
                        fontWeight: 500,
                      }}>In testing</span>
                    )}
                  </div>
                  <div style={{fontSize: 12.5, color: 'var(--ink-mute)', lineHeight: 1.4}}>{row.detail}</div>
                </div>
                <span className="mono" style={{
                  fontSize: 12, color: 'var(--ink)',
                  letterSpacing: '0.02em', textAlign: 'right',
                }}>{row.input}</span>
              </div>
            );
          })}
        </div>

        {/* Libraries column */}
        <div style={{ background: 'var(--paper)', padding: '32px 32px 16px' }}>
          <div className="mono" style={{
            fontSize: 11, color: 'var(--ink-mute)',
            letterSpacing: '0.06em', textTransform: 'uppercase',
            paddingBottom: 16, marginBottom: 8,
            borderBottom: '1px solid var(--rule-soft)',
          }}>
            Library types prepared
          </div>
          {libraries.map((lib, i) => {
            const testing = lib.status === 'testing';
            return (
              <div key={i} style={{
                padding: '14px 0',
                borderBottom: i < libraries.length - 1 ? '1px solid var(--rule-soft)' : 'none',
                fontSize: 14.5,
                color: 'var(--ink)',
                display: 'flex',
                alignItems: 'baseline',
                gap: 16,
                opacity: testing ? 0.78 : 1,
              }}>
                <span className="mono" style={{fontSize: 10.5, color: 'var(--ink-mute)', letterSpacing: '0.04em', minWidth: 24}}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span style={{flex: 1}}>{lib.name}</span>
                {testing && (
                  <span className="mono" style={{
                    fontSize: 9.5,
                    letterSpacing: '0.08em',
                    textTransform: 'uppercase',
                    color: 'var(--ink-mute)',
                    border: '1px solid var(--rule)',
                    padding: '2px 6px',
                    fontWeight: 500,
                  }}>In testing</span>
                )}
              </div>
            );
          })}
        </div>
      </div>

      <p className="mono" style={{
        marginTop: 20,
        fontSize: 11, color: 'var(--ink-mute)',
        letterSpacing: '0.02em',
      }}>
        Genomic DNA available now. Other sample types in validation — rolling out over the following quarters.
      </p>

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

window.Assays = Assays;