/* SERVICE FAQ — pre-purchase common questions */

function SvcFAQ() {
  const isMobile = useWindowWidth() < 768;

  const items = [
    { q: 'How quickly can you start?',                  a: 'Most engagements start 2–3 weeks from the signed SOW. For sprint work we can sometimes move faster. We do not over-book — we cap new clients per month to protect quality.' },
    { q: 'What does the first 30 days look like?',      a: 'Week 1 is discovery + audit. Week 2 we ship the prioritization doc and your first 3 hypotheses. Weeks 3–4 your first experiments are in market with measurable results to review.' },
    { q: 'Who actually does the work?',                 a: 'Senior in-house specialists. Every account has a named lead, a strategist, a media buyer or growth engineer, and a creative — all 7+ years experience, no juniors silently shadowing.' },
    { q: 'Do you require us to switch platforms?',      a: 'No. We\'re platform-agnostic. We\'ll tell you honestly if your stack is the bottleneck, but we don\'t push migrations as a default.' },
    { q: 'How do you measure success?',                 a: 'In the SOW we agree on a primary KPI per service — usually blended ROAS, CVR or net new revenue. Everything ties back to that. We share a live dashboard you can check anytime.' },
    { q: 'What happens if we want to end the engagement?', a: 'Monthly retainers are cancelable with 30 days notice. We hand off everything — accounts, decks, dashboards, playbooks — and run a closeout review so your team can keep momentum.' },
    { q: 'Can you work with our existing in-house team?', a: 'Yes — about 60% of our work is alongside in-house teams. We fit into your existing rituals (standups, retros, demos) and can use your tools (Slack, Linear, Notion).' },
    { q: 'Do you sign NDAs / DPAs / non-competes?',    a: 'NDAs and DPAs — always. We don\'t sign category exclusivities because we work across 10 verticals, but we firewall any direct competitors and rotate teams when needed.' },
  ];

  const [open, setOpen] = useState(0);

  return (
    <section data-screen-label="Svc FAQ" id="svc-faq" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.5fr', gap: isMobile ? 32 : 56, alignItems: 'start' }}>
          <div style={{ position: isMobile ? 'relative' : 'sticky', top: isMobile ? 0 : 120 }}>
            <span className="eyebrow"><span className="dot"></span>Before you book</span>
            <h2 className="h2" style={{ marginTop: 16 }}>
              The questions <span className="accent">we always get.</span>
            </h2>
            <p className="lead" style={{ marginTop: 18 }}>
              The honest answers — no sales fluff. If yours isn't here, ping us.
            </p>

            <div style={{ marginTop: 28, background: 'var(--ink)', color: 'white', borderRadius: 14, padding: 18 }}>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>Still curious?</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,.7)', marginBottom: 14 }}>
                Drop us a line. We reply within 4 business hours during the week.
              </div>
              <button className="btn btn-green" style={{ height: 40, padding: '0 6px 0 16px', fontSize: 13 }} onClick={() => window.open('https://wa.me/917982069421', '_blank')}>
                Contact us
                <span className="ico" style={{ width: 24, height: 24 }}><Icon.Arrow size={11} /></span>
              </button>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {items.map((it, i) => (
              <FAQItem2 key={i} item={it} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQItem2({ item, isOpen, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--hairline)' }}>
      <button onClick={onToggle} style={{
        width: '100%', textAlign: 'left',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        padding: '22px 0',
        fontSize: 17, fontWeight: 500, color: 'var(--ink)',
        letterSpacing: '-0.005em',
        background: 'none', border: 'none', cursor: 'pointer',
      }}>
        <span>{item.q}</span>
        <span style={{
          flexShrink: 0,
          width: 28, height: 28, borderRadius: '50%',
          background: isOpen ? 'var(--ink)' : 'transparent',
          color: isOpen ? 'white' : 'var(--ink)',
          border: isOpen ? 'none' : '1px solid var(--hairline)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          transition: 'all .25s var(--ease)',
        }}>
          {isOpen ? <span style={{ width: 10, height: 1.5, background: 'white', display: 'block' }}></span> : <Icon.Plus size={12} />}
        </span>
      </button>
      <div style={{
        overflow: 'hidden',
        maxHeight: isOpen ? 300 : 0,
        opacity: isOpen ? 1 : 0,
        transition: 'max-height .35s var(--ease), opacity .25s var(--ease), padding .25s var(--ease)',
        paddingBottom: isOpen ? 22 : 0,
      }}>
        <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6, paddingRight: 40 }}>{item.a}</p>
      </div>
    </div>
  );
}

window.SvcFAQ = SvcFAQ;