// ─── SectionNav: Sticky section jump bar (mobile only) ───
window.MC = window.MC || {};

MC.SectionNav = function SectionNav({ coin, mode }) {
  var useState = React.useState;
  var useEffect = React.useEffect;
  var useRef = React.useRef;
  var mobile = MC.useIsMobile();

  var [visible, setVisible] = useState(false);
  var [activeId, setActiveId] = useState(null);
  var scrollRef = useRef(null);

  var calcSections = [
    { id: "sec-capital", label: "Capital" },
    { id: "sec-monthly", label: "Monthly" },
    { id: "sec-outcome", label: "Outcome" },
    { id: "sec-vs-alt", label: "vs APY" },
    { id: "sec-cashflow", label: "Cash Flow" },
    { id: "sec-cumulative", label: "Cumulative" },
    { id: "sec-revenue", label: "Rev vs Cost" },
    { id: "sec-accumulation", label: "Accumulation" },
    { id: "sec-sensitivity", label: "Sensitivity" },
  ];

  var modelSections = [
    { id: "sec-gs-controls", label: "Controls" },
    { id: "sec-gs-picks", label: "Top Picks" },
    { id: "sec-gs-results", label: "Results" },
  ];

  var sections = mode === "model" ? modelSections : calcSections;

  // Show bar when scrolled past a threshold
  useEffect(function () {
    if (!mobile) return;
    function onScroll() {
      setVisible(window.scrollY > 300);
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return function () { window.removeEventListener("scroll", onScroll); };
  }, [mobile]);

  // Track which section is in view
  useEffect(function () {
    if (!mobile) return;
    var observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id);
          }
        });
      },
      { rootMargin: "-60px 0px -70% 0px", threshold: 0 }
    );
    sections.forEach(function (s) {
      var el = document.getElementById(s.id);
      if (el) observer.observe(el);
    });
    return function () { observer.disconnect(); };
  }, [mobile]);

  // Auto-scroll the nav to keep active button visible
  useEffect(function () {
    if (!activeId || !scrollRef.current) return;
    var btn = scrollRef.current.querySelector('[data-section="' + activeId + '"]');
    if (btn) {
      btn.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
    }
  }, [activeId]);

  if (!mobile) return null;

  return (
    <div style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      background: "rgba(20, 20, 16, 0.92)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
      borderBottom: "1px solid #2a2a24",
      transform: visible ? "translateY(0)" : "translateY(-100%)",
      transition: "transform 0.25s ease",
    }}>
      <div ref={scrollRef} className="section-nav-scroll" style={{
        display: "flex", gap: 6, padding: "8px 12px",
        overflowX: "auto", WebkitOverflowScrolling: "touch",
        scrollbarWidth: "none", msOverflowStyle: "none",
      }}>
        {sections.map(function (s) {
          var isActive = activeId === s.id;
          return (
            <button
              key={s.id}
              data-section={s.id}
              onClick={function () {
                var el = document.getElementById(s.id);
                if (el) {
                  var y = el.getBoundingClientRect().top + window.scrollY - 52;
                  window.scrollTo({ top: y, behavior: "smooth" });
                }
              }}
              style={{
                flexShrink: 0, padding: "6px 12px",
                background: isActive ? (coin.color + "22") : "transparent",
                border: "1px solid " + (isActive ? coin.color : "#2a2a24"),
                borderRadius: 20, cursor: "pointer",
                color: isActive ? coin.color : "#6a6a5a",
                fontSize: 10, fontFamily: "var(--mono)", fontWeight: isActive ? 700 : 400,
                letterSpacing: 0.5, whiteSpace: "nowrap",
                transition: "all 0.15s",
              }}
            >{s.label}</button>
          );
        })}
      </div>
    </div>
  );
};