// ============================================================================
// Página de Trilhas (Treinamento e Desenvolvimento)
// ============================================================================

function PageTrilhas({ go, open }) {
  const [level, setLevel] = useState('todos');
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader
        eyebrow="04 · Treinamento e Desenvolvimento"
        title={<>Trilhas de aprendizado <em style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', color: 'var(--amber)' }}>vivas</em>.</>}
        sub="As trilhas combinam playbooks, manuais, pílulas e role-plays em uma ordem que faz sentido. Use o Onboarding nos primeiros 30 dias e as trilhas por área para reciclagem."
        cta={[{ label: 'Sugerir nova trilha', kind: 'ghost' }, { label: 'Minhas trilhas', kind: 'primary' }]}
      />

      {/* Trilha em destaque */}
      <FeaturedTrilha />

      <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '36px 0 18px' }}>
        <h3 style={{ margin: 0, fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>Todas as trilhas</h3>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          {['Todos', 'Iniciante', 'Veterano', 'Expert'].map(l => (
            <Chip key={l} active={level === l.toLowerCase() || (l === 'Todos' && level === 'todos')}>{l}</Chip>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {TRILHAS.map(t => <TrilhaCard key={t.id} t={t} go={go}/>)}
      </div>

      {/* Próximas aulas + estatísticas */}
      <TrilhaProxAulas />
    </div>
  );
}

function FeaturedTrilha() {
  const t = TRILHAS[1]; // Trilha Comercial
  return (
    <div style={{
      background: 'var(--navy)', color: '#fff', borderRadius: 22,
      padding: '32px 36px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32,
      position: 'relative', overflow: 'hidden',
    }}>
      <div>
        <Pill tone="dark" style={{ background: 'rgba(232,155,44,.2)', color: '#F0B656', borderColor: 'rgba(232,155,44,.35)' }}>Trilha em destaque · {t.tag}</Pill>
        <h2 style={{ margin: '14px 0 8px', fontFamily: 'Instrument Serif, serif', fontWeight: 400, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em' }}>{t.title}</h2>
        <p style={{ margin: 0, fontSize: 14, color: 'rgba(255,255,255,.78)', lineHeight: 1.55, maxWidth: 520 }}>{t.desc}</p>

        <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 22, fontSize: 12, color: 'rgba(255,255,255,.7)' }}>
          <span>{t.items} conteúdos</span><span>·</span>
          <span>{t.hours}</span><span>·</span>
          <span>4 playbooks · 6 manuais</span>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 22 }}>
          <button style={{ background: 'var(--amber)', color: 'var(--navy)', padding: '12px 18px', borderRadius: 10, fontWeight: 700, fontSize: 13 }}>Continuar trilha · 41%</button>
          <button style={{ background: 'transparent', color: '#fff', padding: '12px 18px', borderRadius: 10, fontWeight: 600, fontSize: 13, border: '1px solid rgba(255,255,255,.25)' }}>Ver programa →</button>
        </div>

        {/* progresso visual da trilha por capítulo */}
        <div style={{ marginTop: 24 }}>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)', letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 8 }}>Progresso por bloco</div>
          <div style={{ display: 'flex', gap: 4 }}>
            {[100,100,100,76,40,0,0,0,0,0,0,0].map((v, i) => (
              <div key={i} style={{ flex: 1, height: 26, borderRadius: 4, background: 'rgba(255,255,255,.08)', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, width: `${v}%`, background: 'var(--amber)' }}/>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* lado direito — lista visual de blocos */}
      <div style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 16, padding: 18 }}>
        <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)', letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 12 }}>Programa</div>
        {[
          { s: 'done', t: 'Introdução · cultura Ampexx', d: '14 min' },
          { s: 'done', t: 'Os 4 produtos em 20 minutos', d: '22 min' },
          { s: 'done', t: 'Playbook · Usinas de Investimento', d: '38 min' },
          { s: 'now',  t: 'Playbook · Energia por Assinatura', d: '24 min' },
          { s: 'todo', t: 'Diagnóstico em 7 perguntas', d: '12 min' },
          { s: 'todo', t: 'Objeções por produto', d: '28 min' },
          { s: 'todo', t: 'Roleplay · reunião comercial', d: '45 min' },
        ].map((b, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 0', borderBottom: i < 6 ? '1px solid rgba(255,255,255,.08)' : 'none',
          }}>
            <BlockMark s={b.s}/>
            <div style={{ flex: 1, fontSize: 12.5, color: b.s === 'now' ? '#fff' : b.s === 'done' ? 'rgba(255,255,255,.55)' : 'rgba(255,255,255,.75)', textDecoration: b.s === 'done' ? 'line-through' : 'none' }}>
              {b.t}
            </div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,.5)' }}>{b.d}</div>
          </div>
        ))}
      </div>

      <div style={{ position: 'absolute', right: -80, top: -80, width: 280, height: 280, borderRadius: 999, background: 'radial-gradient(circle, rgba(232,155,44,.18), transparent 70%)' }}/>
    </div>
  );
}

