/* 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 }}>
                Five copy-paste prompts, written by hand, in a 6-page PDF. 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>Start with a free sample</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 6-page sample 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>Five prompts every month</h4>
              <p>Hand-written for your business. Names you, names your category, names your competitors. Not templates with placeholders — real prompts you can paste and run.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>6-page PDF report</h4>
              <p>The thinking behind the prompts: what's moving in your category, who's saying what, and which three things you can do this month.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Twelve sources, every issue</h4>
              <p>Google Reviews, Yelp, TripAdvisor, Reddit, X, YouTube, Hacker News, Bluesky, TikTok, Instagram, niche forums, industry threads — ranked by velocity, specificity, and what you can <em>actually do about it</em> in 30 days.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Public-source signal</h4>
              <p>Signals are tied back to the public source they came from. No mystery rankings, no private data — just the open web, read carefully.</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Your own analyst, between reports</h4>
              <p>Like ChatGPT — but it already knows your business. One link in your welcome email, no account needed. Use it any day of the month. (And it makes your next report more tailored — see the Method page.)</p>
            </div>
            <div className="pricing-include-cell">
              <h4>Email Jim directly</h4>
              <p>Reply to any issue and Jim sees 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;