/* FAQ page — three sections (Product, Privacy, Billing).
   Accordion items, controlled state per section. */

const FAQ_SECTIONS = [
  {
    id: "product",
    num: "01",
    title: <>The <em>product.</em></>,
    blurb: "What you actually get, how often, and why we built it this way.",
    items: [
      {
        q: <>What's a "prompt," exactly?</>,
        a: (
          <>
            <p>A prompt is just the <em>exact words you paste into ChatGPT or Claude</em> to get it to do something useful. The hard part was never the AI — it's knowing what to type. That's what we write for you: each month's five prompts come pre-filled with your business, your category, and your competitors. You copy, you paste, the model writes the work. If you can send an email, you can run one.</p>
          </>
        )
      },
      {
        q: <>What does Recon <em>actually send me</em> each month?</>,
        a: (
          <>
            <p>A PDF report, your <em>Google Profile scorecard</em> with the exact fixes for this month, five copy-paste prompts, and a private link to your business AI — all on the first business day of each month. The PDF gives you the <em>thinking</em>; the scorecard gives you the cheapest move on your listing; the prompts let you turn it all into output you can send the same day; the AI is on tap for everything in between.</p>
            <p>Reading time: a few minutes. Total prompt-running time, if you do all five: about thirty minutes. Google Profile fixes: about forty minutes.</p>
          </>
        )
      },
      {
        q: <>Do I need an AI subscription to use it?</>,
        a: (
          <>
            <p>You'll need access to either ChatGPT or Claude — both have free tiers that work fine. The prompts run identically on both. There's nothing to install and no API key required.</p>
            <p>If you want to upgrade to a paid AI plan, the Plus / Pro tiers ($20/mo) give you faster runs and longer outputs, but it's <em>not necessary</em> to get value from Recon.</p>
          </>
        )
      },
      {
        q: <>Why monthly? Why not weekly or quarterly?</>,
        a: (
          <>
            <p>Quarterly is too slow — by the time you read it, the moment has passed. Weekly is too noisy — most weeks don't actually have a signal worth changing your plan over.</p>
            <p>Monthly is the heartbeat of a small business. You think about rent monthly, payroll monthly, P&amp;L monthly. <em>Insight should match.</em></p>
          </>
        )
      },
      {
        q: <>Can I see a real issue before signing up?</>,
        a: (
          <>
            <p>Yes. The full <a href="sample.html" style={{ color: "var(--terracotta)" }}>illustrative sample report</a> is available — every page, every section, every prompt slot. Names and reviews are redacted, but the format is identical to what you'd receive.</p>
          </>
        )
      },
      {
        q: <>What kinds of businesses is this for?</>,
        a: (
          <>
            <p>Recon works best for small and medium-size business owners and operators — single-location coffee shops, multi-location dentists, regional service businesses, indie e-commerce, neighborhood retail. Anywhere that <em>your customers and competitors talk about you in public</em>, we have something to work with.</p>
            <p>It works less well for B2B SaaS, pre-launch startups, and businesses with no public review presence. If you're not sure, email us — we'll tell you honestly.</p>
          </>
        )
      },
      {
        q: <>What if my competitors are <em>national</em>, not local?</>,
        a: (
          <>
            <p>That works too — you just tell us. The intake asks who you'd want this report to look at every month. <em>Name one</em> and we expand from there using public sources. We don't assume your rivals live within five miles of your pin on a map; that assumption works for restaurants and trades, it falls apart for a luxury hardwood brand or a national e-commerce shop.</p>
            <p>If you don't know who to name, we'll suggest a cohort from your category and you confirm. The principle is the same either way: <em>you tell us who counts</em>, the analyst goes deep on that set every month.</p>
          </>
        )
      },
      {
        q: <>How do I respond to a tough review <em>fast</em>?</>,
        a: (
          <>
            <p>Forward the review email to <em>respond@reconai.io</em>. You'll get back a paste-ready public reply in about ten seconds — AI-drafted in your voice, addressing the specific complaint, and offering a private make-good. Open Gmail, paste, send.</p>
            <p>This is included with the paid subscription, between issues. It's the first of a small set of agents we're rolling out to handle the work that doesn't fit on a 30-day cadence.</p>
          </>
        )
      },
      {
        q: <>Do I need an <em>OpenAI or Claude account</em> to use the assistant?</>,
        a: (
          <>
            <p>No. Click the link in your welcome email and start typing — that's it. The assistant runs on our side. There's nothing to install, no account to create, no app to download. If you ever lose the link, reply to your latest report and we'll send a fresh one within the day.</p>
          </>
        )
      },
      {
        q: <>What happens to my <em>chat history</em>?</>,
        a: (
          <>
            <p>Nothing is stored. Close the tab and the conversation is gone — there's no replay, no archive, no admin panel where anyone can read it later. We keep two small things, both per-customer: a count of how many times you've used the assistant this month (so we can show "23 / 100" in the corner), and a short list of the <em>types</em> of things you've asked about ("review-reply," "promo-planning," etc.) so each month's report leans toward what you actually use.</p>
            <p>We never keep the words you type. Full plain-English detail: <a href="/legal#assistant-privacy" style={{ color: "var(--terracotta)" }}>/legal#assistant-privacy</a>.</p>
          </>
        )
      },
      {
        q: <>What if I paste a customer review or someone's email <em>into the chat</em>?</>,
        a: (
          <>
            <p>The assistant uses it to help you with that one answer. Then it's gone when you close the tab. We never store it, never train any model on it, and never see it after your session ends. The system that classifies "what kind of thing did this customer ask about" is explicitly told to strip names, emails, and phone numbers — and a second sanitization pass runs on top of that as a backstop.</p>
            <p>Put differently: we're holding <em>your</em> business profile (which you gave us), not your customers' personal information.</p>
          </>
        )
      },
    ]
  },
  {
    id: "privacy",
    num: "02",
    title: <>Privacy &amp; <em>method.</em></>,
    blurb: "What we read, what we don't, and what we never touch.",
    items: [
      {
        q: <>What sources do you scan?</>,
        a: (
          <>
            <p>The public review and social channels relevant to your category — Google and Yelp reviews, Reddit, X, YouTube, TikTok, Instagram, Hacker News, plus industry newsletters and forums. We rank by velocity, specificity, and 30-day actionability.</p>
            <p><em>Only the open web.</em> We never ask <em>you</em> to log in or share an API key — and we never read your customer data.</p>
          </>
        )
      },
      {
        q: <>Do you connect to my POS, CRM, or customer database?</>,
        a: (
          <>
            <p><strong>No.</strong> We never connect to anything internal. We don't ask for it, we don't accept it, we don't want the liability.</p>
            <p>Recon is built entirely on the open, public web. The <em>only</em> data point we have about you is what you typed into the signup form.</p>
          </>
        )
      },
      {
        q: <>Will you sell my data or my customers' data?</>,
        a: (
          <>
            <p>We don't have any data to sell. We collect your business name, email, what you sell, optional address, and an optional competitor or two if you want to name them. That's the entire dataset. It lives on our infrastructure (Google Workspace), encrypted at rest by the provider, and is never shared with third parties.</p>
            <p>The reviews and posts we surface are already public — we're just ranking what's <em>moving</em>.</p>
          </>
        )
      },
      {
        q: <>How do I verify a claim in the report?</>,
        a: (
          <>
            <p>Signals are tied back to the public channel they came from. If the report says "Google reviews mention slow Tuesday afternoon service," you can pull that channel up yourself and read the underlying reviews.</p>
            <p><em>We don't ask you to trust us. We ask you to spot-check us.</em></p>
          </>
        )
      },
    ]
  },
  {
    id: "billing",
    num: "03",
    title: <>Billing &amp; <em>cancellation.</em></>,
    blurb: "How payment works, what to expect, and how to leave.",
    items: [
      {
        q: <>What does it cost?</>,
        a: (
          <>
            <p>One offer: <strong>$1,000 one-time setup</strong>, then <strong>$500/month</strong>, month-to-month — no contract.</p>
            <p>The setup fee covers the week of work we put in to learn your business — competitors, category, customers — before issue one ships. Multi-location is +$500 setup and +$400/month per additional location. See the <a href="pricing.html" style={{ color: "var(--terracotta)" }}>pricing page</a> for the full breakdown.</p>
          </>
        )
      },
      {
        q: <>How do I cancel?</>,
        a: (
          <>
            <p>Reply to your most recent issue with the word <em>cancel</em>. We'll see it, usually within a day. No call, no winback email, no exit survey.</p>
            <p>You'll keep the issue you've already paid for, and we won't bill you again.</p>
          </>
        )
      },
      {
        q: <>Can I pause instead of cancel?</>,
        a: (
          <>
            <p>Yes. Reply to your most recent issue with <em>pause 2 months</em> (or whatever you want). Billing pauses with it. Reply again when you're ready to resume.</p>
          </>
        )
      },
      {
        q: <>Do you offer multi-location plans?</>,
        a: (
          <>
            <p>Yes. Each additional location is <strong>$500 one-time setup + $400/month</strong> on top of your base subscription. Each location gets its own scan, its own competitor map, and its own report — they aren't aggregated.</p>
            <p>Email <em>team@reconai.io</em> with how many locations and we'll get you set up.</p>
          </>
        )
      },
    ]
  },
];

