// Projects page — the range. Hoags writes about all of these; this is the index.
const { useState: useStateProj } = React;

const PROJECTS = [
  {
    id: "alc",
    name: "Alpha Loop Capital",
    kind: "Fund",
    role: "Founder & PM",
    status: "Active",
    summary: "Long-short equity, asymmetric early-stage exposure. Quiet book, concentrated, mandate-disciplined.",
    detail: "ALC is the day job. Capital, allocation, the slow patience of being right. Most of the investing writing on Hoags begins as something I had to think through to do my job — then it gets sanded down for here.",
    metrics: [
      { k: "Vintage", v: "2023" },
      { k: "Strategy", v: "Long-short" },
      { k: "Status", v: "Closed to new LPs" },
    ],
    links: [
      { label: "alphaloopcapital.com →", href: "#" },
      { label: "Tear sheet (LPs only)", href: "#" },
    ],
  },
  {
    id: "alc-research",
    name: "ALC Research",
    kind: "Writing",
    role: "Author",
    status: "Active",
    summary: "Markets newsletter for institutional readers. Position-level, weekly cadence, paid.",
    detail: "Different audience, different voice. ALC Research is for people who price risk for a living. Hoags is the other shore of that — the same brain, but speaking to anyone curious enough to read 4,000 words on a Sunday.",
    metrics: [
      { k: "Cadence", v: "Weekly" },
      { k: "Readers", v: "~1,400" },
      { k: "Tier", v: "Paid · institutional" },
    ],
    links: [{ label: "research.alphaloopcapital.com →", href: "#" }],
  },
  {
    id: "ai",
    name: "AI products",
    kind: "Building",
    role: "Builder",
    status: "Quiet",
    summary: "Internal tools that have outgrown internal use. Two are close to public. One is shipping in Q3.",
    detail: "I don't write about what I'm building until it's earned the right to be written about. Build logs come later — when the thing is real, has users, and I have something true to say. Until then, holding fire.",
    metrics: [
      { k: "Shipping", v: "Q3 2026" },
      { k: "Stack", v: "Self-hosted models" },
      { k: "Public?", v: "Soon" },
    ],
    links: [],
  },
  {
    id: "writing",
    name: "Hoags",
    kind: "Writing",
    role: "Byline",
    status: "Active",
    summary: "This site. Personal newsletter, all subjects, one voice. Free + paid tiers; no algorithmic feed.",
    detail: "The whole point of Hoags is that the byline is the thing. A magazine of one. Investing, building, AI, reading, life — same person writing all of it, on purpose.",
    metrics: [
      { k: "Cadence", v: "Weekly-ish" },
      { k: "Tiers", v: "Free / Paid / Loop" },
      { k: "Archive", v: "Open" },
    ],
    links: [{ label: "Subscribe →", href: "#", action: "subscribe" }],
  },
  {
    id: "advisory",
    name: "Strategic Advisors",
    kind: "Capital",
    role: "Advisor",
    status: "Selective",
    summary: "A few founders, a few funds. Strategy, capital structure, the awkward conversations. (Yes — this is the consulting page. No deck, no SOW template.)",
    detail: "Strategic Advisors is a polite way of saying I take a small number of paid engagements a year — usually founders or PMs in a stuck spot. No retainers, no boards. Two-hour sessions, written follow-ups, and the occasional standing call. If a deck and an SOW would help, ask; I'll mostly just send a calendar link.",
    metrics: [
      { k: "Cycle", v: "1–2 / quarter" },
      { k: "Stage", v: "Pre-seed → growth" },
      { k: "Format", v: "Sessions + memos" },
    ],
    links: [{ label: "Make contact →", href: "#" }],
  },
  {
    id: "speaking",
    name: "Talks & podcasts",
    kind: "Public",
    role: "Guest",
    status: "Selective",
    summary: "Long-form interviews and panels. The longer record of how the thinking actually evolved.",
    detail: "I say no to most of these. The ones that make it through are usually two-hour conversations with someone who's read the work — not soundbite spots.",
    metrics: [
      { k: "Recent", v: "BG2 · Acquired" },
      { k: "Format", v: "Long-form only" },
      { k: "Booking", v: "Via email" },
    ],
    links: [{ label: "Recent appearances →", href: "#" }],
  },
];

