/* Pricing page — single offer. $1,000 setup + $500/month, month-to-month.
   Multi-location: each additional location = $500 setup + $400/month. */

const { useState: usePricingState } = React;

function PricingPage() {
  const monthlyTotal = 500;
  const setup = 1000;
  const locSetup = 500;
  const locMonthly = 400;

  return (
    <>
      <SiteTopBar active="pricing" />
      <main>
        <header className="site-page-head">
          <div className="site-label">
            <span className="site-dot"></span>
            <span className="site-label-num">Pricing</span>
            <span>One offer. Built for the long game.</span>
          </div>
          <h1 className="site-page-title">
            One thousand to start.<br/>
            <em>Five hundred a month after.</em>
          </h1>
          <p className="site-page-lede">
            We charge a <em>one-time setup fee</em> for the work of learning your business — your category, your competitors, your goals — and then a flat monthly subscription for every issue after. <em>The same price every month.</em> No tiers, no upsells, no surprise add-ons.
          </p>
        </header>

        <section className="pricing-tiers" style={{ gridTemplateColumns: "1fr" }}>
          <div className="pricing-tier pricing-tier--featured" style={{ maxWidth: 720, margin: "0 auto", width: "100%" }}>
            <span className="pricing-tier-stamp">The Recon subscription</span>

            <div className="pricing-tier-head">
              <span className="pricing-tier-name">Recon<em>.</em></span>
              <span className="pricing-tier-vol">— Month-to-month</span>
            </div>

            {/* Setup line */}
            <div style={{ borderTop: "1px solid var(--line-2)", paddingTop: 24, marginTop: 8 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--terracotta)", fontWeight: 600 }}>— One-time setup</span>
                <span style={{ fontFamily: "var(--display)", fontSize: 28, fontWeight: 400, color: "var(--ink)" }}>${setup.toLocaleString()}</span>
              </div>
              <p style={{ fontFamily: "var(--display)", fontStyle: "italic", fontWeight: 300, fontSize: 15, color: "var(--muted)", margin: 0 }}>
                We spend a week reading the open web about <em>your</em> business — competitors, customers, category. Setup pays for the work that makes every issue after it land specific.
              </p>
            </div>

            {/* Recurring line */}
            <div style={{ borderTop: "1px solid var(--line-2)", paddingTop: 24, marginTop: 24 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--terracotta)", fontWeight: 600 }}>— Monthly subscription</span>
                <span style={{ fontFamily: "var(--display)", fontSize: 28, fontWeight: 400, color: "var(--ink)" }}>$500<span style={{ fontSize: 14, color: "var(--muted)", fontStyle: "italic", fontWeight: 300 }}>&nbsp;/ month</span></span>
              </div>
              <p style={{ fontFamily: "var(--display)", fontStyle: "italic", fontWeight: 300, fontSize: 15, color: "var(--muted)", margin: 0 }}>
                A PDF report, your Google Profile scorecard with fixes, five paste-and-run prompts, and a private business AI link. Delivered the first business day of every month.
              </p>
            </div>

            {/* Multi-location line */}
            <div style={{ borderTop: "1px solid var(--line-2)", paddingTop: 24, marginTop: 24 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--terracotta)", fontWeight: 600 }}>— Each additional location</span>
                <span style={{ fontFamily: "var(--display)", fontSize: 22, fontWeight: 400, color: "var(--ink)" }}>${locSetup} <span style={{ fontSize: 13, color: "var(--muted)", fontStyle: "italic", fontWeight: 300 }}>setup</span> <span style={{ color: "var(--muted)" }}>·</span> ${locMonthly}<span style={{ fontSize: 13, color: "var(--muted)", fontStyle: "italic", fontWeight: 300 }}>&nbsp;/ mo</span></span>
              </div>
              <p style={{ fontFamily: "var(--display)", fontStyle: "italic", fontWeight: 300, fontSize: 15, color: "var(--muted)", margin: 0 }}>
                Each location gets its own scan, its own competitor map, and its own report. We don't aggregate locations into one report — they're each their own.
              </p>
            </div>

            <div style={{ marginTop: 24, padding: "14px 18px", background: "rgba(195,107,62,0.06)", borderLeft: "2px solid var(--terracotta)", fontFamily: "var(--display)", fontStyle: "italic", fontWeight: 300, fontSize: 14, lineHeight: 1.55, color: "var(--ink)", opacity: 0.85 }}>
              No contract. Cancel any month — reply to your latest issue with the word <em>cancel</em> and we won't bill you again.
            </div>

            <a href="signup.html" className="pricing-tier-cta" style={{ marginTop: 24 }}>
              <span>Send me my free Recon Report now</span>
              <span>→</span>
            </a>
            <p style={{ fontFamily: "var(--display)", fontStyle: "italic", fontWeight: 300, fontSize: 13, color: "var(--muted)", margin: "12px 0 0", textAlign: "center" }}>
              Free sample report plus your Google Profile scorecard, on your business, in 48 hours. No card. No invoice unless you ask for the paid subscription.
            </p>
          </div>
        </section>

        <section className="pricing-includes">
          <div className="pricing-includes-head">
            <h2>What's <em>included.</em></h2>
            <p>The non-negotiables. We don't gate any of these.</p>
          </div>
          <div className="pricing-includes-grid">
            <div className="pricing-include-cell">
              <h4>Your Recon Report</h4>
              <p><em>A full report, a few minutes to read.</em> Three moves to ship this month, the thinking behind them, and what's actually changing in your category. <em>Read it Monday morning — then do it yourself, hand it to your staff, or brief the team for action.</em></p>
            </div>
            <div className="pricing-include-cell">
              <h4>Five prompts you paste and run</h4>
              <p>The exact words you paste into ChatGPT or Claude — hand-written for your business, naming you, your category, your competitors. The model writes the work.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Public sources across the web, ranked</h4>
              <p>Google Reviews, Yelp, Reddit, X, YouTube, TikTok, Instagram, Hacker News, industry newsletters, niche forums and threads. Every signal tied back to where it came from — no mystery rankings.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Google Profile score &amp; monthly fixes</h4>
              <p>We score your Google listing out of 100 and hand you the exact fixes to climb — categories, hours, photos, posts, Q&amp;A, the works. Tracked every issue so you watch the number move.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Your business AI, on tap</h4>
              <p>Text it like a friend who runs your marketing. <em>"What should I post this week?"</em> <em>"Why did reviews dip?"</em> It already knows your business and gets sharper every issue. One link in your welcome email — no account, no setup.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Email us directly</h4>
              <p>Reply to any issue and we see it personally. Replies usually within a day.</p>
            </div>
          </div>
        </section>

        <section className="pricing-guarantee">
          <div className="pricing-guarantee-card">
            <span className="pricing-guarantee-mark">¶</span>
            <p className="pricing-guarantee-body">
              <em>No contract.</em> Cancel any month — reply to your latest issue with the word <em>cancel</em> and we won't bill you again. You keep the issue you've already paid for.
            </p>
            <span className="pricing-guarantee-tag">— How cancellation works</span>
          </div>
        </section>

        <section className="pricing-faq">
          <div className="pricing-faq-head">
            <h2>Things people <em>actually</em> ask.</h2>
            <p>Five questions. Real answers.</p>
          </div>
          <FAQList items={faqItems} />
        </section>
      </main>
      <SiteFooter />
    </>
  );
}

const faqItems = [
  {
    q: <>Why a setup fee?</>,
    a: <>The first issue is the hardest one to write — we're learning your business from scratch, mapping your competitors, building the prompt scaffolding we'll reuse every month after. The $1,000 pays for that week of work. Every issue after lands faster and sharper because of it.</>,
  },
  {
    q: <>What if I'm not <em>technical</em>?</>,
    a: <>That's the whole point. If you can copy text from an email and paste it into a chat box, you can run Recon. We send the prompts; you paste them; the model writes the work. There's no setup, no plugin, no API.</>,
  },
  {
    q: <>What model should I use — ChatGPT or Claude?</>,
    a: <>Either works. The prompts are written to run on both. Claude tends to write tighter copy; ChatGPT tends to be better at structured outputs. Pick whichever you already use.</>,
  },
  {
    q: <>How is this different from a marketing consultant?</>,
    a: <>A consultant charges $3,000–$8,000 a month and produces work in 2–3 weeks. We charge $500/month after setup and ship your first paid issue within 7 days. The trade: a consultant tailors to your business one-on-one; we tailor to your <em>category</em> and let the model finish the personalization when you paste the prompt.</>,
  },
  {
    q: <>Will I get the same prompts every month?</>,
    a: <>No. Each month's five prompts are picked based on what's actually moving in your category that month — review drift, competitor changes, seasonal shifts, platform updates. You won't get a "Mother's Day campaign" prompt twice.</>,
  },
];

function FAQList({ items }) {
  const [open, setOpen] = usePricingState(0);
  return (
    <div className="pricing-faq-list">
      {items.map((it, i) => (
        <div key={i} className={"pricing-faq-item" + (open === i ? " is-open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="pricing-faq-q">
            <span>{it.q}</span>
            <span className="pricing-faq-toggle">+</span>
          </div>
          <div className="pricing-faq-a">
            <div className="pricing-faq-a-inner">
              <p>{it.a}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

window.PricingPage = PricingPage;