/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

function Academy() {
  return (
    <section id="academy" style={{ background: 'var(--sub-academy-bg)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -40, top: -30 }} color="var(--sub-academy-2)" opacity={0.35} size={220} />
      <Droplets style={{ left: -60, bottom: -50 }} color="var(--sub-academy-1)" opacity={0.12} size={260} />
      <Container style={{ padding: '88px 32px', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 999,
                background: 'var(--sub-academy-1)', color: '#fff',
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name="graduation" size={16} />
              </div>
              <Eyebrow color="var(--sub-academy-1)">FRSKO ACADEMY</Eyebrow>
            </div>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontSize: 'clamp(28px, 3.6vw, 44px)', fontWeight: 700,
              letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 18px',
            }}>
              ¿Prefieres aprender a hacerlo tú mismo?
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--fg2)', margin: '0 0 28px', maxWidth: 520 }}>
              Programas de capacitación en marketing con IA para equipos internos, directivos y emprendedores.
              In-company, cohortes abiertas y programas para universidades.
            </p>
            <Button
              variant="primary"
              size="lg"
              icon="arrow-right"
              style={{ background: 'var(--sub-academy-1)', boxShadow: '0 12px 28px -8px rgba(35,79,232,0.4)' }}
            >Ver programas de formación</Button>
          </div>

          <div style={{ display: 'grid', gap: 14 }}>
            {[
              { t: 'In-company', s: 'Tu equipo aprende usando tus propios datos y casos.' },
              { t: 'Cohortes abiertas', s: 'Marketers de distintas empresas, mismo nivel, 6 semanas.' },
              { t: 'Universidades', s: 'Licencias y currícula para programas académicos.' },
            ].map(b => (
              <div key={b.t} style={{
                background: '#fff', borderRadius: 20, padding: '20px 24px',
                display: 'flex', alignItems: 'center', gap: 18,
                border: '1px solid rgba(35,79,232,0.10)',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 14,
                  background: 'var(--sub-academy-bg)', color: 'var(--sub-academy-1)',
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                }}>
                  <Icon name="users" size={20} />
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 16, color: 'var(--fg1)', marginBottom: 2 }}>{b.t}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--fg2)', lineHeight: 1.45 }}>{b.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

function Team() {
  return (
    <section id="equipo" style={{ background: '#fff' }}>
      <Container style={{ padding: '120px 32px' }}>
        <div className="grid-2" style={{ gap: 80, alignItems: 'center' }}>
          {/* Visual: people + IA cluster */}
          <div>
            {/* Desktop: floating chips con posicionamiento absoluto */}
            <div className="team-visual-desktop" style={{ position: 'relative', minHeight: 440 }}>
              <Droplets style={{ left: -20, top: -20 }} color="var(--teal-100)" opacity={0.5} size={180} />
              <div style={{
                position: 'absolute', top: 60, left: 40,
                width: 200, height: 200, borderRadius: 999,
                background: 'linear-gradient(135deg, var(--teal-400), var(--cyan-400))',
                boxShadow: 'var(--shadow-lg)',
                display: 'grid', placeItems: 'center', color: '#fff',
              }}>
                <Icon name="users" size={80} stroke={1.3} />
              </div>
              <div style={{ position: 'absolute', top: 30, right: 60, background: '#fff', borderRadius: 20, padding: '14px 18px', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--sub-neuro-bg)', color: 'var(--sub-neuro-1)', display: 'grid', placeItems: 'center' }}><Icon name="sparkles" size={16} /></div>
                <div><div style={{ fontSize: 12, color: 'var(--fg3)' }}>IA</div><div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg1)' }}>Genera 50 variantes</div></div>
              </div>
              <div style={{ position: 'absolute', bottom: 60, right: 20, background: '#fff', borderRadius: 20, padding: '14px 18px', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--teal-50)', color: 'var(--brand)', display: 'grid', placeItems: 'center' }}><Icon name="chart" size={16} /></div>
                <div><div style={{ fontSize: 12, color: 'var(--fg3)' }}>Estratega</div><div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg1)' }}>Elige 3 ganadoras</div></div>
              </div>
              <div style={{ position: 'absolute', bottom: 0, left: 90, background: '#fff', borderRadius: 20, padding: '14px 18px', border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--yellow-50)', color: 'var(--yellow-700)', display: 'grid', placeItems: 'center' }}><Icon name="target" size={16} /></div>
                <div><div style={{ fontSize: 12, color: 'var(--fg3)' }}>Resultado</div><div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg1)' }}>Lanza esta semana</div></div>
              </div>
              <svg viewBox="0 0 500 440" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} aria-hidden>
                <path d="M 230 130 C 280 100, 320 80, 360 70" stroke="var(--teal-300)" strokeWidth="1.5" fill="none" strokeDasharray="4 6" />
                <path d="M 240 200 C 320 230, 380 280, 410 300" stroke="var(--teal-300)" strokeWidth="1.5" fill="none" strokeDasharray="4 6" />
                <path d="M 180 240 C 180 290, 190 340, 200 380" stroke="var(--teal-300)" strokeWidth="1.5" fill="none" strokeDasharray="4 6" />
              </svg>
            </div>
            {/* Mobile: chips apilados */}
            <div className="team-visual-mobile">
              {[
                { icon: 'sparkles', bg: 'var(--sub-neuro-bg)', fg: 'var(--sub-neuro-1)', label: 'IA', text: 'Genera 50 variantes' },
                { icon: 'chart',    bg: 'var(--teal-50)',      fg: 'var(--brand)',        label: 'Estratega', text: 'Elige 3 ganadoras' },
                { icon: 'target',   bg: 'var(--yellow-50)',    fg: 'var(--yellow-700)',   label: 'Resultado', text: 'Lanza esta semana' },
              ].map(c => (
                <div key={c.label} style={{ background: '#fff', borderRadius: 16, padding: '14px 18px', border: '1px solid var(--border)', boxShadow: 'var(--shadow-sm)', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: c.bg, color: c.fg, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={c.icon} size={18} /></div>
                  <div><div style={{ fontSize: 12, color: 'var(--fg3)' }}>{c.label}</div><div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg1)' }}>{c.text}</div></div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <Eyebrow>EL EQUIPO DETRÁS DE LA TECNOLOGÍA</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontSize: 'clamp(30px, 4vw, 50px)', fontWeight: 700,
              letterSpacing: '-0.03em', lineHeight: 1.05, margin: '16px 0 24px',
            }}>
              La IA hace el trabajo pesado. Las personas toman las decisiones.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px' }}>
              No somos un bot ni una plataforma de autoservicio. Somos un equipo de estrategas, creativos y especialistas en datos que usa inteligencia artificial para multiplicar su capacidad — no para reemplazar el criterio humano.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 28px' }}>
              Cada cuenta de FRSKO tiene un estratega asignado que entiende tu industria, conoce a tu competencia y es responsable de tus resultados.
            </p>
            <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
              <div>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 32, letterSpacing: '-0.025em', color: 'var(--teal-700)', lineHeight: 1 }}>1:1</div>
                <div style={{ fontSize: 13, color: 'var(--fg3)', marginTop: 4 }}>Estratega asignado</div>
              </div>
              <div style={{ width: 1, height: 40, background: 'var(--border)' }} />
              <div>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 32, letterSpacing: '-0.025em', color: 'var(--teal-700)', lineHeight: 1 }}>&lt;24h</div>
                <div style={{ fontSize: 13, color: 'var(--fg3)', marginTop: 4 }}>Tiempo de respuesta</div>
              </div>
              <div style={{ width: 1, height: 40, background: 'var(--border)' }} />
              <div>
                <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 32, letterSpacing: '-0.025em', color: 'var(--teal-700)', lineHeight: 1 }}>10+</div>
                <div style={{ fontSize: 13, color: 'var(--fg3)', marginTop: 4 }}>Años en neuro</div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function FinalCta({ onCta }) {
  const paths = [
    {
      icon: 'sparkles',
      eyebrow: 'RÁPIDO · 5 MIN',
      title: 'Quiero un diagnóstico rápido',
      body: 'Responde 5 preguntas y te decimos qué solución FRSKO tiene más sentido para tu empresa hoy.',
      cta: 'Hacer el diagnóstico gratis',
      variant: 'cta',
      tone: { soft: 'var(--yellow-50)', ink: 'var(--yellow-700)' },
    },
    {
      icon: 'calendar',
      eyebrow: 'DIRECTO · 30 MIN',
      title: 'Quiero ver una demo',
      body: 'Agenda 30 minutos con un estratega. Sin pitch, solo conversación.',
      cta: 'Agendar demo',
      variant: 'primary',
      featured: true,
      tone: { soft: 'rgba(255,255,255,0.12)', ink: '#fff' },
    },
    {
      icon: 'mail',
      eyebrow: 'CÓMODO · ASÍNCRONO',
      title: 'Quiero que me contacten',
      body: 'Déjanos tus datos y un estratega te escribe en menos de 24 horas.',
      cta: 'Que me contacten',
      variant: 'ghost',
      tone: { soft: 'var(--teal-50)', ink: 'var(--teal-700)' },
    },
  ];

  return (
    <section className="finalcta-section" style={{ background: 'var(--ink-50)', padding: '120px 32px' }}>
      <Container style={{ padding: 0 }}>
        <div className="finalcta-header" style={{ textAlign: 'center', marginBottom: 56 }}>
          <Eyebrow>¿POR DÓNDE EMPEZAMOS?</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontSize: 'clamp(32px, 5vw, 64px)', fontWeight: 700,
            letterSpacing: '-0.035em', lineHeight: 1.02, margin: '18px auto 18px', maxWidth: 880,
          }}>
            Tres caminos para arrancar.<br/>
            <span style={{
              background: 'var(--grad-brand)', WebkitBackgroundClip: 'text', backgroundClip: 'text',
              color: 'transparent', fontStyle: 'italic',
            }}>Tú eliges el ritmo.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 auto', maxWidth: 560 }}>
            Sin importar dónde estés hoy, hay una forma de empezar que se ajusta a tu tiempo.
          </p>
        </div>

        <div className="finalcta-grid">
          {paths.map((p) => {
            const featured = p.featured;
            return (
              <div key={p.title}
                className={featured ? 'finalcta-card-featured' : ''}
                style={{
                  background: featured ? 'var(--grad-deep)' : '#fff',
                  color: featured ? '#fff' : 'var(--fg1)',
                  borderRadius: 28, padding: 36,
                  border: featured ? '1px solid transparent' : '1px solid var(--border)',
                  boxShadow: featured ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
                  display: 'flex', flexDirection: 'column',
                  position: 'relative', overflow: 'hidden',
                }}>
                {featured && (
                  <>
                    <Droplets style={{ right: -30, top: -20 }} color="rgba(0,218,227,0.4)" opacity={0.6} size={160} />
                    {/* Badge "Más popular" visible en mobile donde no hay lift */}
                    <div style={{
                      position: 'absolute', top: 16, right: 16,
                      fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
                      textTransform: 'uppercase', padding: '4px 10px', borderRadius: 999,
                      background: 'var(--cyan-400)', color: 'var(--teal-900)',
                    }}>Más popular</div>
                  </>
                )}
                <div style={{
                  width: 56, height: 56, borderRadius: 18,
                  background: p.tone.soft, color: p.tone.ink,
                  display: 'grid', placeItems: 'center', marginBottom: 22,
                  position: 'relative', flexShrink: 0,
                }}>
                  <Icon name={p.icon} size={26} />
                </div>
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.14em',
                  textTransform: 'uppercase',
                  color: featured ? 'var(--cyan-300)' : 'var(--brand)',
                  marginBottom: 10,
                }}>{p.eyebrow}</div>
                <h3 style={{
                  fontFamily: 'var(--font-heading)', fontSize: 24, fontWeight: 700,
                  letterSpacing: '-0.02em', lineHeight: 1.15, margin: '0 0 14px',
                  color: featured ? '#fff' : 'var(--fg1)',
                }}>{p.title}</h3>
                <p style={{
                  fontSize: 15, lineHeight: 1.55, margin: '0 0 28px',
                  color: featured ? 'rgba(255,255,255,0.78)' : 'var(--fg2)',
                }}>{p.body}</p>
                <div style={{ marginTop: 'auto' }}>
                  <Button
                    variant={p.variant}
                    size="md"
                    icon="arrow-right"
                    onClick={onCta}
                    style={{ width: '100%', justifyContent: 'center' }}
                  >{p.cta}</Button>
                </div>
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

function SiteFooter() {
  React.useEffect(() => {
    if (document.querySelector('link[data-frsko-fontawesome]')) return;
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css';
    link.setAttribute('data-frsko-fontawesome', 'true');
    document.head.appendChild(link);
  }, []);

  const socialLinks = [
    { label: 'TikTok', href: 'https://www.tiktok.com/@frskomarketing', icon: 'fa-brands fa-tiktok' },
    { label: 'Facebook', href: 'https://www.facebook.com/frskomkt/', icon: 'fa-brands fa-facebook-f' },
    { label: 'Instagram', href: 'https://www.instagram.com/frskomkt/', icon: 'fa-brands fa-instagram' },
    { label: 'LinkedIn', href: 'https://www.linkedin.com/company/frskomkt/', icon: 'fa-brands fa-linkedin-in' },
  ];

  const cols = [
    {
      title: 'Soluciones IA',
      links: [
        { label: 'Lead Engine AI', href: '/ia/lead-engine' },
        { label: 'NeuroCopy Lab', href: '/ia/neurocopy-lab' },
        { label: 'Content Studio AI', href: '/ia/content-studio' },
        { label: 'Smart Ads AI', href: '/ia/smart-ads' },
        { label: 'SEO Pulse', href: '/ia/seo-pulse' },
        { label: 'Soluciones Enterprise', href: '/ia/enterprise' },
      ],
    },
    {
      title: 'Servicios',
      links: [
        { label: 'Consultoría', href: '/servicios/consultoria' },
        { label: 'Campañas Digitales', href: '/servicios/campanas-digitales' },
        { label: 'Lead Generation', href: '/servicios/lead-generation' },
        { label: 'Neuromarketing', href: '/servicios/neuromarketing' },
        { label: 'Academy', href: '/academy' },
        { label: 'Precios', href: '/precios' },
      ],
    },
    {
      title: 'Empresa',
      links: [
        { label: 'Nosotros', href: '/nosotros' },
        { label: 'Clientes & Marcas', href: '/nosotros/clientes' },
        { label: 'Casos de Éxito', href: '/casos-de-exito' },
        { label: 'Blog', href: '/blog' },
        { label: 'Herramientas', href: '/herramientas' },
        { label: 'Contacto', href: '/contacto' },
      ],
    },
    {
      title: 'Legal',
      links: [
        { label: 'Aviso de Privacidad', href: '/privacidad' },
        { label: 'Términos de Uso', href: '/terminos' },
        { label: 'Política de Cookies', href: '/cookies' },
        { label: 'hola@frsko.com', href: 'mailto:hola@frsko.com' },
      ],
    },
  ];
  return (
    <footer className="site-footer-frsko">
      <style>{`
        .site-footer-frsko {
          position: relative;
          overflow: hidden;
          background:
            radial-gradient(circle at 88% 12%, rgba(0, 218, 227, 0.18), transparent 22rem),
            linear-gradient(160deg, var(--teal-900) 0%, #0d2427 100%);
          color: rgba(255, 255, 255, 0.72);
        }
        .footer-wrap-frsko {
          width: min(1200px, calc(100% - 48px));
          margin: 0 auto;
          padding: clamp(4.5rem, 8vw, 6.5rem) 0 1.8rem;
          position: relative;
        }
        .footer-main-frsko {
          display: grid;
          grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.65fr);
          gap: clamp(2.5rem, 6vw, 5.25rem);
          align-items: start;
        }
        .footer-brand-frsko {
          max-width: 23rem;
        }
        .footer-logo-link-frsko {
          display: inline-flex;
          align-items: center;
          margin-bottom: 1.6rem;
        }
        .footer-logo-frsko {
          height: clamp(58px, 7vw, 82px);
          width: auto;
          display: block;
        }
        .footer-tagline-frsko {
          margin: 0;
          color: rgba(255, 255, 255, 0.88);
          font-family: var(--font-heading);
          font-size: clamp(1.45rem, 2.5vw, 2.15rem);
          font-weight: 760;
          line-height: 1.02;
          letter-spacing: -0.04em;
        }
        .footer-copy-frsko {
          margin: 1rem 0 0;
          max-width: 21rem;
          color: rgba(255, 255, 255, 0.58);
          font-size: 0.96rem;
          line-height: 1.68;
        }
        .footer-social-frsko {
          display: flex;
          flex-wrap: wrap;
          gap: 0.6rem;
          margin-top: 1.6rem;
        }
        .footer-social-link-frsko {
          width: 2.75rem;
          height: 2.75rem;
          border-radius: 999px;
          border: 1px solid rgba(255, 255, 255, 0.16);
          display: inline-grid;
          place-items: center;
          color: rgba(255, 255, 255, 0.9);
          background: rgba(255, 255, 255, 0.055);
          transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
        }
        .footer-social-link-frsko:hover {
          transform: translateY(-2px);
          background: var(--cta);
          border-color: var(--cta);
          color: var(--teal-900);
        }
        .footer-social-link-frsko i {
          font-size: 1.05rem;
          line-height: 1;
        }
        .footer-nav-frsko {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: clamp(1.5rem, 3vw, 2.7rem);
        }
        .footer-col-title-frsko {
          margin-bottom: 1rem;
          color: var(--cyan-300);
          font-family: var(--font-heading);
          font-size: 0.74rem;
          font-weight: 800;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }
        .footer-link-list-frsko {
          list-style: none;
          padding: 0;
          margin: 0;
          display: grid;
          gap: 0.7rem;
        }
        .footer-link-frsko {
          color: rgba(255, 255, 255, 0.68);
          font-size: 0.92rem;
          line-height: 1.35;
          transition: color 160ms ease, transform 160ms ease;
        }
        .footer-link-frsko:hover {
          color: rgba(255, 255, 255, 0.96);
        }
        .footer-bottom-frsko {
          margin-top: clamp(3.2rem, 6vw, 5rem);
          padding-top: 1.4rem;
          border-top: 1px solid rgba(255, 255, 255, 0.12);
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 1rem;
          color: rgba(255, 255, 255, 0.48);
          font-size: 0.8rem;
        }
        .footer-legal-frsko {
          display: flex;
          gap: 1.25rem;
          flex-wrap: wrap;
          justify-content: flex-end;
        }
        .footer-legal-frsko a {
          color: inherit;
          transition: color 160ms ease;
        }
        .footer-legal-frsko a:hover {
          color: rgba(255, 255, 255, 0.9);
        }
        @media (max-width: 980px) {
          .footer-main-frsko {
            grid-template-columns: 1fr;
          }
          .footer-brand-frsko {
            max-width: 100%;
          }
          .footer-nav-frsko {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
        @media (max-width: 640px) {
          .footer-wrap-frsko {
            width: min(100% - 32px, 1200px);
            padding-top: 4rem;
          }
          .footer-logo-frsko {
            height: 58px;
          }
          .footer-social-link-frsko {
            width: 3rem;
            height: 3rem;
          }
          .footer-nav-frsko {
            grid-template-columns: 1fr;
            gap: 1.7rem;
          }
          .footer-bottom-frsko {
            align-items: flex-start;
            flex-direction: column;
          }
          .footer-legal-frsko {
            justify-content: flex-start;
            gap: 0.85rem 1.2rem;
          }
        }
      `}</style>
      <Droplets style={{ right: -80, top: 40 }} color="rgba(0,218,227,0.12)" opacity={1} size={300} />
      <div className="footer-wrap-frsko">
        <div className="footer-main-frsko">
          <div className="footer-brand-frsko">
            <a href="/" aria-label="Ir al home de FRSKO" className="footer-logo-link-frsko">
              <img className="footer-logo-frsko" src="/ds/assets/frsko-logo-white.png" alt="FRSKO" />
            </a>
            <p className="footer-tagline-frsko">
              Donde la IA se convierte en resultados.
            </p>
            <p className="footer-copy-frsko">
              Agencia de marketing con IA en México. Clientes en MX, LATAM y USA.
            </p>
            <div aria-label="Redes sociales oficiales de FRSKO" className="footer-social-frsko">
              {socialLinks.map(n => (
                <a key={n.label} href={n.href} target="_blank" rel="noopener noreferrer" aria-label={`FRSKO en ${n.label}`} title={n.label} className="footer-social-link-frsko">
                  <i className={n.icon} aria-hidden="true"></i>
                </a>
              ))}
            </div>
          </div>
          <nav className="footer-nav-frsko" aria-label="Navegación del footer">
            {cols.map(c => (
              <div key={c.title}>
                <div className="footer-col-title-frsko">{c.title}</div>
                <ul className="footer-link-list-frsko">
                  {c.links.map(l => <li key={l.label}><a href={l.href} className="footer-link-frsko">{l.label}</a></li>)}
                </ul>
              </div>
            ))}
          </nav>
        </div>
        <div className="footer-bottom-frsko">
          <span>© 2026 FRSKO Marketing. Ciudad de México.</span>
          <div className="footer-legal-frsko">
            <a href="/privacidad">Aviso de privacidad</a>
            <a href="/terminos">Términos</a>
            <a href="/cookies">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Academy, Team, FinalCta, SiteFooter });