const Footer = () => {
  const colTitle = { fontFamily: 'Inter', fontSize: 12, fontWeight: 700, letterSpacing: '.16em',
    textTransform: 'uppercase', color: '#0F3518', marginBottom: 24 };
  const link = { display: 'block', fontSize: 15, color: 'rgba(26,26,24,0.7)',
    textDecoration: 'none', marginBottom: 16, transition: 'color .2s' };
  const sIcon = { width: 36, height: 36, borderRadius: 8, background: '#E9E8E4',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    color: '#0F3518', textDecoration: 'none', transition: 'background .2s' };

  const FB = () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="#0F3518" xmlns="http://www.w3.org/2000/svg">
      <path d="M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.875V12h3.328l-.532 3.47h-2.796v8.385C19.612 22.954 24 17.99 24 12z"/>
    </svg>
  );
  const IG = () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0F3518" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="#0F3518" stroke="none"/>
    </svg>
  );
  const LI = () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="#0F3518" xmlns="http://www.w3.org/2000/svg">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
  );

  const handleNewsletterSubmit = async (e) => {
    e.preventDefault();
    const email = e.target.querySelector('input[type=email]').value;
    if (!email) return;
    try {
      await fetch('/.netlify/functions/create-lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          nombre: 'Newsletter subscriber',
          email: email,
          telefono: '',
          ciudad: '',
          tipo_cliente: '',
          fuente_lead: 'newsletter-footer',
          categoria: 'D',
          lead_score: 0,
        }),
      });
      alert('¡Suscripción exitosa! Te enviaremos contenido sobre eficiencia energética.');
      e.target.reset();
    } catch (err) {
      alert('Error al suscribir. Por favor intenta de nuevo.');
    }
  };

  return (
    <footer className="amp-px" style={{ background: '#F8F7F3', padding: '64px 48px 0' }}>
      <div className="amp-g2" style={{ maxWidth: 1440, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '1.2fr 1fr 1fr 1.4fr', gap: 48, paddingBottom: 48 }}>
        <div>
          <img src="/assets/logo-on-light.png" alt="Ampera" style={{ height: 56, marginBottom: 24 }}/>
          <p style={{ fontSize: 14, color: 'rgba(26,26,24,0.65)', lineHeight: 1.7, margin: '0 0 24px' }}>
            Soluciones energéticas inteligentes para hogares, negocios y empresas que quieren producir, controlar y trascender con su energía.
          </p>
          <div style={{ display: 'flex', gap: 8 }}>
            <a href="https://www.facebook.com/share/1BXb2Jwf1x/?mibextid=wwXIfr" target="_blank" rel="noopener noreferrer" style={sIcon} aria-label="Facebook"><FB/></a>
            <a href="https://www.instagram.com/amperaenergyco" target="_blank" rel="noopener noreferrer" style={sIcon} aria-label="Instagram"><IG/></a>
            <a href="https://www.linkedin.com/company/ampera-energy/" target="_blank" rel="noopener noreferrer" style={sIcon} aria-label="LinkedIn"><LI/></a>
          </div>
        </div>
        <div>
          <div style={colTitle}>Soluciones</div>
          <a href="/#proceso" style={link}>Residencial</a>
          <a href="/#proceso" style={link}>Comercial</a>
          <a href="/#proceso" style={link}>Industrial</a>
          <a href="https://wa.me/573017859742" target="_blank" rel="noopener noreferrer" style={link}>Soporte técnico</a>
        </div>
        <div>
          <div style={colTitle}>Compañía</div>
          <a href="/#nosotros" style={link}>Nosotros</a>
          <a href="/recursos/" style={link}>Blog de energía</a>
          <a href="mailto:comercial@amperaenergy.co" style={link}>Contacto</a>
          <a href="/politica-de-datos/" style={link}>Política de datos</a>
        </div>
        <div>
          <div style={colTitle}>Newsletter</div>
          <p style={{ fontSize: 14, color: 'rgba(26,26,24,0.7)', lineHeight: 1.6, margin: '0 0 16px' }}>
            Recibe consejos exclusivos sobre eficiencia energética.
          </p>
          <form onSubmit={handleNewsletterSubmit}
            style={{ display: 'flex', gap: 0, background: '#fff', borderRadius: 12,
              padding: 4, border: '1px solid rgba(15,53,24,0.10)' }}>
            <input type="email" placeholder="Tu email" required style={{
              flex: 1, border: 'none', outline: 'none', padding: '12px 14px',
              fontFamily: 'Inter', fontSize: 14, color: '#1A1A18', background: 'transparent',
            }}/>
            <button type="submit" aria-label="Suscribir" style={{
              background: '#1B5C2C', color: '#fff', border: 'none', borderRadius: 8,
              width: 44, height: 44, display: 'inline-flex', alignItems: 'center',
              justifyContent: 'center', cursor: 'pointer',
            }}><Icon name="send" size={18} color="#fff"/></button>
          </form>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(15,53,24,0.08)', padding: '24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        flexWrap: 'wrap', maxWidth: 1440, margin: '0 auto' }}>
        <p style={{ margin: 0, fontSize: 11, fontWeight: 600, letterSpacing: '.12em',
          textTransform: 'uppercase', color: 'rgba(26,26,24,0.45)' }}>
          © 2026 Ampera. Todos los derechos reservados.
        </p>
        <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
          <a href="/politica-de-datos/" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em',
            textTransform: 'uppercase', color: 'rgba(26,26,24,0.55)', textDecoration: 'none' }}>Política de datos</a>
          <a href="mailto:comercial@amperaenergy.co" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em',
            textTransform: 'uppercase', color: 'rgba(26,26,24,0.55)', textDecoration: 'none' }}>Contacto</a>
          <a href="https://wa.me/573017859742" target="_blank" rel="noopener noreferrer" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.12em',
            textTransform: 'uppercase', color: 'rgba(26,26,24,0.55)', textDecoration: 'none' }}>WhatsApp</a>
          <a href="/quote/" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.12em',
            textTransform: 'uppercase', color: '#C4A84F', textDecoration: 'none' }}>Ampera Quote</a>
        </div>
      </div>
    </footer>
  );
};
window.Footer = Footer;