/* Method page — how Recon scans the open web. */

function MethodPage() {
  return (
    <>
      <SiteTopBar active="method" />
      <main>
        <header className="site-page-head">
          <div className="site-label">
            <span className="site-dot"></span>
            <span className="site-label-num">Method</span>
            <span>How Recon reads the open web</span>
          </div>
          <h1 className="site-page-title">
            We read everything <em>public</em> about your category. Then we throw most of it away.
          </h1>
          <p className="site-page-lede">
            The interesting work is the throwing-away. Twelve channels, ~14,000 signals a month, ranked by velocity, specificity, and what you can <em>actually do about it in 30 days</em>.
          </p>
        </header>

        {/* ---------- The diagram ---------- */}
        <section className="method-section">
          <span className="method-eyebrow">— The pipeline</span>
          <h2 className="site-h2">Three stages, <em>thirty days</em>.</h2>

          <div className="method-diagram">
            <Stage
              num="01 · Scan"
              h={<>The <em>twelve</em> channels.</>}
              meta="Public web only. We never ask you to log in."
              items={[
                ["Google Reviews · Yelp · TripAdvisor", "Reviews"],
                ["Reddit · X · YouTube", "Social"],
                ["Hacker News · Bluesky", "Social"],
                ["TikTok · Instagram captions", "Social"],
                ["Niche forums · industry threads", "Niche"],
              ]}
            />
            <Arrow />
            <RankingStage />
            <Arrow />
            <Stage
              num="03 · Ship"
              h={<>The <em>five</em> prompts.</>}
              meta="6-page PDF + paste-and-run prompts."
              items={[
                ["Win-back / retention", "01"],
                ["Reputation reply", "02"],
                ["Revenue test memo", "03"],
                ["Content pack", "04"],
                ["Bonus prompt", "05"],
              ]}
            />
          </div>
        </section>

        <div className="method-pull">
          <div className="method-pull-card">
            <span className="method-pull-mark">¶</span>
            <p className="method-pull-body">
              The job isn't <em>finding signal</em>. The open web is full of signal. The job is figuring out which three things you can do <em>this Tuesday</em>.
            </p>
            <span className="method-pull-tag">— The Recon thesis</span>
          </div>
        </div>

        {/* ---------- Principles ---------- */}
        <section className="method-section method-section--rule">
          <div className="method-principles">
            <div className="method-principles-head">
              <span className="method-eyebrow">— Principles</span>
              <h2>What guides every <em>ranking decision.</em></h2>
              <p>Four rules. We re-litigate them quarterly.</p>
            </div>
            <div className="method-principles-list">
              <Principle
                num="01"
                h={<>Velocity over <em>volume</em>.</>}
                body={<>A complaint that appeared twice last month and seven times this month matters more than one that's been at fifteen for six months. <em>What's changing</em> is what you can act on. What's stable is just background.</>}
              />
              <Principle
                num="02"
                h={<>Specificity over <em>sentiment</em>.</>}
                body={<>"Great place" tells you nothing. "Espresso was bitter on Saturday" is a Tuesday meeting. We weight reviews that name a specific time, person, product, or interaction — even if the overall sentiment is positive.</>}
              />
              <Principle
                num="03"
                h={<>Actionability inside <em>30 days</em>.</>}
                body={<>If you can't do something about a signal before next month's report drops, we don't show it. Q4 strategy belongs in a Q4 strategy deck. Recon is a 30-day operating loop.</>}
              />
              <Principle
                num="04"
                h={<>Source <em>over</em> summary.</>}
                body={<>Signals are tied back to the public channel they came from. We don't ask you to trust us — we ask you to <em>spot-check us</em> on any signal you want.</>}
              />
              <Principle
                num="05"
                h={<>Learns from your <em>last issue</em>.</>}
                body={<>Every issue ships with one-tap feedback on each prompt. The ones you mark <em>shipped</em> shape next month's lineup; the ones you mark <em>shelved</em> never come back. Each issue is more tailored than the last.</>}
              />
            </div>
          </div>
        </section>

        {/* ---------- What we do / don't ---------- */}
        <section className="method-section method-section--rule">
          <span className="method-eyebrow">— Boundaries</span>
          <h2 className="site-h2">What we'll do, <em>and what we won't.</em></h2>
          <div className="method-dont">
            <div className="method-dont-col">
              <h4>— What Recon does</h4>
              <ul>
                <li>Read public reviews, posts, comments, threads</li>
                <li>Rank what's <em>moving</em> in your category this month</li>
                <li>Write five prompts that name your business by name</li>
                <li>Cite signals back to their public channel so you can spot-check</li>
                <li>Write prompts that work in ChatGPT or Claude</li>
              </ul>
            </div>
            <div className="method-dont-col method-dont-col--no">
              <h4>— What Recon won't do</h4>
              <ul>
                <li>Connect to your POS, CRM, or customer database</li>
                <li>Scrape private accounts, DMs, or paywalled content</li>
                <li>Ask <em>you</em> to log in or share an API key</li>
                <li>Sell your data — <em>we don't collect any</em></li>
                <li>Promise rankings, leads, or revenue. We promise <em>moves</em>.</li>
              </ul>
            </div>
          </div>
        </section>

        {/* ---------- The analyst, between reports ---------- */}
        <section className="method-section method-section--rule">
          <span className="method-eyebrow">— The assistant</span>
          <h2 className="site-h2">The analyst, <em>between reports.</em></h2>
          <p className="method-lede">Every paid subscriber gets a private chat at <code>reconai.io/a/</code>. One link in your welcome email — no login, no account, no app to install. The assistant already knows your category, your competitors, and the goals you told us at signup. Use it any day of the month.</p>

          <div className="method-dont">
            <div className="method-dont-col">
              <h4>— Things people actually ask it</h4>
              <ul>
                <li>"Draft me three replies to a 2-star Google review — one apologetic, one matter-of-fact, one that invites the customer to call me."</li>
                <li>"Plan me a weekday-lunch promo for next month based on what's been working for places like mine."</li>
                <li>"Explain the 'wellness plan trend' from this month's report like I haven't read the report."</li>
                <li>"Write me a Facebook post announcing we're closed for the holiday, in our usual friendly tone."</li>
              </ul>
            </div>
            <div className="method-dont-col">
              <h4>— Why it makes your next report better</h4>
              <p>The longer you use it, the more useful your next report gets. Not because we save your questions — <em>we don't.</em> When you close the tab, the words are gone.</p>
              <p>But we keep a count of <em>what kind</em> of things you ask about — more promo planning than competitor research, more weekday lunch than weekend dinner. Each month's report leans toward what you actually use, so by month six it fits your business in a way a generic newsletter never could.</p>
              <p style={{ fontFamily: "var(--display)", fontStyle: "italic", color: "var(--muted)", marginTop: 18 }}>(Full plain-English privacy details: <a href="/legal#assistant-privacy">/legal#assistant-privacy</a>.)</p>
            </div>
          </div>
        </section>

        <section className="method-final">
          <div className="method-final-card">
            <div>
              <h2>See it in <em>practice.</em></h2>
              <p>The full illustrative sample report — every page, every section, every prompt slot.</p>
            </div>
            <a href="sample.html" className="method-final-cta">
              <span>Read the sample report</span>
              <span>→</span>
            </a>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}

function Stage({ num, h, meta, items }) {
  return (
    <div className="method-stage">
      <span className="method-stage-num">— {num}</span>
      <h3 className="method-stage-h">{h}</h3>
      <p className="method-stage-meta">{meta}</p>
      <ul className="method-stage-list">
        {items.map(([k, v], i) => (
          <li key={i}><span>{k}</span><span>{v}</span></li>
        ))}
      </ul>
    </div>
  );
}

function RankingStage() {
  return (
    <div className="method-stage method-stage--ranking">
      <span className="method-stage-num">— 02 · Rank</span>
      <h3 className="method-stage-h">The <em>three</em> filters.</h3>
      <p className="method-stage-meta">Three filters in sequence. Each pares the field down before the next.</p>
      <div className="method-rank-bars">
        <div className="method-rank-bar">
          <span className="method-rank-bar-label">Velocity</span>
          <span className="method-rank-bar-track"><span style={{ width: "82%" }}></span></span>
        </div>
        <div className="method-rank-bar">
          <span className="method-rank-bar-label">Specificity</span>
          <span className="method-rank-bar-track"><span style={{ width: "64%" }}></span></span>
        </div>
        <div className="method-rank-bar">
          <span className="method-rank-bar-label">Actionability</span>
          <span className="method-rank-bar-track"><span style={{ width: "48%" }}></span></span>
        </div>
        <div className="method-rank-bar">
          <span className="method-rank-bar-label">Surfaced</span>
          <span className="method-rank-bar-track"><span style={{ width: "12%" }}></span></span>
        </div>
      </div>
    </div>
  );
}

function Arrow() {
  return (
    <div className="method-arrow" aria-hidden="true">
      <svg viewBox="0 0 80 8" fill="none">
        <line x1="0" y1="4" x2="72" y2="4" stroke="currentColor" strokeWidth="1" strokeDasharray="2 4"/>
        <path d="M 70 1 L 76 4 L 70 7" stroke="currentColor" strokeWidth="1" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
  );
}

function Principle({ num, h, body }) {
  return (
    <div className="method-principle">
      <span className="method-principle-num">— {num}</span>
      <div>
        <h3>{h}</h3>
        <p>{body}</p>
      </div>
    </div>
  );
}

window.MethodPage = MethodPage;