/* Logo cloud + How it works */
function LogoCloud() {
  const logos = ['STRIPE','LINEAR','NOTION','RAMP','VERCEL','PLAID','RETOOL','MERCURY','BREX','VANTA','LOOM','ARC'];
  const doubled = [...logos, ...logos];
  return (
    <section style={{ paddingTop: 56, paddingBottom: 56, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '260px 1fr', gap: 48, alignItems: 'center',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.14em' }}>● TRUSTED BY</span>
            <span style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em', color: 'var(--ink)' }}>1,400+</span> engineering teams,<br/>shipping every Friday with confidence.
            </span>
          </div>
          <div style={{
            position: 'relative', overflow: 'hidden',
            maskImage: 'linear-gradient(to right, transparent, black 64px, black calc(100% - 64px), transparent)',
          }}>
            <div style={{
              display: 'flex', gap: 56, width: 'max-content',
              animation: 'marquee 50s linear infinite',
            }}>
              {doubled.map((l, i) => (
                <span key={i} style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 26,
                  color: 'var(--ink-2)',
                  letterSpacing: '-0.01em',
                  opacity: 0.8,
                  whiteSpace: 'nowrap',
                }}>{l}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const howStyles = {
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 0,
    border: '1px solid var(--line)',
    borderRadius: 'var(--radius-lg)',
    overflow: 'hidden',
    background: 'var(--paper)',
  },
  step: {
    padding: 36,
    borderRight: '1px solid var(--line)',
    position: 'relative',
    minHeight: 460,
    display: 'flex',
    flexDirection: 'column',
  },
  stepLast: {
    padding: 36,
    position: 'relative',
    minHeight: 460,
    display: 'flex',
    flexDirection: 'column',
  },
  num: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.12em',
    color: 'var(--ink-4)',
    marginBottom: 24,
  },
  visual: {
    height: 200,
    background: 'var(--bg)',
    border: '1px solid var(--line)',
    borderRadius: 8,
    marginBottom: 24,
    overflow: 'hidden',
    position: 'relative',
  },
  title: {
    fontFamily: 'var(--font-display)',
    fontSize: 32,
    lineHeight: 1.05,
    letterSpacing: '-0.02em',
    margin: '0 0 12px',
  },
  body: {
    color: 'var(--ink-3)',
    fontSize: 15,
    margin: 0,
    lineHeight: 1.55,
  },
};

function HowItWorks() {
  return (
    <section id="how">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />02 — How it works</span>
          <h2>Your QA team. Your QA agent.<br/><em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Zero on-call panic.</em></h2>
          <p>We embed a senior QA lead from Silicon Valley with your team and connect our agent to your repo and platform. Three continuous loops keep your software shipping and stable — humans for judgment, AI for scale.</p>
        </div>

        <div style={howStyles.grid}>
          <div style={howStyles.step}>
            <div style={howStyles.num}>STEP 01 · INGEST</div>
            <div style={howStyles.visual}><CodeIngestVisual /></div>
            <h3 style={howStyles.title}>Your QA lead and the agent read the codebase together.</h3>
            <p style={howStyles.body}>The agent indexes every service, route, and migration in under an hour. Your assigned QA lead reviews the risk map and adds the context only a human catches — auth gotchas, regulatory edges, that one flaky vendor.</p>
          </div>
          <div style={howStyles.step}>
            <div style={howStyles.num}>STEP 02 · SYNTHESIZE</div>
            <div style={howStyles.visual}><TestSynthVisual /></div>
            <h3 style={howStyles.title}>Humans write the spec. The agent scales the coverage.</h3>
            <p style={howStyles.body}>Your QA lead defines what "done" looks like. The agent generates unit, integration, and end-to-end tests from real user behavior, sized to that bar — reviewed in PRs, owned by your team, self-healing when selectors drift.</p>
          </div>
          <div style={howStyles.stepLast}>
            <div style={howStyles.num}>STEP 03 · WATCH</div>
            <div style={howStyles.visual}><WatchVisual /></div>
            <h3 style={howStyles.title}>Your QA lead reviews every morning's sweep.</h3>
            <p style={howStyles.body}>Every morning at 06:00, the agent sweeps every critical flow on your live platform. Your QA lead triages the findings, escalates what matters, and pings you in Slack before standup — never a pager mid-coffee.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function CodeIngestVisual() {
  const lines = [
    { ind: 0, color: 'var(--ink-3)', text: 'apps/' },
    { ind: 1, color: 'var(--ink)', text: 'checkout/', tag: 'indexed' },
    { ind: 2, color: 'var(--ink-3)', text: 'routes.ts' },
    { ind: 2, color: 'var(--ink-3)', text: 'cart.tsx' },
    { ind: 1, color: 'var(--ink)', text: 'auth/', tag: 'indexed' },
    { ind: 2, color: 'var(--ink-3)', text: 'session.ts' },
    { ind: 1, color: 'var(--accent)', text: 'billing/', tag: 'reading…' },
  ];
  return (
    <div style={{ padding: 16, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.7 }}>
      {lines.map((l, i) => (
        <div key={i} style={{ paddingLeft: l.ind * 14, color: l.color, display: 'flex', justifyContent: 'space-between' }}>
          <span>{l.ind > 0 && '└ '}{l.text}</span>
          {l.tag && <span style={{
            fontSize: 9, color: l.tag === 'indexed' ? 'var(--accent)' : 'var(--warn)',
            letterSpacing: '0.08em',
          }}>{l.tag.toUpperCase()}</span>}
        </div>
      ))}
    </div>
  );
}

function TestSynthVisual() {
  return (
    <div style={{ padding: 16, fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.65, color: 'var(--ink)' }}>
      <div style={{ color: 'var(--ink-4)' }}>// generated by qafactory</div>
      <div><span style={{ color: 'var(--accent)' }}>test</span>(<span style={{ color: 'var(--warn)' }}>'checkout w/ saved card'</span>, <span style={{ color: 'var(--ink-3)' }}>async</span> () =&gt; {'{'}</div>
      <div style={{ paddingLeft: 14 }}><span style={{ color: 'var(--ink-3)' }}>const</span> cart = <span style={{ color: 'var(--ink-3)' }}>await</span> seedCart()</div>
      <div style={{ paddingLeft: 14 }}><span style={{ color: 'var(--ink-3)' }}>await</span> page.click(<span style={{ color: 'var(--warn)' }}>'#pay'</span>)</div>
      <div style={{ paddingLeft: 14 }}>expect(order.status).toBe(<span style={{ color: 'var(--warn)' }}>'paid'</span>)</div>
      <div>{'}'})</div>
      <div style={{ marginTop: 6, color: 'var(--accent)', fontSize: 10, letterSpacing: '0.06em' }}>✓ PASSED · 0.42s</div>
    </div>
  );
}

function WatchVisual() {
  const bars = [0.4, 0.6, 0.55, 0.7, 0.65, 0.8, 0.72, 0.85, 0.78, 0.9, 0.82, 0.95, 0.88, 0.92, 0.97];
  return (
    <div style={{ padding: 16, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em', marginBottom: 12 }}>
        <span>UPTIME · LAST 14 DAYS</span>
        <span style={{ color: 'var(--accent)' }}>● 99.98%</span>
      </div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 4 }}>
        {bars.map((h, i) => (
          <div key={i} style={{
            flex: 1, height: `${h * 100}%`,
            background: i === 5 ? 'var(--warn)' : 'var(--accent)',
            opacity: 0.85,
            borderRadius: '2px 2px 0 0',
            transformOrigin: 'bottom',
          }} />
        ))}
      </div>
      <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-4)', display: 'flex', justifyContent: 'space-between' }}>
        <span>Apr 17</span><span>Apr 30</span>
      </div>
    </div>
  );
}

Object.assign(window, { LogoCloud, HowItWorks });