/* extras.jsx — HowWeWork (process) + FAQ (accordion) */
const { useState: useStateX } = React;

const STEPS = [
  { h: 'Free audit', p: 'We start with a free Digital Growth Audit — a clear read on where you stand and the fastest wins. No pitch.' },
  { h: 'Strategy', p: 'We map a prioritised roadmap across SEO, web and automation — tied to revenue, not vanity metrics.' },
  { h: 'Build & optimise', p: 'We execute in disciplined sprints: technical fixes, content, builds and link campaigns.' },
  { h: 'Automate', p: 'We connect the workflows and AI agents that capture, qualify and nurture every lead.' },
  { h: 'Report & scale', p: 'Transparent monthly reporting keeps the strategy honest — and compounding over time.' },
];

function HowWeWork() {
  return (
    <section className="section" id="how" data-screen-label="How we work" style={{ background: 'var(--surface)' }}>
      <div className="mt-container">
        <div className="section-head reveal">
          <span className="eyebrow eyebrow--tick">How we work</span>
          <h2>A clear, accountable process.</h2>
          <p className="lead">No black boxes. You always know exactly what is happening, why, and what comes next.</p>
        </div>
        <ol className="steps">
          {STEPS.map((s, i) => (
            <li className="step reveal" key={s.h}>
              <span className="step__no">{String(i + 1).padStart(2, '0')}</span>
              <span className="step__dot" />
              <h3>{s.h}</h3>
              <p>{s.p}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

const FAQS = [
  { q: 'How quickly will I see results?', a: 'It depends on the work. Technical and conversion fixes can move the needle in weeks; durable SEO gains typically compound over three to six months. We set realistic expectations in the audit — and report progress every month.' },
  { q: 'Do you lock me into a long contract?', a: 'No. Engagements are month-to-month. We would rather earn the relationship with results than trap you in a contract.' },
  { q: 'What does the free audit include?', a: 'A clear read on your technical health, search visibility and automation opportunities, plus a prioritised plan of what to fix first. No pitch — just clarity you can act on, with or without us.' },
  { q: 'Which industries do you work with?', a: 'We focus on e-commerce, professional services, SaaS, health & wellness, and construction & property — though our approach adapts well across niches.' },
  { q: 'Can I start with just one service?', a: 'Absolutely. You can start with SEO, web or automation alone. They simply compound faster when run together as one growth engine.' },
  { q: 'Where are you based?', a: 'We are based in the United Kingdom and work with clients globally. Support is available around the clock.' },
];

function FaqItem({ item, open, onToggle }) {
  return (
    <div className={'faq' + (open ? ' is-open' : '')}>
      <button className="faq__q" onClick={onToggle} aria-expanded={open}>
        <span>{item.q}</span>
        <span className="faq__icon"><Icon name={open ? 'x' : 'arrowRight'} size={18} stroke={2.2} /></span>
      </button>
      <div className="faq__a-wrap"><div className="faq__a">{item.a}</div></div>
    </div>
  );
}

function Faq() {
  const [open, setOpen] = useStateX(0);
  return (
    <section className="section" id="faq" data-screen-label="FAQ" style={{ background: 'var(--surface)' }}>
      <div className="mt-container faq-grid">
        <div className="faq-grid__head reveal">
          <span className="eyebrow eyebrow--tick">FAQ</span>
          <h2>Questions, answered<br />before you ask.</h2>
          <p className="lead">Still unsure? The free audit is the fastest way to get clarity — no commitment.</p>
        </div>
        <div className="faq-list reveal">
          {FAQS.map((f, i) => (
            <FaqItem key={f.q} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowWeWork, Faq });