/* v3/trailhead.jsx — Toolkit grid linking to every backend research page.
   This is the funnel: the dashboard's job is to surface just-enough signal
   to decide which tool to jump into. */

const TOOLS = [
  // Markets / screening
  { id: "heatmap",     group: "Markets",    name: "Heatmap",          href: "/heatmap.html",       tagline: "S&P map by sector weight + return", meta: "live" },
  { id: "screener",    group: "Markets",    name: "Screener",         href: "/screener.html",      tagline: "15+ filters · preset scans · CSV",   meta: "pro" },
  { id: "movers",      group: "Markets",    name: "Movers",           href: "/heatmap.html",       tagline: "Top S&P gainers / losers, ranked",   meta: "live" },
  { id: "details",     group: "Markets",    name: "Details",          href: "/details.html",       tagline: "Per-ticker deep dive · chart · fund", meta: "pro" },

  // Macro / economics
  { id: "cpi",         group: "Macro",      name: "CPI Dashboard",    href: "/cpi.html",           tagline: "Core, headline, shelter · MoM/YoY",  meta: "monthly" },
  { id: "commodities", group: "Macro",      name: "Commodities",      href: "/commodities.html",   tagline: "Oil, gas, metals, softs · curves",   meta: "live" },
  { id: "factors",     group: "Macro",      name: "Factors",          href: "/factors.html",       tagline: "Value · growth · quality · momentum",meta: "beta" },
  { id: "calendar",    group: "Macro",      name: "Econ Calendar",    href: "/calendar.html",      tagline: "Releases, Fed speak, this week",      meta: "live" },

  // Smart money / research
  { id: "13f",         group: "Research",   name: "Capital Allocators", href: "/13f.html",         tagline: "How hedge funds moved last quarter", meta: "quarterly" },
  { id: "ai",          group: "Research",   name: "AI Model Tracker", href: "/ai-tracker.html",    tagline: "Model releases, capex, training runs",meta: "beta" },
  { id: "dc",          group: "Research",   name: "Data Centers",     href: "/ai-tracker.html?tab=data-centers",  tagline: "Hyperscaler capacity & power demand",meta: "new" },
  { id: "earnings",    group: "Research",   name: "Earnings",         href: "/earnings.html",      tagline: "Calendar, estimates, beat history",  meta: "daily" },

  // Reading
  { id: "bulletin",    group: "Desk",       name: "The Bulletin",     href: "/bulletin.html",      tagline: "Intelligence briefs from the desk", meta: "editorial" },
  { id: "newsletter",  group: "Desk",       name: "Newsletter",       href: "/newsletter.html",    tagline: "Daily market briefings to your inbox", meta: "daily" },
  { id: "about",       group: "Desk",       name: "About",            href: "/about.html",         tagline: "Why TMT · how it's built",            meta: "" },
];

function TrailMark() {
  // tiny mountain silhouette as the tool-tile icon
  return (
    <svg className="trail-mark" viewBox="0 0 28 20" aria-hidden="true">
      <path d="M1 17 L7 9 L10 12 L14 5 L18 11 L22 7 L27 17 Z" fill="currentColor" opacity="0.25"/>
      <path d="M1 17 L6 10.5 L9 13.5 L13 6 L17.5 12 L21 8 L27 17 Z" fill="currentColor" opacity="0.9"/>
    </svg>
  );
}

function Trailhead() {
  const groups = ["Markets", "Macro", "Research", "Desk"];
  return (
    <section className="section trailhead-section" data-tone="cool">
      <div className="section-hd">
        <div className="sh-title">
          <div className="kicker" style={{ color: "var(--cool)" }}>06 · The toolkit</div>
          <h2 className="serif">Jump to the <em>deep dive</em></h2>
        </div>
        <div className="hd-actions">
          <span className="chip-live"><span className="d" />all pages</span>
        </div>
        <span className="expl">Every page on the site in one place — pick the trail. The dashboard is the map; each tool is a deeper read on a slice of the market.</span>
      </div>

      <div className="trail-grid">
        {groups.map(g => (
          <div className="trail-col" key={g}>
            <div className="trail-col-h">
              <span className="trail-col-name">{g}</span>
              <span className="trail-col-dash" />
              <span className="trail-col-count">{TOOLS.filter(t => t.group === g).length}</span>
            </div>
            <div className="trail-list">
              {TOOLS.filter(t => t.group === g).map(t => (
                <a key={t.id} className="trail-tile" href={t.href}>
                  <div className="tt-top">
                    <TrailMark />
                    <span className="tt-name">{t.name}</span>
                    {t.meta && <span className={"tt-meta tt-meta-" + t.meta}>{t.meta}</span>}
                  </div>
                  <div className="tt-tag">{t.tagline}</div>
                  <span className="tt-arrow" aria-hidden="true">→</span>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Trailhead, TrailMark });