/* Sample report page — illustrative full redacted report for an
   imagined "Coffee shop, San Diego" plus a Google Profile scorecard insert.
   Names, reviews, and competitor identifiers blacked out. Format mirrors
   what a real subscriber receives.
   Layout: paper pages stacked on dark, sticky sidebar on right with TOC + CTA. */

const { useState: useSampleState, useEffect: useSampleEffect, useRef: useSampleRef } = React;

const TOC = [
  { id: "p1",   num: "01", label: <>Cover</> },
  { id: "pgbp", num: "+",  label: <>Google Profile · scorecard</> },
  { id: "p2",   num: "02", label: <>Customer signal · ranked</> },
  { id: "p3",   num: "03", label: <>Competitor weak spots</> },
  { id: "p4",   num: "04", label: <>Sources &amp; method</> },
  { id: "p5",   num: "05", label: <>What to do this month</> },
  { id: "p6",   num: "06", label: <>Peers + AI prompts</> },
];

function SamplePage() {
  const [active, setActive] = useSampleState("p1");
  const refs = useSampleRef({});

  useSampleEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        const visible = entries.filter(e => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) setActive(visible[0].target.id);
      },
      { rootMargin: "-30% 0px -50% 0px", threshold: [0, 0.25, 0.5, 0.75, 1] }
    );
    TOC.forEach(t => { const el = refs.current[t.id]; if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  function jump(id) {
    const el = refs.current[id];
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }

  return (
    <>
      <SiteTopBar active="sample" />
      <main>
        <header className="site-page-head">
          <div className="site-label">
            <span className="site-dot"></span>
            <span className="site-label-num">Sample report</span>
            <span>Coffee shop · San Diego · April 2026</span>
          </div>
          <h1 className="site-page-title">
            A whole month, <em>in one sitting.</em>
          </h1>
          <p className="site-page-lede">
            An illustrative full Recon report, plus your <em>Google Profile scorecard</em> with the exact fixes for this month. Names, reviews, and competitor identifiers are blacked out; the structure, the sources, the score, and the moves are what every real subscriber gets. Read it the way a subscriber would: top to bottom, in one sitting.
          </p>
        </header>

        <div className="sample-shell">
          <div className="sample-pages">

            {/* ---------- Page 1 · Cover ---------- */}
            <article id="p1" ref={el => refs.current.p1 = el} className="sample-page sample-page-cover">
              <div className="sample-cover-mark">
                <ScoutMark size={26} />
                <span>Recon<em>.</em></span>
              </div>
              <div className="sample-cover-vol">
                <span>Volume</span>
                <span className="sample-cover-vol-num">14</span>
                <span>04 . 2026</span>
              </div>
              <h2 className="sample-cover-title">
                The <em>Saturday-morning</em> shift is your biggest open opportunity.
              </h2>
              <div className="sample-cover-meta">
                <div><span>Prepared for</span><span className="v"><span className="sample-redact">▮▮▮▮▮ ▮▮▮▮▮▮</span></span></div>
                <div><span>Category</span><span className="v">Specialty coffee</span></div>
                <div><span>Geography</span><span className="v">San Diego, CA · 1.2 mi radius</span></div>
                <div><span>Sources scanned</span><span className="v">Public web channels</span></div>
              </div>
              <div className="sample-cover-stamp">
                <div className="ring">
                  <div className="inner">
                    <span>Recon</span>
                    <span className="num">14</span>
                    <span>vol</span>
                  </div>
                </div>
              </div>
            </article>

            {/* ---------- Insert · Google Profile scorecard ---------- */}
            <article id="pgbp" ref={el => refs.current.pgbp = el} className="sample-page sample-page-gbp">
              <div className="sample-page-head">
                <span className="sample-page-head-num">— +</span>
                <span className="sample-page-head-title">Google Profile · score &amp; fixes</span>
                <span>Illustrative · sample</span>
              </div>
              <h2 className="sample-page-h">Your Google listing scored <em>62 / 100</em> this month.</h2>
              <p className="sample-page-prose">
                Up from <em>58</em> last issue. Here's what's strong, what's missing, and the four fixes that get you to <em>78</em> by next month. <em>Each fix takes 10 minutes or less.</em>
              </p>

              <div className="sample-gbp-score">
                <div className="sample-gbp-meter">
                  <div className="sample-gbp-meter-bar"><span style={{ width: "62%" }}></span></div>
                  <div className="sample-gbp-meter-labels">
                    <span>0</span><span>50</span><span><em>62</em> · you</span><span>78 · target</span><span>100</span>
                  </div>
                </div>
              </div>

              <h2 className="sample-page-h2">What's <em>strong</em>.</h2>
              <div className="sample-page-rows">
                <div className="sample-row">
                  <span className="sample-row-k">✓</span>
                  <span className="sample-row-v">Categories complete · primary + 4 secondary, no gaps</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k">✓</span>
                  <span className="sample-row-v">Hours up to date · holiday hours set through end of quarter</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k">✓</span>
                  <span className="sample-row-v"><em>4.6 ★</em> avg from 312 reviews · 89% reply rate</span>
                </div>
              </div>

              <h2 className="sample-page-h2">What's <em>missing</em>.</h2>
              <div className="sample-page-rows">
                <div className="sample-row">
                  <span className="sample-row-k down">✗</span>
                  <span className="sample-row-v">No <em>Q&amp;A</em> entries · top 3 competitors average 12 each</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k down">✗</span>
                  <span className="sample-row-v">Only <em>18 photos</em> · top competitors carry 90+</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k down">✗</span>
                  <span className="sample-row-v">No Google <em>Posts</em> in 47 days · ranking signal decays after 30</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k down">✗</span>
                  <span className="sample-row-v">Service menu incomplete · <em>8 of 14</em> fields blank</span>
                </div>
              </div>

              <h2 className="sample-page-h2">Fix this <em>month</em>.</h2>
              <div className="sample-actions">
                <div className="sample-action">
                  <span className="sample-action-num">01</span>
                  <div>
                    <h3>Seed Q&amp;A with your <em>5 most-asked</em> inbox questions.</h3>
                    <p>Cost: 15 min. Single biggest score lift. Prompt on page 06 drafts both the questions and the answers in your voice.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">02</span>
                  <div>
                    <h3>Add <em>6 photos</em> · 2 storefront, 2 product, 2 staff.</h3>
                    <p>Cost: 10 min. Geotag on capture. Re-upload monthly even if the shots are similar — recency is weighted.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">03</span>
                  <div>
                    <h3>Publish <em>2 Google Posts</em> · one promo, one event.</h3>
                    <p>Cost: 5 min. Posts decay at 7 days for visibility, 30 days for ranking. Keep a 2-post-per-month cadence.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">04</span>
                  <div>
                    <h3>Complete the <em>service menu</em> · 8 missing fields.</h3>
                    <p>Cost: 10 min. Pulls into "near me" search for every named service. Field list on page 06, prompt 06.</p>
                  </div>
                </div>
              </div>

              <div className="sample-pull">
                <span className="sample-pull-mark">¶</span>
                <p>Most owners never look at this surface. The four fixes above take <em>40 minutes total</em> and move you from page-2 to page-1 for "<span className="sample-redact">▮▮▮▮▮▮▮▮ ▮▮▮▮▮▮ ▮▮▮▮▮ ▮▮</span>" within 60 days. <em>This is the cheapest move in the entire report.</em></p>
              </div>
              <div className="sample-page-foot">
                <span>Recon · Illustrative sample · Google Profile insert</span>
                <span>+ scorecard</span>
              </div>
            </article>

            {/* ---------- Page 2 · Customer signal ---------- */}
            <article id="p2" ref={el => refs.current.p2 = el} className="sample-page">
              <div className="sample-page-head">
                <span className="sample-page-head-num">— 02</span>
                <span className="sample-page-head-title">Customer signal · ranked</span>
                <span>Illustrative · sample</span>
              </div>
              <h2 className="sample-page-h">What's drifting <em>up</em> this month.</h2>
              <p className="sample-page-prose">
                Five themes climbed in your reviews and social mentions vs. March. Ranked by velocity (rate of change), not volume. The first two are <em>worth a meeting</em>.
              </p>
              <div className="sample-page-rows">
                <div className="sample-row">
                  <span className="sample-row-k">↑ 01</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮▮▮▮ ▮▮▮ ▮▮▮▮ ▮▮▮▮▮▮▮▮ ▮▮ ▮▮▮ ▮▮▮▮▮▮</span>" — <em>7 reviews mention</em>, +250% vs. March</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k">↑ 02</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮ ▮▮ ▮▮▮▮▮▮▮▮▮ ▮▮▮▮ ▮▮ ▮▮▮▮▮▮▮▮</span>" — <em>5 reviews mention</em>, +150%</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k">↑ 03</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮▮▮▮ ▮▮▮▮▮▮▮ ▮▮ ▮▮▮▮ ▮▮▮▮ ▮▮▮▮</span>" — 4 reviews mention, +100%</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k">↑ 04</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮ ▮▮ ▮▮▮▮▮▮▮▮▮▮ ▮▮▮▮▮ ▮▮▮▮</span>" — 3 mentions, +50%</span>
                </div>
              </div>

              <h2 className="sample-page-h2">Drifting <em>down</em>.</h2>
              <div className="sample-page-rows">
                <div className="sample-row">
                  <span className="sample-row-k down">↓ 01</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮ ▮▮▮▮▮▮▮ ▮▮▮▮ ▮▮▮▮▮ ▮▮▮▮▮▮</span>" — down from <em>11 last month</em> to 4. The seating change is working.</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k down">↓ 02</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮▮▮▮▮ ▮▮▮ ▮▮▮▮▮▮▮▮▮ ▮▮▮▮▮▮▮</span>" — down from 6 to 2.</span>
                </div>
              </div>

              <div className="sample-pull">
                <span className="sample-pull-mark">¶</span>
                <p>The <em>weekend morning staffing</em> complaint isn't going away. Last month it was speed; this month it's warmth. <em>Same root cause</em> — your strongest barista isn't on Saturdays.</p>
              </div>
              <div className="sample-page-foot">
                <span>Recon · Illustrative sample</span>
                <span>page 02</span>
              </div>
            </article>

            {/* ---------- Page 3 · Competitor weak spots ---------- */}
            <article id="p3" ref={el => refs.current.p3 = el} className="sample-page">
              <div className="sample-page-head">
                <span className="sample-page-head-num">— 03</span>
                <span className="sample-page-head-title">Competitor weak spots</span>
                <span>Illustrative · sample</span>
              </div>
              <h2 className="sample-page-h">Where the <em>three closest</em> are leaking.</h2>
              <p className="sample-page-prose">
                Each bar is the share of negative mentions in their last 90 days, normalized by review volume. Names redacted. The pattern matters more than the names.
              </p>

              <div className="sample-comp">
                <div className="sample-comp-row">
                  <span className="sample-comp-name"><span className="sample-redact">▮▮▮▮▮▮▮▮▮ ▮▮▮▮▮▮</span></span>
                  <span className="sample-comp-bar"><span style={{ width: "78%" }}></span></span>
                  <span className="sample-comp-tag">— inconsistent espresso</span>
                </div>
                <div className="sample-comp-row">
                  <span className="sample-comp-name"><span className="sample-redact">▮▮▮ ▮▮▮▮ ▮▮▮▮▮▮▮▮</span></span>
                  <span className="sample-comp-bar"><span style={{ width: "62%" }}></span></span>
                  <span className="sample-comp-tag">— rude staff (Sat AM)</span>
                </div>
                <div className="sample-comp-row">
                  <span className="sample-comp-name"><span className="sample-redact">▮▮▮▮▮ ▮▮▮▮▮▮ ▮▮.</span></span>
                  <span className="sample-comp-bar"><span style={{ width: "44%" }}></span></span>
                  <span className="sample-comp-tag">— pour-over wait time</span>
                </div>
                <div className="sample-comp-row">
                  <span className="sample-comp-name"><span className="sample-redact">▮▮▮▮▮▮▮ ▮▮▮▮▮▮</span></span>
                  <span className="sample-comp-bar"><span style={{ width: "36%" }}></span></span>
                  <span className="sample-comp-tag">— pricing complaints</span>
                </div>
              </div>

              <div className="sample-pull">
                <span className="sample-pull-mark">¶</span>
                <p>Their <em>Saturday-morning</em> staffing problem is your <em>Saturday-morning</em> opportunity. Two of three competitors are weak on the same shift you're winning on. <em>Lean in.</em></p>
              </div>

              <h2 className="sample-page-h2">Sample excerpts</h2>
              <div className="sample-page-rows">
                <div className="sample-row">
                  <span className="sample-row-k">→</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮▮▮▮ ▮▮▮▮▮ ▮▮▮▮▮ ▮▮▮▮▮▮▮▮ ▮▮ ▮▮▮▮ ▮▮▮▮▮▮▮▮ ▮▮▮▮ ▮▮▮▮ ▮▮ ▮▮▮▮▮▮▮▮▮</span>" — Reddit, 2 wks ago</span>
                </div>
                <div className="sample-row">
                  <span className="sample-row-k">→</span>
                  <span className="sample-row-v">"<span className="sample-redact">▮▮▮▮▮▮ ▮▮ ▮▮▮▮▮ ▮▮▮▮▮▮▮▮▮ ▮▮▮ ▮▮▮▮▮▮▮▮▮ ▮▮ ▮▮▮▮▮▮▮▮▮▮</span>" — Google, 5 days ago</span>
                </div>
              </div>
              <div className="sample-page-foot">
                <span>Recon · Illustrative sample</span>
                <span>page 03</span>
              </div>
            </article>

            {/* ---------- Page 4 · Sources & method ---------- */}
            <article id="p4" ref={el => refs.current.p4 = el} className="sample-page">
              <div className="sample-page-head">
                <span className="sample-page-head-num">— 04</span>
                <span className="sample-page-head-title">Sources &amp; method</span>
                <span>Illustrative · sample</span>
              </div>
              <h2 className="sample-page-h">Where the signals <em>came from.</em></h2>
              <p className="sample-page-prose">
                Public web channels. No login, no customer data. Each source weighted by signal-to-noise for your category, recalculated monthly.
              </p>

              <div className="sample-sources">
                <span className="sample-source"><span className="sample-source-dot"></span>Google Reviews</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Yelp</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Reddit</span>
                <span className="sample-source"><span className="sample-source-dot"></span>X</span>
                <span className="sample-source"><span className="sample-source-dot"></span>YouTube</span>
                <span className="sample-source"><span className="sample-source-dot"></span>TikTok</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Instagram</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Hacker News</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Industry newsletters</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Niche forums</span>
              </div>

              <h2 className="sample-page-h2">How signals get <em>ranked</em>.</h2>
              <p className="sample-page-prose">
                Three filters in sequence. (1) <em>Velocity</em> — rate of change vs. last month, not raw volume. A single new theme matters more than a stable one. (2) <em>Specificity</em> — how concrete the language is. "<span className="sample-redact">▮▮▮▮▮▮ ▮▮ ▮▮▮▮ ▮▮▮▮▮</span>" beats "great place." (3) <em>Actionability</em> — can the owner do something about it within 30 days?
              </p>

              <div className="sample-pull">
                <span className="sample-pull-mark">¶</span>
                <p>We don't show signals you can't <em>act on this month</em>. A trend you'd see on a Q4 strategy deck doesn't belong in a 30-day report.</p>
              </div>
              <div className="sample-page-foot">
                <span>Recon · Illustrative sample</span>
                <span>page 04</span>
              </div>
            </article>

            {/* ---------- Page 5 · What to do ---------- */}
            <article id="p5" ref={el => refs.current.p5 = el} className="sample-page">
              <div className="sample-page-head">
                <span className="sample-page-head-num">— 05</span>
                <span className="sample-page-head-title">What to do this month</span>
                <span>Illustrative · sample</span>
              </div>
              <h2 className="sample-page-h">Three moves, ranked by <em>cost</em>.</h2>
              <p className="sample-page-prose">
                Cheapest first. Each move ties back to a signal on page 02–03. Don't try all three; pick the one that matches the bandwidth you actually have this month.
              </p>

              <div className="sample-actions">
                <div className="sample-action">
                  <span className="sample-action-num">01</span>
                  <div>
                    <h3>Move your strongest barista to <em>Saturday morning</em>.</h3>
                    <p>Cost: zero. Schedule change. Hits both signals — your weekend warmth complaint and competitor weakness on the same shift.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">02</span>
                  <div>
                    <h3>Run a <em>4-touch SMS</em> sequence to your 14 lapsed regulars.</h3>
                    <p>Cost: ~$8 in SMS, 90 minutes of writing. Use the prompt on page 06 — it produces all four touches in one paste.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">03</span>
                  <div>
                    <h3>Reply to the <em>three negative reviews</em> from March.</h3>
                    <p>Cost: 30 minutes. Reputation reply prompt on page 06 turns each into a 2-paragraph empathetic reply that links to a private make-good.</p>
                  </div>
                </div>
              </div>
              <div className="sample-page-foot">
                <span>Recon · Illustrative sample</span>
                <span>page 05</span>
              </div>
            </article>

            {/* ---------- Page 6 · The five prompts ---------- */}
            <article id="p6" ref={el => refs.current.p6 = el} className="sample-page">
              <div className="sample-page-head">
                <span className="sample-page-head-num">— 06</span>
                <span className="sample-page-head-title">What your peers are doing with AI</span>
                <span>Illustrative · sample</span>
              </div>
              <h2 className="sample-page-h">The five prompts for <em>this month</em>.</h2>
              <p className="sample-page-prose">
                Other operators in your category are already using AI for exactly these five moves. Paste each into ChatGPT, Claude, or any text model — pre-loaded with your business context, your category, and the signals from this report. <em>Don't edit them.</em> Just paste.
              </p>

              <div className="sample-actions">
                <div className="sample-action">
                  <span className="sample-action-num">01</span>
                  <div>
                    <h3>Lapsed-regular <em>win-back</em> sequence</h3>
                    <p>Best in Claude. Produces 4 SMS touches, no discount until touch 3.</p>
                    <div className="sample-action-prompt">
                      <span className="label">— prompt 01 of 05</span>
                      You are the owner of <span style={{color:"#C36B3E"}}>[Your Business · San Diego, CA]</span>, a specialty coffee shop. Last month, 14 customers stopped coming after 6+ months of regular visits. Write a 4-touch SMS win-back sequence — empathetic, no discount in the first message, with a soft offer only at touch 3. Tone: warm, brief, no exclamation marks…
                    </div>
                  </div>
                </div>

                <div className="sample-action">
                  <span className="sample-action-num">02</span>
                  <div>
                    <h3>Three-reply <em>reputation</em> recovery</h3>
                    <p>Best in ChatGPT. One reply per negative review, with private make-good link.</p>
                    <div className="sample-action-prompt">
                      <span className="label">— prompt 02 of 05</span>
                      For each of the following three negative Google reviews of <span style={{color:"#C36B3E"}}>[Your Business]</span>, write a public reply (max 80 words) that acknowledges the specific complaint, takes responsibility without grovelling, and offers a private make-good via DM…
                    </div>
                  </div>
                </div>

                <div className="sample-action">
                  <span className="sample-action-num">03</span>
                  <div>
                    <h3>Slow-day <em>revenue test</em> memo</h3>
                    <p>One-page experiment plan for your slowest weekday.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">04</span>
                  <div>
                    <h3>Weekend <em>content pack</em> · Reels + stories</h3>
                    <p>Five caption + visual briefs for the upcoming weekend, tied to this month's top customer signal.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">05</span>
                  <div>
                    <h3>Google Profile · <em>Q&amp;A + service menu</em> drafter</h3>
                    <p>Best in Claude. Drafts the 5 Q&amp;A entries and the 8 missing service-menu fields from the scorecard insert — paste them straight into your Google Business Profile dashboard.</p>
                  </div>
                </div>
                <div className="sample-action">
                  <span className="sample-action-num">+</span>
                  <div>
                    <h3>Your business AI · <em>always on</em></h3>
                    <p>Every subscriber gets a private chat link in the welcome email — no account, no setup. It already knows your business and this month's report. Text it any day: <em>"what should I post this week?"</em> · <em>"why did reviews dip?"</em> · <em>"draft a reply to this email."</em> Gets sharper with every issue.</p>
                  </div>
                </div>
              </div>
              <div className="sample-page-foot">
                <span>Recon · Illustrative sample · End</span>
                <span>page 06</span>
              </div>
            </article>
          </div>

          {/* ---------- Sidebar ---------- */}
          <aside className="sample-aside">
            <div>
              <div className="sample-aside-tag">— Volume 14</div>
              <p className="sample-aside-meta">Coffee shop · San Diego<br/>April 2026 · full report + scorecard</p>
            </div>
            <div className="sample-aside-toc">
              {TOC.map(t => (
                <button
                  key={t.id}
                  type="button"
                  className={"sample-aside-toc-item" + (active === t.id ? " active" : "")}
                  onClick={() => jump(t.id)}
                >
                  <span className="sample-aside-toc-num">— {t.num}</span>
                  <span className="sample-aside-toc-label">{t.label}</span>
                </button>
              ))}
            </div>
            <div className="sample-aside-cta">
              <span className="sample-aside-cta-tag">— Want one of these?</span>
              <p className="sample-aside-cta-body">
                Get one written for <em>your business</em>, free, in 48 hours.
              </p>
              <a className="sample-aside-cta-btn" href="signup.html">
                <span>Send me my free Recon Report now</span>
                <span>→</span>
              </a>
            </div>
          </aside>
        </div>

        <section className="sample-final">
          <div className="sample-final-card">
            <div>
              <h2>Read the whole thing? <em>Now read your own.</em></h2>
              <p>Free sample report plus your Google Profile scorecard, on your business, in 48 hours. If you subscribe, your first paid issue ships within 7 days. Cancel any month, no contract.</p>
            </div>
            <a href="signup.html" className="site-cta-primary">
              <span>Send me my free Recon Report now</span>
              <span>→</span>
            </a>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}

window.SamplePage = SamplePage;