const { useState: useStateN, useEffect: useEffectN, useRef: useRefN } = React;

function NextPageButton() {
  const t = useTheme();
  const hash = useHash();
  const scrollY = useScrollY();
  const [show, setShow] = useStateN(false);

  const current = hash || 'home';
  const idx = NAV_LINKS.findIndex(l => l.hash === current);
  const next = idx >= 0 ? NAV_LINKS[idx + 1] : null;

  useEffectN(() => {
    const compute = () => {
      const max = Math.max(document.body.scrollHeight - window.innerHeight, 1);
      const pct = window.scrollY / max;
      setShow(pct > 0.08 && pct < 0.99);
    };
    compute();
    window.addEventListener('scroll', compute, { passive: true });
    window.addEventListener('resize', compute);
    return () => {
      window.removeEventListener('scroll', compute);
      window.removeEventListener('resize', compute);
    };
  }, [hash]);

  if (!next) return null;

  return (
    <a href={`#${next.hash}`} style={{
      position: 'fixed',
      bottom: 'clamp(20px, 3vw, 36px)',
      right: 'clamp(20px, 3vw, 36px)',
      zIndex: 900,
      display: 'inline-flex', alignItems: 'center', gap: '14px',
      padding: '12px 16px 12px 20px', borderRadius: '999px',
      background: t.cardBg, color: t.text,
      border: `1px solid ${t.border}`,
      textDecoration: 'none',
      opacity: show ? 1 : 0,
      transform: show ? 'translateY(0)' : 'translateY(20px)',
      pointerEvents: show ? 'auto' : 'none',
      transition: 'opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, scale 0.3s ease',
      boxShadow: '0 14px 40px rgba(0,0,0,0.18)',
      maxWidth: 'calc(100vw - 40px)',
    }}
      onMouseEnter={e => { e.currentTarget.style.scale = '1.02'; e.currentTarget.style.boxShadow = '0 20px 50px rgba(0,0,0,0.24)'; }}
      onMouseLeave={e => { e.currentTarget.style.scale = '1'; e.currentTarget.style.boxShadow = '0 14px 40px rgba(0,0,0,0.18)'; }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '2px' }}>
        <span style={{
          fontFamily: t.body, fontWeight: 600, fontSize: '0.56rem',
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: t.textMuted,
        }}>Weiter zu</span>
        <span style={{
          fontFamily: t.heading, fontWeight: 500, fontSize: '1.05rem',
          color: t.text, lineHeight: 1,
        }}>{next.label}</span>
      </div>
      <div style={{
        width: '36px', height: '36px',
        borderRadius: '50%', background: t.accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', flexShrink: 0,
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14M13 6l6 6-6 6"/>
        </svg>
      </div>
    </a>
  );
}

Object.assign(window, { NextPageButton });