const { Logo, Icon, Button } = window.Academia_fb1ae0;

function Footer({ onEnroll }) {
  const t = window.GIO.t;
  const c = window.GIO.contacto;

  const redes = [
    ['instagram', c.instagram],
    ['facebook', c.facebook],
    ['youtube', c.youtube],
    ['mail', c.email ? 'mailto:' + c.email : ''],
  ].filter(([, href]) => href);

  const contacto = [
    ['message-circle', c.whatsappTexto, c.waLink, true],
    ['phone', c.telefono, c.telefono ? 'tel:' + c.telefono.replace(/[^\d+]/g, '') : '', false],
    ['mail', c.email, c.email ? 'mailto:' + c.email : '', false],
    ['map-pin', c.direccion, c.mapa, !!c.mapa],
    ['clock', c.horarios, '', false],
  ].filter(([, texto]) => texto);

  const linkStyle = { fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', color: 'var(--grey-200)', textDecoration: 'none' };

  return (
    <footer id="contacto" className="gio-dark" style={{ background: 'var(--ink-900)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'var(--space-16) var(--gutter) var(--space-8)' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-8)', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--space-8)', background: 'var(--brand)', borderRadius: 'var(--radius-2xl)', marginBottom: 'var(--space-16)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 560 }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-m)', fontWeight: 'var(--weight-extrabold)', color: '#fff', margin: 0, letterSpacing: 'var(--tracking-tight)', textWrap: 'balance' }}>{t.cta_titulo}</h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-l)', color: 'rgba(255,255,255,.9)', margin: 0 }}>{t.cta_subtitulo}</p>
          </div>
          <Button variant="inverse" size="lg" icon="graduation-cap" onClick={() => onEnroll(null)}>{t.cta_boton}</Button>
        </div>

        <div className="gio-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.3fr', gap: 'var(--space-8)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', alignItems: 'flex-start' }}>
            <Logo variant="light" height={30} basePath="assets" />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', color: 'var(--grey-300)', margin: 0, maxWidth: 300 }}>{t.footer_descripcion}</p>
            {redes.length ? (
              <div style={{ display: 'flex', gap: 'var(--space-2)' }}>
                {redes.map(([n, href]) => (
                  <a key={n} href={href} target="_blank" rel="noopener" aria-label={n}
                    style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 38, height: 38, borderRadius: 'var(--radius-pill)', border: '1px solid var(--border-inverse)', color: 'var(--grey-100)' }}>
                    <Icon name={n} size={17} />
                  </a>
                ))}
              </div>
            ) : null}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            <span className="gio-eyebrow">{t.menu_1 || 'Cursos'}</span>
            {window.GIO.areas.map(a => (
              <a key={a.clave} href="#cursos" style={linkStyle}>{a.nombre}</a>
            ))}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            <span className="gio-eyebrow">Academia</span>
            <a href="#modalidad" style={linkStyle}>{t.menu_2}</a>
            <a href="#alumnos" style={linkStyle}>{t.menu_3}</a>
            <a href="#preguntas" style={linkStyle}>{t.menu_4}</a>
            <a href="#cursos" style={linkStyle} onClick={e => { e.preventDefault(); onEnroll(null); }}>{t.boton_inscripcion}</a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            <span className="gio-eyebrow">Contacto</span>
            {contacto.map(([ic, texto, href, blank]) => {
              const contenido = (
                <React.Fragment>
                  <Icon name={ic} size={16} style={{ color: 'var(--brand)', flex: '0 0 auto', marginTop: 3 }} />
                  <span>{texto}</span>
                </React.Fragment>
              );
              const base = { ...linkStyle, display: 'flex', gap: 8, alignItems: 'flex-start' };
              return href
                ? <a key={ic + texto} href={href} target={blank ? '_blank' : undefined} rel="noopener" style={base}>{contenido}</a>
                : <span key={ic + texto} style={base}>{contenido}</span>;
            })}
          </div>
        </div>

        <div style={{ marginTop: 'var(--space-12)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-inverse)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--font-body)', fontSize: 'var(--text-caption)', color: 'var(--grey-400)' }}>
          <span>{t.footer_copyright}</span>
          <span>{t.footer_legal}</span>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });