const steps = [
  {
    title: "Chunk & Embed",
    detail:
      "Uploads land in Celery ingestion workers, chunked to 800 chars with 100 overlap, and embedded via MiniLM or hash fallback.",
  },
  {
    title: "Supabase / pgvector",
    detail:
      "Chunks upsert into tenant-scoped tables with metadata, ready for RAG MCP retrieval.",
  },
  {
    title: "Quality Tasks",
    detail:
      "Nightly analytics + RAG precision@k jobs run through Celery beat (`scheduler.py`).",
  },
];

export function IngestionCard() {
  return (
    <section className="glass-panel border border-white/10 p-6 text-white">
      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
        <div>
          <p className="text-sm uppercase tracking-[0.5em] text-cyan-200/70">
            Knowledge Ops
          </p>
          <h2 className="mt-2 text-3xl font-semibold">Ingestion pipeline</h2>
          <p className="mt-4 text-base text-slate-300">
            Drop PDFs, DOCX, MD, or direct raw text and let Celery handle the
            rest. Every step mirrors the backend implementation in
            `backend/workers/ingestion_worker.py`, so what you see locally is
            what ships to production.
          </p>
        </div>
        <div className="rounded-full border border-white/10 bg-white/10 px-4 py-2 text-sm text-slate-100">
          Celery broker / beat ready
        </div>
      </div>
      <ol className="mt-6 grid gap-4 md:grid-cols-3">
        {steps.map((step, idx) => (
          <li
            key={step.title}
            className="rounded-2xl border border-white/10 bg-slate-950/40 p-4"
          >
            <p className="text-xs uppercase tracking-[0.4em] text-slate-400">
              Step {idx + 1}
            </p>
            <h3 className="mt-2 text-xl font-semibold">{step.title}</h3>
            <p className="mt-2 text-sm text-slate-300">{step.detail}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}