// ===========================================================
// ExploreMore — a small "keep exploring" cross-link strip that wires the key
// surfaces together (collection ↔ leaderboard ↔ deep dives ↔ The Hundred) to
// deepen sessions. Drop it at the foot of a surface; pass `exclude` with the
// current surface key so it never links to the page you're already on.
//
// Links are real <a href> (crawlable, middle-click, a11y) but hijack the click
// for smooth in-app SPA navigation via window.__nav when available.
// Stateless. Depends on: window.__nav (set by App.jsx).
// ===========================================================

const XPLORE_LINKS = {
  collection:    { href: "/collection",   label: "Your collection", sub: "Track & value your shelf",   go: (n) => n.goCollection && n.goCollection() },
  leaderboards:  { href: "/leaderboards", label: "The leaderboard", sub: "See where collectors rank",  go: (n) => n.goLeaderboards && n.goLeaderboards() },
  "deep-dives":  { href: "/deep-dives",   label: "Deep dives",      sub: "Long-form reads on the canon", go: (n) => n.goDeepDives && n.goDeepDives() },
  list:          { href: "/list",         label: "The Hundred",     sub: "The ranked 100, defended",    go: (n) => n.goList && n.goList() },
};

// exclude: array of keys to omit (usually the current surface).
// from:    analytics label for the surface this strip sits on (GA4 dimension).
// order:   optional explicit key order; defaults to a sensible loop order.
// heading: section label.
function ExploreMore({ exclude = [], from = "unknown", order = null, heading = "Keep exploring" } = {}) {
  const keys = (order || ["collection", "leaderboards", "deep-dives", "list"])
    .filter((k) => XPLORE_LINKS[k] && exclude.indexOf(k) === -1);
  if (!keys.length) return null;
  const onNav = (e, k, L) => {
    // Fire the GA4 event first (independent of how the click resolves), so a
    // new-tab / middle-click is still counted.
    try { if (window.gtag) window.gtag("event", "explore_click", { from: from, to: k, link_text: L.label }); } catch (_) {}
    // Let modified clicks / new-tab through; otherwise SPA-navigate.
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1) return;
    if (window.__nav) { e.preventDefault(); L.go(window.__nav); }
  };
  return (
    <nav className="xplore" aria-label="Keep exploring">
      <div className="xplore-h">{heading}</div>
      <div className="xplore-grid">
        {keys.map((k) => {
          const L = XPLORE_LINKS[k];
          return (
            <a key={k} className="xplore-card" href={L.href} onClick={(e) => onNav(e, k, L)} data-xplore-from={from} data-xplore-to={k}>
              <span className="xplore-label">{L.label}</span>
              <span className="xplore-sub">{L.sub}</span>
              <span className="xplore-go" aria-hidden="true">→</span>
            </a>
          );
        })}
      </div>
    </nav>
  );
}

window.ExploreMore = ExploreMore;