/* I Know My Skin — shared chrome: Header, Footer, language toggle, emphasis theme */

const PAGES = { home: 'index.html', services: 'services.html', about: 'about.html', contact: 'contact.html', book: 'book.html' };

/* ---- colour-emphasis theme (teal / balanced / blush), persisted across pages ---- */
const EMPH_KEY = 'ikms_emphasis';
function applyEmphasis(v) {
  document.body.setAttribute('data-emphasis', v || 'balanced');
  localStorage.setItem(EMPH_KEY, v || 'balanced');
}
function getEmphasis() { return localStorage.getItem(EMPH_KEY) || 'balanced'; }

const LangToggle = ({ light }) => {
  const [lang, setLang] = useLang();
  const opts = [['de', 'DE'], ['en', 'EN']];
  const border = light ? 'rgba(255,255,255,0.4)' : 'var(--teal-300)';
  return (
    <div style={{ display: 'inline-flex', border: `1px solid ${border}`, borderRadius: 999, padding: 2, gap: 2 }}>
      {opts.map(([v, l]) => {
        const on = lang === v;
        const colorOn = light ? 'var(--deep-teal)' : 'var(--off-white)';
        const bgOn = light ? 'var(--blush)' : 'var(--deep-teal)';
        const colorOff = light ? 'var(--blush)' : 'var(--fg2)';
        return (
          <button key={v} onClick={() => setLang(v)} aria-pressed={on}
            style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, letterSpacing: '0.08em', fontWeight: 700, padding: '5px 11px', borderRadius: 999, cursor: 'pointer', border: 'none', transition: 'all 180ms var(--ease-soft)', background: on ? bgOn : 'transparent', color: on ? colorOn : colorOff }}>{l}</button>
        );
      })}
    </div>
  );
};

const Header = ({ active = 'home', overHero = false }) => {
  const [lang] = useLang();
  const t = I18N[lang];
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 20);
    fn();
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  // lock background scroll while the mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const solid = scrolled || menuOpen;
  const light = overHero && !solid; // light text over dark hero, until scrolled or menu open
  const links = [['home', t.nav.home], ['services', t.nav.services], ['about', t.nav.about], ['contact', t.nav.contact]];
  const burgerColor = light ? '#FAFAF8' : 'var(--deep-teal)';
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: solid ? 'rgba(250,250,248,0.92)' : (overHero ? 'transparent' : 'var(--bg)'), backdropFilter: solid ? 'blur(10px)' : 'none', borderBottom: `1px solid ${solid ? 'var(--line)' : (overHero ? 'transparent' : 'var(--line)')}`, transition: 'all 280ms var(--ease-soft)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto', padding: '14px clamp(18px, 5vw, 40px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <a href={PAGES.home} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none', minWidth: 0 }}>
          <Logo size={38} mono={light} color={light ? '#F2DDD9' : '#3D6B6C'} />
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(17px, 4.6vw, 19px)', color: light ? 'var(--off-white)' : 'var(--deep-teal)', transition: 'color 280ms', whiteSpace: 'nowrap' }}>I Know My Skin</span>
        </a>
        <nav className="nav-desktop" style={{ gap: 30, alignItems: 'center' }}>
          {links.map(([key, label]) => <NavLink key={key} href={PAGES[key]} label={label} light={light} active={active === key} />)}
        </nav>
        <div className="nav-desktop" style={{ alignItems: 'center', gap: 16 }}>
          <LangToggle light={light} />
          <Button variant={light ? 'light' : 'primary'} as="a" href={PAGES.book}>{t.bookCta}</Button>
        </div>
        <button className="nav-burger" onClick={() => setMenuOpen(o => !o)} aria-label={menuOpen ? 'Close menu' : 'Open menu'} aria-expanded={menuOpen}
          style={{ alignItems: 'center', justifyContent: 'center', width: 44, height: 44, marginRight: -8, borderRadius: 999, border: 'none', background: 'transparent', cursor: 'pointer', color: burgerColor, flex: 'none' }}>
          <Icon name={menuOpen ? 'x' : 'menu'} size={26} color={burgerColor} />
        </button>
      </div>

      <div className="mobile-menu" data-open={menuOpen}
        style={{ position: 'absolute', left: 0, right: 0, top: '100%', background: 'var(--bg)', borderBottom: '1px solid var(--line)', boxShadow: 'var(--shadow-md)', padding: '6px clamp(18px, 5vw, 40px) 26px' }}>
        <nav style={{ display: 'flex', flexDirection: 'column' }}>
          {links.map(([key, label]) => (
            <a key={key} href={PAGES[key]} onClick={() => setMenuOpen(false)}
              style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: active === key ? 'var(--dusty-rose)' : 'var(--deep-teal)', textDecoration: 'none', padding: '15px 4px', borderBottom: '1px solid var(--line)' }}>{label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 20 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--fg3)' }}>{lang === 'de' ? 'Sprache' : 'Language'}</span>
          <LangToggle light={false} />
        </div>
        <a href={PAGES.book} onClick={() => setMenuOpen(false)}
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, marginTop: 18, fontFamily: 'var(--font-body)', fontSize: 16, padding: '15px 28px', borderRadius: 999, background: 'var(--deep-teal)', color: 'var(--off-white)', textDecoration: 'none', letterSpacing: '0.01em' }}>
          <Icon name="calendar-heart" size={18} color="#F2DDD9" /> {t.bookCta}
        </a>
      </div>
    </header>
  );
};

