/* Hero — animated AI agent flow: code → tests → deploy */
const heroStyles = {
  hero: {
    position: 'relative',
    paddingTop: 80,
    paddingBottom: 120,
    overflow: 'hidden',
    borderTop: 0,
  },
  badge: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '6px 14px 6px 6px',
    background: 'var(--paper)',
    border: '1px solid var(--line)',
    borderRadius: 999,
    fontFamily: 'var(--font-mono)',
    fontSize: 12,
    color: 'var(--ink-2)',
  },
  badgePill: {
    background: 'var(--ink)',
    color: 'var(--bg)',
    padding: '3px 10px',
    borderRadius: 999,
    fontSize: 10,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
  },
  h1: {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(56px, 8.5vw, 128px)',
    lineHeight: 0.94,
    letterSpacing: '-0.03em',
    margin: '32px 0 28px',
    maxWidth: 1100,
  },
  sub: {
    fontSize: 20,
    color: 'var(--ink-3)',
    maxWidth: 560,
    lineHeight: 1.45,
    margin: 0,
  },
  ctas: {
    display: 'flex',
    gap: 12,
    marginTop: 40,
    alignItems: 'center',
  },
  meta: {
    display: 'flex',
    gap: 32,
    marginTop: 56,
    paddingTop: 32,
    borderTop: '1px solid var(--line)',
    fontFamily: 'var(--font-mono)',
    fontSize: 12,
    color: 'var(--ink-3)',
    letterSpacing: '0.04em',
  },
  metaItem: {
    display: 'flex', flexDirection: 'column', gap: 6,
  },
  metaNum: {
    fontFamily: 'var(--font-display)',
    fontSize: 32,
    color: 'var(--ink)',
    letterSpacing: '-0.02em',
  },
};

function Hero() {
  return (
    <section style={heroStyles.hero}>
      <div className="aurora" />
      <div className="gridlines" />
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 1fr)', gap: 56, alignItems: 'start' }}>
          <div>
            <span style={heroStyles.badge}>
              <span style={heroStyles.badgePill}>NEW</span>
              Silicon Valley QA pioneers — human + AI, side by side
              <span style={{ color: 'var(--ink-4)', marginLeft: 4 }}>↗</span>
            </span>
            <h1 style={heroStyles.h1}>
              Ship software<br/>that <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>doesn't&nbsp;break.</em>
            </h1>
            <p style={heroStyles.sub}>
              Senior QA engineers from Silicon Valley plus the AI platform we built. We embed with your team — writing tests, watching production every day, catching regressions <span style={{ color: 'var(--ink)', borderBottom: '1px dashed var(--accent-soft)' }}>before your users do.</span>
            </p>
            <div style={heroStyles.ctas}>
              <a className="btn btn-primary" href="#cta">
                Start free trial <span className="arrow">→</span>
              </a>
              <a className="btn btn-ghost" href="#demo">Meet your QA lead</a>
            </div>
            <div style={heroStyles.meta}>
              <div style={heroStyles.metaItem}>
                <span style={heroStyles.metaNum} className="tabular">99.4<span style={{ color: 'var(--ink-4)' }}>%</span></span>
                <span>regression catch rate</span>
              </div>
              <div style={heroStyles.metaItem}>
                <span style={heroStyles.metaNum} className="tabular">11<span style={{ color: 'var(--ink-4)' }}>×</span></span>
                <span>faster release cadence</span>
              </div>
              <div style={heroStyles.metaItem}>
                <span style={heroStyles.metaNum} className="tabular">20<span style={{ color: 'var(--ink-4)' }}>+</span></span>
                <span>Silicon Valley QA leads</span>
              </div>
            </div>
          </div>

          <HeroPipeline />
        </div>
      </div>
    </section>
  );
}

