// Truthful replacements for three pages that shipped with placeholder content in the design export
// (invented tweets, a podcast that does not exist yet, wrong vintages and reader counts, a stale price).
// Loaded after pages.jsx and projects.jsx, so these definitions win.
// AboutPage: same copy as the design, with the dead links wired, a working mailbox, and factual wording.

function ElsewherePage({ navigate }) {
  const places = [
    { name: "Alpha Loop Capital", role: "Founder and CIO", when: "2024 →", desc: "SMID-cap long/short equity. The fund launched June 02, 2025.", href: "https://alphaloopcapital.com", cta: "alphaloopcapital.com" },
    { name: "Hoags on Substack", role: "Author", when: "2024 →", desc: "Every essay, delivered. The Feed is free; The Loop and The Inner Loop are the paid rings.", href: "https://tomhoganfinance.substack.com", cta: "tomhoganfinance.substack.com" },
    { name: "X", role: "@Hoags18", when: "daily", desc: "Where the working notes show up first, and where to reach me.", href: "https://x.com/Hoags18", cta: "x.com/Hoags18" },
    { name: "GitHub", role: "tjhoags", when: "ongoing", desc: "The builds: the voice corpus, the wikis, the trading scaffold, whatever is on the bench.", href: "https://github.com/tjhoags", cta: "github.com/tjhoags" },
    { name: "LinkedIn", role: "thomasjhogan", when: "", desc: "The institutional profile.", href: "https://www.linkedin.com/in/thomasjhogan/", cta: "linkedin.com/in/thomasjhogan" },
  ];
  return (
    <div className="th-about">
      <header className="th-about-head">
        <span className="th-eyebrow" style={{ fontSize: "16px" }}>Elsewhere</span>
        <h1 style={{ fontSize: "56px" }}>Connect with me<br /><span className="th-h-italic">elsewhere.</span></h1>
      </header>
      <div className="th-about-prose th-prose" style={{ maxWidth: "720px" }}>
        {places.map((p) => (
          <p key={p.name}>
            <strong>{p.name}</strong>{p.role ? " · " + p.role : ""}{p.when ? " · " + p.when : ""}<br />
            {p.desc}{" "}
            <a href={p.href} target="_blank" rel="noopener noreferrer">{p.cta} →</a>
          </p>
        ))}
        <p className="th-microcopy">Machine-readable versions of everything here: <a href="/agents">/agents</a>.</p>
      </div>
    </div>
  );
}

function ProjectsPage({ navigate, initialId }) {
  const rooms = [
    { name: "Alpha Loop Capital", kind: "Fund", status: "Active", desc: "SMID-cap long/short equity with an options overlay and an event-driven sleeve. Launched June 02, 2025. Covered by Hedge Fund Alert, November 19, 2025.", href: "https://alphaloopcapital.com", cta: "alphaloopcapital.com" },
    { name: "Hoags", kind: "Writing", status: "Active", desc: "This site and the newsletter. One byline, sixteen essays and counting, every call dated and graded.", route: "archive", cta: "Browse the archive" },
    { name: "LoopSeek AI", kind: "Building", status: "MVP 0.5 live", desc: "Relationship intelligence for people who raise and allocate capital. Extraction, scoring, graph, semantic search. Built as the answer to the placement-agent industry.", href: "https://loopseek.ai", cta: "loopseek.ai" },
    { name: "Dear Partners", kind: "Service", status: "Taking Q3 letters", desc: "Quarterly partner letters for emerging managers, written by someone who has sent his own.", route: "partners", cta: "Read the offer" },
    { name: "Finance references for machines", kind: "Building", status: "Live", desc: "hedgefund.wiki and wallstreet.wiki: open, machine-first references with their own llms.txt and JSON endpoints.", href: "https://hedgefund.wiki", cta: "hedgefund.wiki" },
    { name: "Cognitive Architecture v2.0", kind: "Method", status: "In use", desc: "The written operating standard for how analysis gets assembled, falsified, and re-checked before it ships.", route: "track", cta: "See the track record" },
  ];
  return (
    <div className="th-about">
      <header className="th-about-head">
        <span className="th-eyebrow" style={{ fontSize: "16px" }}>Projects</span>
        <h1 style={{ fontSize: "56px" }}>One person,<br /><span className="th-h-italic">several rooms.</span></h1>
      </header>
      <div className="th-about-prose th-prose" style={{ maxWidth: "720px" }}>
        <p className="th-about-lead">The voice on Hoags is the same voice running the fund, building the products, and writing the letters. These are the rooms it works in.</p>
        {rooms.map((r) => (
          <p key={r.name}>
            <strong>{r.name}</strong> · {r.kind} · {r.status}<br />
            {r.desc}{" "}
            {r.href
              ? <a href={r.href} target="_blank" rel="noopener noreferrer">{r.cta} →</a>
              : <a href={"#" + r.route} onClick={(e) => { e.preventDefault(); navigate(r.route); }}>{r.cta} →</a>}
          </p>
        ))}
      </div>
    </div>
  );
}

