/* FAQ accordion */
function PricingFAQ() {
  const items = [
    {
      q: 'Are there any setup or hidden fees?',
      a: 'No. There is no onboarding fee, no minimum balance, and no charge for opening multi-currency vIBANs on any tier. The only line items on your invoice are the platform fee for your tier, the FX margin you see live in the calculator, and the per-rail fee for the corridors you actually use.',
    },
    {
      q: 'What does "FX margin" actually mean?',
      a: 'It is the spread we charge above the mid-market interbank rate at the moment of execution. We do not mark up the FX rate twice or take a cut on settlement. At Growth and above, your margin is fixed for the whole month — no fluctuation by counterparty or corridor.',
    },
    {
      q: 'Can I switch plans without re-papering?',
      a: 'Yes. You can move from Starter to Growth instantly via the dashboard. Business and Enterprise involve a short MLRO and counterparty review (usually 1–3 business days) but your existing vIBANs, beneficiaries, and API credentials remain unchanged.',
    },
    {
      q: 'How does volume tiering work for FX?',
      a: 'Your effective FX margin steps down as your trailing-30-day volume crosses each threshold (£250K → 0.18%, £1M → 0.12%, £5M → 0.08%). Enterprise customers negotiate sub-bps margins bilaterally.',
    },
    {
      q: 'What happens if I exceed my plan\'s monthly volume cap?',
      a: 'We will not block your transactions. Volume above the included amount on Growth and Business is charged at the standard per-rail rates with no premium. If you are routinely above your cap, we will reach out to discuss moving you to the next tier — you will pay less either way.',
    },
    {
      q: 'Do you charge for incoming payments?',
      a: 'Incoming SEPA, FPS, and same-currency on-chain receipts are free on every tier. SWIFT inbound is £4 per receipt to cover the corresponding-bank fee imposed on us. Stablecoin receipts on Polygon / Ethereum / Base are free.',
    },
    {
      q: 'Is the calculator a real quote?',
      a: 'It is an estimate within ±5% of typical month-end invoices for the profile and volume you select. For a contractual quote (especially above £1M monthly), our sales team can model your actual corridor mix and counterparty list and put a fixed number on the page.',
    },
  ];

  return (
    <section className="m-section">
      <div className="m-container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.5fr',
          gap: 64, alignItems: 'flex-start',
        }}>
          <div style={{ position: 'sticky', top: 96 }}>
            <div className="m-eyebrow" style={{ marginBottom: 14 }}>FAQ</div>
            <h2 style={{
              font: '500 clamp(32px, 3.4vw, 44px)/1.1 var(--font-sans)',
              letterSpacing: '-0.025em', margin: 0,
            }}>
              Questions, fairly answered.
            </h2>
            <p style={{
              font: '400 15px/1.55 var(--font-sans)',
              color: 'var(--m-fg-2)', marginTop: 16,
            }}>
              Still wondering something? <a href="#" style={{ color: 'var(--m-fg)', textDecoration: 'underline', textDecorationColor: 'var(--m-border)', textUnderlineOffset: 4 }}>Email pricing@kwiikpay.com</a> — a real person responds within an hour.
            </p>
          </div>

          <div>
            {items.map((it, i) => <FAQItem key={i} item={it} defaultOpen={i === 0} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQItem({ item, defaultOpen }) {
  const [open, setOpen] = React.useState(!!defaultOpen);

  return (
    <div style={{
      borderBottom: '1px solid var(--m-border)',
    }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: '100%',
          background: 'transparent', border: 'none',
          padding: '24px 0',
          textAlign: 'left',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 24, cursor: 'pointer',
          font: '500 17px/1.3 var(--font-sans)',
          letterSpacing: '-0.012em',
          color: 'var(--m-fg)',
        }}>
        {item.q}
        <span style={{
          flexShrink: 0, width: 28, height: 28,
          borderRadius: 999,
          display: 'grid', placeItems: 'center',
          border: '1px solid var(--m-border)',
          transition: 'transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard)',
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          background: open ? 'var(--m-fg)' : 'transparent',
          color: open ? 'var(--m-bg)' : 'var(--m-fg)',
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0, overflow: 'hidden',
        transition: 'max-height var(--dur-slow) var(--ease-standard)',
      }}>
        <p style={{
          font: '400 15px/1.6 var(--font-sans)',
          color: 'var(--m-fg-2)', margin: 0, paddingBottom: 24,
          maxWidth: 640,
        }}>{item.a}</p>
      </div>
    </div>
  );
}

window.PricingFAQ = PricingFAQ;