// Top nav + bottom footer reused across artboards
const Nav = ({ theme = 'linho', currentArea = null, brandVariant = 'mark', brandColor = null }) => {
  const isDark = theme === 'terra' || theme === 'raizes';
  const fg = isDark ? 'var(--linho)' : 'var(--terra)';
  const bg = {
    linho: 'var(--linho)',
    terra: 'var(--terra)',
    musgo: 'var(--musgo)',
    raizes: 'var(--raizes)',
    terracota: 'var(--terracota)'
  }[theme];

  // Per-area accent for the mark on internal pages
  const areaColor = {
    health: 'var(--musgo-deep)',
    corporate: 'var(--terra)',
    academia: 'var(--terra)', // on terracota bg → terra reads strongly
    os: 'var(--terracota)', // on raizes bg → terracota
    loja: 'var(--terracota)'
  }[currentArea] || fg;
  const finalBrand = brandColor || (brandVariant === 'mark' ? areaColor : fg);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: bg, color: fg,
      borderBottom: `1px solid ${isDark ? 'rgba(246,244,233,.12)' : 'rgba(54,21,7,.08)'}`,
      padding: '20px 56px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontSize: 14
    }}>
      <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Logo variant={brandVariant} color={finalBrand} size={brandVariant === 'wordmark' ? 30 : 36} />
      </a>
      <nav style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
        {[
        { label: 'Health', key: 'health', href: 'health.html' },
        { label: 'Corporate', key: 'corporate', href: 'corporate.html' },
        { label: 'Incubadora', key: 'academia', href: 'incubadora.html' },
        { label: 'Transformar OS', key: 'os', href: 'os.html' },
        { label: 'Loja', key: 'loja', href: 'loja.html' },
        { label: 'Sobre', key: 'sobre', href: 'sobre.html' }].
        map((item) =>
        <a key={item.key} href={item.href} style={{
          fontSize: 14, fontWeight: 500,
          opacity: currentArea && currentArea !== item.key ? 0.55 : 1,
          position: 'relative',
          paddingBottom: 2,
          borderBottom: currentArea === item.key ? `1.5px solid ${fg}` : '1.5px solid transparent'
        }}>
            {item.label}
          </a>
        )}
      </nav>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <a href="#" style={{ fontSize: 13, opacity: 0.7 }}>PT / EN</a>
        <a href="health.html" className="btn btn-arrow" style={{
          background: isDark ? 'var(--linho)' : 'var(--terra)',
          color: isDark ? 'var(--terra)' : 'var(--linho)',
          padding: '10px 18px',
          fontSize: 13
        }}>Marcar consulta</a>
      </div>
    </header>);

};

const LogoMark = ({ color = 'var(--terra)', size = 32 }) =>
<span style={{
  display: 'inline-block',
  width: size, height: size,
  backgroundColor: color,
  WebkitMaskImage: 'url(assets/logo.png)',
  maskImage: 'url(assets/logo.png)',
  WebkitMaskSize: 'contain',
  maskSize: 'contain',
  WebkitMaskRepeat: 'no-repeat',
  maskRepeat: 'no-repeat',
  WebkitMaskPosition: 'center',
  maskPosition: 'center'
}} />;


const LogoWordmark = ({ color = 'var(--terra)', height = 36 }) =>
// wordmark image is 2560×628 (~4:1) and includes "Academia / Transformar / A NEW FRAME OF MIND".
// We crop the bottom assinatura by clipping the mask to the upper ~78% of the image.
<span style={{
  display: 'inline-block',
  width: height * 4.08, height: height,
  backgroundColor: color,
  WebkitMaskImage: 'url(assets/wordmark.png)',
  maskImage: 'url(assets/wordmark.png)',
  WebkitMaskSize: `${height * 4.08}px ${height / 0.78}px`,
  maskSize: `${height * 4.08}px ${height / 0.78}px`,
  WebkitMaskRepeat: 'no-repeat',
  maskRepeat: 'no-repeat',
  WebkitMaskPosition: 'left top',
  maskPosition: 'left top'
}} />;


// Backward-compat: existing call sites use <Logo />. Default to mark-only;
// the homepage Nav switches to wordmark via a prop.
const Logo = ({ color = 'var(--terra)', variant = 'mark', size = 32 }) => {
  if (variant === 'wordmark') return <LogoWordmark color={color} height={size * 1.15} />;
  return <LogoMark color={color} size={size} />;
};

const Footer = ({ theme = 'terra' }) => {
  const isDark = theme === 'terra' || theme === 'raizes';
  const bg = theme === 'terra' ? 'var(--terra)' : theme === 'raizes' ? 'var(--raizes)' : 'var(--linho-deep)';
  const fg = isDark ? 'var(--linho)' : 'var(--terra)';
  const dim = isDark ? 'rgba(246,244,233,.55)' : 'rgba(54,21,7,.55)';

  return (
    <footer style={{ background: bg, color: fg, padding: '100px 56px 40px', backgroundColor: "rgb(109, 86, 75)" }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 60, paddingBottom: 80, borderBottom: `1px solid ${dim}` }}>
        <div>
          <Logo color={fg} />
          <p className="body" style={{ marginTop: 24, maxWidth: 320, opacity: 0.75 }}>
            Saúde mental integrada. Corpo e mente trabalhados em conjunto, com ciência e humanidade.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
            {['IG', 'LI', 'YT', 'SP'].map((s) =>
            <div key={s} style={{ width: 36, height: 36, border: `1px solid ${dim}`, borderRadius: 999, display: 'grid', placeItems: 'center', fontSize: 11, letterSpacing: '0.05em' }}>{s}</div>
            )}
          </div>
        </div>
        {[
        { title: 'Áreas', items: ['Health', 'Corporate', 'Incubadora', 'Transformar OS'] },
        { title: 'Sobre', items: ['Manifesto', 'Fundadora', 'Equipa', 'Carreiras'] },
        { title: 'Loja', items: ['Cursos', 'E-books', 'Workshops', 'Livros'] },
        { title: 'Contacto', items: ['Lisboa, PT', 'ola@transformar.pt', '+351 210 000 000', 'Marcar consulta →'] }].
        map((col) =>
        <div key={col.title}>
            <div className="eyebrow-mono" style={{ opacity: 0.7, marginBottom: 20 }}>{col.title}</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.items.map((it) => <li key={it} style={{ fontSize: 14 }}>{it}</li>)}
            </ul>
          </div>
        )}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 32, fontSize: 12, opacity: 0.55 }}>
        <span>© 2026 Academia Transformar. Todos os direitos reservados.</span>
        <div style={{ display: 'flex', gap: 24 }}>
          <span>Privacidade</span><span>Termos</span><span>Cookies</span>
        </div>
      </div>
    </footer>);

};

Object.assign(window, { Nav, Footer, Logo, LogoMark, LogoWordmark });