// Top nav + footer + small shared bits.

const Nav = ({ lang, setLang, theme, setTheme }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'aanpak', key: 'nav.approach' },
    { id: 'cases', key: 'nav.cases' },
    { id: 'diensten', key: 'nav.services' },
    { id: 'prijzen', key: 'nav.pricing' },
    { id: 'over', key: 'nav.about' },
  ];

  return (
    <header
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 50,
        background: scrolled ? 'color-mix(in oklab, var(--bg-base) 80%, transparent)' : 'transparent',
        backdropFilter: scrolled ? 'saturate(180%) blur(12px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(12px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
        transition: 'background-color 200ms var(--ease), border-color 200ms var(--ease)',
      }}
    >
      <div className="container" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 64,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center' }} aria-label="MODUS — Home">
          <Logo variant={window.__logoVariant || 'mono'} size={26} />
        </a>

        <nav className="hide-mobile" style={{ display: 'flex', gap: 4 }}>
          {links.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className="btn-ghost"
              style={{
                padding: '8px 12px',
                fontSize: '0.9375rem',
                color: 'var(--ink-secondary)',
                fontWeight: 500,
                borderRadius: 6,
                transition: 'color 180ms var(--ease)',
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink-primary)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-secondary)'}
            >
              {tr(lang, l.key)}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LangToggle lang={lang} setLang={setLang} />
          <ThemeToggle theme={theme} setTheme={setTheme} />
          <a href="#contact" className="btn btn-primary hide-mobile">
            {tr(lang, 'nav.cta')} <span className="price">€950</span>
          </a>
          <button
            className="btn-ghost"
            aria-label="Menu"
            onClick={() => setOpen(!open)}
            style={{
              display: window.innerWidth <= 720 ? 'inline-flex' : 'none',
              padding: 8,
              border: '1px solid var(--border)',
              borderRadius: 6,
              background: 'transparent',
              color: 'var(--ink-primary)',
              cursor: 'pointer',
            }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              {open
                ? <><path d="M18 6 6 18"/><path d="M6 6l12 12"/></>
                : <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>
              }
            </svg>
          </button>
        </div>
      </div>

      {open && (
        <div style={{
          borderTop: '1px solid var(--border)',
          background: 'var(--bg-base)',
          padding: '12px var(--gutter) 20px',
        }}>
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={() => setOpen(false)}
              style={{ display: 'block', padding: '10px 0', color: 'var(--ink-primary)', fontSize: 16 }}>
              {tr(lang, l.key)}
            </a>
          ))}
          <a href="#contact" className="btn btn-primary btn-block" onClick={() => setOpen(false)}
            style={{ marginTop: 12 }}>
            {tr(lang, 'nav.cta')} <span className="price">€950</span>
          </a>
        </div>
      )}
    </header>
  );
};

const LangToggle = ({ lang, setLang }) => (
  <div role="group" aria-label="Language" style={{
    display: 'inline-flex',
    border: '1px solid var(--border)',
    borderRadius: 6,
    padding: 2,
    background: 'var(--bg-raised)',
  }}>
    {['nl', 'en'].map(L => (
      <button
        key={L}
        onClick={() => setLang(L)}
        aria-pressed={lang === L}
        style={{
          padding: '4px 8px',
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          fontWeight: 500,
          letterSpacing: '0.06em',
          background: lang === L ? 'var(--ink-primary)' : 'transparent',
          color: lang === L ? 'var(--bg-base)' : 'var(--ink-secondary)',
          border: 'none',
          borderRadius: 4,
          cursor: 'pointer',
          textTransform: 'uppercase',
          transition: 'all 160ms var(--ease)',
        }}
      >
        {L}
      </button>
    ))}
  </div>
);

const ThemeToggle = ({ theme, setTheme }) => {
  const next = theme === 'dark' ? 'light' : 'dark';
  return (
    <button
      onClick={() => setTheme(next)}
      aria-label={`Switch to ${next} mode`}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 32, height: 32,
        border: '1px solid var(--border)',
        borderRadius: 6,
        background: 'var(--bg-raised)',
        color: 'var(--ink-primary)',
        cursor: 'pointer',
        transition: 'border-color 180ms var(--ease)',
      }}
    >
      {theme === 'dark' ? (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
        </svg>
      ) : (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
        </svg>
      )}
    </button>
  );
};

const Footer = ({ lang }) => (
  <footer style={{
    borderTop: '1px solid var(--border)',
    padding: '64px 0 40px',
    background: 'var(--bg-base)',
  }}>
    <div className="container">
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
        gap: 32,
        marginBottom: 56,
      }}>
        <div>
          <Logo variant={window.__logoVariant || 'mono'} size={26} />
          <p className="secondary" style={{ marginTop: 16, fontSize: 14, maxWidth: 280 }}>
            {tr(lang, 'footer.tag')}
          </p>
        </div>
        <FooterCol title={tr(lang, 'footer.col.product')} links={[
          { label: tr(lang, 'services.strat.title'), href: '#diensten' },
          { label: tr(lang, 'services.ops.title'), href: '#diensten' },
          { label: tr(lang, 'services.web.title'), href: '#diensten' },
          { label: tr(lang, 'services.care.title'), href: '#diensten' },
        ]} />
        <FooterCol title={tr(lang, 'footer.col.company')} links={[
          { label: tr(lang, 'nav.about'), href: '#over' },
          { label: tr(lang, 'nav.cases'), href: '#cases' },
          { label: tr(lang, 'nav.contact'), href: '#contact' },
        ]} />
        <FooterCol title={tr(lang, 'footer.col.legal')} links={[
          { label: tr(lang, 'footer.legal.privacy'), href: '#' },
          { label: tr(lang, 'footer.legal.terms'), href: '#' },
        ]} />
      </div>
      <div style={{
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 16,
        paddingTop: 24,
        borderTop: '1px solid var(--border)',
      }}>
        <span className="mono" style={{ color: 'var(--ink-muted)' }}>
          {tr(lang, 'footer.copy')}
        </span>
        <span className="mono" style={{ color: 'var(--ink-muted)' }}>
          GDPR · EU-HOSTING
        </span>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, links }) => (
  <div>
    <div className="mono" style={{ color: 'var(--ink-muted)', marginBottom: 14 }}>{title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {links.map(l => (
        <li key={l.label}>
          <a href={l.href} style={{ color: 'var(--ink-secondary)', fontSize: 14 }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-secondary)'}>
            {l.label}
          </a>
        </li>
      ))}
    </ul>
  </div>
);

window.Nav = Nav;
window.Footer = Footer;