/* About page — founder essay. Pre-launch honest version (no fabricated
   customer history). Long-form, single column, two pull-quotes, signature. */

function AboutPage() {
  return (
    <>
      <SiteTopBar active="about" />
      <main>
        <section className="about-hero">
          <div className="about-hero-grid">
            <div>
              <div className="site-label">
                <span className="site-dot"></span>
                <span className="site-label-num">About</span>
                <span>Why Recon exists</span>
              </div>
              <h1>
                Most small businesses read their own reviews and <em>miss everything else.</em>
              </h1>
            </div>
            <aside className="about-hero-aside">
              <strong>— A note from Jim</strong>
              <p>
                The operators I respect most kept asking me the same two questions. <em>What are my customers actually saying online?</em> and <em>what are my competitors doing about it?</em> The honest answer, every time, was: we're all guessing. So I started building the thing that would make us stop.
              </p>
            </aside>
          </div>
        </section>

        <article className="about-essay">
          <div className="about-essay-meta">
            <span><strong>— Vol. 01</strong></span>
            <span>The Founding Memo</span>
            <span style={{ marginLeft: "auto" }}>April 2026</span>
          </div>

          <p>
            Owning a small business in 2026 is louder than it has ever been. Your customers are talking — on Google, on Reddit, on niche forums you'd never think to read, in YouTube comments, in a Yelp review someone wrote six months ago that's still ranking. Your competitors are talking too. So is every operator in your category, every supplier, every loose AI-curious neighbor with an opinion.
          </p>

          <p>
            The problem isn't that the information is hidden. <strong>The problem is that the information is everywhere</strong>, and the cost of paying attention to all of it — really paying attention — is somewhere between a part-time job and a small mortgage.
          </p>

          <div className="about-pull">
            <p>
              The interesting question isn't <em>"what are my customers thinking?"</em> The interesting question is: <em>"of the ten thousand things they said online this month, which three should change what I do on Tuesday?"</em>
            </p>
            <span className="about-pull-tag">— The thesis</span>
          </div>

          <h2 className="about-section" data-num="— 01">The consultant economy is <em>broken for the small operator.</em></h2>

          <p>
            For most of the last fifty years, the answer to that question was simple: <em>hire a consultant</em>. Six thousand dollars, a quarterly engagement, a forty-page deck, and a recommendation that you should probably do more of what's working.
          </p>

          <p>
            That worked, kind of, when markets moved at the pace of quarters. It does not work when markets move at the pace of <em>hours</em>. By the time the consultant has scheduled a kickoff, your nearest competitor has launched a new menu, two influencers have reviewed it, and the trend that prompted the engagement is over.
          </p>

          <p>
            The deeper problem is that consultants are <em>generalists in your specific business</em>. They've worked with "people like you." They have not spent six years running your specific operation. You have. The expertise lives in <em>your head</em>. The thing they can do that you can't is read the open web at scale and tell you what's actually moving.
          </p>

          <h2 className="about-section" data-num="— 02">What we're building, and <em>why this shape.</em></h2>

          <p>
            Recon is one bet, made in three pieces.
          </p>

          <p>
            <strong>One.</strong> The right cadence is <em>thirty days</em>. Quarterly is too slow. Weekly is too noisy. Monthly is the heartbeat of a small business — payroll, rent, P&amp;L. Insight should match the rhythm.
          </p>

          <p>
            <strong>Two.</strong> The right output is <em>five things</em>. Not a deck. Not a dashboard. Five things, ranked, each with a single sentence on why and a paste-and-run prompt on how. If we can't get it down to five, we haven't done the work.
          </p>

          <p>
            <strong>Three.</strong> The right tool is <em>already on your computer</em>. ChatGPT, Claude, Gemini — they're free or close to it. The bottleneck was never the AI. The bottleneck is knowing <em>what to ask</em>. That's the prompt. That's the deliverable. That's Recon.
          </p>

          <div className="about-pull">
            <p>
              We're not building a SaaS. We're not building a dashboard. We're writing <em>letters</em>, every month, that happen to contain the most leveraged AI prompts you'll use that month.
            </p>
            <span className="about-pull-tag">— The product</span>
          </div>

          <h2 className="about-section" data-num="— 03">Where we are, <em>honestly.</em></h2>

          <p>
            This is the founding memo. Recon is <em>pre-launch</em> — the engine works, the first sample reports have started going out to early prospects across industries from small wineries to contracting to non-profit, and the LLC is in formation. There are no paying clients yet. If you become one, you'll be among the first ten or twenty.
          </p>

          <p>
            I'm building Recon because I believe — five years from now — every small business in North America will have a relationship with one or two services that watch the open web on their behalf and translate what they see into <em>direct, dated, do-this-now</em> recommendations. The form factor will keep changing — voice, email, direct API into the operator's tools — but the <strong>job</strong> will be the same.
          </p>

          <p>
            Recon's bet is that the right form factor is <em>a letter</em>, in the long human tradition of letters. Six pages, opened on the first of the month, read with coffee. Five things to do. A signature at the bottom. Permission to ignore four of the five.
          </p>

          <p>
            If that sounds old-fashioned, that's because it is. The reason it works is the same reason a doctor's note works, a tailor's note works, a banker's note works. <em>Someone who knows your situation specifically</em> took the time to write to <em>you specifically</em>. That hasn't been replaced by software in six hundred years. I don't think it will be next year either.
          </p>

          <div className="about-sig">
            <span className="about-sig-mark">J.</span>
            <div className="about-sig-meta">
              <strong>Jim Toth</strong>
              Founder &amp; Editor · Recon<br/>
              20-year retired Marine pilot · high-volume fast-food entrepreneur<br/>
              Systems &amp; process · California
            </div>
          </div>
        </article>

        <section className="about-cta">
          <div className="about-cta-card">
            <div>
              <h2>Ask for a <em>sample.</em></h2>
              <p>Tell me your business name. I'll build a free sample report on you and have it back inside 48 hours. If it's not useful, you don't owe me anything.</p>
            </div>
            <a href="/site/signup.html" className="about-cta-btn">
              <span>Ask for a sample</span>
              <span>→</span>
            </a>
          </div>
        </section>
      </main>
      <SiteFooter />
    </>
  );
}

window.AboutPage = AboutPage;