const NavLink = ({ href, label, light, active }) => {
  const [h, setH] = React.useState(false);
  const rest = light ? 'var(--teal-100)' : 'var(--fg2)';
  const color = active ? (light ? 'var(--blush)' : 'var(--deep-teal)') : (h ? 'var(--dusty-rose)' : rest);
  return (
    <a href={href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: 'relative', fontFamily: 'var(--font-body)', fontSize: 15, color, textDecoration: 'none', cursor: 'pointer', transition: 'color 160ms', letterSpacing: '0.01em', paddingBottom: 3, whiteSpace: 'nowrap' }}>
      {label}
      <span style={{ position: 'absolute', left: 0, bottom: -2, height: 1.5, width: active ? '100%' : 0, background: 'var(--dusty-rose)', transition: 'width 200ms var(--ease-soft)' }} />
    </a>
  );
};

const Footer = () => {
  const [lang] = useLang();
  const t = I18N[lang];
  const linkStyle = { fontFamily: 'var(--font-body)', fontSize: 14, marginBottom: 9, color: 'var(--teal-300)', textDecoration: 'none', display: 'block', cursor: 'pointer', transition: 'color 160ms' };
  return (
    <footer style={{ background: 'var(--teal-900)', color: 'var(--teal-300)' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto', padding: '56px clamp(20px, 5vw, 40px) 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 48, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 320 }}>
          <Wordmark light size={18} tagline taglineText={t.tagline} />
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, marginTop: 18 }}>{t.footer.blurb}</p>
        </div>
        <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 11, color: 'var(--blush)', marginBottom: 14 }}>{t.footer.exploreH}</div>
            {t.footer.explore.map(([key, label]) => <a key={key} href={PAGES[key]} style={linkStyle}>{label}</a>)}
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 11, color: 'var(--blush)', marginBottom: 14 }}>{t.footer.visitH}</div>
            {t.footer.visit.map(([key, label]) => <a key={key} href={key === 'location' ? 'index.html#location' : PAGES[key]} style={linkStyle}>{label}</a>)}
          </div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto', padding: '18px clamp(20px, 5vw, 40px)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--teal-300)' }}>
          <span>{t.footer.rights}</span><span>{t.footer.legal}</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Header, Footer, LangToggle, PAGES, applyEmphasis, getEmphasis });
