// origin-story.jsx — Founder origin story section. Dark/mono "precision
// instrument" aesthetic (matches FindSection / HowItWorks). Real story only.
// Copy source of truth: campsite-sniper repo
//   marketing/positioning/2026-07-12-positioning-spine.md

const OS_KEY_MAP = {
  bg: 'bg', bgDeep: 'bg',
  ink: 'text', inkMute: 'textMute', inkDim: 'textDim',
  amber: 'amber', amberDim: 'amberDim',
  pine: 'pine2', divider: 'border', panel: 'bg3',
};
const OS_C = new Proxy({}, {
  get(_t, k) { return window.CS_TOKENS[OS_KEY_MAP[k] || k]; },
});
const OS_MONO = '"SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace';

function OriginStory() {
  if (window.useTokens) window.useTokens(); // re-render on theme change
  const { mobile } = window.useViewport();

  const body = {
    fontFamily: OS_MONO,
    fontSize: mobile ? 13.5 : 15.5,
    lineHeight: 1.72,
    color: OS_C.inkMute,
    margin: '0 0 20px',
  };

  return (
    <section style={{
      background: OS_C.bgDeep, color: OS_C.ink,
      borderTop: `1px solid ${OS_C.divider}`,
      padding: mobile ? '64px 0' : '112px 0',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 720, margin: '0 auto', padding: mobile ? '0 22px' : '0 40px' }}>
        <div style={{
          fontFamily: OS_MONO, fontSize: 11, letterSpacing: 2,
          textTransform: 'uppercase', color: OS_C.amber, marginBottom: 18,
        }}>
          // Why this exists
        </div>

        <h2 style={{
          fontFamily: OS_MONO, fontWeight: 600, textTransform: 'uppercase',
          letterSpacing: 0, lineHeight: 1.05, color: OS_C.ink, margin: '0 0 30px',
          fontSize: mobile ? 'clamp(26px, 8vw, 34px)' : 'clamp(34px, 4vw, 52px)',
        }}>
          It started with a lake.
        </h2>

        <p style={body}>
          Not a specific campground — just <em>somewhere</em> on a lake or a river
          in Oregon, on a weekend I actually had free.
        </p>

        <p style={body}>
          That turned out to be shockingly hard. Recreation.gov and the state-park
          sites can tell you everything about a campground you already know the name
          of. What they can't tell you is{' '}
          <span style={{ color: OS_C.ink }}>
            "which of the hundreds of sites in Oregon are on the water — and which of
            those are open this weekend."
          </span>
        </p>

        <p style={body}>
          So I did it by hand. I spent hours, then more hours, hunting down every
          waterfront campground I could find, noting which specific sites actually
          backed up to the water, keeping it all in a spreadsheet. And because
          availability changes by the minute, the list was never enough — I had to
          go back and check every one, over and over, hoping a spot opened before
          someone else grabbed it.
        </p>

        <p style={{
          fontFamily: OS_MONO, fontWeight: 600, letterSpacing: '-0.01em',
          color: OS_C.amber, lineHeight: 1.32, maxWidth: 620,
          fontSize: mobile ? 17 : 22, margin: mobile ? '26px 0' : '34px 0',
        }}>
          It worked. It was also miserable. I was doing a computer's job with my thumbs.
        </p>

        <p style={body}>
          So I built the tool I wished existed: something that kept the list for me,
          watched every one of those waterfront sites at once, and told me the second
          one came open. It started with 22 Oregon lakes.
        </p>

        <p style={{ ...body, marginBottom: mobile ? 28 : 36 }}>
          That tool became Campsite Sniper. It doesn't watch 22 lakes anymore — it
          watches the entire country: every Recreation.gov campground coast to coast,
          plus Oregon's state parks, with more states on the way. Waterfront, your
          dates, your rig — you describe the trip, and it does the hunting. You never
          build the list. You never refresh the page. You just get the spot.
        </p>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: OS_MONO, fontSize: mobile ? 12 : 13,
          letterSpacing: 1.2, color: OS_C.inkMute,
        }}>
          <span style={{ height: 1, width: 28, background: OS_C.amber, opacity: 0.7 }}/>
          <span>— Paul, founder of Campsite Sniper</span>
        </div>
      </div>
    </section>
  );
}

window.OriginStory = OriginStory;