function HeroPipeline() {
  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius-lg)',
      padding: 0,
      overflow: 'hidden',
      boxShadow: '0 1px 0 rgba(20,20,15,0.02), 0 30px 60px -30px rgba(20,20,15,0.18)',
      position: 'relative',
    }}>
      {/* window chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '12px 16px', borderBottom: '1px solid var(--line)',
        background: 'var(--bg-2)',
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#E5C2A0' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#D8D6C9' }} />
          <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#D8D6C9' }} />
        </div>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>
          agent.qafactory.ai / pipeline
        </span>
        <span className="pill" style={{ padding: '3px 10px', fontSize: 10 }}>
          <span className="dot" /> LIVE
        </span>
      </div>

      <div style={{ padding: '28px 24px 24px' }}>
        <PipelineStage
          idx="01"
          label="READ CODE"
          title="agent.read('apps/checkout')"
          detail="Indexed 1,284 files · 18 services"
          state="done"
        />
        <PipelineConnector active />
        <PipelineStage
          idx="02"
          label="GENERATE TESTS"
          title="agent.synthesize_tests()"
          detail="48 unit · 22 integration · 9 e2e"
          state="done"
          tests
        />
        <PipelineConnector active />
        <PipelineStage
          idx="03"
          label="RUN & HEAL"
          title="agent.run_and_heal()"
          detail="79 passed · 1 self-healed · 0 failed"
          state="active"
          progress
        />
        <PipelineConnector />
        <PipelineStage
          idx="04"
          label="DEPLOY"
          title="agent.deploy('production')"
          detail="awaiting green build…"
          state="pending"
        />
      </div>

      {/* scanline overlay */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden',
        borderRadius: 'var(--radius-lg)',
      }}>
        <div style={{
          position: 'absolute', left: 0, right: 0, height: 80,
          background: 'linear-gradient(to bottom, transparent, rgba(107,18,32,0.06), transparent)',
          animation: 'scan 6s ease-in-out infinite',
        }} />
      </div>
    </div>
  );
}

function PipelineStage({ idx, label, title, detail, state, tests, progress }) {
  const isDone = state === 'done';
  const isActive = state === 'active';
  const isPending = state === 'pending';

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '36px 1fr auto',
      gap: 14,
      alignItems: 'center',
      padding: '10px 4px',
      opacity: isPending ? 0.5 : 1,
    }}>
      <div style={{
        width: 32, height: 32,
        borderRadius: 8,
        background: isDone ? 'var(--accent-tint)' : isActive ? 'var(--ink)' : 'var(--bg-2)',
        color: isDone ? 'var(--accent)' : isActive ? 'var(--bg)' : 'var(--ink-4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
        border: '1px solid ' + (isDone ? 'var(--accent-soft)' : isActive ? 'var(--ink)' : 'var(--line)'),
      }}>
        {isDone ? '✓' : idx}
      </div>
      <div style={{ minWidth: 0 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-4)', marginBottom: 2 }}>
          {label}
        </div>
        <div className="mono" style={{ fontSize: 13, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {title}
          {isActive && <span style={{ animation: 'blink 1s steps(1) infinite', marginLeft: 2 }}>▌</span>}
        </div>
        {tests && <TestDots />}
        {progress && <ProgressBar />}
        {!tests && !progress && (
          <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{detail}</div>
        )}
        {(tests || progress) && (
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }} className="mono">{detail}</div>
        )}
      </div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.08em' }}>
        {isDone && '0.84s'}
        {isActive && 'running…'}
        {isPending && 'queued'}
      </div>
    </div>
  );
}

function PipelineConnector({ active }) {
  return (
    <div style={{ marginLeft: 16, height: 18, position: 'relative' }}>
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
        background: 'var(--line)',
      }} />
      {active && (
        <div style={{
          position: 'absolute', left: 0, top: 0, width: 2, height: '100%',
          background: 'linear-gradient(to bottom, var(--accent), transparent)',
          animation: 'flow 1.4s ease-in-out infinite',
        }} />
      )}
    </div>
  );
}

function TestDots() {
  const dots = Array.from({ length: 79 });
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(40, 1fr)',
      gap: 2,
      marginTop: 6,
    }}>
      {dots.map((_, i) => (
        <span key={i} style={{
          aspectRatio: '1',
          background: i === 35 ? 'var(--warn)' : 'var(--accent)',
          borderRadius: 1,
          opacity: 0.85,
        }} />
      ))}
    </div>
  );
}

function ProgressBar() {
  return (
    <div style={{
      marginTop: 8, height: 4, background: 'var(--bg-2)', borderRadius: 2, overflow: 'hidden',
      position: 'relative',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, var(--accent) 0%, var(--accent) 68%, transparent 68%)',
      }} />
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: '60%', width: 40,
        background: 'linear-gradient(90deg, transparent, rgba(107,18,32,0.5), transparent)',
        animation: 'flow 1.6s ease-in-out infinite',
      }} />
    </div>
  );
}

Object.assign(window, { Hero });