const PROJECT_KINDS = ["All", "Fund", "Writing", "Building", "Capital", "Public"];

function ProjectsPage({ navigate, initialId }) {
  const [filter, setFilter] = useStateProj("All");
  const [openId, setOpenId] = useStateProj(initialId && initialId !== "all" ? initialId : null);

  const visible = filter === "All" ? PROJECTS : PROJECTS.filter(p => p.kind === filter);

  return (
    <div className="th-projects">
      <header className="th-projects-head">
        <span className="th-eyebrow">Projects · the range</span>
        <h1>One person, several rooms.</h1>
        <p className="th-projects-sub">
          The voice on Hoags is the same voice running ALC, building under the
          hood, reading in the margins, parenting on hard days. These are the
          rooms it works in. The writing draws from all of them.
        </p>
        <div className="th-projects-filters">
          {PROJECT_KINDS.map(k => (
            <button
              key={k}
              className={"logo-filter" + (filter === k ? " is-on" : "")}
              onClick={() => { setFilter(k); setOpenId(null); }}
            >{k} {k !== "All" && <span style={{ opacity: 0.5, marginLeft: 4 }}>({PROJECTS.filter(p => p.kind === k).length})</span>}</button>
          ))}
        </div>
      </header>

      <section className="th-projects-list">
        {visible.map((p, i) => {
          const isOpen = openId === p.id;
          return (
            <article
              key={p.id}
              className={"th-project-row" + (isOpen ? " is-open" : "")}
            >
              <button
                className="th-project-row-trigger"
                onClick={() => setOpenId(isOpen ? null : p.id)}
                aria-expanded={isOpen}
              >
                <span className="th-project-num">{String(i + 1).padStart(2, "0")}</span>
                <div className="th-project-row-main">
                  <div className="th-project-row-top">
                    <h2 className="th-project-name">{p.name}</h2>
                    <span className="th-project-kind">{p.kind}</span>
                  </div>
                  <p className="th-project-summary">{p.summary}</p>
                </div>
                <div className="th-project-row-side">
                  <span className={"th-project-status th-project-status--" + p.status.toLowerCase().replace(/\s/g, "")}>{p.status}</span>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
                    style={{ transform: isOpen ? "rotate(45deg)" : "none", transition: "transform 200ms" }}>
                    <path d="M12 5v14M5 12h14" />
                  </svg>
                </div>
              </button>

              {isOpen && (
                <div className="th-project-detail">
                  <div className="th-project-detail-prose">
                    <p>{p.detail}</p>
                    {p.links.length > 0 && (
                      <div className="th-project-links">
                        {p.links.map(l => (
                          <a
                            key={l.label}
                            href={l.href}
                            className="th-project-link"
                            onClick={(e) => {
                              if (l.action === "subscribe") { e.preventDefault(); navigate("subscribe"); }
                            }}
                          >{l.label}</a>
                        ))}
                      </div>
                    )}
                  </div>
                  <dl className="th-project-meta">
                    <div className="th-project-meta-row">
                      <dt>Role</dt><dd>{p.role}</dd>
                    </div>
                    {p.metrics.map(m => (
                      <div key={m.k} className="th-project-meta-row">
                        <dt>{m.k}</dt><dd>{m.v}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              )}
            </article>
          );
        })}
      </section>

      <aside className="th-projects-foot">
        <div>
          <span className="th-eyebrow">Why one site</span>
          <p>
            Most operators in this neighborhood split their public surface into
            three: a fund site, a personal site, a maker site. I tried that.
            It produced three thin sites and no center of gravity. <strong>Hoags is
            the center of gravity.</strong> The projects link out; the writing stays
            here.
          </p>
        </div>
        <div className="th-projects-foot-cta">
          <button className="th-btn-primary" onClick={() => navigate("subscribe")}>
            Subscribe to Hoags
          </button>
          <a href="#" className="th-link-arrow" onClick={(e) => { e.preventDefault(); navigate("about"); }}>
            More about me →
          </a>
        </div>
      </aside>
    </div>
  );
}

window.ProjectsPage = ProjectsPage;