// Footer
function Footer() {
  return (
    <footer style={{
      background: 'var(--pl-surface)',
      borderTop: '1px solid var(--pl-border)',
      padding: '50px 0 30px',
    }}>
      <div className="pl-container">
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40,
          marginBottom: 36,
        }}>
          <div>
            <a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <img src="/img/logo-pillaleads.png" alt="PillaLeads" style={{ width: 36, height: 36, objectFit: 'contain' }} />
              <span style={{ fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 19 }}>PillaLeads</span>
            </a>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--pl-ink-3)', maxWidth: 360, lineHeight: 1.6 }}>
              Prospección + Webs IA + Cartera de citas automática para consultores SEO, agencias y vendedores de leads.
            </p>
            <p style={{ margin: '14px 0 0', fontSize: 12.5, color: 'var(--pl-ink-mute)' }}>
              Un proyecto de <a href="https://yinyangseo.com" style={{ color: 'var(--pl-accent-deep)', fontWeight: 600 }}>Yinyang Academy</a> & <a href="https://localbrain.app" style={{ color: 'var(--pl-accent-deep)', fontWeight: 600 }}>local brain</a>.
            </p>
          </div>

          <FooterCol title="Producto" links={[
            ['Cómo funciona', '#como-funciona'],
            ['Planes', '#planes'],
            ['Calculadora ROI', '#roi'],
            ['Demo en vivo', '#video'],
            ['FAQ', '#faq'],
          ]} />
          <FooterCol title="Cuenta" links={[
            ['Entrar', 'https://pillaleads.localbrain.app/login'],
            ['Empezar', '#planes'],
            ['Estado del servicio', '#'],
            ['Soporte', 'mailto:agencia@yinyangseo.com'],
          ]} />
          <FooterCol title="Legal" links={[
            ['Blog', 'https://localbrain.app/blog/'],
            ['Changelog', 'https://localbrain.app/changelog/'],
            ['Política de privacidad', 'https://localbrain.app/politica-de-privacidad/'],
            ['Aviso legal', 'https://localbrain.app/aviso-legal/'],
            ['Condiciones', 'https://localbrain.app/condiciones-contratacion/'],
          ]} />
        </div>

        <div style={{
          paddingTop: 22, borderTop: '1px solid var(--pl-border)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
          fontSize: 12.5, color: 'var(--pl-ink-mute)',
        }}>
          <span>© 2026 local brain. Hecho en España con 🤖 y mucho 🧠.</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <span>Powered by</span>
            <span style={{ fontWeight: 700, color: 'var(--pl-ink-2)' }}>Stripe</span>
            <span>·</span>
            <span style={{ fontWeight: 700, color: 'var(--pl-ink-2)' }}>Klarna</span>
            <span>·</span>
            <span style={{ fontWeight: 700, color: 'var(--pl-ink-2)' }}>OpenAI</span>
            <span>·</span>
            <span style={{ fontWeight: 700, color: 'var(--pl-ink-2)' }}>Google Maps</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{
        fontSize: 11.5, fontWeight: 800, letterSpacing: '.1em', textTransform: 'uppercase',
        color: 'var(--pl-ink-mute)', marginBottom: 14,
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {links.map(([l, h], i) => (
          <a key={i} href={h} style={{ fontSize: 14, color: 'var(--pl-ink-2)' }}>{l}</a>
        ))}
      </div>
    </div>
  );
}

window.Footer = Footer;