import type { Metadata } from "next";
import { ActionAnchor, ActionLink, InfoPanel, PanelGrid, RouteHero, RouteShell, StatusLabel } from "@/components/visual-system";
import { fitAssessment } from "@/content/knowledge-pages";

const title = "Should We Use Day Shift? | Day Shift";
const description = "Strong-fit, weak-fit, and decision questions for choosing a proportionate repository-native coding-agent workflow.";

export const metadata: Metadata = {
  title: { absolute: title },
  description,
  alternates: { canonical: "/fit" },
  openGraph: { type: "website", title, description, url: "/fit", siteName: "Day Shift" },
  twitter: { card: "summary_large_image", title, description },
};

function AssessmentList({ items }: { items: readonly string[] }) {
  return (
    <ul className="mt-5 grid gap-3 text-sm leading-6 text-ink-soft">
      {items.map((item) => <li key={item}>- {item}</li>)}
    </ul>
  );
}

export default function FitPage() {
  return (
    <RouteShell eyebrow="Fit assessment">
      <RouteHero
        eyebrow="Use proportionate workflow"
        title="Should we use Day Shift?"
        summary="Day Shift is strongest when coding-agent work needs durable scope, evidence, handoff, and review across sessions. It deliberately adds repository records, so small disposable work may not justify it."
      >
        <div className="mt-8 flex flex-wrap gap-3">
          <ActionLink href="/demo">See the workflow</ActionLink>
          <ActionLink href="/pricing" variant="secondary">Review commercial terms</ActionLink>
        </div>
      </RouteHero>

      <PanelGrid columns="lg:grid-cols-2">
        <InfoPanel>
          <StatusLabel>Strong fit</StatusLabel>
          <h2 className="mt-4 text-2xl font-semibold">Continuity and evidence matter</h2>
          <AssessmentList items={fitAssessment.strongFit} />
        </InfoPanel>
        <InfoPanel>
          <StatusLabel>Weak fit</StatusLabel>
          <h2 className="mt-4 text-2xl font-semibold">The records cost more than reconstruction</h2>
          <AssessmentList items={fitAssessment.weakFit} />
        </InfoPanel>
      </PanelGrid>

      <section className="border-t border-divider py-12">
        <RouteHero
          eyebrow="Decision questions"
          title="Choose the smallest workflow that solves the continuity problem."
          summary="More yes answers point toward durable repository workflow. Start with one explicit Basic task unless planned dependencies justify Structured or formal risk justifies Governed."
        />
        <ol className="grid gap-3 md:grid-cols-2">
          {fitAssessment.decisionQuestions.map((question, index) => (
            <li key={question} className="operational-panel p-4 text-sm leading-6">
              <span className="mr-2 font-semibold text-foreground">{index + 1}.</span>{question}
            </li>
          ))}
        </ol>
      </section>

      <section className="operational-panel p-5">
        <p className="operational-label">Boundary</p>
        <p className="mt-3 text-sm leading-6 text-ink-soft">
          Day Shift complements coding assistants, Git, pull requests, issue trackers, code review, and CI. It does not replace them or force arbitrary external agents to follow policy.
        </p>
        <div className="mt-5 flex flex-wrap gap-3">
          <ActionAnchor href="https://docs.tnsds.tech/workflows/" variant="primary">Choose a workflow</ActionAnchor>
          <ActionLink href="/known-limitations">Read known limitations</ActionLink>
        </div>
      </section>
    </RouteShell>
  );
}