// Faq.jsx — accordion FAQ, hairline-ruled. Display-cap questions.
// Click to expand; one open at a time (acts like radio).

const QUESTIONS = [
  {
    q: 'Why only Google and Meta?',
    a: "Because for a Tier-2 Indian SMB doing ₹50k–₹5L / month, that's where 95% of the addressable demand lives. LinkedIn, TikTok, YouTube ads are all viable — they just rarely move CPL at this spend band. When they will, we'll add them. Until then, we'd rather be excellent on two channels than mediocre on six.",
  },
  {
    q: 'How fast do you move the CPL?',
    a: 'A meaningful read takes 14–21 days of clean data. If you give us ad-account access on Monday, you should see the first benchmark by the end of week three. Anyone who promises a fixed CPL on a sales call before looking at your funnel is lying.',
  },
  {
    q: "What if you can't move my numbers?",
    a: "We'll tell you on the fit call. We pass on roughly 4 out of every 10 inquiries — usually because the offer, landing page, or pricing is the actual problem, not the ads. We'll point you to the right help and not charge you to fail.",
  },
  {
    q: "Do you sign annual contracts?",
    a: "No. 30-day rolling on both tiers. If we're not earning our fee, fire us at the end of the month. We've never had a client churn before month four.",
  },
  {
    q: 'Who actually runs the ads — interns or seniors?',
    a: "Three people. Twelve years of Meta and Google between us. No junior layer. The strategist you meet on the call is the same person logging into your ad account on Tuesday morning.",
  },
  {
    q: 'What do you need from me to start?',
    a: "Admin access to your Meta Business Manager and Google Ads, your last 90 days of CRM/lead data (a CSV is fine), and 45 minutes for a kickoff call to write the thesis. That's week zero. Everything else we build.",
  },
  {
    q: 'Do you do branding, websites, SEO, content?',
    a: "No. One job. If you need those, we have three partners we trust and will introduce you. We don't take referral fees — saves everyone the awkwardness.",
  },
  {
    q: 'How do I see what you\'re doing?',
    a: "A weekly numbers email lands every Monday at 9 AM IST: spend, leads, CPL, ROAS, what we cut, what we re-loaded. Performance Pact clients also get a live dashboard. No quarterly business reviews. No 40-slide decks.",
  },
];

const faqStyles = {
  section: { padding: '96px 0', background: 'var(--bg-sunk)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' },
  head: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 48 },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500, marginBottom: 12 },
  h: {
    fontFamily: 'var(--font-display)', fontWeight: 400,
    fontSize: 'clamp(36px, 5vw, 60px)',
    lineHeight: 0.92, letterSpacing: '-0.015em',
    textTransform: 'uppercase', margin: 0, maxWidth: '14ch',
  },
  sub: {
    fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.55,
    color: 'var(--fg-muted)', maxWidth: '46ch', margin: 0,
    paddingBottom: 6,
  },
  list: { borderTop: '1px solid var(--ink-1000)' },
  item: (open) => ({
    borderBottom: '1px solid var(--border)',
    background: 'transparent',
  }),
  trigger: (open) => ({
    width: '100%',
    background: 'transparent',
    border: 'none',
    cursor: 'pointer',
    padding: '24px 0',
    display: 'grid',
    gridTemplateColumns: '48px 1fr 32px',
    alignItems: 'center',
    gap: 24,
    textAlign: 'left',
    color: 'var(--ink-1000)',
  }),
  idx: (open) => ({
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.14em',
    color: open ? 'var(--powder-500)' : 'var(--fg-muted)',
    fontWeight: 500,
    fontVariantNumeric: 'tabular-nums',
  }),
  q: (open) => ({
    fontFamily: 'var(--font-display)',
    fontWeight: 400,
    fontSize: 'clamp(20px, 2vw, 26px)',
    lineHeight: 1.1,
    letterSpacing: '-0.01em',
    textTransform: 'uppercase',
    color: open ? 'var(--ink-1000)' : 'var(--ink-1000)',
    textWrap: 'balance',
    margin: 0,
  }),
  chev: (open) => ({
    width: 28, height: 28,
    border: '1px solid var(--border-strong)',
    borderRadius: 'var(--r-sm)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--ink-1000)',
    fontFamily: 'var(--font-mono)',
    fontSize: 14,
    transition: 'all var(--dur-base) var(--ease-out)',
    background: open ? 'var(--powder-500)' : 'transparent',
    borderColor: open ? 'var(--powder-500)' : 'var(--border-strong)',
    color: open ? 'var(--ink-0)' : 'var(--ink-1000)',
    flexShrink: 0,
  }),
  panel: (open) => ({
    display: 'grid',
    gridTemplateColumns: '48px 1fr 32px',
    gap: 24,
    overflow: 'hidden',
    maxHeight: open ? 400 : 0,
    transition: 'max-height var(--dur-slow) var(--ease-out), padding var(--dur-slow) var(--ease-out)',
    paddingBottom: open ? 28 : 0,
  }),
  a: {
    gridColumn: '2 / 3',
    fontFamily: 'var(--font-sans)',
    fontSize: 16,
    lineHeight: 1.6,
    color: 'var(--fg-muted)',
    maxWidth: '64ch',
    textWrap: 'pretty',
    margin: 0,
  },
};

function FaqItem({ q, a, idx, open, onToggle }) {
  return (
    <div style={faqStyles.item(open)}>
      <button style={faqStyles.trigger(open)} onClick={onToggle} aria-expanded={open} data-faq-trigger>
        <span style={faqStyles.idx(open)}>{String(idx + 1).padStart(2, '0')}</span>
        <h3 style={faqStyles.q(open)}>{q}</h3>
        <span style={faqStyles.chev(open)} aria-hidden="true">{open ? '−' : '+'}</span>
      </button>
      <div style={faqStyles.panel(open)} aria-hidden={!open} data-faq-panel>
        <p style={faqStyles.a}>{a}</p>
      </div>
    </div>
  );
}

function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={faqStyles.section}>
      <div style={faqStyles.container}>
        <div style={faqStyles.head}>
          <div>
            <div style={faqStyles.eyebrow}>09 · The questions we get asked</div>
            <h2 style={faqStyles.h}>Straight answers. No fine print.</h2>
          </div>
          <p style={faqStyles.sub}>
            If yours isn't here, ask it on the fit call. We'll either answer it,
            or tell you we don't know.
          </p>
        </div>
        <div style={faqStyles.list}>
          {QUESTIONS.map((item, i) => (
            <FaqItem
              key={i} idx={i}
              q={item.q} a={item.a}
              open={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Faq });