// mapemedia — site chrome: multi-page TopNav + Footer.

const NAV_LINKS = [
{ label: 'Leistungen', href: 'index.html#leistungen', page: 'home' },
{ label: 'Case Studies', href: 'case-studies.html', page: 'cases' },
{ label: 'Über mich', href: 'about.html', page: 'about' },
{ label: 'Kontakt', href: 'contact.html', page: 'contact' }];


// ── Language flags (DE / EN switch) ───────────────────────────────────
const DEFlag = () =>
<svg width="22" height="15" viewBox="0 0 5 3" style={{ display: 'block' }} aria-hidden="true">
    <rect width="5" height="1" y="0" fill="#000" />
    <rect width="5" height="1" y="1" fill="#DD0000" />
    <rect width="5" height="1" y="2" fill="#FFCE00" />
  </svg>;

const UKFlag = () => {
  const id = React.useId().replace(/[:]/g, '');
  return (
    <svg width="22" height="15" viewBox="0 0 60 30" style={{ display: 'block' }} aria-hidden="true">
      <clipPath id={'ukc' + id}><rect width="60" height="30" /></clipPath>
      <clipPath id={'ukt' + id}>
        <path d="M30,15 L60,30 L60,15 z M30,15 L0,30 L0,15 z M30,15 L0,0 L0,15 z M30,15 L60,0 L60,15 z" />
      </clipPath>
      <g clipPath={`url(#ukc${id})`}>
        <rect width="60" height="30" fill="#012169" />
        <path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" strokeWidth="6" />
        <path d="M0,0 L60,30 M60,0 L0,30" stroke="#C8102E" strokeWidth="4" clipPath={`url(#ukt${id})`} />
        <path d="M30,0 V30 M0,15 H60" stroke="#fff" strokeWidth="10" />
        <path d="M30,0 V30 M0,15 H60" stroke="#C8102E" strokeWidth="6" />
      </g>
    </svg>);

};

const LangSwitch = ({ size = 22 }) => {
  const [lang, setLang] = React.useState(() => window.mmI18n ? window.mmI18n.get() : 'de');
  React.useEffect(() => {
    const onChange = (e) => setLang(e.detail);
    document.addEventListener('mm-lang', onChange);
    return () => document.removeEventListener('mm-lang', onChange);
  }, []);
  const pick = (l) => {if (window.mmI18n) window.mmI18n.set(l);setLang(l);};
  const flagBtn = (l, label, Flag) =>
  <button key={l} onClick={() => pick(l)} aria-label={label} title={label} aria-pressed={lang === l} style={{
    all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', lineHeight: 0,
    padding: '4px 0', borderBottom: lang === l ? '1px solid var(--primary)' : '1px solid transparent',
    opacity: lang === l ? 1 : 0.45, filter: lang === l ? 'none' : 'grayscale(1)',
    transition: 'opacity .2s, filter .2s'
  }}
  onMouseEnter={(e) => {if (lang !== l) {e.currentTarget.style.opacity = 0.8;e.currentTarget.style.filter = 'grayscale(0)';}}}
  onMouseLeave={(e) => {if (lang !== l) {e.currentTarget.style.opacity = 0.45;e.currentTarget.style.filter = 'grayscale(1)';}}}>
      <Flag />
    </button>;

  return (
    <div role="group" aria-label="Sprache / Language" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      {flagBtn('en', 'English', UKFlag)}
      {flagBtn('de', 'Deutsch', DEFlag)}
    </div>);

};

const Wordmark = ({ size = 22, href = 'index.html' }) =>
<a href={href} style={{
  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: size,
  letterSpacing: '.04em', color: '#fff', textDecoration: 'none'
}}>
    mape<span style={{ color: 'var(--primary)' }}>media</span>
  </a>;


const TopNav = ({ current }) => {
  const [menu, setMenu] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const linkStyle = (active) => ({
    fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500,
    letterSpacing: '.12em', textTransform: 'uppercase',
    color: active ? '#fff' : 'rgba(255,255,255,.6)',
    textDecoration: 'none', cursor: 'pointer', transition: 'color .2s',
    position: 'relative', paddingBottom: 4,
    borderBottom: active ? '1px solid var(--primary)' : '1px solid transparent'
  });

  return (
    <React.Fragment>
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 68, padding: '0 48px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: 'rgba(26,26,26,.96)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: scrolled ? '.5px solid rgba(255,255,255,.1)' : '.5px solid rgba(255,255,255,.06)',
      zIndex: 50
    }}>
      <Wordmark />

      <div className="nav-links" style={{ display: 'flex', gap: 32 }}>
        {NAV_LINKS.slice(0, 4).map((l) =>
        <a key={l.label} href={l.href} style={linkStyle(current === l.page)}
        onMouseEnter={(e) => {if (current !== l.page) e.currentTarget.style.color = '#fff';}}
        onMouseLeave={(e) => {if (current !== l.page) e.currentTarget.style.color = 'rgba(255,255,255,.6)';}}>
            {l.label}
          </a>
        )}
      </div>

      <div className="nav-right" style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
        <LangSwitch />
        <a className="nav-cta" href="contact.html" style={{
          fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500,
          letterSpacing: '.14em', textTransform: 'uppercase', color: '#fff',
          border: '.5px solid rgba(184,115,51,.35)', padding: '9px 20px',
          textDecoration: 'none', transition: 'background .2s',
          background: current === 'contact' ? 'var(--primary)' : 'transparent'
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = 'var(--primary)'}
        onMouseLeave={(e) => e.currentTarget.style.background = current === 'contact' ? 'var(--primary)' : 'transparent'}>
          Projekt starten</a>
      </div>

      {/* Mobile hamburger */}
      <button className="nav-burger" onClick={() => setMenu(true)} aria-label="Menü öffnen" style={{
        all: 'unset', cursor: 'pointer', display: 'none', flexDirection: 'column', gap: 5
      }}>
        <span style={{ width: 22, height: 1, background: '#fff', display: 'block' }} />
        <span style={{ width: 22, height: 1, background: '#fff', display: 'block' }} />
        <span style={{ width: 22, height: 1, background: '#fff', display: 'block' }} />
      </button>

      <style>{`
        @media (max-width: 900px) {
          nav { padding: 0 24px !important; }
          .nav-links, .nav-right { display: none !important; }
          .nav-burger { display: flex !important; }
        }
      `}</style>
    </nav>
    {menu &&
    <div style={{
      position: 'fixed', inset: 0, background: '#1A1A1A', zIndex: 100,
      display: 'flex', flexDirection: 'column', padding: '24px 24px'
    }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 44 }}>
          <Wordmark />
          <button onClick={() => setMenu(false)} aria-label="Menü schließen" style={{
          all: 'unset', cursor: 'pointer', color: '#fff', fontSize: 28, fontWeight: 200, lineHeight: 1
        }}>×</button>
        </div>
        <div style={{ marginTop: 40, paddingBottom: 8 }}>
          <LangSwitch />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 8 }}>
          {NAV_LINKS.map((l) =>
        <a key={l.label} href={l.href} style={{
          fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 32,
          color: current === l.page ? 'var(--primary)' : '#fff',
          textDecoration: 'none', padding: '14px 0',
          borderBottom: '.5px solid rgba(255,255,255,.08)'
        }}>{l.label}</a>
        )}
        </div>
      </div>
    }
    </React.Fragment>);

};

// ── Footer ────────────────────────────────────────────────────────────
const FooterCol = ({ title, links }) =>
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
    <div style={{
    fontFamily: 'var(--font-sans)', fontSize: 9, fontWeight: 500,
    letterSpacing: '.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,.3)'
  }}>{title}</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {links.map((l) => {
    const ext = l.href && /^https?:/.test(l.href);
    return (
    <a key={l.label} href={l.href || '#'} target={ext ? '_blank' : undefined} rel={ext ? 'noopener noreferrer' : undefined} style={{
      fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300,
      color: 'rgba(255,255,255,.45)', textDecoration: 'none', transition: 'color .2s'
    }}
    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--primary)'}
    onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,.45)'}>
      {l.label}</a>
    );
  })}
    </div>
  </div>;


const Footer = () =>
<footer style={{
  background: 'var(--surface-dark-footer)', color: '#fff',
  padding: '64px 48px 32px', borderTop: '.5px solid rgba(255,255,255,.04)'
}}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div className="footer-top" style={{
      display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48
    }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 320 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, letterSpacing: '.04em', color: '#fff' }}>
            mape<span style={{ color: 'var(--primary)' }}>media</span>
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontStyle: 'italic', fontSize: 14, color: 'rgba(255,255,255,.3)', lineHeight: 1.4 }}>Marketing für die gebaute Welt

        </div>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 300, lineHeight: 1.65, color: 'rgba(255,255,255,.25)', margin: 0, maxWidth: 280 }}>Markenstarke unterstütztung für Unternehmen<br />aus Bau, Architektur, Immobilien und Produktentwicklung.

        </p>
        </div>
        <FooterCol title="Studio" links={[
      { label: 'Leistungen', href: 'index.html#leistungen' },
      { label: 'Case Studies', href: 'case-studies.html' },
      { label: 'Über mich', href: 'about.html' },
      { label: 'Kontakt', href: 'contact.html' }]
      } />
        <FooterCol title="Kontakt" links={[
      { label: 'info@mapemedia.de', href: 'mailto:info@mapemedia.de' },
      { label: '+49 176 47 66 12 75', href: 'tel:+4917647661275' },
      { label: 'Termin anfragen', href: 'contact.html' },
      { label: 'Lörrach, DE', href: 'contact.html#anfahrt' }]
      } />
        <FooterCol title="Folgen" links={[
      { label: 'Instagram ↗', href: 'https://www.instagram.com/mapemedia_visuals?igsh=ZW4wMzE4ZmJ6amZl&utm_source=qr' },
      { label: 'LinkedIn ↗', href: 'https://www.linkedin.com/in/marco-pendt-508440b5/' }]
      } />
      </div>
      <div style={{
      paddingTop: 32, borderTop: '.5px solid rgba(255,255,255,.04)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16
    }}>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, color: 'rgba(255,255,255,.2)' }}>
          © 2026 mapemedia · Marco Pendt
        </div>
        <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, color: 'rgba(255,255,255,.2)' }}>
          <a href="impressum.html" style={{ color: 'inherit', textDecoration: 'none' }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--primary)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'inherit'}>Impressum</a>
          <a href="datenschutz.html" style={{ color: 'inherit', textDecoration: 'none' }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--primary)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'inherit'}>Datenschutz</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>AGB</a>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px){ .footer-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }
    `}</style>
  </footer>;


Object.assign(window, { TopNav, Footer, FooterCol, Wordmark, NAV_LINKS, LangSwitch, UKFlag, DEFlag });