// 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: "Is Conversion Works only for Shopify brands?",
      a: "Conversion Works is Shopify-first. The audit process, private analysis workflow, and recommendations are built around Shopify stores, ecommerce funnels, and the data sources most Shopify teams use. We can look at other ecommerce platforms when the fit is strong, but the core offer is designed for Shopify.",
    },
    {
      q: "Why do we start with an audit instead of implementation?",
      a: "Because implementation before diagnosis is expensive guessing. The audit shows what is actually suppressing conversion, what should be fixed first, what should be tested, and what can wait. Once the roadmap is clear, implementation can be scoped around the work that matters.",
    },
    {
      q: "What is the difference between the free scan and the paid audit?",
      a: "The free scan is a quick product-page preview. It finds a few visible fixes and shows how we think. The paid audit goes deeper. We review Shopify, analytics, tracking, funnel behavior, page UX, offer clarity, proof, mobile friction, cart, checkout, customer context, and implementation reality. The output is a prioritized roadmap, not a surface checklist.",
    },
    {
      q: "How much traffic do we need?",
      a: "The best fit is usually a Shopify brand with at least 15,000 monthly visitors. That gives the audit enough behavioral data to be useful. A/B testing may require more qualified traffic depending on the page, baseline conversion rate, and the size of lift we need to detect.",
    },
    {
      q: "What access do you need?",
      a: "The ideal audit includes access to Shopify, GA4, and GTM. Heatmaps, ad creative, post-purchase surveys, support tickets, brand guidelines, and customer research also help when available. The more context we can see, the more specific the recommendations can become.",
    },
    {
      q: "What if our tracking is messy or we only have Shopify data?",
      a: "We can still help, but the audit may take longer. If Shopify is the only reliable data source, we may need a short data-gathering period before the audit begins. When tracking is messy, part of the roadmap may include event cleanup, measurement fixes, or a better reporting foundation before deeper testing.",
    },
    {
      q: "How long does the audit take?",
      a: "The standard audit is delivered in one week after required access is received. If we need to collect fresh data because access is limited or tracking is incomplete, the timeline can extend. We will tell you that before the audit starts.",
    },
    {
      q: "What do we actually receive?",
      a: "You receive a full audit document, visual recommendations, competitive context, a ranked CRO roadmap, a Loom walkthrough, and a follow-up call. The recommendations explain what is wrong, where it happens, why it matters, what to do next, and whether the fix should be shipped, tested, or saved for later.",
    },
    {
      q: "What does the audit cost?",
      a: "The Shopify Conversion Audit starts at $1,000. Larger or more complex stores may require a larger scope depending on data access, funnel complexity, tracking quality, and how much implementation planning is needed. If you continue with Conversion Works within 90 days, your audit fee is credited toward the first 3 months of the follow-on engagement.",
    },
    {
      q: "Can our team implement the roadmap internally?",
      a: "Yes. The roadmap is written so a founder, internal team, designer, developer, or ecommerce lead can understand what needs to happen. When possible, recommendations include a practical Shopify-friendly path and a more polished \u201cideal implementation\u201d path for teams with design or development support.",
    },
    {
      q: "Do you implement the recommendations too?",
      a: "Yes, but implementation is scoped after the audit. Some clients implement internally. Some hire Conversion Works for design, test planning, and setup. Others continue into the full loop: plan, design, develop, test, iterate, and measure.",
    },
    {
      q: "Do you A/B test everything?",
      a: "No. We test when traffic and scope support a reliable read. If traffic is too low, or the fix is obvious and low-risk, we may recommend shipping the evidence-backed change and measuring with the strongest available signals instead of running an underpowered test.",
    },
    {
      q: "Is this an AI tool, an agency, or consulting?",
      a: "It is a founder-led Shopify CRO service supported by a private analysis workflow. Software helps us review the store faster and more consistently, but the value is the diagnosis, prioritization, implementation judgment, and measurement plan.",
    },
    {
      q: "What happens after the audit?",
      a: "You decide the right path with a clearer roadmap in hand. You can implement internally, bring us in for design and test setup, or continue into full optimization. If you continue with Conversion Works within 90 days, your audit fee is credited toward the first 3 months of the follow-on engagement.",
    },
    {
      q: "Do you guarantee a conversion lift?",
      a: "We do not promise a specific lift before diagnosis. The audit is designed to reduce guessing, identify the highest-confidence opportunities, and help your team make better conversion decisions. Any test, rollout, or performance target should be based on your traffic, baseline, funnel, and implementation constraints.",
    },
  ];
  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 }}>
              What serious Shopify teams ask <span className="gradient-text">before the audit.</span>
            </h2>
            <p className="p-lead">
              The short version: Conversion Works is Shopify-first, audit-led, and built to turn funnel data into a roadmap your team can actually use.
            </p>
            <div className="faq-cta glass">
              <div className="faq-cta-title">Still deciding where to start?</div>
              <p className="faq-cta-body">
                Book a Shopify audit consult and we will review your store, traffic, and goals before recommending the next step.
              </p>
              <div className="faq-cta-actions">
                <a href="#cta" className="btn btn-primary btn-sm">Book a Shopify audit consult <i className="ri-arrow-right-line" /></a>
                <a href="#cta" className="faq-cta-link">Get 5 free fixes <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 });