// About + Subscribe pages — keep them quiet, on-brand.

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={typeof window !== "undefined" && window.__resources && window.__resources.tomPortrait || "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 &mdash; most
            importantly &mdash; 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 my wife
            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.
            15+ years in, I'm doing the same thing with AI — building,
            shipping, breaking, fixing. The <a href="#">GitHub</a> and the
            <a href="#"> projects page</a> are where the receipts live.
          </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 Substack, the site, anything personal) —
            <a href="mailto:tom@tomhogan.io"> tom@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="#">X</a> or
            <a href="https://linkedin.com/in/thomasjhogan"> 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>);

}

function SubscribePage({ navigate }) {
  return (
    <div className="th-subscribe-page">
      <header className="th-sub-head">
        <span className="th-eyebrow">Membership</span>
        <h1>Read at the depth that fits you.</h1>
        <p className="th-sub-sub">
          Three rings. The Feed is free and stays that way. The Loop and Inner
          Loop are for readers who want the working notes — research, frameworks,
          post-mortems, and the in-progress thinking before it's clean.
        </p>
      </header>

      {window.FindYourRing ? <window.FindYourRing navigate={navigate} /> : null}

      <div className="th-sub-grid-divider" style={{ textAlign: "center", margin: "64px 0 32px", borderTop: "1px solid var(--th-rule-color, rgba(31,61,46,0.10))", paddingTop: "20px" }}>
        <span className="th-eyebrow">All three rings, side by side</span>
      </div>

      <TierGrid navigate={navigate} />

      <section className="th-sub-faq">
        <div className="th-section-head">
          <span className="th-eyebrow">A few honest answers</span>
        </div>
        {[
        { q: "Will I be spammed?", a: "No. One email when an essay ships. No promotional sequences, no upsell drips. You can unsubscribe in one click and the link works." },
        { q: "What's the refund policy?", a: "Cancel any time. Annual plans get pro-rated refunds, no questions, no email back-and-forth." },
        { q: "How is this different from Alpha Loop Capital's research?", a: "Sibling brands, separate sites, separate writers. ALC research is institutional and dollars-on. Hoags is one operator's notebook in public." },
        { q: "Do gift subscriptions exist?", a: "Yes — at the Loop and Inner Loop tiers. Email tom@tomhogan.io." }].
        map((f, i) =>
        <details key={i} className="th-faq-row">
            <summary>
              <span>{f.q}</span>
              <span className="th-faq-plus">+</span>
            </summary>
            <p>{f.a}</p>
          </details>
        )}
      </section>
    </div>);

}

// Stub for "The Loop" landing — points users at subscribe but with member-side preview
function LoopPage({ navigate }) {
  const { ESSAYS } = window.HOAGS_DATA;
  const loop = ESSAYS.filter((e) => e.tier !== "free").slice(0, 5);
  return (
    <div className="th-loop-page">
      <header className="th-loop-head">
        <span className="th-eyebrow">The Loop · members</span>
        <h1>Working notes, frameworks, post-mortems.</h1>
        <p className="th-loop-sub">
          The middle ring. For operators and investors who want what's actually
          in the notebook — not the cleaned-up version.
        </p>
        <div className="th-loop-cta-row">
          <button className="th-btn-primary" onClick={() => navigate("subscribe")}>
            Join The Loop — $15/mo
          </button>
          <span className="th-microcopy">Or read what's public →</span>
        </div>
      </header>

      <section className="th-loop-preview">
        <div className="th-section-head">
          <span className="th-eyebrow">Recent members-only</span>
        </div>
        {loop.map((e) =>
        <div key={e.id} className="th-list-row th-list-row-locked">
            <span className="th-list-date">{e.date}</span>
            <span className="th-list-body">
              <span className="th-list-title">{e.title}</span>
              <span className="th-list-dek">{e.dek}</span>
            </span>
            <span className="th-list-meta">
              <span className={"th-tier-pill th-tier-" + e.tier}>
                {e.tier === "loop" ? "Loop" : "Inner"}
              </span>
              <span className="th-list-lock">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="4" y="11" width="16" height="10" rx="1.5" />
                  <path d="M8 11V7a4 4 0 0 1 8 0v4" />
                </svg>
              </span>
            </span>
          </div>
        )}
      </section>
    </div>);

}

