// Footer.jsx — Daniel do Japão UI Kit
const Footer = ({ onNavigate }) => {
  const s = footerStyles;
  return (
    <footer style={s.footer}>
      <div style={s.inner}>
        <div className="rsp-footer-top" style={s.top}>
          {/* Brand */}
          <div style={s.brand}>
            <div style={s.logoD}>D</div>
            <div style={s.logoText}>
              <span style={s.logoName}>DANIEL DO JAPÃO</span>
              <span style={s.logoSub}>CRIA · DISCIPLINA · PRESENÇA</span>
            </div>
          </div>
          {/* Nav */}
          <div className="rsp-footer-nav-cols" style={s.navCols}>
            <div style={s.navCol}>
              <div style={s.navTitle}>NAVEGAÇÃO</div>
              {['Início', 'Sobre', 'Conteúdo', 'Contato'].map(n => (
                <button key={n} style={s.navLink}>{n}</button>
              ))}
            </div>
            <div style={s.navCol}>
              <div style={s.navTitle}>COMUNIDADE</div>
              {['CRIA', 'Módulos', 'Lives', 'Mentoria'].map(n => (
                <button key={n} style={s.navLink}>{n}</button>
              ))}
            </div>
            <div style={s.navCol}>
              <div style={s.navTitle}>REDES</div>
              {[
                { label: 'Instagram', href: 'https://www.instagram.com/danieldojapao/' },
                { label: 'Twitter', href: 'https://x.com/danieldojapao' },
                { label: 'TikTok', href: '#' },
                { label: 'Pinterest', href: 'https://br.pinterest.com/danieldojapao/_profile/_created/' },
              ].map(n => (
                <a key={n.label} href={n.href} target="_blank" rel="noopener noreferrer" style={{ ...s.navLink, textDecoration: 'none', display: 'block' }}>{n.label}</a>
              ))}
            </div>
          </div>
          {/* CTA */}
          <div className="rsp-cta-block" style={s.ctaBlock}>
            <div style={s.ctaText}>Entre no CRIA e comece a construir.</div>
            <button style={s.ctaBtn} onClick={() => onNavigate && onNavigate('cria')}>ENTRAR NO CRIA</button>
          </div>
        </div>
        <div className="rsp-footer-bottom" style={s.bottom}>
          <span style={s.copy}>© 2026 Daniel do Japão. Todos os direitos reservados.</span>
          <div style={s.links}>
            <button style={s.bottomLink}>Privacidade</button>
            <button style={s.bottomLink}>Termos</button>
          </div>
        </div>
      </div>
    </footer>
  );
};

const footerStyles = {
  footer: { background: '#050505', borderTop: '1px solid #111', padding: '56px 32px 28px' },
  inner: { maxWidth: 1200, margin: '0 auto' },
  top: { display: 'grid', gridTemplateColumns: '200px 1fr auto', gap: 64, marginBottom: 48, alignItems: 'start' },
  brand: { display: 'flex', alignItems: 'flex-start', gap: 10 },
  logoD: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 36, fontWeight: 300, color: '#D62B2B', lineHeight: 1, flexShrink: 0 },
  logoText: { display: 'flex', flexDirection: 'column', paddingTop: 4 },
  logoName: { fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 300, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FAFAFA' },
  logoSub: { fontFamily: "'DM Sans', sans-serif", fontSize: 7, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#3A3A3A', marginTop: 4 },
  navCols: { display: 'flex', gap: 48 },
  navCol: { display: 'flex', flexDirection: 'column', gap: 8 },
  navTitle: { fontFamily: "'DM Sans', sans-serif", fontSize: 8, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#3A3A3A', marginBottom: 4 },
  navLink: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6B6B6B', textAlign: 'left', padding: 0, transition: 'color 180ms' },
  ctaBlock: { display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' },
  ctaText: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 18, fontWeight: 300, fontStyle: 'italic', color: '#6B6B6B', maxWidth: 180, lineHeight: 1.3 },
  ctaBtn: { background: '#D62B2B', color: '#FAFAFA', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '11px 22px', borderRadius: 2 },
  bottom: { borderTop: '1px solid #111', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  copy: { fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: '#3A3A3A' },
  links: { display: 'flex', gap: 20 },
  bottomLink: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 10, color: '#3A3A3A' },
};

Object.assign(window, { Footer });