// ===== FAQ — Plasma v3 =====

const FAQ_GROUPS = [
  {
    title: 'Process & timing',
    items: [
      { q: 'How long does a website take to build?', a: 'Starter sites take about a week. Professional sites take around two weeks. Enterprise builds take roughly three weeks. We confirm the timeline before we start.' },
      { q: 'What do you need from me to get started?', a: "Your business name, what you do, who your customers are, and any content you already have (text, photos, logos). If you don't have those, our add-on services can help — copywriting, branding, the works." },
      { q: 'Do you work with international clients?', a: "Yes. We're in Cape Town but we've built sites for clients across multiple time zones. We're flexible on meeting times." },
      { q: 'What happens if I want changes after launch?', a: "Small text changes are usually covered under our monthly care plans. Larger changes are quoted on request. We don't lock you in — you can also hand the site to someone else if you ever want to." },
    ],
  },
  {
    title: 'Scope & services',
    items: [
      { q: 'Do you build online stores with payment integration?', a: "Not at the moment. We can build catalogue-style stores where customers browse products and contact you to order, but we don't do checkout or payment processing yet." },
      { q: 'Do you do SEO?', a: "Not as a dedicated service right now. All our sites are built to be fast and well-structured, which is the foundation SEO is built on, but we don't run ongoing SEO campaigns. We're happy to recommend specialists if you need them." },
      { q: 'Can you build a web app for my specific use case?', a: "Most likely, yes. Tell us what you want to do and we'll give you an honest answer about whether it's a fit. If it's not, we'll say so." },
    ],
  },
  {
    title: 'Ownership & hosting',
    items: [
      { q: "Do I own the website once it's built?", a: 'Yes. Once the final invoice is paid, the site is yours — code, design, everything.' },
      { q: 'Do I have to use your hosting?', a: "No. You're free to host wherever you like. If you'd rather we handle it, our monthly plans cover hosting and more." },
      { q: 'Why "WebAnchor"?', a: 'Because your website should be a foundation, not a flag. Something solid your business can hold onto and grow from.' },
    ],
  },
  {
    title: 'Payments & currency',
    items: [
      { q: 'How do payments work?', a: '50% deposit to start, 50% on completion. We accept international transfers and EFT. Custom quotes for web apps may follow a different schedule depending on scope.' },
      { q: 'What currency do you charge in?', a: 'All prices are listed in South African Rand (ZAR). We can invoice in other currencies on request.' },
    ],
  },
];

function FAQPage() {
  const [open, setOpen] = useState({ 0: 0 });
  const toggle = (gi, ii) => setOpen(o => ({ ...o, [gi]: o[gi] === ii ? -1 : ii }));
  return (
    <Page>
      <PageIntro
        eyebrow="FAQ"
        title={<>Questions, <span className="grad-text">answered honestly.</span></>}
        sub="The things prospective clients ask, with the kind of answers we'd want if we were the ones asking."
      />
      <section className="section-sm">
        <div className="wrap-tight">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
            {FAQ_GROUPS.map((g, gi) => (
              <div key={g.title}>
                <div className="row" style={{ marginBottom: 16, gap: 14 }}>
                  <span className="eyebrow no-mark">0{gi + 1}</span>
                  <h3 style={{ fontSize: 22 }}>{g.title}</h3>
                </div>
                <div>
                  {g.items.map((it, ii) => (
                    <div key={it.q} className={'acc-item ' + (open[gi] === ii ? 'open' : '')}>
                      <button className="acc-q" onClick={() => toggle(gi, ii)}>
                        <span>{it.q}</span>
                        <span className="plus"><Icon.Plus /></span>
                      </button>
                      <div className="acc-a"><p style={{ maxWidth: '72ch', paddingRight: 40 }}>{it.a}</p></div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CtaTail />
    </Page>
  );
}

Object.assign(window, { FAQPage });