const ScreenTrilhas = ({ go }) => {
  const { trilhas } = VELYX;

  return (
    <div className="max-w-[1360px] mx-auto px-10 py-10" data-screen-label="02 Trilhas">
      <PageHeader
        eyebrow="Aprendizado"
        title="Trilhas"
        desc="Seis trilhas que levam seu time do zero a uma operação de atendimento com IA em produção."
        right={
          <div className="flex items-center gap-2">
            <Badge tone="neutral">{trilhas.length} trilhas</Badge>
            <Badge tone="neutral">64 módulos</Badge>
          </div>
        }
      />

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {trilhas.map((t) => (
          <TrilhaCard key={t.id} t={t} go={go}/>
        ))}
      </div>
    </div>
  );
};

const TrilhaCard = ({ t, go }) => {
  const statusCopy = t.status === 'concluido' ? 'Concluído' : t.status === 'em-andamento' ? 'Em andamento' : 'Não iniciado';
  return (
    <Card hover onClick={() => go({ name: 'trilha', id: t.id })}
      className="p-6 group relative overflow-hidden">

      {t.live && (
        <div className="absolute top-4 right-4 flex items-center gap-1.5 text-[10.5px] font-mono uppercase tracking-wider text-accent">
          <span className="relative flex w-1.5 h-1.5">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-60"/>
            <span className="relative inline-flex rounded-full w-1.5 h-1.5 bg-accent"/>
          </span>
          Ao vivo
        </div>
      )}

      <div className="flex items-start gap-4 mb-6">
        <div className="font-mono text-[11px] text-mute2 pt-1">{t.num}</div>
        <div className="flex-1 min-w-0">
          <h3 className="text-[18px] font-semibold text-ink tracking-tightest leading-snug mb-1.5 group-hover:text-accent t-fast">
            {t.name}
          </h3>
          <p className="text-mute text-[13.5px] leading-relaxed">{t.desc}</p>
        </div>
      </div>

      <div className="flex items-center gap-4 text-[12px] text-mute mb-4 pl-9">
        <span className="flex items-center gap-1.5"><I.list size={13}/> {t.modules} módulos</span>
        <span className="text-mute2">·</span>
        <span className="flex items-center gap-1.5"><I.clock size={13}/> {t.hours}</span>
      </div>

      <div className="pl-9">
        <div className="flex items-center justify-between mb-1.5">
          <StatusLabel status={t.status}/>
          <span className="text-mute text-[11px] font-mono">{Math.round(t.progress*100)}%</span>
        </div>
        <Progress value={t.progress}/>
      </div>
    </Card>
  );
};

window.ScreenTrilhas = ScreenTrilhas;