/* Sample report page — illustrative full 6-page redacted report for an
   imagined "Coffee shop, San Diego". 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: "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: <>Five 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>read in six pages.</em>
          </h1>
          <p className="site-page-lede">
            An illustrative full Recon report. Names, reviews, and competitor identifiers are blacked out — the structure, the sources, 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">12 public 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>

            {/* ---------- 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 / 06</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>" — Yelp, 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 / 06</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">
                Twelve public channels. No login, no API, 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>TripAdvisor</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>Hacker News</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Bluesky</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>Niche forums</span>
                <span className="sample-source"><span className="sample-source-dot"></span>Industry threads</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 / 06</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 / 06</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">Five prompts · paste &amp; run</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">
                Paste these into ChatGPT, Claude, or any text model. Each is 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>Bonus · AI assistant <em>setup</em></h3>
                    <p>System prompt + memory pre-load. Builds you a "house" assistant already trained on your business and this month's report. Ask it anything in plain English. Included with every Recon subscription.</p>
                  </div>
                </div>
              </div>
              <div className="sample-page-foot">
                <span>Recon · Illustrative sample · End</span>
                <span>page 06 / 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 · 6 pages</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 a sample</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 6-page sample 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>Start a subscription</span>
              <span>→</span>
            </a>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}

window.SamplePage = SamplePage;