const { useState } = React;

const T_SOCIAL = {
  es: {
    title: 'Síguenos en Redes Sociales',
    tiktokDesc: 'Contenido educativo sobre inversiones, análisis de mercado y tips financieros en formato corto.',
    youtubeDesc: 'Análisis profundos, tutoriales de inversión, estrategias y cobertura de mercados en tiempo real.',
    follow: 'Seguir en TikTok',
    subscribe: 'Suscribirse al Canal',
    posts: 'publicaciones',
    latest: 'Últimos videos',
    viewAll: 'Ver todos los videos',
  },
  en: {
    title: 'Follow Us on Social Media',
    tiktokDesc: 'Educational content about investing, market analysis and financial tips in short format.',
    youtubeDesc: 'Deep analysis, investment tutorials, strategies and real-time market coverage.',
    follow: 'Follow on TikTok',
    subscribe: 'Subscribe to Channel',
    posts: 'posts',
    latest: 'Latest videos',
    viewAll: 'View all videos',
  }
};

const YT_VIDEOS = [
  { id: 'dQw4w9WgXcQ', title: 'Análisis S&P 500 — Abril 2026', views: '12K', ago: '2d' },
  { id: 'dQw4w9WgXcQ', title: 'Top 5 ETFs para 2026', views: '28K', ago: '1w' },
  { id: 'dQw4w9WgXcQ', title: 'Bitcoin: ¿Qué esperar este ciclo?', views: '45K', ago: '2w' },
];

function SocialSection({ lang, onNav }) {
  const t = T_SOCIAL[lang] || T_SOCIAL.es;
  const [hoveredVideo, setHoveredVideo] = useState(null);

  return (
    <div>
      <div className="sec-label">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
        {t.title}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="two-col">

        {/* TikTok */}
        <div style={{ background: 'var(--card2)', border: '1px solid var(--border)', borderRadius: 'var(--rl)', overflow: 'hidden' }}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.79 1.53V6.77a4.85 4.85 0 01-1.02-.08z"/></svg>
            </div>
            <div>
              <div style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 14, color: 'var(--text)' }}>@insidewallstreet</div>
              <div style={{ fontSize: 11, color: 'var(--muted)' }}>TikTok</div>
            </div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 16 }}>
              {[['89K','Seguidores'],['312','Videos'],['2.1M','Likes']].map(([n,l]) => (
                <div key={l} style={{ textAlign: 'center' }}>
                  <div style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 13, color: 'var(--text)' }}>{n}</div>
                  <div style={{ fontSize: 10, color: 'var(--muted)' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 14, lineHeight: 1.5 }}>{t.tiktokDesc}</div>
            {/* Placeholder clips grid */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginBottom: 14 }}>
              {[
                ['Análisis NVDA', '#c9a84c'],
                ['S&P 500 ¿crash?', '#f06b6b'],
                ['ETF para principiantes', '#3dd68c'],
              ].map(([label, color]) => (
                <div key={label} style={{ aspectRatio: '9/16', background: 'var(--bg2)', border: '1px solid var(--border)', borderRadius: 6, overflow: 'hidden', position: 'relative', display: 'flex', alignItems: 'flex-end', cursor: 'pointer' }}>
                  <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${color}22 0%, transparent 60%)` }}></div>
                  <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 28, height: 28, borderRadius: '50%', background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="white"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                  </div>
                  <div style={{ padding: 6, fontSize: 9, color: 'var(--text)', fontWeight: 600, lineHeight: 1.3, zIndex: 1, background: 'linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%)', width: '100%' }}>{label}</div>
                </div>
              ))}
            </div>
            <a href="https://www.tiktok.com/@insidewallstreet" target="_blank" rel="noopener noreferrer"
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '9px 16px', background: '#000', border: '1px solid #333', borderRadius: 8, color: 'white', textDecoration: 'none', fontSize: 13, fontWeight: 600, fontFamily: 'DM Sans, sans-serif', transition: 'opacity 0.15s' }}
              onMouseEnter={e => e.currentTarget.style.opacity='0.8'}
              onMouseLeave={e => e.currentTarget.style.opacity='1'}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="white"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.79 1.53V6.77a4.85 4.85 0 01-1.02-.08z"/></svg>
              {t.follow}
            </a>
          </div>
        </div>

        {/* YouTube */}
        <div style={{ background: 'var(--card2)', border: '1px solid var(--border)', borderRadius: 'var(--rl)', overflow: 'hidden' }}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: '#ff0000', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 001.46 6.42 29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.4a2.78 2.78 0 001.95-1.97A29 29 0 0023 12a29 29 0 00-.46-5.58z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="#ff0000"/></svg>
            </div>
            <div>
              <div style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 14, color: 'var(--text)' }}>@InsideWallStreet</div>
              <div style={{ fontSize: 11, color: 'var(--muted)' }}>YouTube</div>
            </div>
            <div style={{ marginLeft: 'auto', display: 'flex', gap: 16 }}>
              {[['42K','Suscriptores'],['156','Videos'],['3.8M','Vistas']].map(([n,l]) => (
                <div key={l} style={{ textAlign: 'center' }}>
                  <div style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 13, color: 'var(--text)' }}>{n}</div>
                  <div style={{ fontSize: 10, color: 'var(--muted)' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 14, lineHeight: 1.5 }}>{t.youtubeDesc}</div>
            {/* Latest video embed */}
            <div style={{ borderRadius: 8, overflow: 'hidden', marginBottom: 14, position: 'relative', paddingBottom: '56.25%', height: 0 }}>
              <iframe
                src="https://www.youtube.com/embed?listType=user_uploads&list=InsideWallStreet&autoplay=0"
                style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                title="Inside Wall Street YouTube"
              />
            </div>
            <a href="https://www.youtube.com/@InsideWallStreet" target="_blank" rel="noopener noreferrer"
              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '9px 16px', background: '#ff0000', border: '1px solid #cc0000', borderRadius: 8, color: 'white', textDecoration: 'none', fontSize: 13, fontWeight: 600, fontFamily: 'DM Sans, sans-serif', transition: 'opacity 0.15s' }}
              onMouseEnter={e => e.currentTarget.style.opacity='0.85'}
              onMouseLeave={e => e.currentTarget.style.opacity='1'}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
              {t.subscribe}
            </a>
          </div>
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { SocialSection });