// Platforms supported + scale
const Platforms = () => {
  const platforms = [
    { name: 'Illumina', sub: 'NovaSeq X · NextSeq · MiSeq', kits: 'available', status: 'available' },
    { name: 'Element Biosciences', sub: 'AVITI', kits: 'available', status: 'available' },
    { name: 'Ultima Genomics', sub: 'UG 100', kits: 'available', status: 'available' },
    { name: 'Singular Genomics', sub: 'G4', kits: 'available', status: 'available' },
    { name: 'Oxford Nanopore', sub: 'PromethION · MinION · Flongle', kits: 'in testing', status: 'testing' },
    { name: 'PacBio', sub: 'Revio · Sequel IIe', kits: 'in testing', status: 'testing' },
  ];

  return (
    <section id="platforms" className="section" style={{ background: 'var(--ink)', color: 'var(--bone)', maxWidth:'none' }}>
      <div style={{maxWidth: 1440, margin: '0 auto'}}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 2fr',
          gap: 64,
          marginBottom: 80,
          alignItems: 'start',
        }} className="plt-header">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <span className="sec-num" style={{color:'rgba(242,238,230,0.5)'}}>— 07 / Platforms</span>
            <span className="eyebrow" style={{color:'rgba(242,238,230,0.5)'}}>Sequencer-agnostic</span>
          </div>
          <h2 className="h-section" style={{color:'var(--bone)'}}>
            Compatible with every<br/>
            major <em>sequencing platform.</em>
          </h2>
        </div>

        {/* Platform grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 1,
          background: 'rgba(242,238,230,0.12)',
          border: '1px solid rgba(242,238,230,0.12)',
        }} className="plt-grid">
          {platforms.map((p, i) => {
            const testing = p.status === 'testing';
            return (
            <div key={i} style={{
              background: 'var(--ink)',
              padding: '36px 32px',
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
              minHeight: 180,
              opacity: testing ? 0.55 : 1,
            }}>
              <div style={{
                display:'flex', justifyContent:'space-between', alignItems:'center',
              }}>
                <span className="mono" style={{
                  fontSize: 11,
                  color: 'rgba(242,238,230,0.5)',
                  letterSpacing: '0.04em',
                }}>{String(i+1).padStart(2,'0')}</span>
                <span className="mono" style={{
                  fontSize: 11,
                  color: testing ? 'rgba(242,238,230,0.5)' : 'var(--accent-hi)',
                  letterSpacing: '0.04em',
                  textTransform: 'uppercase',
                }}>{p.kits}</span>
              </div>

              <h3 className="serif" style={{
                fontSize: 32,
                letterSpacing: '-0.02em',
                fontWeight: 380,
                lineHeight: 1.05,
                color: 'var(--bone)',
              }}>{p.name}</h3>

              <span style={{
                fontSize: 13,
                color: 'rgba(242,238,230,0.6)',
                marginTop: 'auto',
              }}>{p.sub}</span>
            </div>
          );})}
        </div>

        {/* Scale callout */}
        <div style={{
          marginTop: 96,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'center',
        }} className="plt-scale">
          <div>
            <span className="eyebrow" style={{display:'block', marginBottom: 24, color:'rgba(242,238,230,0.5)'}}>
              <span style={{display:'inline-block', width:6, height:6, background:'var(--accent-hi)', borderRadius:'50%', marginRight: 8, verticalAlign:'middle', marginBottom: 4}}></span>
              Scale on demand
            </span>
            <h3 className="serif" style={{
              fontSize: 'clamp(28px, 3vw, 44px)',
              lineHeight: 1.05,
              letterSpacing: '-0.02em',
              fontWeight: 380,
              marginBottom: 24,
              color: 'var(--bone)',
            }}>
              From a single library to a hundred thousand. Same chemistry, same instrument, same hour.
            </h3>
            <p style={{
              fontSize: 16,
              lineHeight: 1.6,
              color: 'rgba(242,238,230,0.7)',
              maxWidth: '50ch',
            }}>
              Add cartridges. Add racks. Stack racks. The chemistry doesn't change with batch size — there is no inflection where prep starts breaking down. Whether you're running a 12-sample pilot or a 100,000-sample population study, the time-to-library stays at sixty minutes.
            </p>
          </div>

          <ScaleViz />
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .plt-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .plt-grid { grid-template-columns: 1fr 1fr !important; }
          .plt-scale { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 600px) {
          .plt-grid { grid-template-columns: 1fr !important; }
          .plt-grid > div { padding: 28px 22px !important; min-height: 0 !important; }
        }
      `}</style>
    </section>
  );
};

const ScaleViz = () => (
  <div style={{
    border: '1px solid rgba(242,238,230,0.15)',
    background: 'rgba(242,238,230,0.03)',
    padding: 32,
    aspectRatio: '1.1/1',
    position: 'relative',
  }}>
    <div style={{
      display: 'flex', justifyContent: 'space-between',
      fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(242,238,230,0.5)',
      letterSpacing: '0.04em', textTransform: 'uppercase',
      marginBottom: 24,
    }}>
      <span>Fig. 03</span>
      <span>Throughput Scaling</span>
    </div>

    <svg viewBox="0 0 400 280" style={{width:'100%', height:'auto'}}>
      {/* axes */}
      <line x1="40" y1="240" x2="380" y2="240" stroke="rgba(242,238,230,0.3)" strokeWidth="0.6"/>
      <line x1="40" y1="20" x2="40" y2="240" stroke="rgba(242,238,230,0.3)" strokeWidth="0.6"/>

      {/* y labels */}
      {[
        [240, '0'],
        [180, '2.5k'],
        [120, '5k'],
        [60, '7.5k'],
        [20, '10k'],
      ].map(([y, l]) => (
        <g key={l}>
          <line x1="36" y1={y} x2="40" y2={y} stroke="rgba(242,238,230,0.3)" strokeWidth="0.6"/>
          <text x="32" y={y+3} fontFamily="var(--mono)" fontSize="9" fill="rgba(242,238,230,0.5)" textAnchor="end">{l}</text>
        </g>
      ))}

      {/* x labels */}
      {[
        [40, '1×'],
        [125, '24×'],
        [210, '48×'],
        [295, '72×'],
        [380, '100×'],
      ].map(([x, l]) => (
        <g key={l}>
          <line x1={x} y1="240" x2={x} y2="244" stroke="rgba(242,238,230,0.3)" strokeWidth="0.6"/>
          <text x={x} y="258" fontFamily="var(--mono)" fontSize="9" fill="rgba(242,238,230,0.5)" textAnchor="middle">{l}</text>
        </g>
      ))}
      <text x="210" y="275" fontFamily="var(--mono)" fontSize="9" fill="rgba(242,238,230,0.4)" textAnchor="middle" letterSpacing="0.5">CARTRIDGES IN PARALLEL</text>

      {/* Industry curve — flattens out (saturates) */}
      <path d="M 40 240 Q 100 220 180 200 Q 260 195 380 192" stroke="rgba(242,238,230,0.5)" strokeWidth="1" fill="none" strokeDasharray="3 3"/>
      <text x="370" y="186" fontFamily="var(--mono)" fontSize="9" fill="rgba(242,238,230,0.5)" textAnchor="end">Industry (saturates)</text>

      {/* NGI curve — linear */}
      <path d="M 40 240 L 380 24" stroke="var(--accent-hi)" strokeWidth="1.5" fill="none"/>
      <text x="370" y="40" fontFamily="var(--mono)" fontSize="9" fill="var(--accent-hi)" textAnchor="end" fontWeight="600">NGI · linear</text>

      {/* dots */}
      {[[40,240],[125,186],[210,132],[295,78],[380,24]].map(([x,y],i) => (
        <circle key={i} cx={x} cy={y} r="2.5" fill="var(--accent-hi)"/>
      ))}

      {/* y axis label */}
      <text x="20" y="130" fontFamily="var(--mono)" fontSize="9" fill="rgba(242,238,230,0.4)" textAnchor="middle" transform="rotate(-90, 20, 130)" letterSpacing="0.5">LIBRARIES / HOUR</text>
    </svg>
  </div>
);

window.Platforms = Platforms;