// PillarNav — slim sticky nav that shows the 5 pillars with check progress + scroll-spy
// Hides once the user reaches the submission section to give it focus.

const PILLAR_SHORT = {
  '01': 'One problem',
  '02': 'Value',
  '03': 'Hook',
  '04': 'Intake / Launch',
  '05': 'Delivery',
};

function useActivePillar() {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const pillars = window.PILLARS;
    const sections = pillars.map(p => document.getElementById(`pillar-${p.n}`));
    if (sections.some(s => !s)) return;

    const observer = new IntersectionObserver((entries) => {
      // pick the most-visible pillar
      const visible = entries.filter(e => e.isIntersecting);
      if (visible.length === 0) return;
      const top = visible.reduce((best, cur) => (cur.intersectionRatio > best.intersectionRatio ? cur : best));
      const idx = sections.indexOf(top.target);
      if (idx >= 0) setActive(idx);
    }, { rootMargin: '-25% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] });

    sections.forEach(s => observer.observe(s));
    return () => observer.disconnect();
  }, []);
  return active;
}

function useHideOverSubmission() {
  const [hidden, setHidden] = React.useState(false);
  React.useEffect(() => {
    const sub = document.getElementById('submission');
    if (!sub) return;
    const observer = new IntersectionObserver((entries) => {
      setHidden(entries[0].isIntersecting);
    }, { rootMargin: '-20% 0px 0px 0px', threshold: 0 });
    observer.observe(sub);
    return () => observer.disconnect();
  }, []);
  return hidden;
}

function PillarNav({ checks }) {
  const pillars = window.PILLARS;
  const active = useActivePillar();
  const hide = useHideOverSubmission();
  const totalDone = checks.flat().filter(Boolean).length;
  const totalChecks = checks.flat().length;

  return (
    <div className={`pillar-nav-sticky ${hide ? 'hide' : ''}`}>
      <div className="container-narrow pillar-nav-inner">
        <span className="pillar-nav-overview">
          <span className="pillar-nav-label">5 Pillars</span>
          <span className="pillar-nav-count">{totalDone}/{totalChecks}</span>
        </span>
        <div className="pillar-nav-chips">
          {pillars.map((p, i) => {
            const d = checks[i].filter(Boolean).length;
            const t = checks[i].length;
            const complete = d === t;
            const isActive = active === i && !hide;
            return (
              <a
                key={p.n}
                href={`#pillar-${p.n}`}
                className={`nav-chip ${isActive ? 'active' : ''} ${complete ? 'complete' : ''}`}
                style={{['--chip-color']: p.accent}}
                title={`Pillar ${p.n} — ${p.name} (${d}/${t})`}
              >
                <span className="nav-chip-num">
                  {complete ? <i className="fas fa-check" style={{fontSize:9}}></i> : p.n}
                </span>
                <span className="nav-chip-name">{PILLAR_SHORT[p.n]}</span>
              </a>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.PillarNav = PillarNav;