/* Integrations + Testimonial + FAQ + CTA + Footer */
function Integrations() {
  const tools = [
    'GitHub','GitLab','Jira','Linear','Slack','PagerDuty',
    'Datadog','Sentry','Vercel','CircleCI','Playwright','Cypress',
  ];
  return (
    <section id="integrations">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />06 — Integrations</span>
          <h2>Plugs into the stack <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>you already&nbsp;run.</em></h2>
          <p>Read-only access to your repo. Two-way sync with your tracker. Findings show up where your team already works.</p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)',
          overflow: 'hidden', background: 'var(--paper)',
        }}>
          {tools.map((n, i) => (
            <div key={n} style={{
              padding: 28,
              borderRight: ((i + 1) % 4 !== 0) ? '1px solid var(--line)' : 0,
              borderBottom: i < 8 ? '1px solid var(--line)' : 0,
              display: 'flex', alignItems: 'center', gap: 14, minHeight: 110,
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 8,
                background: 'var(--bg)', border: '1px solid var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--ink)',
              }}>{n[0]}</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{n}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em' }}>● CONNECTED</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section style={{ background: 'var(--ink)', color: '#F2EFE5', borderTop: 0 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 64, alignItems: 'center' }}>
          <div>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'rgba(242,239,229,0.5)' }}>
              <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--accent)', borderRadius: '50%', marginRight: 8 }} />07 — IN PRODUCTION
            </span>
            <blockquote style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(36px, 4.4vw, 60px)',
              lineHeight: 1.1, letterSpacing: '-0.02em',
              margin: '24px 0 32px', color: '#F2EFE5',
            }}>
              "Our QA lead and the agent deleted our entire QA backlog in a weekend. On day two they <em style={{ fontStyle: 'italic', color: '#E89A8B' }}>caught a payments regression</em> that would have cost us a Sev-1."
            </blockquote>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'linear-gradient(135deg,#E89A8B,#6B1220)' }} />
              <div>
                <div style={{ fontSize: 15, color: '#F2EFE5' }}>Priya Venkataraman</div>
                <div className="mono" style={{ fontSize: 11, color: 'rgba(242,239,229,0.55)', letterSpacing: '0.06em' }}>VP ENG · MERCURY</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[
              ['−84%','REGRESSIONS'],['3.2×','RELEASE FREQ'],['$1.4M','QA SPEND SAVED'],
            ].map(([n,l]) => (
              <div key={l} style={{ paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, color: '#F2EFE5', letterSpacing: '-0.02em' }} className="tabular">{n}</div>
                <div className="mono" style={{ fontSize: 10, color: 'rgba(242,239,229,0.5)', letterSpacing: '0.1em' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'Is this just a tool, or do you provide engineers too?', a: 'Both. Every account gets a dedicated Silicon Valley QA lead — a senior engineer with 10+ years at FAANG-tier companies — who works alongside your team. The AI agent is the leverage they bring with them. You hire qafactory; you don\'t buy a SaaS and hope.' },
    { q: 'Where is your QA team based?', a: 'Our QA leads are headquartered in Silicon Valley, with the broader team distributed across San Francisco, New York, London, and Bangalore. Coverage runs follow-the-sun so a human is always on for your timezone.' },
    { q: 'How long does setup take?', a: 'Roughly eight minutes for the agent: install the GitHub app, point us at staging, and the first agent-generated PR lands within the hour. Your QA lead joins your Slack the same day.' },
    { q: 'Will the agent push code without review?', a: 'No. Every test the agent writes is opened as a normal PR, reviewed by your QA lead, and owned by your team in your existing test framework.' },
    { q: 'What about flaky tests?', a: 'On day one your QA lead triages your existing suite with the agent, root-causes flakes, and either fixes or quarantines them. Most teams see flake rates drop ~80% in week one.' },
    { q: 'Can I self-host?', a: 'Yes. Fully-managed cloud, BYOC on AWS/GCP, and air-gapped on-prem are all supported. Source code never leaves your boundary in BYOC mode.' },
    { q: 'How is this priced?', a: 'Flat monthly per dedicated QA lead, with unlimited agent runs and unlimited health sweeps. No per-execution surprise bills. 14-day free trial, no card.' },
    { q: 'Is it SOC 2?', a: 'SOC 2 Type II, ISO 27001, GDPR, HIPAA. Full audit log piped to your SIEM.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot" />08 — Questions</span>
          <h2>The things people ask <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>before signing.</em></h2>
        </div>
        <div style={{ border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--paper)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 0 }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '24px 28px', textAlign: 'left', background: 'none', border: 0, cursor: 'pointer',
              }}>
                <span style={{ display: 'flex', gap: 24, alignItems: 'baseline' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.1em' }}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{it.q}</span>
                </span>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 18,
                  color: open === i ? 'var(--accent)' : 'var(--ink-3)',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                  transition: 'transform 0.2s',
                }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: '0 28px 24px 78px', color: 'var(--ink-3)', fontSize: 16, lineHeight: 1.55, maxWidth: 760 }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="cta" style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="gridlines" />
      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <span className="pill" style={{ marginBottom: 28 }}>
          <span className="dot" /> QA LEADS ONLINE · ACCEPTING NEW ACCOUNTS
        </span>
        <h2 className="display" style={{ fontSize: 'clamp(64px, 9vw, 144px)', margin: '0 auto 28px', maxWidth: 1100 }}>
          Stop testing.<br/>Start <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>shipping.</em>
        </h2>
        <p style={{ color: 'var(--ink-3)', fontSize: 18, maxWidth: 580, margin: '0 auto 40px' }}>
          14-day free trial. No credit card. Your dedicated QA lead joins your Slack within the hour — and the first AI-generated test PR lands the same day.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
          <a className="btn btn-primary" href="#" style={{ padding: '14px 22px', fontSize: 15 }}>
            Start free trial <span className="arrow">→</span>
          </a>
          <a className="btn btn-ghost" href="#" style={{ padding: '14px 22px', fontSize: 15 }}>Book a 20-min demo</a>
        </div>
        <div className="mono" style={{ marginTop: 40, fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.1em' }}>
          SILICON VALLEY · NEW YORK · LONDON · BANGALORE — SOC 2 · GDPR · HIPAA
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'rgba(242,239,229,0.7)', padding: '72px 0 32px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, marginBottom: 56 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: '#F2EFE5', letterSpacing: '-0.02em', marginBottom: 12, display: 'flex', alignItems: 'center' }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                width: 28, height: 28, background: '#F2EFE5', color: 'var(--ink)',
                marginRight: 10, fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 600, borderRadius: 4,
              }}>q</span>
              qafactory<span style={{ color: 'var(--accent)' }}>.ai</span>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.55, maxWidth: 300, color: 'rgba(242,239,229,0.55)' }}>
              Silicon Valley QA pioneers and the AI platform we built — embedded with software teams who'd rather ship than babysit tests.
            </p>
            <div className="mono" style={{ marginTop: 16, fontSize: 11, color: 'rgba(242,239,229,0.7)', letterSpacing: '0.04em', lineHeight: 1.6 }}>
              A product of <a href="#" style={{ color: '#F2EFE5', borderBottom: '1px solid rgba(242,239,229,0.3)' }}>DigitX LLC</a><br/>
              <span style={{ color: 'rgba(242,239,229,0.5)' }}>QA HQ — Silicon Valley · Corporate — 500 7th Avenue, New York, NY 10018</span>
            </div>
            <div className="mono" style={{ marginTop: 20, fontSize: 11, color: 'rgba(242,239,229,0.45)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#E89A8B', boxShadow: '0 0 8px #E89A8B' }} />
              ALL SYSTEMS OPERATIONAL
            </div>
          </div>
          {[
            { h: 'PRODUCT', l: ['Test generation','Health monitor','Self-healing','Pricing'] },
            { h: 'COMPANY', l: ['About','Customers','Careers','Press'] },
            { h: 'RESOURCES', l: ['Docs','Changelog','Blog','Status'] },
            { h: 'LEGAL', l: ['Privacy','Terms','DPA','SOC 2 report'] },
          ].map(col => (
            <div key={col.h}>
              <div className="mono" style={{ fontSize: 10, color: 'rgba(242,239,229,0.4)', letterSpacing: '0.12em', marginBottom: 14 }}>{col.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
                {col.l.map(x => <a key={x} href="#" style={{ color: 'rgba(242,239,229,0.7)' }}>{x}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(242,239,229,0.4)', letterSpacing: '0.06em',
        }}>
          <span>© 2026 DIGITX LLC · QAFACTORY.AI IS A PRODUCT OF DIGITX</span>
          <span>SILICON VALLEY → THE WORLD · NEW YORK CORPORATE</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Integrations, Testimonial, FAQ, CTA, Footer });