function FAQPage() {
  // Track open items by composite key "sectionId-itemIdx"
  const [open, setOpen] = React.useState({ "product-0": true });
  const toggle = (k) => setOpen(o => ({ ...o, [k]: !o[k] }));

  return (
    <>
      <SiteTopBar active="faq" />
      <main>
        <header className="site-page-head">
          <div className="site-label">
            <span className="site-dot"></span>
            <span className="site-label-num">FAQ</span>
            <span>The honest answers</span>
          </div>
          <h1 className="site-page-title">
            Everything <em>worth asking</em> before you sign up.
          </h1>
          <p className="site-page-lede">
            We try to answer the question you're <em>actually thinking</em>, not the one we'd prefer you ask. If something here is incomplete, email us — we add to this page often.
          </p>
        </header>

        <div className="faq-shell">
          <nav className="faq-nav">
            {FAQ_SECTIONS.map(s => (
              <a key={s.id} href={`#${s.id}`}>
                <span>— {s.num}</span>
                <span style={{ color: "var(--paper)" }}>{stripEm(s.title)}</span>
              </a>
            ))}
          </nav>

          {FAQ_SECTIONS.map(s => (
            <section className="faq-section" key={s.id} id={s.id}>
              <div className="faq-section-rail">
                <span className="faq-section-rail-num">— {s.num}</span>
                <h2>{s.title}</h2>
                <p>{s.blurb}</p>
              </div>
              <div className="faq-list">
                {s.items.map((it, i) => {
                  const k = `${s.id}-${i}`;
                  return (
                    <div className="faq-item" key={k} data-open={!!open[k]}>
                      <button className="faq-q" onClick={() => toggle(k)} aria-expanded={!!open[k]}>
                        <span className="faq-q-num">— {String(i + 1).padStart(2, "0")}</span>
                        <span className="faq-q-text">{it.q}</span>
                        <span className="faq-q-icon" aria-hidden="true"></span>
                      </button>
                      <div className="faq-a">
                        <div></div>
                        <div className="faq-a-body">{it.a}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>
          ))}

          <div className="faq-cta">
            <div>
              <h3>Still have a <em>question?</em></h3>
              <p>Email us directly. Replies usually come back the same day.</p>
            </div>
            <a href="mailto:team@reconai.io">
              <span>team@reconai.io</span>
              <span>→</span>
            </a>
          </div>
        </div>
      </main>
      <SiteFooter />
    </>
  );
}

/* helper — pull plain text out of a <>The <em>product</em></> JSX node so we
   can render it inside a small nav pill without italicizing. */
function stripEm(node) {
  if (typeof node === "string") return node;
  if (Array.isArray(node)) return node.map(stripEm).join("");
  if (node && node.props && node.props.children) {
    return stripEm(node.props.children);
  }
  return "";
}

window.FAQPage = FAQPage;