const ScreenCert = () => {
  const { certs } = VELYX;

  return (
    <div className="max-w-[1360px] mx-auto px-10 py-10" data-screen-label="08 Certificações">
      <PageHeader
        eyebrow="Comprovação"
        title="Certificações"
        desc="Uma certificação por trilha core. Conclua todos os módulos e emita um PDF assinado em segundos."
        right={<Badge tone="accent">1 emitida</Badge>}
      />

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {certs.map(c => <CertCard key={c.id} c={c}/>)}
      </div>
    </div>
  );
};

const CertCard = ({ c }) => {
  const done = c.status === 'concluido';
  return (
    <Card className={`p-6 ${done ? 'relative overflow-hidden' : ''}`}>
      {done && <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent"/>}

      <div className="flex items-start gap-5 mb-6">
        <div className={`w-14 h-14 rounded-[10px] flex items-center justify-center shrink-0
          ${done ? 'bg-accent text-black' : 'bg-white/[0.04] hairline text-mute'}`}>
          <I.award size={26}/>
        </div>
        <div className="flex-1 min-w-0 pt-1">
          <StatusLabel status={c.status}/>
          <h3 className="text-[17px] font-semibold text-ink tracking-tightest mt-1.5 leading-snug">
            {c.trilha}
          </h3>
        </div>
      </div>

      {done ? (
        <div>
          <div className="p-4 rounded-[8px] hairline mb-4">
            <div className="flex items-center justify-between mb-1">
              <span className="text-mute text-[11.5px] font-mono uppercase tracking-wide">Emitido em</span>
              <span className="text-ink text-[12.5px] font-mono">{c.date}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-mute text-[11.5px] font-mono uppercase tracking-wide">Código</span>
              <span className="text-ink text-[12.5px] font-mono">{c.code}</span>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="primary" size="md" icon={<I.download size={13}/>}>Baixar PDF</Button>
            <Button variant="secondary" size="md" icon={<I.ext size={13}/>}>Compartilhar</Button>
          </div>
        </div>
      ) : (
        <div>
          <div className="mb-4">
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-mute text-[11.5px]">
                {c.status === 'bloqueado' ? 'Conclua a trilha pra desbloquear' : 'Progresso até desbloquear'}
              </span>
              <span className="text-ink text-[11.5px] font-mono">{Math.round(c.progress*100)}%</span>
            </div>
            <Progress value={c.progress}/>
          </div>
          <Button variant={c.status === 'bloqueado' ? 'ghost' : 'secondary'} size="md"
            icon={c.status === 'bloqueado' ? <I.lock size={13}/> : <I.arrowRight size={13}/>}
            className={c.status === 'bloqueado' ? 'pointer-events-none' : ''}>
            {c.status === 'bloqueado' ? 'Bloqueado' : 'Continuar trilha'}
          </Button>
        </div>
      )}
    </Card>
  );
};

window.ScreenCert = ScreenCert;