// About page — explains the protocol and showcases the five task states.

const AboutPage = ({ onGoToLine }) => {
  return (
    <div className="bg-white">
      {/* Hero */}
      <section className="border-b border-neutral-200 bg-gradient-to-b from-white to-neutral-50">
        <div className="max-w-6xl mx-auto px-8 py-16">
          <div className="text-[11px] font-bold uppercase tracking-[0.22em] text-indigo-600 mb-3">About</div>
          <h1 className="text-5xl font-black tracking-tight text-neutral-900 leading-[1.05] max-w-3xl">
            A factory floor for shipping software.
          </h1>
          <p className="text-lg text-neutral-600 mt-5 max-w-2xl leading-relaxed">
            Assembly Line treats every feature like a part on a conveyor belt. A product manager files a high-level task on the PM board and marks it Ready; the line mirrors it onto the AI Dev board, breaks it into a backlog, and runs each piece through a configurable graph of stations — spec, plan, design, backend, frontend, test — validating at every step before handing the finished work back for customer review.
          </p>

          <div className="mt-8 flex items-center gap-3">
            <button
              onClick={onGoToLine}
              className="inline-flex items-center gap-2 bg-neutral-900 hover:bg-neutral-800 text-white px-5 py-3 rounded-lg font-semibold text-sm transition-colors shadow-md"
            >
              Open the live line <ArrowRight size={16} />
            </button>
            <a
              href="#states"
              className="inline-flex items-center gap-2 text-neutral-600 hover:text-neutral-900 px-4 py-3 rounded-lg font-semibold text-sm transition-colors"
            >
              Jump to states ↓
            </a>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="border-b border-neutral-200">
        <div className="max-w-6xl mx-auto px-8 py-14">
          <div className="text-[11px] font-bold uppercase tracking-[0.22em] text-neutral-400 mb-3">How it works</div>
          <h2 className="text-3xl font-black tracking-tight text-neutral-900 leading-tight max-w-2xl">
            Stations you compose, one shipped lane, one set of rules.
          </h2>
          <p className="text-neutral-600 mt-4 max-w-2xl leading-relaxed">
            A line is a configurable graph of stations — it might run spec → plan → design → backend → frontend → test → shipped, or just a couple of steps. Each station has a lead agent and a validator. The cards below show the stations currently on the line.
          </p>

          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {STATIONS.map((station, idx) => (
              <div key={station.id} className="border-2 border-neutral-200 rounded-2xl p-6 bg-white">
                <div className="text-[10px] font-bold uppercase tracking-[0.18em] text-neutral-400 mb-2">
                  Station {idx + 1}
                </div>
                <h3 className="text-xl font-bold text-neutral-900 mb-4">{station.title}</h3>

                <div className="flex flex-col gap-3 text-sm">
                  <div>
                    <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-400 mb-1.5 flex items-center gap-1.5"><User size={10} /> Agents</div>
                    <div className="flex flex-col gap-1">
                      {station.agents.map((a) => (
                        <div key={a.id} className="flex items-center gap-2">
                          <div className="w-6 h-6 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-[10px] font-bold">{a.name[0]}</div>
                          <span className="font-semibold text-neutral-800">{a.name}</span>
                          {a.role && a.role !== a.name && (
                            <span className="text-neutral-400 text-xs">· {a.role}</span>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                  <div>
                    <div className="text-[10px] font-bold uppercase tracking-widest text-neutral-400 mb-1.5 flex items-center gap-1.5"><ShieldCheck size={10} /> Validator</div>
                    {(() => { const validator = window.Bridge?.primaryValidator(station); return (
                    <div className="flex items-center gap-2">
                      <div className="w-6 h-6 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center text-[10px] font-bold">{validator?.name?.[0]}</div>
                      <span className="font-semibold text-neutral-800">{validator?.name}</span>
                      {validator?.role && validator.role !== validator.name && (
                        <span className="text-neutral-400 text-xs">· {validator.role}</span>
                      )}
                    </div>
                    ); })()}
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-6 border-2 border-dashed border-emerald-200 bg-emerald-50/40 rounded-2xl p-6 flex items-center gap-4">
            <div className="w-12 h-12 rounded-2xl bg-emerald-500 text-white flex items-center justify-center shrink-0">
              <CheckCircle size={24} strokeWidth={2.5} />
            </div>
            <div>
              <h3 className="text-lg font-bold text-emerald-900">Shipped Product · End of Line</h3>
              <p className="text-sm text-emerald-800/80 mt-0.5">Tasks that clear validation at every station land here. No more work to do.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Two boards */}
      <section className="border-b border-neutral-200 bg-neutral-50/60">
        <div className="max-w-6xl mx-auto px-8 py-14">
          <div className="text-[11px] font-bold uppercase tracking-[0.22em] text-neutral-400 mb-3">Two boards</div>
          <h2 className="text-3xl font-black tracking-tight text-neutral-900 leading-tight max-w-2xl">
            A high-level PM board, a detailed AI Dev board.
          </h2>
          <p className="text-neutral-600 mt-4 max-w-2xl leading-relaxed">
            Work lives in two linked Teamwork projects. The PM board is the customer-facing view; the AI Dev board is where the line actually runs. A task crosses over automatically — and comes back when it's done.
          </p>

          <div className="mt-10 grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-6 items-stretch">
            {/* PM board */}
            <div className="border-2 border-neutral-200 rounded-2xl p-6 bg-white">
              <div className="flex items-center gap-2.5 mb-4">
                <div className="w-9 h-9 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center shrink-0"><UserCircle size={18} /></div>
                <div>
                  <h3 className="font-bold text-neutral-900 leading-tight">PM board</h3>
                  <div className="text-xs text-neutral-500">Project Manager · high-level</div>
                </div>
              </div>
              <div className="flex flex-wrap gap-1.5">
                {["Backlog", "Ready", "On hold", "In development", "Customer Review", "Complete"].map((s) => (
                  <span key={s} className="text-[11px] font-semibold px-2 py-1 rounded-md bg-neutral-100 text-neutral-600 border border-neutral-200">{s}</span>
                ))}
              </div>
              <p className="text-sm text-neutral-500 mt-4 leading-relaxed">
                The PM writes the brief and marks it <span className="font-semibold text-neutral-700">Ready</span>. While the line works, the task sits in <span className="font-semibold text-neutral-700">In development</span>; finished work returns to <span className="font-semibold text-neutral-700">Customer Review</span>.
              </p>
            </div>

            {/* mirror flow */}
            <div className="flex md:flex-col items-center justify-center gap-2 text-neutral-400">
              <ArrowRight size={20} />
              <span className="text-[10px] font-bold uppercase tracking-widest">mirror</span>
              <ArrowLeft size={20} />
            </div>

            {/* AI Dev board */}
            <div className="border-2 border-indigo-200 rounded-2xl p-6 bg-white">
              <div className="flex items-center gap-2.5 mb-4">
                <div className="w-9 h-9 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center shrink-0"><Hammer size={18} /></div>
                <div>
                  <h3 className="font-bold text-neutral-900 leading-tight">AI Dev board</h3>
                  <div className="text-xs text-neutral-500">Assembly Line · shared station stages</div>
                </div>
              </div>
              <div className="flex flex-wrap gap-1.5">
                {["Backlog", "Ready", "On hold", "In progress", "Human review", "Stuck", "Done"].map((s) => (
                  <span key={s} className="text-[11px] font-semibold px-2 py-1 rounded-md bg-neutral-100 text-neutral-600 border border-neutral-200">{s}</span>
                ))}
              </div>
              <p className="text-sm text-neutral-500 mt-4 leading-relaxed">
                Every station shares these stages, so the board shows a task's <span className="font-semibold text-neutral-700">status</span> while the canvas shows <span className="font-semibold text-neutral-700">where</span> it is. Blocked work waits in <span className="font-semibold text-neutral-700">On hold</span> until upstream work is done.
              </p>
            </div>
          </div>

          <div className="mt-6 text-sm text-neutral-500 leading-relaxed max-w-3xl">
            <span className="font-semibold text-neutral-700">The round trip:</span> a PM marks a task <span className="font-semibold">Ready</span> → it's mirrored to the AI Dev board → the line runs it through its stations (human review at gates, On hold for dependencies, Stuck if the orchestrator escalates) → on <span className="font-semibold">Done</span>, the PM task advances to <span className="font-semibold">Customer Review</span>.
          </div>
        </div>
      </section>

      {/* States */}
      <section id="states">
        <TaskStatesGallery />
      </section>

      {/* Lifecycle */}
      <section className="border-t border-neutral-200 bg-neutral-50">
        <div className="max-w-6xl mx-auto px-8 py-14">
          <div className="text-[11px] font-bold uppercase tracking-[0.22em] text-neutral-400 mb-3">Lifecycle</div>
          <h2 className="text-3xl font-black tracking-tight text-neutral-900 leading-tight max-w-2xl">
            How a task moves through states.
          </h2>

          <ol className="mt-8 flex flex-col gap-3 max-w-3xl">
            {[
              ["Ready on the PM board", "A PM writes a high-level task and marks it Ready — the line mirrors it onto the AI Dev board."],
              ["Work the station", "The station's lead agent picks it up and produces the artifact — state flips to Working."],
              ["Validate", "Validators check the work (Validating). A fail goes back to the lead to retry, bounded by a retry budget."],
              ["Orchestrate or escalate", "If the retries run out, the orchestrator diagnoses and reroutes the task — or marks it Stuck for a human if it truly can't proceed."],
              ["Review & advance", "At a review gate a human approves or sends it back. On approval the task moves to the next station — or to Done, and the PM task advances to Customer Review."],
            ].map(([title, body], idx) => (
              <li key={title} className="flex items-start gap-4 bg-white border-2 border-neutral-200 rounded-xl p-5">
                <div className="w-8 h-8 rounded-full bg-neutral-900 text-white flex items-center justify-center text-sm font-bold shrink-0">{idx + 1}</div>
                <div>
                  <h4 className="font-bold text-neutral-900">{title}</h4>
                  <p className="text-sm text-neutral-600 mt-0.5 leading-relaxed">{body}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </div>
  );
};

window.AboutPage = AboutPage;