// footer.jsx — CTA + stacked massive wordmark + crédito de desarrollo
function Footer({ t, lang }) {
  const year = new Date().getFullYear();
  return (
    <footer style={{
      background: 'var(--ink)', color: 'var(--bg)',
      paddingTop: 120, paddingBottom: 40, position: 'relative', overflow: 'hidden'
    }}>
      <div className="wrap" style={{ position: 'relative', zIndex: 3 }}>
        {/* CTA */}
        <div className="footer-cta" style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64,
          paddingBottom: 80, alignItems: 'end'
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--lime)', fontWeight: 600,
              marginBottom: 24, display: 'flex', alignItems: 'center', gap: 10
            }}>
              <span data-icon="sparkles" data-size="14" data-color="var(--lime)" aria-hidden="true"></span>
              {t.cta_brief.toUpperCase()}
            </div>
            <h3 className="display" style={{
              fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.92,
              fontWeight: 700
            }}>
              {t.ft_cta_a} <span className="irid-text" style={{ fontStyle: 'italic' }}>{t.ft_cta_b}</span>
            </h3>
          </div>
          <div>
            <a href="#contact" className="btn" style={{
              padding: '22px 32px', fontSize: 16,
              background: 'var(--lime)', color: 'var(--ink)', borderColor: 'var(--lime)'
            }}>
              {t.cta_brief} <span className="arrow">↗</span>
            </a>
          </div>
        </div>

        <div style={{ borderTop: '1.5px solid var(--bg)', paddingTop: 64 }}>
          <div className="footer-cols" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 80 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
                <AsteriskMark size={36} strokeColor="var(--bg)" />
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.03em' }}>
                  multiples<span style={{ color: 'var(--magenta)' }}>·</span>medios
                </span>
              </div>
              <p style={{ color: 'var(--ink-mute)', maxWidth: 360, fontSize: 14, lineHeight: 1.5 }}>
                {t.ft_made}
              </p>
            </div>
            {[
              { l: t.nav.studio, items: t.ft_studio, c: 'magenta' },
              { l: t.nav.work, items: t.ft_work, c: 'lime' },
              { l: 'Legal', items: t.ft_legal, links: t.ft_legal_links, c: 'azure' },
            ].map((col, i) => (
              <div key={i}>
                <div style={{
                  display: 'inline-block', padding: '4px 8px', marginBottom: 20,
                  background: `var(--${col.c})`,
                  color: col.c === 'lime' ? 'var(--ink)' : 'white',
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
                  borderRadius: 4
                }}>{col.l}</div>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {col.items.map((li, idx) => (
                    <li key={li}>
                      <a href={col.links ? col.links[idx] : '#'} className="footlink" style={{
                        color: 'var(--bg)', textDecoration: 'none', fontSize: 14,
                        transition: 'color 0.3s'
                      }}>{li}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Mega wordmark — Stacked Massive variante dark con fondo iridiscente animado */}
        <div style={{
          marginBottom: 40,
          padding: '24px 0',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <StackedMassive
            size="clamp(72px, 17vw, 280px)"
            align="center"
            variant="dark"
            animated={true}
          />
        </div>

        <div className="footer-meta" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 32, borderTop: '1.5px solid var(--bg)',
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.14em',
          color: 'var(--ink-mute)', textTransform: 'uppercase', flexWrap: 'wrap', gap: 16
        }}>
          <span>© {year} · MULTIPLES MEDIOS · {t.ft_rights}</span>
          <span>Bogotá · 04°36'N · 74°04'W</span>
          <span>v.{year}.{String(new Date().getMonth()+1).padStart(2,'0')}</span>
        </div>

        {/* Crédito de desarrollo */}
        <div style={{
          marginTop: 24, paddingTop: 16, textAlign: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
          color: 'var(--ink-mute)', textTransform: 'uppercase',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, flexWrap: 'wrap'
        }}>
          <span>{t.ft_dev_by}</span>
          <a href="#top" style={{
            color: 'var(--lime)', textDecoration: 'none', fontWeight: 700,
            display: 'inline-flex', alignItems: 'center', gap: 6
          }}>
            <AsteriskMark size={14} strokeColor="var(--lime)" />
            multiples · medios
          </a>
        </div>
      </div>

      <style>{`
        .footlink:hover { color: var(--lime) !important; }
        @media (max-width: 900px) {
          .footer-cta { grid-template-columns: 1fr !important; gap: 32px !important; }
          .footer-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
        }
        @media (max-width: 560px) {
          .footer-cols { grid-template-columns: 1fr !important; }
          .footer-meta { justify-content: flex-start !important; gap: 8px !important; }
          .footer-meta span { width: 100%; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });