/* FAQ accordion + final CTA + footer */
function FAQ() {
  const qs = [
    ['Will customers know it\'s AI?', 'The receptionist is professional and natural. You decide how it answers. Most owners keep it simple and pick up in the company name.'],
    ['Can it forward urgent calls to me?', 'Yes. Urgency is scored on every call and high-priority jobs are routed to you immediately by call or text.'],
    ['Can I keep my existing phone number?', 'Yes. ReplyFirst works alongside your current BC number. No porting, no new hardware, no new phone.'],
    ['Can I control when it answers?', 'Set it for after-hours only, overflow, or 24/7. You control the schedule and the rules.'],
    ['What happens if I miss the forwarded call?', 'The full job summary, contact details, and recording are waiting for you, with a missed-call text-back to the customer.'],
    ['Can it book jobs directly?', 'It captures and qualifies every job, and on Growth it can drop leads straight into your CRM and workflow.'],
    ['How long does setup take?', 'Most businesses are live within a few days. Done-for-you setup handles your script, service area, and routing for you.'],
    ['Does this replace my staff?', 'No. It covers the calls your team can\'t get to, so the job doesn\'t go to a competitor. You keep the work and the revenue.'],
  ];
  const [open, setOpen] = useState(-1);
  return (
    <section className="light" id="faq">
      <div className="site sec-pad">
        <div className="sec-head">
          <div className="eyebrow">FAQ</div>
          <h2 className="display" style={{ marginTop: 12 }}>Questions, answered</h2>
        </div>
        <div className="faq">
          {qs.map((q, i) => (
            <div className={'qa' + (open === i ? ' open' : '')} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="q"><span>{q[0]}</span><span className="ic"><Icon name="plus" /></span></div>
              <div className="a">{q[1]}</div>
            </div>
          ))}
        </div>
        <div className="faq-cta">
          <div className="faq-cta-bolt"><Icon name="bolt" /></div>
          <div className="faq-cta-copy">
            <div className="faq-cta-t">Still have a question?</div>
            <div className="faq-cta-s">Talk to a real person. We'll walk you through how it answers, routes, and texts back for your trade.</div>
          </div>
          <Button variant="primary" icon="phoneVolume" onClick={() => { window.location.href = 'mailto:hello@replyfirst.ca?subject=ReplyFirst%20question'; }}>Book a setup call</Button>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onCTA }) {
  return (
    <section className="final">
      <div className="site">
        <h2 className="display">Stop letting voicemail <span className="yl">lose the job.</span></h2>
        <p>Hear how fast a 2 a.m. emergency gets answered and sent to your phone. That's a paying job you would have lost.</p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" icon="phoneVolume" onClick={onCTA}>Test the AI receptionist</Button>
          <Button variant="secondary" icon="calendarCheck" onClick={() => { window.location.href = 'mailto:hello@replyfirst.ca?subject=ReplyFirst%20setup%20call'; }}>Book a setup call</Button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="site">
        <a className="brand" href="#top">
          <img className="brand-logo foot-logo" src="assets/logo-full.png" alt="ReplyFirst — after-hours response for trades" />
        </a>
        <div className="cols">
          <a href="#how">How it works</a><a href="#calc">Calculator</a><a href="#demo">Demo</a><a href="#pricing">Pricing</a><a href="#faq">FAQ</a><a href="mailto:hello@replyfirst.ca">Contact</a>
        </div>
        <div className="cc">© 2026 ReplyFirst · Built for BC trades · <a href="mailto:hello@replyfirst.ca" style={{ color: 'inherit', textDecoration: 'underline' }}>hello@replyfirst.ca</a></div>
      </div>
    </footer>
  );
}

Object.assign(window, { FAQ, FinalCTA, Footer });