// Stats + Conteúdos Programáticos (7 modules)
const Stats = () => {
  const { t } = useI18n();
  const stats = [
    { icon: 'clock', value: t('stats.0.value'), label: t('stats.0.label') },
    { icon: 'calendar', value: t('stats.1.value'), label: t('stats.1.label') },
    { icon: 'globe', value: t('stats.2.value'), label: t('stats.2.label') }];
  return (
  <section className="section" style={{ paddingTop: 60, paddingBottom: 60 }}>
    <div className="container">
      <h2 className="h-section reveal">{t('stats.title')}</h2>
      <p className="section-sub reveal">{t('stats.sub')}</p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="grid-3">
        {stats.
      map((s, i) =>
      <div key={i} className="card reveal" style={{ textAlign: 'center', padding: '36px 24px' }}>
            <div className="chip-icon" style={{ margin: '0 auto 20px', width: 48, height: 48 }}>
              <Icon name={s.icon} size={22} />
            </div>
            <div className="grad-text" style={{
          fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 8
        }}>{s.value}</div>
            <div style={{ color: 'var(--text-dim)', fontSize: 15 }}>{s.label}</div>
          </div>
      )}
      </div>
    </div>
    <style>{`
      @media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr !important; } }
    `}</style>
  </section>);
};


const MODULES = [
{
  n: '01', title: 'Introdução à IA Generativa', hours: 3, icon: 'sparkles',
  items: ['Timeline da IA Generativa', 'Definição de IA estatística e IA generativa', 'Arquiteturas, Modelos e Tokens', 'Como estar sempre atualizado', 'Players no mercado']
},
{
  n: '02', title: 'Ética e Mindset', hours: 3, icon: 'lightbulb',
  items: ['Tendências emergentes e casos práticos', 'O presente e o futuro do design com IA', 'Desafios éticos, regulamentação e o darkside', 'Mudança de mindset, recomendações e boas práticas', 'Exercício prático de conhecimentos']
},
{
  n: '03', title: 'Engenharia de Prompts', hours: 10, icon: 'search',
  items: ['Definição e bases do prompting', 'Engenharia de prompts', 'Criar e gerar textos para prompts', 'Exercícios práticos']
},
{
  n: '04', title: 'Investigação e Análise de Dados', hours: 10, icon: 'chart',
  items: ['A importância da investigação no design', 'Investigar com recurso à inteligência artificial', 'Gerar, editar e analisar dados', 'Exercícios práticos']
},
{
  n: '05', title: 'Criação e Edição de Imagem', hours: 10, icon: 'image',
  items: ['Benefícios na criação visual', 'Criação e geração de imagens', 'Edição e tratamento com IA', 'Exercícios práticos']
},
{
  n: '06', title: 'Criação de Vídeo e Som', hours: 10, icon: 'video',
  items: ['Criação e geração de vídeos com IA', 'Motion design assistido por IA', 'Ferramentas e fluxos de trabalho', 'Exercícios práticos']
},
{
  n: '07', title: 'Design de Interface Digital', hours: 10, icon: 'layers', highlight: true,
  items: ['Benefícios no UX/UI', 'Gerar personas e user flows', 'Gerar estrutura e wireframes', 'Gerar mood visual e estilos', 'Exercícios práticos']
}];


const Modules = () => {
  const { t, dict } = useI18n();
  return (
    <section className="section" id="conteudos">
      <div className="container">
        <h2 className="h-section reveal">{t('modules.title')}</h2>
        <p className="section-sub reveal">{t('modules.sub')}</p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="grid-modules">
          {MODULES.map((m, i) => {
            const tm = (dict.modules && dict.modules[i]) || m;
            return (
              <div
                key={m.n}
                className="card reveal"
                style={{
                  padding: 28,
                  background: m.highlight ? 'linear-gradient(180deg, rgba(124,92,255,0.08), var(--surface))' : 'var(--surface)',
                  borderColor: m.highlight ? 'rgba(124,92,255,0.25)' : 'var(--border)'
                }}>
                
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 18 }}>
                  <div className="chip-icon"><Icon name={m.icon} size={18} /></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ color: 'var(--text-muted)', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', marginBottom: 4 }}>
                      {t('modules.label')} {m.n}
                    </div>
                    <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>
                      {tm.title}
                    </h3>
                  </div>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--cyan)', fontSize: 13, marginBottom: 16 }}>
                  <Icon name="clock" size={13} /> <span>{m.hours} {t('modules.hours')}</span>
                </div>

                <ul style={{
                  margin: 0, padding: 0, listStyle: 'none',
                  display: 'grid', gap: 10
                }}>
                  {tm.items.map((it, j) =>
                  <li key={j} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 10,
                    fontSize: 14, color: 'var(--text-dim)',
                    lineHeight: 1.5
                  }}>
                      <span className="check-bullet"><Icon name="check" size={11} stroke={3} /></span>
                      <span>{it}</span>
                    </li>
                  )}
                </ul>
              </div>);

          })}

          {/* Push to Calendar — fills the empty space next to Módulo 07 on desktop */}
          <a href="#calendario" className="modules-cta reveal" style={{
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            padding: 28, borderRadius: 'var(--r-lg)',
            background: 'linear-gradient(160deg, rgba(124,92,255,0.22) 0%, rgba(124,92,255,0.10) 60%, rgba(124,92,255,0.06) 100%)',
            border: '1px solid rgba(124,92,255,0.35)',
            position: 'relative', overflow: 'hidden',
            textDecoration: 'none', color: 'inherit',
            transition: 'transform 0.25s ease, border-color 0.25s ease'
          }}>
            {/* ambient halo */}
            <div aria-hidden="true" style={{
              position: 'absolute', width: 280, height: 280, top: -120, right: -80,
              borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(124,92,255,0.32), transparent 60%)',
              filter: 'blur(40px)', pointerEvents: 'none'
            }} />

            <div style={{ position: 'relative', zIndex: 1 }}>
              <h3 style={{
                margin: 0, fontSize: 'clamp(28px, 2.6vw, 38px)', fontWeight: 700,
                letterSpacing: '-0.025em', lineHeight: 1.2
              }}>
                {t('modules.ctaPre')}<span className="grad-text">{t('modules.ctaGrad')}</span>
              </h3>
            </div>

            <div style={{
              position: 'relative', zIndex: 1, marginTop: 28,
              display: 'flex', alignItems: 'center', gap: 14
            }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '12px 18px', borderRadius: 12,
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
                fontSize: 14, fontWeight: 600
              }}>
                {t('modules.ctaBtn')} <Icon name="arrow-right" size={14} />
              </span>
            </div>
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) { .grid-modules { grid-template-columns: 1fr !important; } }
        .modules-cta:hover { transform: translateY(-2px); border-color: rgba(124,92,255,0.55) !important; }
      `}</style>
    </section>);

};

Object.assign(window, { Stats, Modules });