/* 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 does Recon <em>actually send me</em> each month?</>,
        a: (
          <>
            <p>A 6-page PDF report and five copy-paste prompts, both on the first business day of each month. The PDF gives you the <em>thinking</em> — what your customers and competitors are saying right now, ranked by what's moving — and the prompts let you turn that thinking into output you can send the same day.</p>
            <p>Total reading time: about six minutes. Total prompt-running time, if you do all five: about thirty 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 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: <>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 major public review and social channels relevant to your category — accessed through licensed APIs and aggregators, not by scraping. 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.</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 name, email, business name, and the answers to the four signup questions. 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>. I'll see it within an hour. No call, no winback email, no exit survey.</p>
            <p>You'll keep the issue you've already paid for, and I 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>jim@reconai.io</em> with how many locations and I'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 Jim directly. Replies usually come back the same day.</p>
            </div>
            <a href="mailto:jim@reconai.io">
              <span>jim@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;