function DisclosurePage({ navigate }) {
  return (
    <div className="th-reader" style={{ paddingTop: "8px" }}>
      <div className="th-reader-back">
        <a href="#" className="th-back-link" onClick={(e) => {e.preventDefault();navigate("home");}}>← Back to Hoags</a>
      </div>
      <header style={{ margin: "32px 0 28px", borderBottom: "1px solid var(--th-stone-dark)", paddingBottom: "20px" }}>
        <span className="th-eyebrow" style={{ display: "block", marginBottom: "12px", color: "#B85968" }}>Disclosure</span>
        <h1 style={{ fontSize: "44px" }}>Important disclosures.</h1>
      </header>
      <div className="th-prose" style={{ marginBottom: "72px" }}>
        <p>
          Hoags is a personal newsletter authored by Tom Hogan and is provided for
          informational and educational purposes only. Nothing on this site
          constitutes investment, legal, tax, or other professional advice, an offer
          to sell or a solicitation to buy any security or interest in any fund, or a
          recommendation to engage in any investment strategy.
        </p>
        <p>
          Tom Hogan is the Founder and Chief Investment Officer of Alpha Loop Capital,
          LLC, an SEC-registered investment adviser. Views expressed here are his own
          and do not represent Alpha Loop Capital, LLC or any affiliated entity, and no
          information here should be construed as a solicitation of investors or
          offering of fund interests.
        </p>
        <p>
          The author may hold positions in securities discussed. Past performance is not
          indicative of future results. Do your own research and consult a licensed
          professional before making any financial decision.
        </p>
      </div>
    </div>);

}

window.DisclosurePage = DisclosurePage;
window.AboutPage = AboutPage;
window.SubscribePage = SubscribePage;
window.LoopPage = LoopPage;

