/**
 * CursoRelacionadoCard — Card de referência ao Instituto OnFide
 *
 * ADR-009: integração por referência, nunca por duplicação de dados.
 * Este componente NUNCA armazena dados de cursos — apenas exibe um link
 * para o domínio do Instituto.
 *
 * Fase 5: thumbnail e descrição virão de uma API real do Instituto.
 * Fase 6: integrado à busca/recomendação do HUB.
 * O visual deste componente não muda entre as fases — apenas a fonte dos dados.
 */

interface CursoRelacionadoCardProps {
  titulo: string;
  descricao?: string;
  /** Slug do curso no Instituto — ex: "curso/oracao" */
  slug: string;
}

const INSTITUTO_BASE_URL = "https://instituto.onfide.com.br";

export default function CursoRelacionadoCard({
  titulo,
  descricao,
  slug,
}: CursoRelacionadoCardProps) {
  const url = `${INSTITUTO_BASE_URL}/${slug.replace(/^\/+/, "")}`;

  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="group flex items-center gap-4 p-4 rounded-2xl transition-all"
      style={{
        background: "rgba(255,255,255,0.04)",
        border: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      {/* Ícone do Instituto — chapéu de formatura */}
      <div
        className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
        style={{ background: "rgba(99, 102, 241, 0.15)" }}
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} className="w-6 h-6 text-indigo-300">
          <path strokeLinecap="round" strokeLinejoin="round" d="M4.26 10.147a60.438 60.438 0 00-.491 6.347A48.62 48.62 0 0112 20.904a48.62 48.62 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.636 50.636 0 00-2.658-.813A59.906 59.906 0 0112 3.493a59.903 59.903 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443" />
        </svg>
      </div>

      <div className="flex-1 min-w-0">
        <p className="text-[10px] uppercase tracking-widest font-bold font-ui text-indigo-300/70 mb-0.5">
          Instituto OnFide
        </p>
        <h4 className="text-sm font-semibold font-ui text-white truncate group-hover:text-indigo-300 transition-colors">
          {titulo}
        </h4>
        {descricao && (
          <p className="text-xs text-white/40 truncate mt-0.5">{descricao}</p>
        )}
      </div>

      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-4 h-4 text-white/30 flex-shrink-0 group-hover:text-indigo-300 group-hover:translate-x-0.5 transition-all">
        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
      </svg>
    </a>
  );
}
