/* global React, Icon, Button */

// Glifos de marca propios (no todos existen como icono fiable en Lucide).
function TikTokGlyph({ size = 19 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden>
      <path d="M16.5 3c.36 2.08 1.6 3.55 3.7 3.78v2.45c-1.2.08-2.32-.22-3.5-.83v5.6c0 3.18-2.4 5.5-5.5 5.5-3.08 0-5.5-2.32-5.5-5.32 0-2.93 2.4-5.2 5.6-4.9v2.5c-.4-.1-.8-.16-1.2-.12-1.3.13-2.08 1.06-1.98 2.36.1 1.2 1.07 2.02 2.3 2 1.4-.02 2.28-1.02 2.28-2.6V3h3.3z" />
    </svg>
  );
}

function InstagramGlyph({ size = 19 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2"
      strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="2.5" y="2.5" width="19" height="19" rx="5.2" />
      <circle cx="12" cy="12" r="4.2" />
      <circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none" />
    </svg>
  );
}

function DiscordGlyph({ size = 19 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden>
      <path d="M20.32 4.37A19.79 19.79 0 0 0 15.45 3c-.21.38-.46.9-.63 1.31a18.27 18.27 0 0 0-5.64 0C9 3.9 8.74 3.38 8.53 3a19.74 19.74 0 0 0-4.88 1.37C.53 9.04-.32 13.58.1 18.06a19.9 19.9 0 0 0 6.07 3.07c.49-.67.93-1.38 1.3-2.13-.71-.27-1.4-.6-2.04-.99.17-.13.34-.26.5-.4a14.2 14.2 0 0 0 12.14 0c.17.14.33.27.5.4-.65.39-1.34.72-2.05.99.38.75.81 1.46 1.3 2.13a19.84 19.84 0 0 0 6.07-3.07c.5-5.18-.85-9.68-3.56-13.69ZM8.02 15.33c-1.18 0-2.15-1.09-2.15-2.42 0-1.33.95-2.42 2.15-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42Zm7.96 0c-1.18 0-2.15-1.09-2.15-2.42 0-1.33.95-2.42 2.15-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42Z" />
    </svg>
  );
}

const SOCIAL_GLYPHS = { tiktok: TikTokGlyph, instagram: InstagramGlyph, discord: DiscordGlyph };

function Footer({ onJoin }) {
  // El Discord NO va a la invitación directa: lleva al formulario (igual que el resto de CTAs).
  const socials = [
    { label: 'Instagram', href: 'https://www.instagram.com/camara_trader/', glyph: 'instagram' },
    { label: 'TikTok', href: 'https://www.tiktok.com/@camara_trader', glyph: 'tiktok' },
    { label: 'Discord', href: 'acceso.html?r=discord', glyph: 'discord', internal: true },
  ];
  return (
    <footer style={{ background: 'var(--surface-1)', borderTop: '1px solid var(--hairline)', padding: '56px 24px 40px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center', justifyContent: 'space-between',
          background: 'linear-gradient(100deg, var(--magenta-soft), var(--cyan-soft))',
          border: '1px solid var(--hairline)', borderRadius: 'var(--r-lg)', padding: 'clamp(22px,3vw,32px)', marginBottom: 48 }}>
          <div>
            <p style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 'clamp(20px,2.4vw,28px)',
              textTransform: 'uppercase', letterSpacing: '.02em', color: 'var(--fg-1)', margin: '0 0 6px' }}>
              Únete gratis al Discord del gremio
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--fg-2)', margin: 0 }}>
              El primer paso es gratis. Aquí empieza todo.
            </p>
          </div>
          <Button size="lg" onClick={onJoin} icon="message-circle">Entrar a la comunidad</Button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)', gap: 40, marginBottom: 44 }} className="cdt-footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 16 }}>
              <img src="assets/logo.png" alt="Cámara del Trader" style={{ height: 40 }} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15,
                letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-1)', maxWidth: 130, lineHeight: 1.1 }}>Cámara del Trader</span>
            </div>
            <p style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 14, letterSpacing: '.14em',
              textTransform: 'uppercase', color: 'var(--neon-cyan)', margin: '0 0 18px' }}>Forjando la nueva era del trading</p>
            <div style={{ display: 'flex', gap: 12 }}>
              {socials.map((s, i) => {
                const Glyph = SOCIAL_GLYPHS[s.glyph];
                const linkProps = s.internal ? {} : { target: '_blank', rel: 'noopener noreferrer' };
                return (
                  <a key={i} href={s.href} {...linkProps} aria-label={s.label}
                    style={{ width: 40, height: 40, borderRadius: 'var(--r-sm)',
                    background: 'var(--surface-3)', border: '1px solid var(--hairline)', display: 'flex',
                    alignItems: 'center', justifyContent: 'center', color: 'var(--fg-2)', transition: 'all 150ms ease' }}
                    onMouseEnter={e => { e.currentTarget.style.color = 'var(--neon-magenta)'; e.currentTarget.style.borderColor = 'rgba(255,0,127,.4)'; }}
                    onMouseLeave={e => { e.currentTarget.style.color = 'var(--fg-2)'; e.currentTarget.style.borderColor = 'var(--hairline)'; }}>
                    <Glyph size={19} />
                  </a>
                );
              })}
            </div>
          </div>

          <div>
            <h4 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 13, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--fg-3)', margin: '0 0 16px' }}>Academia</h4>
            {[['Comunidad', 'index.html#comunidad'], ['Filosofía', 'index.html#filosofia'], ['Formación', 'acceso.html?r=formacion'], ['Mentoría 1 a 1', 'acceso.html?r=mentoria']].map(([l, href], i) => (
              <a key={i} href={href} style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--fg-2)', textDecoration: 'none', marginBottom: 11 }}>{l}</a>
            ))}
          </div>

          <div>
            <h4 style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 13, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--fg-3)', margin: '0 0 16px' }}>Legal</h4>
            {['Aviso de riesgo', 'Política de privacidad', 'Términos y condiciones'].map((l, i) => (
              <a key={i} href="#" style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--fg-2)', textDecoration: 'none', marginBottom: 11 }}>{l}</a>
            ))}
          </div>
        </div>

        <div style={{ borderTop: '1px solid var(--divider)', paddingTop: 24 }}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, lineHeight: 1.6, color: 'var(--fg-3)', margin: '0 0 14px', maxWidth: 820 }}>
            <strong style={{ color: 'var(--fg-2)', fontWeight: 600 }}>Aviso de riesgo:</strong> el trading de futuros conlleva un alto nivel de riesgo y puede no ser
            adecuado para todos los inversores. Toda la información proporcionada tiene fines exclusivamente
            educativos y no constituye asesoramiento financiero. Las rentabilidades pasadas no garantizan resultados futuros.
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg-3)', margin: 0 }}>© 2026 Cámara del Trader. Todos los derechos reservados.</p>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;