const { useState: useStateFq } = React;

const faqStyles = {
  wrap: { padding: 'var(--section-y) 32px', background: 'var(--paper)' },
  inner: { maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' },
  eyebrow: { fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 20 },
  h2: { fontSize: 52, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 600, fontFamily: "'Outfit', system-ui, sans-serif", marginBottom: 24 },
  italic: { color: 'var(--blue)' },
  sub: { fontSize: 15, color: 'var(--ink-muted)', lineHeight: 1.55 },

  list: { borderTop: '1px solid var(--line)' },
  item: { borderBottom: '1px solid var(--line)' },
  head: (open) => ({
    width: '100%', textAlign: 'left',
    padding: '22px 0',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
    fontSize: 17, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.01em',
  }),
  plus: (open) => ({
    width: 28, height: 28, borderRadius: 14,
    border: '1px solid ' + (open ? 'var(--ink)' : 'var(--line)'),
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0, transition: 'transform .25s, background .2s, border-color .2s',
    transform: open ? 'rotate(180deg)' : 'rotate(0)',
    background: open ? 'var(--ink)' : 'transparent',
    color: open ? 'var(--paper)' : 'var(--ink)',
  }),
  body: (open) => ({
    overflow: 'hidden',
    maxHeight: open ? 500 : 0,
    transition: 'max-height .35s ease, opacity .3s ease',
    opacity: open ? 1 : 0,
  }),
  bodyInner: { paddingBottom: 24, fontSize: 15, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720 },

  closingCta: {
    gridColumn: '1 / -1',
    marginTop: 56,
    paddingTop: 40,
    borderTop: '1px solid var(--line-soft)',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 18,
    textAlign: 'center',
  },
  closingCtaLine: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 22,
    lineHeight: 1.3,
    letterSpacing: '-0.01em',
    color: 'var(--ink)',
    margin: 0,
    maxWidth: 540,
  },
  closingCtaLineAccent: { color: 'var(--blue)' },
  closingCtaBtn: {
    background: 'var(--ink)', color: 'var(--paper)',
    padding: '16px 24px', borderRadius: 12,
    fontSize: 15, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'background .2s',
    textDecoration: 'none',
  },
};

const faqs = [
  { q: 'What\'s the onboarding timeline?', a: 'We can start kickoff within 1–2 business days, depending on availability. The kickoff call is where we learn about your needs and the kind of match you\'re looking for, your work style, your communication style, how you want to operate day-to-day, so we can pair you with the right VA. Time to start working with a new VA depends on when we find you a match and when you select the right one. You\'ll still need to speak to the individuals we send your way, but we move as fast as you\'re able to move.' },
  { q: 'Do I get one VA or a team?', a: 'Either. You can start with a single dedicated VA, or we can build you a small team, for example a generalist plus a content or design specialist, all coordinated under one roof. We work with you on the call to decide what structure actually fits the work, rather than forcing you into a package.' },
  { q: 'Do you manage the VA, or do I?', a: 'Your call. Most clients hand the operational management to us, we run weekly check-ins, QA the work, own SOPs, and cover when your VA is out. Some clients prefer to manage the VA directly and just want help finding the right person; in that case we do the matching, onboarding, and stay on call, but you run the day-to-day.' },
  { q: 'How does payment work?', a: 'Pay by credit card or bank transfer. Your first payment is collected before service starts, and you\'re automatically charged at the start of each month after that to keep service running.' },
  { q: 'What does the security setup look like?', a: 'You can have your VA sign a confidentiality agreement before they touch anything, and they operate inside the access controls you set. You own the security stack, and we help you set it up. The setup we recommend includes dedicated residential proxies and VPNs for VA account access, an encrypted password manager like 1Password, and role-based access scoped only to what your VA needs. Credentials are never shared in plain text, and your VA\'s access is revoked immediately on any transition.' },
  { q: 'What if it\'s not a good match?', a: 'Tell us. We swap VAs at no cost, and most clients who swap early stay with us long-term. Our average engagement runs past 12 months for a reason, we keep working until the fit is right.' },
  { q: 'How is this different from Upwork or Fiverr?', a: 'Those platforms hand you a long list and a prayer. We focus on matching you with the right person and then supporting that individual so they succeed. Managing a VA is a full-time job on its own, so if you want help onboarding them, training them, getting them up to speed, and making sure the work actually gets done, that\'s on the table. You\'re buying a service, not running a procurement process.' },
];

function FAQ() {
  const [open, setOpen] = useStateFq(-1);
  return (
    <section id="faq" style={faqStyles.wrap} className="reveal bm-section">
      <div style={faqStyles.inner} className="bm-faq-grid">
        <div>
          <div className="mono" style={faqStyles.eyebrow}>FAQ</div>
          <h2 style={faqStyles.h2}>Common <span style={faqStyles.italic}>questions.</span></h2>
          <p style={faqStyles.sub}>
            Don't see yours? Bring it to the discovery call.
          </p>
        </div>
        <div style={faqStyles.list}>
          {faqs.map((f, i) => (
            <div key={i} style={faqStyles.item}>
              <button
                style={faqStyles.head(open === i)}
                onClick={() => setOpen(open === i ? -1 : i)}
                aria-expanded={open === i}
                aria-controls={`faq-panel-${i}`}
                id={`faq-trigger-${i}`}
              >
                <span>{f.q}</span>
                <span style={faqStyles.plus(open === i)} aria-hidden="true">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                    <polyline points="5 9.5 12 15.5 19 9.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </button>
              <div
                style={faqStyles.body(open === i)}
                id={`faq-panel-${i}`}
                role="region"
                aria-labelledby={`faq-trigger-${i}`}
                hidden={open !== i}
              >
                <div style={faqStyles.bodyInner}>{f.a}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={faqStyles.closingCta}>
          <p style={faqStyles.closingCtaLine}>
            Still have questions? <span style={faqStyles.closingCtaLineAccent}>Bring them to the call.</span>
          </p>
          <a href="#cta" data-booking-modal-trigger data-booking-source="faq_closing_cta" style={faqStyles.closingCtaBtn}
             onMouseEnter={e => e.currentTarget.style.background = 'var(--blue)'}
             onMouseLeave={e => e.currentTarget.style.background = 'var(--ink)'}>
            Talk to a real human
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });