function CommunityPage() {
  const { Icon, BrandIcon } = window.MarceloCasteloIODesignSystem_5e00d7;
  const channels = [
    { name: 'Discord', description: 'Encontros ao vivo, debates técnicos e a comunidade principal.', stat: '+3.400 membros', brand: 'discord' },
    { name: 'YouTube', description: 'Lives, cortes técnicos e conteúdo de arquitetura em vídeo.', stat: '+40 mil inscritos', brand: 'youtube' },
    { name: 'GitHub', description: 'Projetos abertos, bibliotecas e experimentos públicos.', stat: '+1.200 stars', brand: 'github' },
  ];
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>Comunidade</div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', margin: '0 0 8px', lineHeight: 'var(--leading-tight)' }}>Um espaço para trocar experiências técnicas</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-secondary)', maxWidth: 640, margin: '0 0 var(--space-7)' }}>Desenvolvedores e arquitetos discutindo decisões reais de arquitetura, carreira e engenharia enterprise.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)', marginBottom: 'var(--space-8)' }}>
        {channels.map(c => (
          <div key={c.name} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 10, boxShadow: 'var(--shadow-sm)' }}>
            <BrandIcon name={c.brand} size={20} style={{ color: 'var(--accent-strong)' }} />
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--text-primary)' }}>{c.name}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>{c.description}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent-strong)' }}>{c.stat}</div>
          </div>
        ))}
      </div>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-5)' }}>Destaques recentes</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
        {[
          { kind: 'Artigo', title: 'Filas e consistência eventual em sistemas distribuídos', slotId: 'highlight-article' },
          { kind: 'Projeto', title: 'flowqueue — biblioteca open source', slotId: 'highlight-project' },
          { kind: 'Treinamento', title: 'Sistemas distribuídos na prática', slotId: 'highlight-training' },
        ].map(h => (
          <div key={h.title} style={{ position: 'relative', aspectRatio: '4/3', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
            <image-slot id={h.slotId} shape="rect" placeholder="Imagem de fundo"></image-slot>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%)' }}></div>
            <div style={{ position: 'absolute', left: 10, bottom: 10, right: 10, display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 'var(--radius-md)', background: 'rgba(20,22,20,0.55)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.14)' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--accent)' }}>{h.kind}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#fff', lineHeight: 1.25, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{h.title}</span>
              </div>
              <button style={{ marginLeft: 'auto', flexShrink: 0, background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-pill)', padding: '7px 14px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}>Ver</button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
Object.assign(window, { CommunityPage });