import teamCrop from "@/assets/visuals/team-growth-review-crop.jpg";
import teamWide from "@/assets/visuals/team-growth-review.jpg";
import { AmbientVideo } from "@/components/ui/AmbientVideo";
import { revealProps, staggerDelay } from "@/components/ui/reveal";
import { teamReviewCropVideo, teamReviewWideVideo } from "@/content/media";
import { cadence, workingPrinciples } from "@/content/process";
import { cn } from "@/lib/cn";

const WEEKS = Array.from({ length: 12 }, (_, i) => i + 1);

/** Schematic 12-week operating rhythm. Markers show cadence, not client data. */
function CadenceBoard({ title }: { title: string }) {
  const marker = (rowIndex: number, week: number) => {
    if (rowIndex === 1) return week % 2 === 0 ? "filled" : "hollow";
    if (rowIndex === 2) return week % 4 === 0 ? "filled" : null;
    if (rowIndex === 3) return week === 12 ? "square" : null;
    return null;
  };

  return (
    <figure className="rounded-lg border border-line bg-surface p-6 sm:p-8" {...revealProps()}>
      <figcaption className="flex items-center justify-between gap-4">
        <span className="text-title">{title}</span>
        <span className="font-mono text-data uppercase tracking-[0.08em] text-muted">12-week view</span>
      </figcaption>

      <div className="mt-8" role="table" aria-label="Operating cadence over twelve weeks">
        <div role="row" className="grid grid-cols-[6.75rem_repeat(12,minmax(0,1fr))] items-end gap-x-1 border-b border-line pb-2 sm:grid-cols-[8.5rem_repeat(12,minmax(0,1fr))]">
          <span role="columnheader">
            <span className="sr-only">Rhythm</span>
          </span>
          {WEEKS.map((week) => (
            <span key={week} role="columnheader" className="text-center font-mono text-[0.625rem] text-muted">
              <span className="sr-only">Week </span>
              {week}
            </span>
          ))}
        </div>

        {cadence.map((row, rowIndex) => (
          <div
            key={row.rhythm}
            role="row"
            className="grid grid-cols-[6.75rem_repeat(12,minmax(0,1fr))] items-center gap-x-1 border-b border-line py-4 last:border-b-0 sm:grid-cols-[8.5rem_repeat(12,minmax(0,1fr))]"
          >
            <span role="rowheader" className="pr-2 text-sm font-medium leading-tight">
              {row.rhythm}
            </span>
            {rowIndex === 0 ? (
              <span role="cell" className="col-span-12 flex h-3 items-center">
                <span className="h-0.5 w-full rounded-full bg-signal" aria-label="Continuous" />
              </span>
            ) : (
              WEEKS.map((week) => {
                const kind = marker(rowIndex, week);
                return (
                  <span key={week} role="cell" className="flex h-3 items-center justify-center">
                    {kind ? (
                      <span
                        aria-label={`Week ${week}`}
                        className={cn(
                          kind === "filled" && "size-2 rounded-full bg-ink",
                          kind === "hollow" && "size-2 rounded-full border border-ink/40",
                          kind === "square" && "size-2.5 rotate-45 bg-signal",
                        )}
                      />
                    ) : null}
                  </span>
                );
              })
            )}
          </div>
        ))}
      </div>

      <ul className="mt-6 space-y-2 border-t border-line pt-5 text-sm text-ink-soft">
        {cadence.map((row) => (
          <li key={row.rhythm} className="flex gap-3">
            <span className="w-28 shrink-0 text-muted sm:w-36">{row.rhythm}</span>
            <span>{row.detail}</span>
          </li>
        ))}
      </ul>
    </figure>
  );
}

/** Living photograph of a team review: wide frame from md up, a 4:3 crop that keeps all three people on phones. */
function TeamFilm() {
  return (
    <div className="mt-14 lg:mt-20" {...revealProps()}>
      <div className="relative hidden aspect-[16/9] overflow-hidden rounded-lg bg-paper-deep md:block xl:aspect-[1536/620]">
        <AmbientVideo
          poster={teamWide}
          variants={teamReviewWideVideo}
          sizes="(min-width: 1360px) 1264px, 92vw"
          mediaClassName="object-[75%_center] xl:object-center"
        />
      </div>
      <div className="relative aspect-[4/3] overflow-hidden rounded-lg bg-paper-deep md:hidden">
        <AmbientVideo poster={teamCrop} variants={teamReviewCropVideo} sizes="92vw" />
      </div>
    </div>
  );
}

export function WorkingTogether({ cadenceTitle, showTeamFilm = false }: { cadenceTitle: string; showTeamFilm?: boolean }) {
  return (
    <>
      {showTeamFilm ? <TeamFilm /> : null}
      <div className={cn("grid gap-12 lg:grid-cols-12 lg:gap-6", showTeamFilm ? "mt-12 lg:mt-16" : "mt-14 lg:mt-20")}>
        <div className="lg:col-span-5">
          <div className="lg:sticky lg:top-28">
            <CadenceBoard title={cadenceTitle} />
          </div>
        </div>
        <ol className="border-t border-ink lg:col-span-6 lg:col-start-7">
          {workingPrinciples.map((principle, index) => (
            <li
              key={principle.title}
              className="grid grid-cols-[2.75rem_1fr] gap-x-4 border-b border-line py-6 sm:grid-cols-[3.5rem_1fr]"
              {...revealProps(staggerDelay(index, 50))}
            >
              <span className="pt-1 font-mono text-sm text-muted">{String(index + 1).padStart(2, "0")}</span>
              <div>
                <h3 className="text-[1.1875rem] font-medium tracking-[-0.015em]">{principle.title}</h3>
                <p className="mt-2 text-ink-soft">{principle.description}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </>
  );
}