// ============================================================
//  Notes — off-stage writing. Reading & Life, sub-sections on page.
// ============================================================
function NotesPage({ navigate }) {
  const { ESSAYS } = window.HOAGS_DATA;
  const [q, setQ] = React.useState("");
  const query = q.trim().toLowerCase();
  const match = (e) =>
    !query ||
    (e.title + " " + (e.dek || "") + " " + (e.tag || "")).toLowerCase().includes(query);
  const reading = ESSAYS.filter((e) => e.tag === "Reading").slice(0, 3).filter(match);
  const life = ESSAYS.filter((e) => e.tag === "Life").slice(0, 3).filter(match);

  const sectionStyle = {
    background: "white",
    border: "1px solid var(--th-stone-dark)",
    borderRadius: 4,
    padding: "32px 36px",
    marginBottom: 22
  };
  const eyebrow = {
    fontFamily: "var(--th-font-mono)",
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "#B85968",
    fontWeight: 500,
    marginBottom: 8
  };
  const itemRow = {
    display: "grid",
    gridTemplateColumns: "110px 1fr auto",
    gap: 22,
    alignItems: "baseline",
    padding: "16px 0",
    borderTop: "1px dashed rgba(31,61,46,0.12)",
    cursor: "pointer"
  };
  const itemDate = {
    fontFamily: "var(--th-font-mono)",
    fontSize: 11,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    color: "var(--th-ink-quiet)"
  };
  const itemTitle = {
    fontFamily: "var(--th-font-display)",
    fontWeight: 500,
    fontSize: 19,
    lineHeight: 1.25,
    color: "#2D5544",
    letterSpacing: "-0.012em",
    marginBottom: 4
  };
  const itemDek = {
    fontFamily: "var(--th-font-display)",
    fontSize: 14.5,
    lineHeight: 1.5,
    color: "var(--th-ink-soft)"
  };
  const itemMeta = {
    fontFamily: "var(--th-font-mono)",
    fontSize: 11,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    color: "var(--th-ink-quiet)"
  };

  return (
    <div style={{ maxWidth: 980, margin: "0 auto", padding: "72px 48px 96px" }}>
      <header style={{ marginBottom: 40, paddingBottom: 28, borderBottom: "1px solid rgba(31,61,46,0.15)" }}>
        <div style={eyebrow}>Notes</div>
        <h1 style={{ fontFamily: "var(--th-font-display)", fontWeight: 500, fontSize: "clamp(36px, 4.4vw, 52px)", lineHeight: 1.08, letterSpacing: "-0.022em", color: "#2D5544", margin: "10px 0 0", maxWidth: 760 }}>
          Where I jot thoughts, ideas, references, and whatever I&rsquo;m carrying around.
        </h1>
        <p style={{ fontFamily: "var(--th-font-mono)", fontSize: 14, lineHeight: 1.6, color: "var(--th-ink-soft)", margin: "18px 0 0", maxWidth: 680, letterSpacing: "0.01em" }}>
          The less-polished side. Written in real time, half-formed on purpose, and
          often worked out together with subscribers in the margins.
        </p>

        {/* Notes search */}
        <label style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 26, padding: "13px 18px", background: "white", border: "1px solid var(--th-stone-dark)", borderRadius: 4 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#B85968" strokeWidth="2" style={{ flexShrink: 0 }}>
            <circle cx="11" cy="11" r="7" />
            <path d="m21 21-4.3-4.3" />
          </svg>
          <input
            type="search"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search notes — title, topic, tag…"
            style={{ flex: 1, border: 0, outline: "none", background: "transparent", fontFamily: "var(--th-font-display)", fontSize: 18, color: "#2D5544" }} />
          {query &&
          <button
            onClick={() => setQ("")}
            style={{ border: 0, background: "transparent", cursor: "pointer", fontFamily: "var(--th-font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--th-ink-quiet)" }}>
            Clear
          </button>
          }
        </label>
      </header>

      {/* Reading & Notes */}
      <section style={sectionStyle}>
        <div style={eyebrow}>Section 01 · Reading &amp; Notes</div>
        {reading.length > 0 ? reading.map((e) =>
        <div key={e.id} style={itemRow} onClick={() => navigate("essay", { id: e.id })}>
            <span style={itemDate}>{e.date}</span>
            <span>
              <span style={itemTitle}>{e.title}</span>
              <span style={itemDek}>{e.dek}</span>
            </span>
            <span style={itemMeta}>{e.minutes} min</span>
          </div>
        ) :
        <div style={{ ...itemRow, opacity: 0.6, cursor: "default", borderTop: "1px dashed rgba(31,61,46,0.12)" }}>
            <span style={itemDate}>—</span>
            <span style={itemTitle}>{query ? "No matches." : "No reading notes yet."}</span>
            <span style={itemMeta}>{query ? "" : "Coming soon"}</span>
          </div>
        }
        <button
          onClick={() => navigate("archive", { tag: "Reading" })}
          style={{ marginTop: 18, padding: "8px 14px", background: "transparent", border: "1px solid var(--th-stone-dark)", borderRadius: 2, fontFamily: "var(--th-font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#2D5544", fontWeight: 500, cursor: "pointer" }}>
          Browse all reading notes →
        </button>
      </section>

      {/* Life */}
      <section style={sectionStyle}>
        <div style={eyebrow}>Section 02 · Life</div>
        {life.length > 0 ? life.map((e) =>
        <div key={e.id} style={itemRow} onClick={() => navigate("essay", { id: e.id })}>
            <span style={itemDate}>{e.date}</span>
            <span>
              <span style={itemTitle}>{e.title}</span>
              <span style={itemDek}>{e.dek}</span>
            </span>
            <span style={itemMeta}>{e.minutes} min</span>
          </div>
        ) :
        <div style={{ ...itemRow, opacity: 0.6, cursor: "default" }}>
            <span style={itemDate}>—</span>
            <span style={itemTitle}>{query ? "No matches." : "No life notes yet."}</span>
            <span style={itemMeta}>{query ? "" : "Coming soon"}</span>
          </div>
        }
        <button
          onClick={() => navigate("archive", { tag: "Life" })}
          style={{ marginTop: 18, padding: "8px 14px", background: "transparent", border: "1px solid var(--th-stone-dark)", borderRadius: 2, fontFamily: "var(--th-font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#2D5544", fontWeight: 500, cursor: "pointer" }}>
          Browse all life notes →
        </button>
      </section>
    </div>);

}

// ============================================================
//  Elsewhere — the ventures behind the byline + a Twitter feed.
// ============================================================
function ElsewherePage({ navigate }) {
  const ventures = [
  { id: "alc", name: "Alpha Loop Capital", desc: "Active long-short hedge fund. Founder & PM. Institutional capital, public-equity mandate.", role: "Founder & PM", year: "2021 →", cta: "alphaloopcapital.com", external: true },
  { id: "ai-builds", name: "AI Projects", desc: "What I'm shipping under the hood — small tools, weekend builds, repos with notes. The Builder axis of the brand.", role: "Maker", year: "ongoing", cta: "github.com/tjhoags →", external: true },
  { id: "podcast", name: "Podcast", desc: "The show. Operators, allocators, and what they actually think — not the LinkedIn version.", role: "Host", year: "monthly", cta: "Listen on Apple / Spotify →", external: false },
  { id: "substack", name: "Substack", desc: "The longer-form research notes — institutional-grade, cross-posted from Hoags for paying subscribers.", role: "Author", year: "weekly", cta: "Read on Substack →", external: false }];


  const tweets = [
  { id: 1, body: "If your weekly metrics review is the room where decisions get made, the room is too big.", date: "2h", reply: 3, like: 24 },
  { id: 2, body: "Long-only managers don't have a bad year. They have a year where their thesis showed up at a bad time.", date: "Mon", reply: 12, like: 88 },
  { id: 3, body: "The honest taxonomy of AI products in 2026 is up. Wrote it twice — second version is shorter and meaner.", date: "Apr 19", reply: 7, like: 142 },
  { id: 4, body: "The job of a thesis isn't to be right. It's to be specific enough to be wrong on purpose.", date: "Apr 11", reply: 9, like: 201 }];


  const avatarSrc = (typeof window !== "undefined" && window.__resources && window.__resources.tomPortrait) || "assets/tom-portrait.jpeg";

  const eyebrow = {
    fontFamily: "var(--th-font-mono)",
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "#B85968",
    fontWeight: 500,
    marginBottom: 8
  };
  const card = {
    background: "white",
    border: "1px solid var(--th-stone-dark)",
    borderRadius: 4,
    padding: "26px 30px",
    display: "flex",
    flexDirection: "column",
    gap: 12
  };

  return (
    <div style={{ maxWidth: 1080, margin: "0 auto", padding: "72px 48px 96px" }}>
      <header style={{ marginBottom: 48, paddingBottom: 32, borderBottom: "1px solid rgba(31,61,46,0.15)" }}>
        <div style={eyebrow}>Elsewhere</div>
        <h1 style={{ fontFamily: "var(--th-font-display)", fontWeight: 500, fontSize: "clamp(40px, 5vw, 60px)", lineHeight: 1.05, letterSpacing: "-0.025em", color: "#2D5544", margin: "10px 0 0", maxWidth: 760 }}>
          Connect with me elsewhere.
        </h1>
      </header>

      {/* Ventures grid */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 56 }}>
        {ventures.map((v) =>
        <div key={v.id} style={card}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
              <h2 style={{ fontFamily: "var(--th-font-display)", fontWeight: 500, fontSize: 26, lineHeight: 1.18, letterSpacing: "-0.018em", color: "#2D5544", margin: 0 }}>{v.name}</h2>
              <span style={{ fontFamily: "var(--th-font-mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--th-ink-quiet)", whiteSpace: "nowrap" }}>{v.year}</span>
            </div>
            <div style={{ fontFamily: "var(--th-font-mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "#B85968", fontWeight: 500 }}>{v.role}</div>
            <p style={{ fontFamily: "var(--th-font-display)", fontSize: 16, lineHeight: 1.55, color: "var(--th-ink-soft)", margin: "4px 0 8px", fontStyle: "italic" }}>{v.desc}</p>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ fontFamily: "var(--th-font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--th-navy)", textDecoration: "none", fontWeight: 500, borderBottom: "1px solid var(--th-sky)", paddingBottom: 2, alignSelf: "flex-start" }}>{v.cta}</a>
          </div>
        )}
      </section>

      {/* Twitter / X — rendered like a real thread, not a brand card */}
      <div style={eyebrow}>Recent · X / Twitter</div>
      <section style={{ maxWidth: 600, margin: "10px 0 0", background: "#fff", border: "1px solid #eff3f4", borderRadius: 16, overflow: "hidden", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' }}>
        {/* Account header strip */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderBottom: "1px solid #eff3f4" }}>
          <img src={avatarSrc} alt="Tom Hogan" style={{ width: 44, height: 44, borderRadius: "50%", objectFit: "cover", background: "#1B2A4A" }} />
          <div style={{ flex: 1, lineHeight: 1.2 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 4, fontWeight: 700, fontSize: 15, color: "#0f1419" }}>
              Tom Hogan
              <svg width="16" height="16" viewBox="0 0 24 24" style={{ marginLeft: 1 }}><circle cx="12" cy="12" r="11" fill="#1d9bf0" /><path d="M7 12.5l3 3 6-6.5" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
            <div style={{ fontSize: 14, color: "#536471" }}>@Hoags18</div>
          </div>
          <a href="https://x.com/Hoags18" target="_blank" rel="noopener noreferrer" style={{ background: "#0f1419", color: "#fff", fontWeight: 700, fontSize: 14, padding: "8px 16px", borderRadius: 999, textDecoration: "none" }}>Follow</a>
        </div>

        {/* The thread */}
        {tweets.map((t, i) => {
          const last = i === tweets.length - 1;
          const fmt = (n) => n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, "") + "K" : "" + n;
          const rt = Math.max(1, Math.round(t.like / 4));
          const views = fmt(t.like * 53 + 400);
          const act = { display: "flex", alignItems: "center", gap: 6, color: "#536471", fontSize: 13 };
          return (
            <article key={t.id} style={{ display: "flex", gap: 12, padding: last ? "12px 16px 14px" : "12px 16px 0" }}>
              {/* avatar column + thread connector */}
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                <img src={avatarSrc} alt="" style={{ width: 40, height: 40, borderRadius: "50%", objectFit: "cover", background: "#1B2A4A", flexShrink: 0 }} />
                {!last && <div style={{ width: 2, flex: 1, minHeight: 12, background: "#cfd9de", marginTop: 4 }} />}
              </div>
              {/* tweet body */}
              <div style={{ flex: 1, paddingBottom: last ? 0 : 12 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 5, flexWrap: "wrap", fontSize: 15, lineHeight: 1.2 }}>
                  <span style={{ fontWeight: 700, color: "#0f1419" }}>Tom Hogan</span>
                  <svg width="15" height="15" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#1d9bf0" /><path d="M7 12.5l3 3 6-6.5" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  <span style={{ color: "#536471" }}>@Hoags18 · {t.date}</span>
                </div>
                <p style={{ margin: "2px 0 10px", fontSize: 15, lineHeight: 1.45, color: "#0f1419" }}>{t.body}</p>
                <div style={{ display: "flex", justifyContent: "space-between", maxWidth: 420 }}>
                  <span style={act}>
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 11.5a8.4 8.4 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z" /></svg>
                    {t.reply}
                  </span>
                  <span style={act}>
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 1l4 4-4 4" /><path d="M3 11V9a4 4 0 0 1 4-4h14" /><path d="M7 23l-4-4 4-4" /><path d="M21 13v2a4 4 0 0 1-4 4H3" /></svg>
                    {rt}
                  </span>
                  <span style={act}>
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z" /></svg>
                    {fmt(t.like)}
                  </span>
                  <span style={act}>
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 21V10M9 21V4M15 21v-8M21 21V8" /></svg>
                    {views}
                  </span>
                </div>
              </div>
            </article>);
        })}

        {/* footer link */}
        <a href="https://x.com/Hoags18" target="_blank" rel="noopener noreferrer" style={{ display: "block", textAlign: "center", padding: "14px", borderTop: "1px solid #eff3f4", color: "#1d9bf0", fontSize: 15, textDecoration: "none" }}>
          Show more on X
        </a>
      </section>
    </div>);

}

window.NotesPage = NotesPage;
window.ElsewherePage = ElsewherePage;