// ─── SHARED STYLES & COMPONENTS ────────────────────────────────────────────
// Matches Spraakmaker Media design system

const SPRAAKMAKER_TOKENS = {
  bg: '#F7F8FC',
  bgAlt: '#FFFFFF',
  fg: '#0A0920',
  muted: '#5C5B7A',
  border: '#DDDDF0',
  card: '#FFFFFF',
  accent: '#10069F',
  accentLight: '#EEEEFF',
  blush: '#E4E2F2',
  blushSoft: '#F1F0FA',
  blushDeep: '#C9C6E0',
  ink: '#0A0920',
};

// Hook: mobile breakpoint
function useIsMobile(bp = 768) {
  const [m, setM] = React.useState(typeof window !== 'undefined' ? window.innerWidth < bp : false);
  React.useEffect(() => {
    const o = () => setM(window.innerWidth < bp);
    window.addEventListener('resize', o);
    return () => window.removeEventListener('resize', o);
  }, [bp]);
  return m;
}

// ── Service label lookup ─────────────────────────────────────────────────
function getServiceLabel(slug) {
  const found = (window.SPRAAKMAKER_SERVICES || []).find(s => s.slug === slug);
  return found ? found.label : slug;
}

// ── Top nav (matches main site) ──────────────────────────────────────────
function SiteNav({ scrolled }) {
  const isMobile = useIsMobile(1024);
  const [open, setOpen] = React.useState(false);

  const items = [
    { href: '/cases/archive.html', label: 'Podcasts' },
    { href: '/Spraakmaker Media.html#services', label: 'Wat we doen' },
    { href: '/Spraakmaker Media.html#process', label: 'Proces' },
    { href: '/Podcast Studio Amsterdam.html', label: 'Studio' },
    { href: '/Spraakmaker Media.html#contact', label: 'Contact' },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(255,255,255,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'all 0.3s ease',
      padding: isMobile ? '16px 20px' : '20px 40px',
    }}>
      <div style={{
        maxWidth: 1600, margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <a href="/Spraakmaker Media.html" style={{
          fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 18,
          letterSpacing: '-0.02em', textDecoration: 'none',
          color: 'var(--fg)',
        }}>
          <span style={{ fontWeight: 800 }}>spraakmaker</span>
          <span style={{ fontWeight: 400, marginLeft: 4 }}>media</span>
        </a>
        {!isMobile ? (
          <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
            {items.map(it => (
              <a key={it.href} href={it.href} style={{
                fontSize: 14, fontWeight: 500, color: 'var(--fg)',
                textDecoration: 'none', letterSpacing: '-0.01em',
              }}>{it.label}</a>
            ))}
            <a href="/Spraakmaker Media.html#contact" style={{
              padding: '10px 18px', background: 'var(--accent)', color: '#fff',
              fontSize: 14, fontWeight: 500, borderRadius: 100,
              textDecoration: 'none', letterSpacing: '-0.01em',
            }}>Neem contact op</a>
          </div>
        ) : (
          <button onClick={() => setOpen(!open)} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 8,
          }} aria-label="Menu">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              {open ? <><path d="M18 6L6 18" /><path d="M6 6l12 12" /></> : <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>}
            </svg>
          </button>
        )}
      </div>
      {isMobile && open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: '#fff', borderBottom: '1px solid var(--border)',
          padding: 20, display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          {items.map(it => (
            <a key={it.href} href={it.href} style={{
              fontSize: 18, fontWeight: 500, color: 'var(--fg)',
              textDecoration: 'none', padding: '8px 0',
            }}>{it.label}</a>
          ))}
        </div>
      )}
    </nav>
  );
}

// ── Footer (slim version) ─────────────────────────────────────────────────
function SiteFooter() {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: 'var(--ink)', color: '#fff',
      padding: isMobile ? '60px 24px 40px' : '80px 48px 40px',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr 1fr',
          gap: isMobile ? 32 : 48,
          paddingBottom: 48,
          borderBottom: '1px solid rgba(255,255,255,0.12)',
        }}>
          <div>
            <div style={{
              fontFamily: 'Plus Jakarta Sans', fontSize: 28, fontWeight: 700,
              letterSpacing: '-0.02em', marginBottom: 12,
            }}>
              spraakmaker <span style={{ fontWeight: 400 }}>media</span>
            </div>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.6)', maxWidth: 380, lineHeight: 1.55 }}>
              Uitgesproken ideeën, spraakmakende podcasts.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>Navigatie</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href="/cases/archive.html" style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Podcasts</a>
              <a href="/Spraakmaker Media.html#services" style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Wat we doen</a>
              <a href="/Podcast Studio Amsterdam.html" style={{ color: '#fff', textDecoration: 'none', fontSize: 14 }}>Studio</a>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>Adres</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)', lineHeight: 1.6 }}>
              Gibraltarstraat 42<br />1055 NH Amsterdam
            </div>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>Contact</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)', lineHeight: 1.6 }}>
              info@spraakmaker.media<br />020 211 7870
            </div>
          </div>
        </div>
        <div style={{
          marginTop: 32, display: 'flex', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16, fontSize: 13, color: 'rgba(255,255,255,0.5)',
        }}>
          <span>© 2026 Spraakmaker Media. Alle rechten voorbehouden.</span>
          <span>KVK 71234567 · BTW NL123456789B01</span>
        </div>
      </div>
    </footer>
  );
}

// Export globals
Object.assign(window, {
  SPRAAKMAKER_TOKENS,
  useIsMobile,
  getServiceLabel,
  SiteNav,
  SiteFooter,
});
