/* ProjectSystemCard.jsx
   Card de projeto com cara de painel operacional.
   - status: "running" (âmbar, barra animada) ou "done" (verde, 100%).
   - stack, problema, solução, resultado.
   - hover: borda acende (verde p/ done, azul p/ running), aparece o badge
     de status e a barra de progresso ganha brilho.
   prefers-reduced-motion: barra estática, sem varredura.
   Props: project = { title, status, progress, stack[], problem, solution, result } */
function ProjectSystemCard({ project }) {
  const reduced = useReducedMotion();
  const [hover, setHover] = React.useState(false);
  const done = project.status === "done";
  const accent = done ? "var(--green)" : "var(--blue)";
  const statusColor = done ? "var(--green)" : "var(--amber)";

  return (
    <article
      className="psc"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ "--accent": accent }}
    >
      {/* header */}
      <div className="psc-head">
        <div className="psc-id mono">{project.id}</div>
        <div className="psc-status mono" style={{ color: statusColor, borderColor: statusColor }}>
          <span className="psc-dot" style={{ background: statusColor,
            animation: (!done && !reduced) ? "pulseDot 1.3s infinite" : "none" }} />
          {project.status}
        </div>
      </div>

      <h3 className="psc-title">{project.title}</h3>

      {/* stack chips */}
      <div className="psc-stack">
        {project.stack.map((s, i) => <span key={i} className="psc-tag mono">{s}</span>)}
      </div>

      {/* problema / solução / resultado */}
      <dl className="psc-rows">
        <div><dt>problema</dt><dd>{project.problem}</dd></div>
        <div><dt>solução</dt><dd>{project.solution}</dd></div>
        <div><dt>resultado</dt><dd className="psc-result">{project.result}</dd></div>
      </dl>

      {/* progresso */}
      <div className="psc-progress">
        <div className="psc-progress-meta mono">
          <span>{done ? "deploy" : "execução"}</span>
          <span>{project.progress}%</span>
        </div>
        <div className="psc-track">
          <div className="psc-fill" style={{ width: project.progress + "%", background: accent }}>
            {!done && !reduced && <span className="psc-scan" />}
          </div>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { ProjectSystemCard });