// FAQ – homepage frequently asked questions. Native <details>/<summary> accordions.
const FAQ = () => {
  const items = [
    {
      q: 'What does CX Data actually do?',
      a: <>We act as your fully managed data team. We connect your sales, marketing and customer-service tools, build a governed analytics platform on top, and deliver dashboards, automated AI Signals and a conversational AI Analyst – so your team makes decisions from one trusted source of truth.</>,
    },
    {
      q: 'Which platforms and data sources do you connect?',
      a: <>100+ sources including Shopify, Amazon, TikTok Shop, Meta Ads, Google Ads, GA4, Klaviyo, Gorgias and Zendesk. See the full list on our <a href="/connectors" style={{ color: '#0052CD', fontWeight: 500 }}>Connectors page</a>.</>,
    },
    {
      q: 'How is this different from hiring an in-house analyst?',
      a: <>You get a senior team covering data engineering, BI and AI for less than the cost of a single hire – live in weeks, with no recruitment risk and no key-person dependency.</>,
    },
    {
      q: 'How long does setup take?',
      a: <>Most brands see their first dashboards within weeks, not months. <a href="/case-studies-bella-and-duke" style={{ color: '#0052CD', fontWeight: 500 }}>Bella &amp; Duke</a> went from a fragmented reporting stack to a fully managed analytics platform in 4 weeks.</>,
    },
    {
      q: 'What is the AI Analyst?',
      a: <>A conversational interface to your own governed business data. Ask questions in plain English and get instant, validated answers – no SQL, no waiting on reports.</>,
    },
    {
      q: 'Who is CX Data for?',
      a: <>eCommerce, D2C, retail, subscription and event-led businesses that want reliable answers from their data without building an internal data function.</>,
    },
  ];

  return (
    <section id="faq" style={{ padding: '96px 32px', background: '#fff' }}>
      <style>{`
        .faq-item summary { list-style: none; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary .faq-chev { transition: transform .22s cubic-bezier(0.22,1,0.36,1); }
        .faq-item[open] summary .faq-chev { transform: rotate(180deg); }
      `}</style>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <h2 style={{
          fontSize: 'clamp(2rem, 3.6vw, 2.9rem)', fontWeight: 600, letterSpacing: '-0.03em',
          color: '#08234C', margin: '0 0 40px', lineHeight: 1.1, textWrap: 'balance',
        }}>
          Frequently asked questions
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {items.map((it) => (
            <details key={it.q} className="faq-item" style={{
              background: '#F5F8FA', border: '1px solid #E4EBF5', borderRadius: 16,
              overflow: 'hidden',
            }}>
              <summary style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                padding: '20px 24px', cursor: 'pointer',
                fontSize: 16.5, fontWeight: 600, color: '#08234C', letterSpacing: '-0.01em',
              }}>
                <span>{it.q}</span>
                <svg className="faq-chev" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4D6389" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0 }}>
                  <path d="M6 9l6 6 6-6"></path>
                </svg>
              </summary>
              <p style={{ margin: 0, padding: '0 24px 22px', fontSize: 15, lineHeight: 1.6, color: '#4D6389', maxWidth: 760 }}>
                {it.a}
              </p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;