function BlockMark({ s }) {
  if (s === 'done') return <div style={{ width: 20, height: 20, borderRadius: 99, background: 'var(--amber)', display: 'grid', placeItems: 'center', color: 'var(--navy)' }}><Icon.check s={11}/></div>;
  if (s === 'now')  return <div style={{ width: 20, height: 20, borderRadius: 99, background: '#fff', display: 'grid', placeItems: 'center' }}><Icon.play s={9}/></div>;
  return <div style={{ width: 20, height: 20, borderRadius: 99, border: '1.5px solid rgba(255,255,255,.25)' }}/>;
}

function TrilhaProxAulas() {
  return (
    <section style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 22 }}>
      <Card style={{ padding: 24 }}>
        <SectionHead eyebrow="Sua agenda" title="Próximas aulas ao vivo" action="Ver agenda completa"/>
        {[
          { d: '22·mai', h: '10:00', t: 'Roleplay · objeções em Energia por Assinatura', host: 'Coord. Comercial' },
          { d: '24·mai', h: '15:00', t: 'Atualização do Wattio · novos campos', host: 'Engenharia' },
          { d: '27·mai', h: '09:30', t: 'Reciclagem · padrões de WhatsApp', host: 'Atendimento' },
          { d: '29·mai', h: '14:00', t: 'Cases de homologação · 1º trimestre', host: 'Engenharia' },
        ].map((a, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 1fr 110px', alignItems: 'center', padding: '14px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
            <div>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, fontWeight: 600 }}>{a.d}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{a.h}</div>
            </div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{a.t}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{a.host}</div>
            <button style={{ padding: '7px 12px', borderRadius: 8, background: 'var(--bg-2)', fontSize: 12, fontWeight: 600 }}>Inscrever-se</button>
          </div>
        ))}
      </Card>
      <Card style={{ padding: 24, background: 'var(--amber-soft)', borderColor: 'rgba(232,155,44,.25)' }}>
        <Pill tone="amber"><Icon.star s={11}/> Programa Ampexx</Pill>
        <h3 style={{ margin: '14px 0 8px', fontFamily: 'Instrument Serif, serif', fontWeight: 400, fontSize: 26, lineHeight: 1.05 }}>
          Certificação Comercial Ampexx
        </h3>
        <p style={{ margin: 0, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55 }}>
          Conclua a Trilha Comercial e o Roleplay com avaliação superior a 80% para liberar a certificação interna.
        </p>
        <div style={{ marginTop: 16 }}>
          <Progress value={62} color="var(--rust)"/>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>62% concluído</div>
        </div>
        <button style={{ marginTop: 16, padding: '10px 14px', borderRadius: 10, background: 'var(--navy)', color: '#fff', fontWeight: 600, fontSize: 12.5 }}>Ver requisitos</button>
      </Card>
    </section>
  );
}

Object.assign(window, { PageTrilhas, TrilhaProxAulas });