const { HexagonPattern, PillButton } = window.CerrajerosLaSaforDesignSystem_88370e;

function ChevronLink({ children, href = '#' }) {
  return (
    <a href={href} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--ink)',
      textDecoration: 'none', transition: 'color var(--dur-fast)',
    }}
      onMouseEnter={(e)=>e.currentTarget.style.color='var(--verde-bright)'}
      onMouseLeave={(e)=>e.currentTarget.style.color='var(--ink)'}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--verde-bright)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flex:'none' }}>
        <path d="M13 17l5-5-5-5M6 17l5-5-5-5" />
      </svg>
      {children}
    </a>
  );
}

function SocialCircle({ icon, href = '#' }) {
  return (
    <a href={href} aria-label={icon} style={{
      width: 38, height: 38, borderRadius: 'var(--radius-pill)',
      background: 'var(--verde-bright)', color: 'var(--white)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      transition: 'background var(--dur-base)',
    }}
      onMouseEnter={(e)=>e.currentTarget.style.background='var(--verde-glow)'}
      onMouseLeave={(e)=>e.currentTarget.style.background='var(--verde-bright)'}>
      <i data-lucide={icon} style={{ width: 16, height: 16 }} />
    </a>
  );
}

function SiteFooter() {
  return (
    <footer style={{ position: 'relative', background: 'var(--warm)', overflow: 'hidden' }}>
      <HexagonPattern opacity={0.05} />
      <div style={{ position: 'relative', maxWidth: 'var(--content-wide)', margin: '0 auto', padding: 'var(--space-10) var(--gutter) var(--space-6)' }}>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.2fr', gap: 'var(--space-8)', marginBottom: 'var(--space-10)' }} className="footer-grid">
          {/* Brand */}
          <div>
            <p style={{
              fontFamily: 'var(--font-display)', fontWeight: 900, textTransform: 'uppercase',
              fontSize: 22, color: 'var(--stone)', letterSpacing: '-0.01em',
              margin: '0 0 var(--space-3)', lineHeight: 1,
            }}>
              Cerrajeros <span style={{ color: 'var(--verde-bright)' }}>La Safor</span> 24H
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--ink)', lineHeight: 1.7, maxWidth: '32ch', margin: '0 0 var(--space-5)' }}>
              Tu cerrajero de confianza en La Safor. Rápido, profesional y transparente — 24 horas, 365 días al año.
            </p>
            <div style={{ display: 'flex', gap: 10 }}>
              <SocialCircle icon="message-circle" />
              <SocialCircle icon="phone" />
              <SocialCircle icon="mail" />
              <SocialCircle icon="map-pin" />
            </div>
          </div>

          {/* Quick links */}
          <div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, textTransform: 'uppercase', color: 'var(--stone)', letterSpacing: '-0.005em', margin: '0 0 var(--space-5)' }}>
              Enlaces
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <li><ChevronLink>Inicio</ChevronLink></li>
              <li><ChevronLink>Servicios</ChevronLink></li>
              <li><ChevronLink>Cobertura</ChevronLink></li>
              <li><ChevronLink>Sobre nosotros</ChevronLink></li>
              <li><ChevronLink>Contacto</ChevronLink></li>
            </ul>
          </div>

          {/* Services */}
          <div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, textTransform: 'uppercase', color: 'var(--stone)', letterSpacing: '-0.005em', margin: '0 0 var(--space-5)' }}>
              Servicios
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <li><ChevronLink>Apertura de puertas</ChevronLink></li>
              <li><ChevronLink>Cambio de cerraduras</ChevronLink></li>
              <li><ChevronLink>Cajas fuertes</ChevronLink></li>
              <li><ChevronLink>Urgencias 24H</ChevronLink></li>
              <li><ChevronLink>Apertura de vehículos</ChevronLink></li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, textTransform: 'uppercase', color: 'var(--stone)', letterSpacing: '-0.005em', margin: '0 0 var(--space-5)' }}>
              Contacto
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--ink)', lineHeight: 1.7, margin: '0 0 var(--space-3)' }}>
              Regne de Valencia 36-2-C<br/>Beniflá, 46722 (Valencia)
            </p>
            <p style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--verde-bright)', fontSize: 19, margin: '0 0 var(--space-5)' }}>
              +34 600 982 986
            </p>

            {/* Newsletter pill */}
            <form onSubmit={(e)=>e.preventDefault()} style={{
              display: 'flex', alignItems: 'center',
              background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.2)',
              borderRadius: 'var(--radius-pill)', padding: '6px 6px 6px 18px',
            }}>
              <input type="email" placeholder="Tu email" aria-label="Email" style={{
                flex: 1, background: 'transparent', border: 'none', outline: 'none',
                color: 'var(--stone)', fontFamily: 'var(--font-body)', fontSize: 13,
                minWidth: 0,
              }} />
              <button type="submit" aria-label="Suscribirse" style={{
                width: 36, height: 36, border: 'none', cursor: 'pointer',
                borderRadius: 'var(--radius-pill)', background: 'var(--verde-bright)',
                color: 'var(--white)', display: 'inline-flex',
                alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: 'rotate(-45deg)' }}>
                  <path d="M5 12h14M13 6l6 6-6 6" />
                </svg>
              </button>
            </form>
          </div>
        </div>

        <div className="footer-bottom" style={{ borderTop: '1px solid var(--border-dark)', paddingTop: 'var(--space-5)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--ink)', margin: 0 }}>
            © {new Date().getFullYear()} Cerrajeros La Safor 24H. Todos los derechos reservados.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-5)' }}>
            <a href="#" style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--ink)', textDecoration: 'none' }}>Aviso legal</a>
            <a href="#" style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--ink)', textDecoration: 'none' }}>Política de privacidad</a>
            <a href="#" style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--ink)', textDecoration: 'none' }}>Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteFooter });