// Footer Kit Digital — banda obligatoria de financiación NextGen / PRTR / Kit Digital.
// Acepta theme="dark" o theme="light" para integrar con cada variante.
// La banda central de financiación SIEMPRE va sobre fondo claro para respetar
// los colores oficiales (UE azul/oro, España rojo/amarillo, etc.)

(() => {
  const C = window.FE_CONTENT;

  // ─── SVG: bandera UE ───
  function FlagEU({ width = 56 }) {
    const stars = [];
    // 12 estrellas en círculo
    for (let i = 0; i < 12; i++) {
      const a = (i / 12) * Math.PI * 2 - Math.PI / 2;
      const cx = 22 + Math.cos(a) * 9;
      const cy = 15 + Math.sin(a) * 9;
      // pequeña estrella 5 puntas
      const points = [];
      for (let p = 0; p < 10; p++) {
        const r = p % 2 === 0 ? 1.6 : 0.65;
        const pa = (p / 10) * Math.PI * 2 - Math.PI / 2;
        points.push(`${cx + Math.cos(pa) * r},${cy + Math.sin(pa) * r}`);
      }
      stars.push(<polygon key={i} points={points.join(' ')} fill="#FFCC00"/>);
    }
    return (
      <svg viewBox="0 0 44 30" width={width} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', borderRadius: 2 }}>
        <rect width="44" height="30" fill="#003399"/>
        {stars}
      </svg>
    );
  }

  // ─── SVG: bandera España ───
  function FlagES({ width = 40 }) {
    return (
      <svg viewBox="0 0 30 20" width={width} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', borderRadius: 2 }}>
        <rect x="0" y="0" width="30" height="5" fill="#aa151b"/>
        <rect x="0" y="5" width="30" height="10" fill="#f1bf00"/>
        <rect x="0" y="15" width="30" height="5" fill="#aa151b"/>
      </svg>
    );
  }

  // ─── Logo PRTR (placeholder cuidado: rombo con flecha) ───
  function PRTRMark({ size = 44 }) {
    return (
      <svg viewBox="0 0 48 48" width={size} height={size} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
        <rect x="2" y="2" width="44" height="44" rx="3" fill="#0a3d62"/>
        <path d="M14 30 L24 14 L34 30 Z" fill="none" stroke="#ffc400" strokeWidth="2.4"/>
        <circle cx="24" cy="32" r="2.4" fill="#ffc400"/>
      </svg>
    );
  }

  // ─── Marca Kit Digital ───
  function KitDigitalMark({ size = 80 }) {
    return (
      <div style={{
        background: '#fff', border: '1px solid #e1ddd0',
        padding: '10px 16px', display: 'inline-flex',
        flexDirection: 'column', gap: 2, lineHeight: 1,
      }}>
        <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 9, letterSpacing: '0.18em', color: '#7a7a72', textTransform: 'uppercase' }}>Programa</span>
        <span style={{ fontFamily: "'Cormorant Garamond', serif", fontWeight: 400, fontSize: 22, color: '#111', letterSpacing: '-0.01em' }}>Kit Digital</span>
        <div style={{ width: 32, height: 2, background: '#00b31b', marginTop: 4 }}/>
      </div>
    );
  }

  // ─── Bloque entidad ───
  function EntityBlock({ flag, label, sub, accent = '#00b31b' }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
        <div style={{ flexShrink: 0 }}>{flag}</div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 500, color: '#111', lineHeight: 1.3, letterSpacing: '-0.005em' }}>{label}</div>
          <div style={{ fontSize: 10.5, color: '#6b6b6b', lineHeight: 1.4, marginTop: 2 }}>{sub}</div>
        </div>
      </div>
    );
  }

  // ─── Componente principal ───
  // theme: 'dark' o 'light'
  // accent: color de acento (verde marca)
  function KitDigitalFooter({ theme = 'dark', accent = '#00b31b' }) {
    const dark = theme === 'dark';
    const palette = dark ? {
      bg: '#0a0a0a',
      text: 'rgba(255,255,255,0.7)',
      heading: '#ffffff',
      muted: 'rgba(255,255,255,0.5)',
      faint: 'rgba(255,255,255,0.35)',
      border: 'rgba(255,255,255,0.12)',
      botBg: '#000000',
    } : {
      bg: '#f5f4ee',
      text: '#3a3a3a',
      heading: '#111111',
      muted: '#6b6b6b',
      faint: '#8a8a82',
      border: '#dedcd2',
      botBg: '#e9e6da',
    };

    return (
      <footer style={{ background: palette.bg, color: palette.text, fontFamily: "'DM Sans', sans-serif" }}>
        {/* ───────── Top: brand + nav + contacto ───────── */}
        <div style={{
          padding: '72px 56px 56px',
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr',
          gap: 48,
          alignItems: 'start',
        }}>
          <div>
            <window.FeijooLogo mode={dark ? 'dark' : 'default'} width={170}/>
            <p style={{ marginTop: 24, fontSize: 14, lineHeight: 1.7, color: palette.muted, maxWidth: 320 }}>
              {C.footer.tagline} Desarrolladora independiente de proyectos renovables con sede en A Coruña.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
              {['LinkedIn', 'Instagram', 'X'].map(s => (
                <a key={s} style={{
                  fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
                  fontWeight: 500,
                  color: palette.muted,
                  border: `1px solid ${palette.border}`,
                  padding: '6px 12px',
                  textDecoration: 'none',
                }}>{s}</a>
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent, marginBottom: 18, fontWeight: 500 }}>Navegación</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 11 }}>
              {['Inicio', 'Empresa', 'Servicios', 'Proyectos', 'Compromiso', 'Contacto'].map(l => (
                <li key={l}><a style={{ fontSize: 13.5, color: palette.text, textDecoration: 'none' }}>{l}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent, marginBottom: 18, fontWeight: 500 }}>Servicios</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 11 }}>
              {['Energía eólica', 'Energía solar', 'Almacenamiento', 'Hidrógeno verde', 'Empresa del grupo'].map(l => (
                <li key={l}><a style={{ fontSize: 13.5, color: palette.text, textDecoration: 'none' }}>{l}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent, marginBottom: 18, fontWeight: 500 }}>Contacto</div>
            <div style={{ fontSize: 13.5, lineHeight: 1.75, color: palette.text }}>
              {C.contact.addr[0]}<br/>
              {C.contact.addr[1]}<br/><br/>
              <a style={{ color: palette.text, textDecoration: 'none' }}>{C.contact.phone}</a><br/>
              <a style={{ color: palette.heading, textDecoration: 'none', borderBottom: `1px solid ${accent}`, paddingBottom: 2 }}>{C.contact.email}</a>
            </div>
          </div>
        </div>

        {/* ───────── Divider ───────── */}
        <div style={{ borderTop: `1px solid ${palette.border}`, margin: '0 56px' }}/>

        {/* ───────── Banda financiación (siempre fondo claro) ───────── */}
        <div style={{ background: '#fafaf6', padding: '36px 56px', borderTop: dark ? `1px solid ${accent}` : 'none' }}>
          {/* etiqueta superior */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            marginBottom: 24,
          }}>
            <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10.5, letterSpacing: '0.2em', color: '#7a7a72', textTransform: 'uppercase' }}>Financiado por</span>
            <span style={{ flex: 1, height: 1, background: '#dedcd2' }}/>
            <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 10.5, letterSpacing: '0.18em', color: '#00b31b' }}>Convocatoria 2024-2026</span>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.3fr 1px 1.3fr 1px 1.3fr 1px 1fr',
            gap: 28,
            alignItems: 'center',
          }}>
            <EntityBlock
              flag={<FlagEU width={56}/>}
              label="Financiado por la Unión Europea"
              sub="NextGenerationEU"
            />
            <div style={{ width: 1, height: 56, background: '#dedcd2' }}/>
            <EntityBlock
              flag={<PRTRMark size={44}/>}
              label="Plan de Recuperación,"
              sub="Transformación y Resiliencia"
            />
            <div style={{ width: 1, height: 56, background: '#dedcd2' }}/>
            <EntityBlock
              flag={<FlagES width={44}/>}
              label="Gobierno de España"
              sub={<>Ministerio para la Transición<br/>Ecológica y el Reto Demográfico</>}
            />
            <div style={{ width: 1, height: 56, background: '#dedcd2' }}/>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <KitDigitalMark/>
            </div>
          </div>
        </div>

        {/* ───────── Bottom: copyright + legal ───────── */}
        <div style={{
          background: palette.botBg,
          padding: '20px 56px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 16,
          fontSize: 12,
          color: palette.faint,
          borderTop: dark ? '1px solid rgba(255,255,255,0.06)' : `1px solid ${palette.border}`,
        }}>
          <span style={{ fontFamily: "'DM Mono', monospace", letterSpacing: '0.06em' }}>
            © 2025 FEIJOO ENERGY S.L. · CIF B-70123456 · A CORUÑA, ESPAÑA
          </span>
          <div style={{ display: 'flex', gap: 24 }}>
            {['Aviso legal', 'Política de privacidad', 'Política de cookies', 'Accesibilidad'].map(l => (
              <a key={l} style={{ color: palette.faint, textDecoration: 'none', fontSize: 12 }}>{l}</a>
            ))}
          </div>
        </div>
      </footer>
    );
  }

  window.KitDigitalFooter = KitDigitalFooter;
})();
