const footerStyles = {
  wrap: {
    background: 'var(--bg-surface-1)',
    borderTop: '1px solid var(--border-subtle)',
    paddingTop: 80, paddingBottom: 48,
    position: 'relative', overflow: 'hidden',
  },
  topHairline: {
    position: 'absolute', top: 0, left: 0, right: 0, height: 1,
    background: 'linear-gradient(90deg, transparent, rgba(201,169,110,0.35), transparent)',
  },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px' },
  top: {
    display: 'grid',
    gridTemplateColumns: '1.5fr 1fr 1fr 1fr',
    gap: 48,
    paddingBottom: 56,
    borderBottom: '1px solid var(--border-subtle)',
  },
  brandRow: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 },
  brand: {
    fontFamily: 'var(--font-display)',
    fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em',
    color: 'var(--fg-1)',
  },
  pitch: {
    fontSize: 14, lineHeight: 1.7,
    color: 'var(--fg-2)',
    maxWidth: 340,
    margin: 0,
  },
  contactList: {
    marginTop: 24,
    display: 'flex', flexDirection: 'column', gap: 10,
  },
  contactItem: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontSize: 13, color: 'var(--fg-2)',
  },
  contactIcon: {
    width: 28, height: 28, borderRadius: 7,
    background: 'var(--bg-surface-3)',
    border: '1px solid var(--border-default)',
    color: 'var(--brand-gold)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  },
  colTitle: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11, fontWeight: 700,
    color: 'var(--fg-3)', letterSpacing: '0.14em',
    textTransform: 'uppercase',
    marginBottom: 16,
  },
  list: {
    listStyle: 'none', padding: 0, margin: 0,
    display: 'flex', flexDirection: 'column', gap: 10,
  },
  link: {
    fontSize: 14, color: 'var(--fg-2)',
    cursor: 'pointer',
    transition: 'color 150ms',
    display: 'inline-block',
  },
  bottom: {
    paddingTop: 32,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    gap: 32, flexWrap: 'wrap',
  },
  legal: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em',
  },
  socials: { display: 'flex', gap: 8 },
  socialBtn: {
    width: 36, height: 36, borderRadius: 8,
    background: 'var(--bg-surface-3)',
    border: '1px solid var(--border-default)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--fg-2)',
    transition: 'all 150ms var(--ease-smooth)',
    cursor: 'pointer',
    fontSize: 13, fontWeight: 600,
  },
};

const cols = [
  { title: 'Soluções',
    items: ['Agentes de IA', 'Automação com IA', 'Integrações', 'Fluxos automatizados', 'Dashboards', 'Sistemas customizados'] },
  { title: 'Empresa',
    items: ['Manifesto', 'Cases', 'Carreiras', 'Imprensa', 'Contato'] },
  { title: 'Recursos',
    items: ['Blog técnico', 'Documentação', 'Calculadora de ROI', 'Status', 'Política de privacidade'] },
];

function FooterLink({ children }) {
  const [hov, setHov] = React.useState(false);
  return (
    <li>
      <span style={{
        ...footerStyles.link,
        color: hov ? 'var(--fg-1)' : 'var(--fg-2)',
      }}
        onMouseEnter={() => setHov(true)}
        onMouseLeave={() => setHov(false)}
      >
        {children}
      </span>
    </li>
  );
}

function SocialBtn({ children, title, href, hovered, onEnter, onLeave }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" title={title}
      style={{
        ...footerStyles.socialBtn,
        textDecoration: 'none',
        background: hovered ? 'rgba(201,169,110,0.1)' : 'var(--bg-surface-3)',
        borderColor: hovered ? 'rgba(201,169,110,0.35)' : 'var(--border-default)',
        color: hovered ? 'var(--brand-gold)' : 'var(--fg-2)',
      }}
      onMouseEnter={onEnter} onMouseLeave={onLeave}
    >
      {children}
    </a>
  );
}

function Footer() {
  const [hovSocial, setHovSocial] = React.useState(null);
  return (
    <footer style={footerStyles.wrap}>
      <div style={footerStyles.topHairline}></div>
      <div style={footerStyles.inner}>
        <div data-grid="footer" style={footerStyles.top}>
          <div>
            <div style={footerStyles.brandRow}>
              <img src="assets/logo-bear-cream.svg"
                className="footer-logo-img"
                style={{ width: 40, height: 40 }} alt="" />
              <span style={footerStyles.brand}>Black Bear AI</span>
            </div>
            <p style={footerStyles.pitch}>
              Automação inteligente para empresas que não aceitam mediocridade.
              Construímos sistemas de IA com a força e a precisão de um urso.
            </p>
            <div style={footerStyles.contactList}>
              <div style={footerStyles.contactItem}>
                <span style={footerStyles.contactIcon}><IconMail size={14} /></span>
                blackbear.ai.br@gmail.com
              </div>
              <div style={footerStyles.contactItem}>
                <span style={footerStyles.contactIcon}><IconPhone size={14} /></span>
                +55 (11) 94180-7489
              </div>
              <div style={footerStyles.contactItem}>
                <span style={footerStyles.contactIcon}><IconBuilding size={14} /></span>
                Barueri — SP, BR
              </div>
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.title}>
              <div style={footerStyles.colTitle}>{c.title}</div>
              <ul style={footerStyles.list}>
                {c.items.map((i) => <FooterLink key={i}>{i}</FooterLink>)}
              </ul>
            </div>
          ))}
        </div>

        <div style={footerStyles.bottom}>
          <div style={footerStyles.legal}>
            © 2026 BLACK BEAR AI · Todos os direitos reservados
          </div>
          <div style={footerStyles.socials}>
            {[
              [<IconLinkedin size={16} />, 'LinkedIn', 'https://www.linkedin.com/in/thiagoannibal'],
              [<IconInstagram size={16} />, 'Instagram', 'https://www.instagram.com/black_bear.ai/'],
              [<IconWhatsapp size={16} />, 'WhatsApp', 'https://wa.me/5511941807489'],
              [<IconMail size={16} />, 'E-mail', 'mailto:blackbear.ai.br@gmail.com'],
            ].map(([label, title, href]) => (
              <SocialBtn key={title} title={title} href={href}
                hovered={hovSocial === title}
                onEnter={() => setHovSocial(title)}
                onLeave={() => setHovSocial(null)}>
                {label}
              </SocialBtn>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });