const ScreenTrilha = ({ id, go }) => {
  const trilha = VELYX.trilhas.find(t => t.id === id) || VELYX.trilhas[0];
  const modulos = VELYX.modulos[trilha.id] || VELYX.modulos.fundamentos;
  const done = modulos.filter(m => m.status === 'concluido').length;

  return (
    <div className="max-w-[980px] mx-auto px-10 py-10" data-screen-label={`Trilha · ${trilha.name}`}>
      {/* Breadcrumb */}
      <button onClick={() => go({ name: 'trilhas' })}
        className="flex items-center gap-1.5 text-mute hover:text-ink t-fast text-[12.5px] mb-6">
        <I.chevLeft size={14}/> Todas as trilhas
      </button>

      {/* Header */}
      <div className="flex items-start gap-6 pb-8 mb-8 border-b border-line">
        <div className="font-mono text-[12px] text-mute2 pt-2">{trilha.num}</div>
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-3">
            <StatusLabel status={trilha.status}/>
            {trilha.live && <Badge tone="accent">Ao vivo</Badge>}
          </div>
          <h1 className="text-[32px] leading-[1.1] font-semibold tracking-tightest text-ink mb-3">
            {trilha.name}
          </h1>
          <p className="text-mute text-[15px] leading-relaxed max-w-2xl mb-6">{trilha.desc}</p>

          <div className="flex items-center gap-6 text-[12.5px] text-mute mb-5">
            <span className="flex items-center gap-1.5"><I.list size={13}/> {trilha.modules} módulos</span>
            <span className="flex items-center gap-1.5"><I.clock size={13}/> {trilha.hours}</span>
            <span className="flex items-center gap-1.5"><I.award size={13}/> Certificação</span>
          </div>

          <div className="max-w-md">
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-mute text-[12px]">{done} de {modulos.length} concluídos</span>
              <span className="text-ink text-[12px] font-mono">{Math.round(trilha.progress*100)}%</span>
            </div>
            <Progress value={trilha.progress}/>
          </div>
        </div>
        <Button variant="primary" size="lg" icon={<I.play size={14}/>}
          onClick={() => {
            const next = modulos.find(m => m.current) || modulos.find(m => m.status !== 'concluido') || modulos[0];
            go({ name: 'modulo', trilha: trilha.id, modulo: next.id });
          }}>
          Continuar
        </Button>
      </div>

      {/* Modules list */}
      <div>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-[14px] text-mute font-mono uppercase tracking-[0.12em]">Módulos</h2>
        </div>

        <div className="rounded-[10px] hairline overflow-hidden bg-panel">
          {modulos.map((m, i) => (
            <button key={m.id}
              onClick={() => go({ name: 'modulo', trilha: trilha.id, modulo: m.id })}
              className={`w-full flex items-center gap-4 px-5 py-4 text-left t-fast hover:bg-panel2 ${i !== modulos.length-1 ? 'border-b border-line' : ''} ${m.current ? 'bg-white/[0.02]' : ''}`}>
              <StatusPip status={m.status}/>
              <div className="font-mono text-[11.5px] text-mute2 w-8">{String(m.n).padStart(2,'0')}</div>
              <div className="flex-1 min-w-0">
                <div className={`text-[14px] font-medium ${m.status === 'concluido' ? 'text-mute' : 'text-ink'} truncate`}>
                  {m.title}
                </div>
                {m.current && <div className="text-accent text-[11px] font-mono uppercase tracking-wide mt-0.5">Aula atual</div>}
              </div>
              <div className="flex items-center gap-1.5 text-mute text-[12px]">
                <I.clock size={12}/> {m.dur}
              </div>
              <I.chevRight size={14} className="text-mute2"/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.ScreenTrilha = ScreenTrilha;