/* eslint-disable react/prop-types */
/**
 * Footer del Home.
 * Brief 1 §3.1 Footer.
 *
 * - Logo Prosperia (uso tal cual, NO tratamiento cobre)
 * - Dos oficinas (SPGG + Guadalajara)
 * - Tres emails
 * - Iconos sociales hover cobre
 * - Avisos legales
 */

const SOCIAL = [
  { name: 'Facebook',           href: 'https://facebook.com/Prosperia.mx',                                                     icon: 'social-facebook'  },
  { name: 'Instagram',          href: 'https://instagram.com/prosperia_',                                                       icon: 'social-instagram' },
  { name: 'LinkedIn · Prosperia', href: 'https://linkedin.com/company/prosperiamx',                                             icon: 'social-linkedin'  },
  { name: 'LinkedIn · Héctor',  href: 'https://www.linkedin.com/in/hectordeprosperia',                                          icon: 'social-linkedin', personal: true },
  { name: 'Spotify',            href: 'https://rss.com/podcasts/creamos-lo-extraordinario-el-podcast-de-prosperia',             icon: 'social-spotify'   },
];

function Footer() {
  const [hover, setHover] = React.useState(null);

  return (
    <footer id="footer-contacto" data-screen-label="12 Footer" style={ftStyles.footer}>
      <div className="container">
        <div style={ftStyles.top}>
          <div style={ftStyles.logoCol}>
            <img src="assets/logo/prosperia-horizontal.png" alt="Prosperia" style={{ height: 72, width: 'auto', maxWidth: 'none', flexShrink: 0, alignSelf: 'flex-start' }} />
            <p style={ftStyles.tagline}>
              Originación Inmobiliaria · La disciplina antes del proyecto.
            </p>
          </div>

          <div style={ftStyles.officesCol}>
            <div style={ftStyles.office}>
              <div className="label-small" style={ftStyles.officeHead}>Oficina Central · San Pedro Garza García</div>
              <address style={ftStyles.address}>
                Av. Lázaro Cárdenas 1010, Torre Ixco, Piso 4 – Of. 401<br/>
                Col. Residencial, SPGG, NL · CP 66260<br/>
                <a href="tel:+528136050471" style={ftStyles.aLink}>+52 81 36 05 04 71</a>
              </address>
            </div>
            <div style={ftStyles.office}>
              <div className="label-small" style={ftStyles.officeHead}>Oficina Guadalajara</div>
              <address style={ftStyles.address}>
                Paseo de los Virreyes 45, Puerta de Hierro<br/>
                Zapopan, Jalisco · CP 45116
              </address>
            </div>
          </div>

          <div style={ftStyles.contactCol}>
            <div className="label-small" style={ftStyles.officeHead}>Contacto</div>
            <ul style={ftStyles.emailList}>
              <li><a href="mailto:hola@prosperia.mx"     style={ftStyles.aLink}>hola@prosperia.mx</a>     <span style={ftStyles.emailNote}>contacto general</span></li>
              <li><a href="mailto:prensa@prosperia.mx"   style={ftStyles.aLink}>prensa@prosperia.mx</a>   <span style={ftStyles.emailNote}>medios</span></li>
              <li><a href="mailto:contacto@prosperia.mx" style={ftStyles.aLink}>contacto@prosperia.mx</a> <span style={ftStyles.emailNote}>alternativo</span></li>
            </ul>

            <div style={{ ...ftStyles.socialRow, marginTop: 24 }}>
              {SOCIAL.map((s, i) => (
                <a
                  key={s.name}
                  href={s.href}
                  aria-label={s.name}
                  title={s.name}
                  target="_blank"
                  rel="noopener noreferrer"
                  data-cursor="link"
                  onMouseEnter={() => setHover(i)}
                  onMouseLeave={() => setHover(null)}
                  style={{
                    ...ftStyles.socialLink,
                    color: hover === i ? 'var(--color-copper-fallback)' : 'var(--color-navy-deep)',
                    transform: hover === i ? 'translateY(-2px)' : 'translateY(0)',
                    position: 'relative',
                  }}
                >
                  <window.Icon name={s.icon} size={22} stroke={1.6} />
                  {s.personal && (
                    <span aria-hidden="true" style={ftStyles.personalBadge}>HG</span>
                  )}
                </a>
              ))}
            </div>
          </div>
        </div>

        <div style={ftStyles.bottom}>
          <span style={ftStyles.legal}>© {new Date().getFullYear()} Prosperia · Todos los derechos reservados</span>
          <div style={ftStyles.legalLinks}>
            <a href="/home/Home.html#contacto" style={ftStyles.aLink}>Aviso de Privacidad</a>
            <a href="/home/Home.html#contacto"         style={ftStyles.aLink}>Términos</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

const ftStyles = {
  footer: {
    background: 'var(--color-cream-soft)',
    paddingBlock: 64,
    borderTop: '1px solid rgba(33,52,64,0.08)',
  },
  top: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 48,
    paddingBottom: 48,
    borderBottom: '1px solid rgba(33,52,64,0.10)',
  },
  logoCol: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  tagline: {
    margin: 0,
    fontSize: 14,
    color: 'var(--color-navy-medium)',
    maxWidth: 320,
    lineHeight: 1.5,
  },
  officesCol: {
    display: 'flex',
    flexDirection: 'column',
    gap: 24,
  },
  office: { display: 'flex', flexDirection: 'column', gap: 8 },
  officeHead: { color: 'var(--color-copper-fallback)' },
  address: {
    margin: 0,
    fontStyle: 'normal',
    fontSize: 14,
    lineHeight: 1.7,
    color: 'var(--color-navy-deep)',
  },
  contactCol: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
  },
  emailList: {
    listStyle: 'none', padding: 0, margin: 0,
    display: 'flex', flexDirection: 'column', gap: 8,
    fontSize: 14,
    color: 'var(--color-navy-deep)',
  },
  emailNote: {
    marginLeft: 8,
    fontSize: 12,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
  },
  socialRow: {
    display: 'flex',
    gap: 16,
  },
  socialLink: {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 40, height: 40,
    border: '1px solid rgba(33,52,64,0.18)',
    borderRadius: 999,
    transition: 'color 240ms ease-out, transform 360ms cubic-bezier(0.16,1,0.3,1), border-color 240ms ease',
  },
  personalBadge: {
    position: 'absolute',
    top: -6, right: -8,
    minWidth: 18, height: 18,
    paddingInline: 4,
    background: 'var(--color-copper-fallback)',
    color: '#fff',
    fontSize: 9,
    fontWeight: 800,
    letterSpacing: '0.06em',
    borderRadius: 999,
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: '1.5px solid var(--color-cream)',
    boxShadow: '0 2px 6px rgba(0,0,0,0.12)',
    pointerEvents: 'none',
  },
  aLink: {
    color: 'var(--color-navy-deep)',
    textDecoration: 'none',
    borderBottom: '1px solid rgba(33,52,64,0.18)',
  },
  bottom: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    paddingTop: 32,
    fontSize: 12,
    color: 'var(--color-navy-medium)',
  },
  legal: {},
  legalLinks: {
    display: 'flex',
    gap: 24,
  },
};

const ftMQ = document.createElement('style');
ftMQ.textContent = `
  footer[data-screen-label="12 Footer"] a[aria-label]:hover {
    border-color: var(--color-copper-fallback) !important;
  }
  footer[data-screen-label="12 Footer"] a:not([aria-label]):hover {
    color: var(--color-copper-fallback);
  }
  @media (min-width: 900px) {
    footer[data-screen-label="12 Footer"] .container > div:first-child {
      grid-template-columns: 1.2fr 1.4fr 1fr !important;
      gap: 48px !important;
    }
    footer[data-screen-label="12 Footer"] .container > div:last-child {
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: center !important;
    }
  }
`;
document.head.appendChild(ftMQ);

window.Footer = Footer;