function Footer() {
  return (
    <footer style={{
      background: '#2C3523',
      color: 'rgba(244,237,229,.75)',
      padding: '40px 0 24px',
    }}>
      <div className="container">
        <div className="footer-inner" style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          paddingBottom: 28,
          borderBottom: '1px solid rgba(244,237,229,.15)',
          flexWrap: 'wrap', gap: 24,
        }}>
          <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap: 12}}>
            <LogoFull size={54} dark/>
            <p style={{fontSize: 13.5, color: 'rgba(244,237,229,.7)', margin: 0}}>
              Psicología que siembra, cuida y acompaña.
            </p>
          </div>

          <div style={{display:'flex', gap: 16}}>
            {[
              { Ic: IconIG, href: 'https://www.instagram.com/cbpsemillas' },
              { Ic: IconLI, href: '#' },
              { Ic: IconYT, href: 'https://www.youtube.com/@cbpsemillas' },
            ].map(({ Ic, href }, i) => (
              <a key={i} href={href} target="_blank" rel="noopener noreferrer" style={{
                width: 52, height: 52, borderRadius: '50%',
                border: '1px solid rgba(244,237,229,.25)',
                display:'grid', placeItems:'center', color: '#F4EDE5',
                transition: 'all .2s',
              }}
              onMouseOver={(e)=> {e.currentTarget.style.background = 'var(--terracota)'; e.currentTarget.style.borderColor = 'var(--terracota)';}}
              onMouseOut ={(e)=> {e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(244,237,229,.25)';}}
              ><Ic size={22}/></a>

            ))}
          </div>

          <div style={{display:'flex', flexDirection:'column', gap: 8}}>
            <div style={{fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500, color: '#F4EDE5', marginBottom: 4}}>Contacto</div>
            <a href="mailto:contactanossemillas@gmail.com" style={{fontSize: 13.5, color: 'rgba(244,237,229,.7)'}}
              onMouseOver={(e)=> e.currentTarget.style.color = '#E8B888'}
              onMouseOut ={(e)=> e.currentTarget.style.color = 'rgba(244,237,229,.7)'}
            >contactanossemillas@gmail.com</a>
            <a href="https://wa.me/573107600860" style={{fontSize: 13.5, color: 'rgba(244,237,229,.7)'}}
              onMouseOver={(e)=> e.currentTarget.style.color = '#E8B888'}
              onMouseOut ={(e)=> e.currentTarget.style.color = 'rgba(244,237,229,.7)'}
            >+57 310 760 0860</a>
          </div>
        </div>

        <div style={{marginTop: 20, display:'flex', justifyContent:'space-between', gap: 20, flexWrap: 'wrap', fontSize: 12, color: 'rgba(244,237,229,.55)'}}>
          <div>© 2026 Semillas · Por Laura Vivas & Dary Velasco</div>
          <div style={{fontFamily: 'var(--script)', fontSize: 22, color: '#E8B888'}}>Construyendo Bienestar Psicológico</div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;