// Workflow — 60-minute timeline
const Workflow = () => {
  const TOTAL = 120;
  const steps = [
    { t: 0,   label: 'DNA extraction',     detail: 'Cell lysis and nucleic-acid capture on-chip. No off-instrument prep.', dur: 25 },
    { t: 25,  label: 'Fragmentation',      detail: 'Enzymatic shearing to defined insert size. Continuous flow, no time lost.', dur: 20 },
    { t: 45,  label: 'Tagmentation',       detail: 'Adapters and indexes inserted in a single step. 96 in parallel.', dur: 25 },
    { t: 70,  label: 'PCR amplification',  detail: '8 cycles. Real-time fluorescence monitoring on-board.', dur: 32 },
    { t: 102, label: 'Clean-up',           detail: 'On-chip magnetic capture removes free adapters. Sequencer-ready library out.', dur: 18 },
  ];

  return (
    <section id="workflow" className="section" style={{ background: 'var(--paper)', maxWidth:'none', borderTop:'1px solid var(--rule-soft)', borderBottom:'1px solid var(--rule-soft)' }}>
      <div style={{maxWidth: 1440, margin:'0 auto'}}>
        {/* Header */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 2fr',
          gap: 64,
          marginBottom: 80,
          alignItems: 'start',
        }} className="wf-header">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <span className="sec-num">— 03 / Workflow</span>
            <span className="eyebrow">Sample to library</span>
          </div>
          <h2 className="h-section">
            Two hours. <em>Five</em> steps.<br/>
            Zero pipetting.
          </h2>
        </div>

        {/* Timeline */}
        <div className="wf-timeline" style={{
          position: 'relative',
          background: 'var(--bone)',
          border: '1px solid var(--rule)',
          padding: '48px 40px 60px',
        }}>
          {/* Top scale */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(7, 1fr)',
            marginBottom: 24,
            paddingLeft: 0,
            paddingRight: 0,
            position: 'relative',
            borderBottom: '1px solid var(--rule-soft)',
            paddingBottom: 8,
          }}>
            {[0,20,40,60,80,100,120].map((m, i) => (
              <div key={m} style={{
                fontFamily: 'var(--mono)',
                fontSize: 10.5,
                color: 'var(--ink-mute)',
                letterSpacing: '0.04em',
                textAlign: i === 0 ? 'left' : i === 6 ? 'right' : 'center',
                paddingLeft: i === 0 ? 0 : 0,
              }}>{m === 0 ? 'T+0' : m === 120 ? 'T+2 HRS' : `${m}`}</div>
            ))}
          </div>

          {/* Bar chart of steps */}
          <div style={{
            position: 'relative',
            height: 200,
            paddingTop: 24,
          }}>
            {steps.map((s, i) => {
              const left = (s.t / TOTAL) * 100;
              const width = (s.dur / TOTAL) * 100;
              const top = i * 40;
              // Three label placements:
              //   - 'after'  : to the right of the bar (bar ends well before edge)
              //   - 'inside' : right-aligned text inside the bar (bar wide enough)
              //   - 'above'  : above the bar (bar ends near edge AND too narrow for inside text)
              const endsAt = left + width;
              let placement;
              if (endsAt < 78) placement = 'after';
              else if (width >= 32) placement = 'inside';
              else placement = 'above';
              return (
                <div key={i} className="wf-row" style={{
                  position: 'absolute',
                  left: 0, right: 0,
                  top: top,
                  height: 32,
                  display: 'flex',
                  alignItems: 'center',
                }}>
                  {/* Track */}
                  <div style={{
                    position: 'absolute',
                    left: 0, right: 0, top: 15,
                    height: 1,
                    background: 'var(--rule-soft)',
                  }}/>

                  {/* Bar */}
                  <div style={{
                    position: 'absolute',
                    left: `${left}%`,
                    width: `${width}%`,
                    minWidth: 14,
                    height: 14,
                    background: 'var(--ink)',
                    top: 8,
                    display: 'flex',
                    alignItems: 'center',
                    paddingLeft: 8,
                  }}>
                    <span style={{
                      fontFamily: 'var(--mono)',
                      fontSize: 9,
                      color: 'var(--bone)',
                      letterSpacing: '0.04em',
                      whiteSpace: 'nowrap',
                    }}>{String(i+1).padStart(2,'0')}</span>
                  </div>

                  {/* Label — three placements */}
                  {placement === 'after' && (
                    <div style={{
                      position: 'absolute',
                      left: `calc(${left + width}% + 12px)`,
                      top: 0,
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 2,
                      maxWidth: `calc(${100-left-width}% - 16px)`,
                    }} className="wf-label">
                      <div style={{
                        fontFamily: 'var(--sans)',
                        fontSize: 13.5,
                        fontWeight: 500,
                        color: 'var(--ink)',
                        lineHeight: 1.2,
                      }}>{s.label}</div>
                      <div style={{
                        fontFamily: 'var(--sans)',
                        fontSize: 11.5,
                        color: 'var(--ink-mute)',
                        lineHeight: 1.3,
                        whiteSpace: 'nowrap',
                      }}>{s.dur} min</div>
                    </div>
                  )}
                  {placement === 'inside' && (
                    <div style={{
                      position: 'absolute',
                      right: `calc(${100-left-width}% + 8px)`,
                      top: 0,
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 2,
                      alignItems: 'flex-end',
                      textAlign: 'right',
                    }} className="wf-label">
                      <div style={{
                        fontFamily: 'var(--sans)',
                        fontSize: 13.5,
                        fontWeight: 500,
                        color: 'var(--ink)',
                        lineHeight: 1.2,
                      }}>{s.label}</div>
                      <div style={{
                        fontFamily: 'var(--sans)',
                        fontSize: 11.5,
                        color: 'var(--ink-mute)',
                        lineHeight: 1.3,
                        whiteSpace: 'nowrap',
                      }}>{s.dur} min</div>
                    </div>
                  )}
                  {placement === 'above' && (
                    <div style={{
                      position: 'absolute',
                      right: `calc(${100-left-width}%)`,
                      bottom: 'calc(100% + 4px)',
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 2,
                      alignItems: 'flex-end',
                      textAlign: 'right',
                      whiteSpace: 'nowrap',
                    }} className="wf-label">
                      <div style={{
                        fontFamily: 'var(--sans)',
                        fontSize: 13.5,
                        fontWeight: 500,
                        color: 'var(--ink)',
                        lineHeight: 1.2,
                      }}>{s.label}</div>
                      <div style={{
                        fontFamily: 'var(--sans)',
                        fontSize: 11.5,
                        color: 'var(--ink-mute)',
                        lineHeight: 1.3,
                      }}>{s.dur} min</div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {/* Bottom comparison strip */}
          <div style={{
            marginTop: 24,
            paddingTop: 24,
            borderTop: '1px solid var(--rule-soft)',
            display: 'flex',
            flexDirection: 'column',
            gap: 12,
          }}>
            <div style={{display:'flex', alignItems:'center', gap: 16}}>
              <span className="mono" style={{
                fontSize: 10.5,
                color: 'var(--ink-mute)',
                letterSpacing:'0.04em',
                width: 120,
                textTransform:'uppercase',
              }}>Industry standard</span>
              <div style={{
                flex: 1,
                height: 6,
                background: 'var(--rule-soft)',
                position: 'relative',
                overflow:'visible',
              }}>
                <div style={{
                  height: '100%',
                  width: '100%',
                  background: 'repeating-linear-gradient(45deg, var(--ink-mute) 0 4px, transparent 4px 8px)',
                }}/>
                <span style={{
                  position: 'absolute',
                  right: 0,
                  top: -22,
                  fontFamily: 'var(--mono)',
                  fontSize: 10.5,
                  color: 'var(--ink-mute)',
                }}>4–10 hrs (extends off-chart →)</span>
              </div>
            </div>

            <div style={{display:'flex', alignItems:'center', gap: 16}}>
              <span className="mono" style={{
                fontSize: 10.5,
                color: 'var(--accent)',
                letterSpacing:'0.04em',
                width: 120,
                textTransform:'uppercase',
                fontWeight: 600,
              }}>NGI</span>
              <div style={{
                flex: 1,
                height: 6,
                background: 'var(--rule-soft)',
                position: 'relative',
              }}>
                <div style={{
                  height: '100%',
                  width: '100%',
                  background: 'var(--accent)',
                }}/>
                <span style={{
                  position: 'absolute',
                  right: 0,
                  top: -22,
                  fontFamily: 'var(--mono)',
                  fontSize: 10.5,
                  color: 'var(--ink)',
                  fontWeight: 600,
                }}>2 hrs</span>
              </div>
            </div>
          </div>
        </div>

        {/* Mobile vertical step list — shown only on narrow screens */}
        <div className="wf-mobile-list" style={{
          display: 'none',
          background: 'var(--bone)',
          border: '1px solid var(--rule)',
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '32px 64px 1fr',
              gap: 16,
              padding: '18px 20px',
              borderBottom: i < steps.length - 1 ? '1px solid var(--rule-soft)' : 'none',
              alignItems: 'baseline',
            }}>
              <span className="mono" style={{
                fontSize: 10, color: 'var(--ink-mute)',
                letterSpacing: '0.06em', textTransform: 'uppercase',
              }}>{String(i+1).padStart(2,'0')}</span>
              <span className="mono" style={{
                fontSize: 11, color: 'var(--ink)',
                letterSpacing: '0.04em', whiteSpace: 'nowrap',
              }}>T+{s.t} min</span>
              <div>
                <div style={{
                  fontSize: 14.5, color: 'var(--ink)', fontWeight: 500,
                  marginBottom: 4,
                }}>{s.label}</div>
                <div style={{
                  fontSize: 12.5, color: 'var(--ink-mute)', lineHeight: 1.45,
                }}>{s.detail}</div>
              </div>
            </div>
          ))}
          {/* Comparison footer for mobile */}
          <div style={{padding: '16px 20px', borderTop: '1px solid var(--rule)', background: 'var(--bone-2)'}}>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6}}>
              <span className="mono" style={{fontSize: 10.5, color: 'var(--accent)', letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600}}>NGI</span>
              <span className="mono" style={{fontSize: 11, color: 'var(--ink)', fontWeight: 600}}>2 hrs</span>
            </div>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'}}>
              <span className="mono" style={{fontSize: 10.5, color: 'var(--ink-mute)', letterSpacing: '0.04em', textTransform: 'uppercase'}}>Industry</span>
              <span className="mono" style={{fontSize: 11, color: 'var(--ink-mute)'}}>4–10 hrs</span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .wf-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .wf-label { font-size: 11px !important; }
        }
        @media (max-width: 760px) {
          .wf-timeline { display: none !important; }
          .wf-mobile-list { display: block !important; }
        }
      `}</style>
    </section>
  );
};

window.Workflow = Workflow;