window.FAQ = function FAQ() {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const [openIdx, setOpenIdx] = React.useState(0);

  const items = [
    { q: "How do you scale a small team?", a: "Agents handle the volume. We handle the judgment. The bottleneck in most automation work isn't headcount. It's specs, taste, and follow-through. You get more shipped per week than a five-person team running the old playbook." },
    { q: "How do you handle our data?", a: "Whatever your tenant is, that's where the work happens. Workspace runs on your Google. Shopify runs on your store. Code lives in your GitHub. We don't extract anything to a separate system, and you can audit every action an agent took." },
    { q: "What if you go away?", a: "Every engagement ships with full documentation and someone on your team trained to operate it. The system runs without us by week six. That's the deal. We're not trying to stay forever." },
    { q: "Why not a bigger firm?", a: "Their cost-of-discovery is six months. Ours is six days. Their billing assumes hourly; ours is fixed-scope. If you need a fifty-person change-management initiative, we're the wrong fit. If you need a working agent shipped in six weeks, we're exactly right." },
    { q: "What does an engagement look like?", a: "Week one, we shadow your team and find the highest-leverage automation. Weeks two through five, we build it inside your existing stack. Week six, handoff. Most engagements run four to six weeks; a few stretch to twelve." },
    { q: "How do you charge?", a: "Fixed scope, fixed price, fixed timeline. No hourly billing. If we run over, that's on us. Specific quotes after the consultation." },
  ];

  const sectionPadding = isMobile ? '80px 24px' : isTablet ? '112px 32px' : '160px 48px';
  const h2Size = isMobile ? 40 : isTablet ? 56 : 88;

  return (
    <section id="faq" style={{ padding: sectionPadding, maxWidth: 1280, margin: '0 auto' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr',
        gap: isMobile ? 56 : 96,
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Frequently asked</div>
          <h2 style={{
            fontSize: h2Size, fontWeight: 800, lineHeight: 0.95,
            letterSpacing: '-0.035em', color: 'var(--text-primary)', margin: 0,
          }}>
            Six things <br />
            people always ask.
          </h2>
        </div>
        <div>
          {items.map((it, i) => {
            const open = openIdx === i;
            return (
              <div key={i} style={{
                borderTop: '1px solid var(--border)',
                borderBottom: i === items.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <button onClick={() => setOpenIdx(open ? -1 : i)}
                  aria-expanded={open}
                  style={{
                    width: '100%', textAlign: 'left',
                    background: 'transparent', border: 'none', padding: '24px 0',
                    cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                    fontFamily: 'var(--font-sans)', fontWeight: 600,
                    fontSize: isMobile ? 18 : 22, lineHeight: 1.3,
                    letterSpacing: '-0.015em',
                    color: 'var(--text-primary)',
                  }}>
                  <span>{it.q}</span>
                  <span aria-hidden="true" style={{
                    flexShrink: 0, width: 24, height: 24,
                    transform: open ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform var(--dur-base) var(--ease)',
                    color: 'var(--text-tertiary)',
                  }}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                      <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                    </svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: open ? 360 : 0,
                  opacity: open ? 1 : 0,
                  overflow: 'hidden',
                  transition: 'max-height var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease)',
                }}>
                  <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--text-secondary)', margin: '0 0 24px' }}>
                    {it.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};