/* global React, Reveal, CAL_LINK */
const { useState: useStateFaq } = React;

const FAQS = [
  {
    q: 'Is it really $39.99 a month with no setup fee?',
    a: 'Yes. $39.99/month, billed monthly. No setup fee, no contract, cancel anytime.',
  },
  {
    q: 'How fast can my website go live?',
    a: 'We will have your site live within 48 hours.',
  },
  {
    q: 'What if I need changes later?',
    a: 'Just send us a message. Content updates, new photos, price changes — all included.',
  },
  {
    q: 'What kind of things can you automate?',
    a: 'Anything repetitive, we can automate. Lead follow-up, booking reminders, invoicing, review requests, data entry, customer chat — if you\'re doing it manually and it happens more than once, we will build something that handles it for you.',
  },
  {
    q: 'Can I cancel anytime?',
    a: 'Yes. No contracts, no cancellation fees. Cancel with a simple email.',
  },
];

function FaqItem({ q, a }) {
  const [open, setOpen] = useStateFaq(false);
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span>
        <span className="faq-plus">+</span>
      </button>
      <div className="faq-a">{a}</div>
    </div>
  );
}

function FAQ() {
  return (
    <section id="faq">
      <span className="section-mark">§ 03 / FAQ</span>
      <div className="wrap">
        <div className="faq-layout">
          <div>
            <Reveal><span className="eyebrow">FAQ</span></Reveal>
            <Reveal delay={80}>
              <h2 className="h-section" style={{ marginTop: 22 }}>
                Questions, <em>answered.</em>
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p className="lead" style={{ marginTop: 20, fontSize: 16 }}>
                Still wondering something? A quick call clears it all up.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <a href={CAL_LINK} target="_blank" rel="noopener noreferrer"
                className="btn btn-ghost" style={{ marginTop: 28 }}>
                Book a 15-min call
              </a>
            </Reveal>
          </div>
          <Reveal delay={100}>
            <div className="faq-list">
              {FAQS.map((item, i) => (
                <FaqItem key={i} q={item.q} a={item.a} />
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;