function LoopPage({ navigate }) {
  const S = window.HOAGS_DATA.SUBSTACK_SUBSCRIBE;
  return (
    <div className="th-about">
      <header className="th-about-head">
        <span className="th-eyebrow" style={{ fontSize: "16px" }}>The Loop · Members</span>
        <h1 style={{ fontSize: "56px" }}>Working notes,<br /><span className="th-h-italic">before they are clean.</span></h1>
      </header>
      <div className="th-about-prose th-prose" style={{ maxWidth: "720px" }}>
        <p className="th-about-lead">The middle ring. For operators and investors who want what is actually in the notebook: the full SMID-cap write-ups, the quarterly Scorecard detail, the build logs from the AI-native desk, and a thread where you can ask.</p>
        <p><strong>The Loop</strong> is $10.00 a month or $80.00 a year. <strong>The Inner Loop</strong> is the founding tier at $250.00 a year: one call a year, an early look at every initiation, the research model file, and your name on the founding list if you want it there.</p>
        <p><a className="th-tier-cta" style={{ display: "inline-block", textDecoration: "none", padding: "12px 22px" }} href={S} target="_blank" rel="noopener">Join on Substack →</a></p>
        <p className="th-microcopy">Everything public stays public. <a href="#archive" onClick={(e) => { e.preventDefault(); navigate("archive"); }}>Read what is free →</a></p>
      </div>
    </div>
  );
}

function AboutPage({ navigate }) {
  return (
    <div className="th-about">
      <header className="th-about-head">
        <span className="th-eyebrow" style={{ textAlign: "justify", fontSize: "16px" }}>About</span>
        <h1 style={{ fontSize: "60px" }}>Tom Hogan.<br /><span className="th-h-italic">One byline. One point of view.</span></h1>
      </header>

      <div className="th-about-grid">
        <div className="th-about-photo">
          <div className="th-photo-frame">
            <img src="assets/tom-portrait.jpeg" alt="Tom Hogan portrait." />
          </div>
        </div>

        <div className="th-about-prose th-prose">
          <p className="th-about-lead">
            Investor, Founder, and Operator on the clock. Off it, a die-hard
            Philly guy born and raised, a friend to many, and, most
            importantly, Dad.
          </p>
          <p>
            I'm Tom Hogan and this is Hoags. Call me Tom, call me Hoags, your
            choice. Sometimes I'm writing as the Founder and CIO, sometimes I'm
            Dad, and if I'm unlucky I'll hear a <em>"Thomas"</em> come from Kat.
            Whichever one's at the keyboard, it'll always be authentically me.
          </p>
          <p>
            By day I'm the Founder and CIO of <a href="https://alphaloopcapital.com">Alpha Loop Capital</a>,
            a long-short hedge fund focused primarily on small- and mid-cap
            equities, trading equities and options. Philly born and raised,
            career paved in Naples, FL, and now on Long Island with Kat and our
            daughter Ellie.
          </p>
          <p>
            I've always been fortunate to live an interesting life, and I've
            heard it from friends enough times that I figured it was time to
            start sharing. Until now I've only ever written about work: markets,
            theses, the trade. Hoags is the rest of it.
          </p>
          <h2 className="th-h2">A self-taught everything</h2>
          <p>
            I learned finance the same way I learn anything: from scratch, on my
            own, until I could hold my own with the best in the room. More than a
            decade in, I'm doing the same thing with AI: building, shipping,
            breaking, fixing. <a href="https://github.com/tjhoags" target="_blank" rel="noopener noreferrer">GitHub</a> and
            the <a href="#projects" onClick={(e) => { e.preventDefault(); navigate("projects"); }}>projects page</a> are
            where the receipts live, and the <a href="#track" onClick={(e) => { e.preventDefault(); navigate("track"); }}>track record</a> is
            where the calls get graded.
          </p>
          <h2 className="th-h2">What you'll find here</h2>
          <p>
            Long essays, short notes, the occasional book write-up, and the
            working notebook behind the public side. No topic split. The
            throughline is one operator's point of view, with the parts that
            don't make the highlight reel included on purpose.
          </p>
          <h2 className="th-h2">Get in touch</h2>
          <p>
            For Hoags, the site, or anything personal: <a href="mailto:me@tomhogan.io">me@tomhogan.io</a>.
            Anything related to the fund goes to <a href="mailto:ir@alphaloopcapital.com">ir@alphaloopcapital.com</a>.
            Otherwise find me on <a href="https://x.com/Hoags18" target="_blank" rel="noopener noreferrer">X</a> or
            <a href="https://www.linkedin.com/in/thomasjhogan/" target="_blank" rel="noopener noreferrer"> LinkedIn</a>.
          </p>
        </div>
      </div>

      <div className="th-about-cta">
        <button className="th-btn-primary" onClick={() => navigate("subscribe")}>See membership →</button>
        <button className="th-btn-ghost" onClick={() => navigate("archive")}>Browse archive</button>
      </div>
    </div>
  );
}