/* burp.agency homepage — FAQ (typographic, expanding) */

const QA = [
  { q: 'Are you a content agency, a design studio, or a growth team?',
    a: 'All three. We run them as one practice — Words, Shape, Motion — because B2B SaaS marketing breaks when those three are handed off between vendors. Most engagements use at least two.' },
  { q: 'What does an engagement look like?',
    a: 'Usually a six-to-twelve-week scope with a clear deliverable: a content engine, a website, a GTM plan, a campaign. After that we either re-scope or roll into a retainer. We don\'t do anything before the audit.' },
  { q: 'Who actually does the work?',
    a: 'A small senior team. No farmed-out copy, no template decks. The person in your Slack is the person writing the words and shipping the design.' },
  { q: 'What stage do you work with?',
    a: 'Pre-seed to Series B is the sweet spot. We\'re built for teams that don\'t yet have a full marketing org but need the work to look like it does.' },
  { q: 'How much does it cost?',
    a: 'Project work starts around $8k. Retainers start around $6k/month. The audit is free and ends with a written deliverable whether you hire us or not.' },
  { q: 'Do you work with agencies / dev shops as a white-label?',
    a: 'Yes — quietly. Several of our retainer clients are themselves agencies. Email rohan@burp.agency.' },
];

const FAQRow = ({ qa, i }) => {
  const [ref, style] = useReveal({ delay: i * 60 });
  const [open, setOpen] = React.useState(false);
  return (
    <div ref={ref} style={style}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', textAlign: 'left',
          border: 0, background: 'transparent',
          padding: '24px 0',
          borderTop: i === 0 ? '1px solid var(--color-warm-gray)' : 'none',
          borderBottom: '1px solid var(--color-warm-gray)',
          cursor: 'pointer', color: 'inherit',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'flex-start',
        }}
        aria-expanded={open}>
        <span style={{
          fontFamily: 'Georgia, serif', fontWeight: 400,
          fontSize: 'clamp(20px, 2vw, 26px)',
          letterSpacing: '-0.018em', lineHeight: 1.25,
          color: 'var(--color-ink)',
          maxWidth: '52ch',
          textWrap: 'balance',
        }}>{qa.q}</span>
        <span style={{
          fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 500,
          color: open ? 'var(--color-orange)' : 'var(--color-ink)',
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          transformOrigin: 'center',
          transition: 'transform .2s ease, color .2s ease',
          width: 24, textAlign: 'center', userSelect: 'none',
          lineHeight: 1.2,
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? 320 : 0,
        opacity: open ? 1 : 0,
        overflow: 'hidden',
        transition: 'max-height .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, padding .25s ease',
        paddingBottom: open ? 24 : 0,
        paddingTop: open ? 8 : 0,
      }}>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 15,
          lineHeight: 1.7, color: 'var(--color-mid-gray)',
          margin: 0, maxWidth: '64ch',
        }}>{qa.a}</p>
      </div>
    </div>
  );
};

const FAQ = () => {
  return (
    <Section bg="cream" label="FAQ" style={{ borderTop: '1px solid var(--color-warm-gray)' }}>
      <Container>
        <div className="faq-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr',
          gap: 80, alignItems: 'flex-start',
        }}>
          <Reveal>
            <div>
              <Label>SMALL PRINT, OUT LOUD</Label>
              <h2 style={{
                fontFamily: 'Georgia, serif', fontWeight: 400,
                fontSize: 'clamp(36px, 4.6vw, 64px)',
                letterSpacing: '-0.018em', lineHeight: 1.05,
                color: 'var(--color-ink)', margin: '24px 0 0',
                maxWidth: '14ch',
              }}>The bits people<br/>always ask first.</h2>
              <p style={{
                marginTop: 24,
                fontFamily: 'Inter, sans-serif', fontSize: 15,
                lineHeight: 1.75, color: 'var(--color-mid-gray)',
                maxWidth: '34ch',
              }}>Still missing something? <a href="mailto:rohan@burp.agency" style={{ color: 'var(--color-ink)', borderBottom: '1px solid var(--color-ink)' }}>rohan@burp.agency</a></p>
            </div>
          </Reveal>

          <div>
            {QA.map((qa, i) => <FAQRow key={i} qa={qa} i={i} />)}
          </div>
        </div>
      </Container>
    </Section>
  );
};

Object.assign(window, { FAQ });