// Pricing — transparency band + logistics & deliverables
const Pricing = () => {
  const tiers = [
  { name: 'Pilot', range: '24 – 96 samples', price: '½×', per: 'industry rate', detail: 'Half of what other providers charge for low-volume runs' },
  { name: 'Standard', range: '96 – 4,800 / month', price: 'Volume', per: 'pricing', detail: 'Batch pricing available · monthly invoicing' },
  { name: 'Scale', range: '4,800+ / month', price: 'Custom', per: 'contract', detail: 'Dedicated line · custom SLA · talk to us' }];


  const deliverables = [
  ['DNA extraction', 'Cell lysis and nucleic-acid capture from your input material. On-chip, no off-instrument prep.'],
  ['Library prep', 'Fragmentation, tagmentation, PCR, clean-up. Continuous flow on a single cartridge.'],
  ['QC', 'Concentration, fragment size, molarity. Per-sample report — Qubit, Bioanalyzer, qPCR.'],
  ['Library handoff', 'Sequencer-ready, tube or 96-well plate, with full QC report.'],
  ['Sequencing', 'Optional. Illumina. ONT and PacBio coming soon.'],
  ['Data', 'FASTQ + BAM, demultiplexed. Optional VCF + variant report.'],
  ['Portal', 'Track every sample from receipt to delivery. Chain-of-custody, QC, deliverables.']];


  const logistics = [
  ['Cold-chain kit', 'Pre-paid. Ships within 48 h.'],
  ['Sample portal', 'Submit metadata, track chain-of-custody.'],
  ['Receiving', 'Silicon Valley (US) · Boston (US, late 2026)'],
  ['Accepted from', 'All 50 US states · expanding internationally']];


  return (
    <section id="pricing" className="section">
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 2fr',
        gap: 64,
        marginBottom: 72,
        alignItems: 'start'
      }} className="pr-header" data-comment-anchor="06b4e3d30c-div-25-7">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <span className="sec-num">— 04 / Pricing & logistics</span>
          <span className="eyebrow">What it costs · what you get back</span>
        </div>
        <h2 className="h-section">
          Honest pricing.<br />
          <em>No surprises.</em>
        </h2>
      </div>

      {/* Tier band */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 1,
        background: 'var(--rule)',
        border: '1px solid var(--rule)',
        marginBottom: 56
      }} className="pr-tiers">
        {tiers.map((t, i) =>
        <div key={i} style={{
          background: 'var(--paper)',
          padding: '32px 28px 28px',
          display: 'flex',
          flexDirection: 'column',
          gap: 8
        }}>
            <div className="mono" style={{
            fontSize: 11, color: 'var(--ink-mute)',
            letterSpacing: '0.06em', textTransform: 'uppercase'
          }}>{t.name}</div>
            <div className="mono" style={{ fontSize: 12, color: 'var(--ink)' }}>{t.range}</div>
            <div style={{
            display: 'flex',
            alignItems: 'baseline',
            gap: 8,
            marginTop: 12
          }}>
              <span className="serif" style={{
              fontSize: 44,
              fontWeight: 380,
              letterSpacing: '-0.03em',
              lineHeight: 1,
              color: 'var(--ink)'
            }}>{t.price}</span>
              <span style={{ fontSize: 13, color: 'var(--ink-mute)' }}>{t.per}</span>
            </div>
            <div style={{
            fontSize: 13,
            color: 'var(--ink-soft)',
            lineHeight: 1.45,
            marginTop: 12,
            paddingTop: 12,
            borderTop: '1px solid var(--rule-soft)'
          }}>{t.detail}</div>
          </div>
        )}
      </div>

      <p className="mono" style={{
        fontSize: 11, color: 'var(--ink-mute)',
        letterSpacing: '0.02em',
        marginTop: -36, marginBottom: 56
      }}>
        Final pricing depends on assay, depth, and volume. All-in: reagents, instrument, scientist time, QC, return shipping. Talk to us for an exact quote.
      </p>

      {/* Deliverables + Logistics */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 1,
        background: 'var(--rule)',
        border: '1px solid var(--rule)'
      }} className="pr-grid">
        <div style={{ background: 'var(--paper)', padding: '28px 32px' }}>
          <div className="mono" style={{
            fontSize: 11, color: 'var(--ink-mute)',
            letterSpacing: '0.06em', textTransform: 'uppercase',
            paddingBottom: 14, marginBottom: 4,
            borderBottom: '1px solid var(--rule-soft)'
          }}>End-to-end sample prep</div>
          {deliverables.map(([k, v], i, arr) =>
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '24px 140px 1fr',
            gap: 16,
            padding: '14px 0',
            borderBottom: i < arr.length - 1 ? '1px solid var(--rule-soft)' : 'none',
            alignItems: 'baseline'
          }}>
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-mute)', letterSpacing: '0.04em' }}>{String(i+1).padStart(2,'0')}</span>
              <span style={{ fontSize: 14, color: 'var(--ink)', fontWeight: 500 }}>{k}</span>
              <span style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.45 }}>{v}</span>
            </div>
          )}
        </div>

        <div style={{ background: 'var(--paper)', padding: '28px 32px' }}>
          <div className="mono" style={{
            fontSize: 11, color: 'var(--ink-mute)',
            letterSpacing: '0.06em', textTransform: 'uppercase',
            paddingBottom: 14, marginBottom: 4,
            borderBottom: '1px solid var(--rule-soft)'
          }}>Logistics</div>
          {logistics.map(([k, v], i, arr) =>
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '120px 1fr',
            gap: 20,
            padding: '14px 0',
            borderBottom: i < arr.length - 1 ? '1px solid var(--rule-soft)' : 'none',
            alignItems: 'baseline'
          }}>
              <span style={{ fontSize: 14, color: 'var(--ink)', fontWeight: 500 }}>{k}</span>
              <span style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.45 }}>{v}</span>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .pr-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .pr-tiers { grid-template-columns: 1fr !important; }
          .pr-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
          .pr-grid > div, .pr-tiers > div { padding: 24px 20px !important; }
          .pr-grid > div > div:not(:first-child) {
            display: flex !important;
            flex-direction: column !important;
            gap: 6px !important;
            align-items: flex-start !important;
          }
          .pr-grid > div > div:not(:first-child) > span:first-child {
            font-size: 10.5px !important;
            color: var(--ink-mute) !important;
            letter-spacing: 0.06em !important;
            text-transform: uppercase !important;
          }
        }
      `}</style>
    </section>);

};

window.Pricing = Pricing;