// SectionDots.jsx — right-edge page indicator for the snap-scroll layout
const SectionDots = ({ pages }) => {
  const [active, setActive] = React.useState(pages[0]?.id);
  React.useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { threshold: 0.5 });
    pages.forEach((p) => {
      const el = document.getElementById(p.id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);

  const go = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div className="section-dots" style={{
      position: 'fixed', right: 22, top: '50%', transform: 'translateY(-50%)',
      zIndex: 40, display: 'flex', flexDirection: 'column', gap: 14,
      alignItems: 'flex-end',
    }}>
      {pages.map((p) => {
        const isActive = active === p.id;
        return (
          <a key={p.id} href={`#${p.id}`} onClick={go(p.id)} aria-label={p.label} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            textDecoration: 'none', cursor: 'pointer',
          }}
            onMouseEnter={e => { const l = e.currentTarget.querySelector('.dot-label'); if (l) l.style.opacity = '1'; }}
            onMouseLeave={e => { const l = e.currentTarget.querySelector('.dot-label'); if (l) l.style.opacity = isActive ? '1' : '0'; }}
          >
            <span className="dot-label" style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: isActive ? '#2ee89a' : '#6b7e9a',
              opacity: isActive ? 1 : 0,
              transition: 'opacity 150ms ease-out',
            }}>{p.label}</span>
            <span style={{
              width: isActive ? 10 : 7, height: isActive ? 10 : 7,
              borderRadius: '50%',
              background: isActive ? '#2ee89a' : 'rgba(125,211,252,0.28)',
              boxShadow: isActive ? '0 0 0 4px rgba(46,232,154,0.15)' : 'none',
              transition: 'all 180ms ease-out',
            }} />
          </a>
        );
      })}
    </div>
  );
};

window.SectionDots = SectionDots;