/* ═══════════════════════════════════════════════════════════════════
   UI COMPONENTS
   Scroll progress, side rail navigation, footer
═══════════════════════════════════════════════════════════════════ */

function ScrollProgress() {
  const ref = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      const p = max > 0 ? window.scrollY / max : 0;
      if (ref.current) ref.current.style.transform = `scaleX(${p})`;
    };

    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div
      ref={ref}
      className="scroll-progress"
      role="progressbar"
      aria-label="Progresso de leitura da página"
      aria-valuenow={0}
      aria-valuemin={0}
      aria-valuemax={100}
    ></div>
  );
}

function SideRail({ active }) {
  const items = [
    { idx: 1, label: "01 — Início" },
    { idx: 2, label: "02 — O Desafio" },
    { idx: 3, label: "03 — Metodologia" },
    { idx: 4, label: "04 — Resultados" },
    { idx: 5, label: "05 — Fit" },
    { idx: 6, label: "06 — Contato" },
  ];

  const scrollTo = (idx) => smoothScrollTo(panelDocTop(idx));

  return (
    <nav className="side-rail" aria-label="Seções da página">
      {items.map(({ idx, label }) => (
        <button
          key={idx}
          className={active === idx ? "active" : ""}
          onClick={() => scrollTo(idx)}
          aria-label={`Ir para ${label}`}
          aria-current={active === idx ? "true" : undefined}
        >
          <span className="lbl" aria-hidden="true">{label}</span>
        </button>
      ))}
    </nav>
  );
}

function Footer() {
  return (
    <footer style={{ position: "relative", zIndex: 5 }}>
      <div className="wrap">
        <div className="foot-grid">
          <img 
            src="assets/aurum-header-footer.png" 
            alt="Aurum Growth Partners"
            style={{
              height: "28px",
              width: "auto",
              objectFit: "contain"
            }}
          />
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "11px",
            letterSpacing: "0.18em",
            color: "var(--slate-2)",
            textTransform: "uppercase",
          }}>
            Av. Brigadeiro Faria Lima · São Paulo · SP
          </div>
        </div>
        <div className="foot-bottom">
          <div style={{ opacity: 0.6 }}>
            © 2026 Aurum Growth Partners. Todos os direitos reservados.
          </div>
          <div>
            Projeto portfólio · Dados fictícios · Desenvolvido por <em className="gold" style={{ fontStyle: "normal", fontWeight: 500 }}>ALB Seven</em>
          </div>
        </div>
      </div>
    </footer>
  );
}