// FAQ.jsx — S7.5: Common questions accordion (final reassurance before the scan)
// Answers render in the DOM at all times (collapse is CSS grid-rows, not display:none),
// so the copy stays crawlable for search + answer engines even while visually collapsed.
function FaqItem({ q, a, open, onToggle, extra }) {
  return (
    <div className={"faq-item" + (open ? " open" : "") + (extra ? " faq-x" : "")}>
      <h3 className="faq-q-h">
        <button type="button" className="faq-q" onClick={onToggle} aria-expanded={open}>
          <span>{q}</span>
          <span className="faq-ic"><i className={open ? "ri-subtract-line" : "ri-add-line"} /></span>
        </button>
      </h3>
      <div className="faq-a-wrap">
        <div className="faq-a-inner"><p className="faq-a">{a}</p></div>
      </div>
    </div>
  );
}

function FAQ() {
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  const [showAll, setShowAll] = useState(false);
  const items = [
    {
      q: "What is Siteworks?",
      a: "Siteworks is a Taurist Technologies brand for premium, conversion-aware websites. It helps businesses turn outdated or unclear sites into clearer, more credible web experiences that guide visitors toward the next action.",
    },
    {
      q: "Who is Siteworks for?",
      a: "Siteworks is for businesses that have outgrown their current website and need something better without managing the strategy, design, build, hosting, maintenance, and updates themselves.",
    },
    {
      q: "How do I know if my website is costing me leads?",
      a: <React.Fragment>Your website may be costing you leads if visitors cannot quickly understand what you do, your proof is weak or buried, your design feels behind the quality of your business, or the next step is unclear. The fastest way to find out is to <a className="faq-link" href="#cta">request a homepage prototype</a>.</React.Fragment>,
    },
    {
      q: "What is the best way to improve an outdated business website?",
      a: "Start by clarifying the job of the site. A stronger website should explain the business, make the offer easy to understand, show proof, and guide visitors toward a clear action.",
    },
    {
      q: "How is Siteworks different from an AI website builder?",
      a: "AI builders can get a page online quickly, but they usually leave the message, proof, structure, and quality decisions to you. Siteworks uses AI where useful, but the site is shaped by strategy, design judgment, conversion thinking, and real business context.",
    },
    {
      q: "How is Siteworks different from a template website?",
      a: "Templates give you a layout. Siteworks gives you a website direction built around your offer, audience, proof, services, and visitor action, so the site does more than look filled in.",
    },
    {
      q: "How is Siteworks different from a traditional web agency?",
      a: "Siteworks is designed to be simpler and faster than a bloated agency project. You get a homepage prototype before the meeting, a clear build path, a private staging link, managed launch setup, and ongoing Site Care after the site goes live.",
    },
    {
      q: "What happens after I request a homepage prototype?",
      a: "You share your current site and answer a few guided questions. Siteworks reviews what is not working, maps the homepage around your offer and visitor goal, and prepares a first homepage direction before the meeting.",
    },
    {
      q: "Do I need to fill out a long intake form?",
      a: "No. The intake should feel more like a guided chat than a generic form. The goal is to collect only what is needed to understand your business, current site, offer, proof, pages, and main visitor action.",
    },
    {
      q: "How fast can Siteworks launch a website?",
      a: "Many standard Siteworks builds can launch in less than a week when the scope, content, assets, intake, and approvals are ready. Larger sites, custom systems, or delayed feedback can extend the timeline.",
    },
    {
      q: "What is included in the founding-client plan?",
      a: <React.Fragment>The founding-client plan includes up to 5 standard pages, launch setup, managed hosting, maintenance, security updates, basic support, light monthly updates, and AEO/SEO-ready launch checks. See the <a className="faq-link" href="#review">full pricing breakdown</a>.</React.Fragment>,
    },
    {
      q: "How much does Siteworks cost?",
      a: <React.Fragment>The founding-client rate is <strong>$1,500 setup</strong> plus <strong>$199/month</strong> for Site Care. Additional standard pages are $250/page during the initial build and $300/page after launch. Dedicated landing pages are $800. There is also a <strong>$3,500 annual upfront</strong> option for setup plus the first year of Site Care. See <a className="faq-link" href="#review">pricing</a> for details.</React.Fragment>,
    },
    {
      q: "What does Site Care include?",
      a: "Site Care includes managed hosting, maintenance, security updates, basic support, and light monthly updates, so your website does not become another technical responsibility for your team.",
    },
    {
      q: "Can Siteworks build landing pages?",
      a: "Yes. Siteworks can build homepages, full sites, conversion-focused landing pages, redesigns, ongoing pages, and CMS-backed site systems.",
    },
    {
      q: "Can Siteworks help my business show up in Google or AI search?",
      a: "Siteworks cannot guarantee rankings or AI citations, but each site is built with search and answer-engine readiness in mind: crawlable pages, clear headings, visible text, metadata, structured content, responsive behavior, sitemap/robots hygiene, and direct answers to the questions customers ask.",
    },
    {
      q: "Will I own my website?",
      a: "Siteworks is built so your business has a real website, not just a rented design mockup. Hosting, care, and support can be managed by Siteworks, while the launch setup and ownership details are handled clearly before the site goes live.",
    },
  ];
  return (
    <section id="faq" className="section">
      <div className="wrap">
        <div ref={ref} className="reveal faq-layout">
          {/* left — intro + CTA box */}
          <div className="faq-intro">
            <div className="eyebrow"><span className="dot" />Common questions</div>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Questions to answer before you <span className="gradient-text">rebuild your site.</span>
            </h2>
            <p className="p-lead">
              If your website looks dated, explains the business poorly, or makes people hesitate before contacting you, these are the questions worth answering before you rebuild it.
            </p>
            <div className="faq-cta glass">
              <div className="faq-cta-title">Still deciding?</div>
              <p className="faq-cta-body">
                Request a homepage prototype. You'll get a first direction built around your offer and visitor goal before the meeting, no obligation.
              </p>
              <div className="faq-cta-actions">
                <a href="#cta" className="btn btn-primary btn-sm">Request a prototype <i className="ri-arrow-right-line" /></a>
                <a href="#review" className="faq-cta-link">See pricing <i className="ri-arrow-right-line" /></a>
              </div>
            </div>
          </div>

          {/* right — accordion. All items always render in the DOM (crawlable);
              on phones only the first 5 show until "View all" is tapped. */}
          <div className={"faq-list" + (showAll ? " faq-all" : "")}>
            {items.map((it, i) => (
              <FaqItem key={i} q={it.q} a={it.a} extra={i >= 5} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
            <button type="button" className="faq-viewall" aria-expanded={showAll} onClick={() => setShowAll((s) => !s)}>
              {showAll ? "Show fewer questions" : "View all Frequently asked questions"}
              <i className={showAll ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line"} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { FAQ });