import {Folder, Still} from "remotion";

const P = {
  bg: "#F7F7F5",
  paper: "#FFFFFF",
  ink: "#111111",
  muted: "#777A7D",
  border: "#D9DAD7",
  grid: "#D5D6D3",
  echo: "#1F9D72",
  whisper: "#3977DC",
  qwen: "#F06A45",
  violet: "#7A55C5",
  yellow: "#E7B70C",
  aqua: "#28B9B1",
  red: "#D94F45",
  gray: "#8B8D8F",
};

const SANS =
  '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif';
const SERIF = 'Georgia, "Times New Roman", serif';
const MONO =
  '"SFMono-Regular", "SF Mono", ui-monospace, Menlo, Monaco, monospace';

type PageProps = {
  readonly index: string;
  readonly title: string;
  readonly subtitle: string;
  readonly source: string;
  readonly mode?: "Measured" | "Published" | "Evidence";
  readonly children: React.ReactNode;
};

const Page = ({
  index,
  title,
  subtitle,
  source,
  mode = "Measured",
  children,
}: PageProps) => (
  <div
    style={{
      width: "100%",
      height: "100%",
      padding: "38px 48px 28px",
      background: P.bg,
      color: P.ink,
      fontFamily: SANS,
      display: "flex",
      flexDirection: "column",
    }}
  >
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        paddingBottom: 19,
        borderBottom: `1px solid ${P.border}`,
      }}
    >
      <div style={{display: "flex", alignItems: "center", gap: 15}}>
        <div
          style={{
            width: 22,
            height: 22,
            background: P.ink,
            borderRadius: 3,
          }}
        />
        <div style={{fontFamily: SERIF, fontSize: 29}}>
          Echo Benchmark Lab
        </div>
      </div>
      <div style={{display: "flex", alignItems: "center", gap: 13}}>
        {(["Measured", "Published", "Evidence"] as const).map((item) => (
          <div
            key={item}
            style={{
              padding: "10px 15px",
              borderRadius: 10,
              background: item === mode ? P.ink : "#E8E8E6",
              color: item === mode ? P.paper : P.ink,
              fontSize: 14,
              fontWeight: 650,
            }}
          >
            {item}
          </div>
        ))}
        <div
          style={{
            marginLeft: 7,
            color: P.muted,
            fontFamily: MONO,
            fontSize: 14,
          }}
        >
          {index} / 09
        </div>
      </div>
    </div>

    <div style={{paddingTop: 24}}>
      <div
        style={{
          display: "flex",
          alignItems: "flex-start",
          gap: 16,
        }}
      >
        <div
          style={{
            width: 18,
            height: 18,
            marginTop: 12,
            background:
              mode === "Measured"
                ? P.echo
                : mode === "Published"
                  ? P.violet
                  : P.red,
            flex: "0 0 auto",
          }}
        />
        <div>
          <h1
            style={{
              margin: 0,
              fontFamily: SERIF,
              fontSize: 47,
              lineHeight: 1.05,
              fontWeight: 500,
              letterSpacing: "-0.025em",
            }}
          >
            {title}
          </h1>
          <div
            style={{
              maxWidth: 1270,
              marginTop: 9,
              color: P.muted,
              fontSize: 20,
              lineHeight: 1.35,
            }}
          >
            {subtitle}
          </div>
        </div>
      </div>
    </div>

    <div style={{flex: 1, minHeight: 0, paddingTop: 24}}>{children}</div>

    <div
      style={{
        paddingTop: 15,
        borderTop: `1px solid ${P.border}`,
        color: P.muted,
        fontFamily: MONO,
        fontSize: 12,
        lineHeight: 1.35,
      }}
    >
      {source}
    </div>
  </div>
);

const Panel = ({
  title,
  subtitle,
  accent,
  children,
}: {
  readonly title: string;
  readonly subtitle: string;
  readonly accent: string;
  readonly children: React.ReactNode;
}) => (
  <div
    style={{
      minWidth: 0,
      height: "100%",
      padding: "23px 24px 20px",
      borderRadius: 14,
      border: `1px solid ${P.border}`,
      background: P.paper,
      display: "flex",
      flexDirection: "column",
    }}
  >
    <div style={{display: "flex", alignItems: "center", gap: 12}}>
      <div style={{width: 16, height: 16, background: accent}} />
      <div
        style={{
          fontFamily: SERIF,
          fontSize: 31,
          letterSpacing: "-0.02em",
        }}
      >
        {title}
      </div>
    </div>
    <div
      style={{
        marginTop: 8,
        color: P.muted,
        fontSize: 16,
        lineHeight: 1.3,
      }}
    >
      {subtitle}
    </div>
    <div style={{flex: 1, minHeight: 0, marginTop: 18}}>{children}</div>
  </div>
);

type BarDatum = {
  readonly label: string;
  readonly short?: string;
  readonly value: number | null;
  readonly display: string;
  readonly color: string;
  readonly note?: string;
  readonly variant?: "solid" | "striped";
};

const Grid = ({lines = 4}: {readonly lines?: number}) => (
  <div
    style={{
      position: "absolute",
      inset: "0 0 0 0",
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      pointerEvents: "none",
    }}
  >
    {Array.from({length: lines + 1}).map((_, index) => (
      <div
        key={index}
        style={{
          borderTop: `1px dashed ${P.grid}`,
        }}
      />
    ))}
  </div>
);

const VerticalBars = ({
  data,
  max,
  height = 380,
  labelFontSize = 15,
}: {
  readonly data: readonly BarDatum[];
  readonly max: number;
  readonly height?: number;
  readonly labelFontSize?: number;
}) => (
  <div style={{height: "100%", display: "flex", flexDirection: "column"}}>
    <div style={{height, position: "relative"}}>
      <Grid />
      <div
        style={{
          position: "relative",
          height: "100%",
          display: "grid",
          gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))`,
          gap: data.length > 8 ? 12 : 22,
          alignItems: "end",
          padding: "0 18px",
        }}
      >
        {data.map((datum) => {
          const visibleHeight =
            datum.value === null ? 0 : Math.max(16, (datum.value / max) * height);
          return (
            <div
              key={datum.label}
              style={{
                minWidth: 0,
                height: "100%",
                display: "flex",
                flexDirection: "column",
                justifyContent: "flex-end",
                alignItems: "center",
              }}
            >
              <div
                style={{
                  marginBottom: 7,
                  color: datum.value === null ? P.red : P.ink,
                  fontSize: data.length > 8 ? 14 : 17,
                  fontWeight: 650,
                }}
              >
                {datum.display}
              </div>
              {datum.value === null ? (
                <div
                  style={{
                    width: "76%",
                    height: 80,
                    border: `2px dashed ${P.red}`,
                    borderRadius: "9px 9px 0 0",
                    background:
                      "repeating-linear-gradient(135deg, #FFFFFF 0 8px, #F5E6E3 8px 16px)",
                    display: "grid",
                    placeItems: "center",
                    color: P.red,
                    fontFamily: MONO,
                    fontSize: 12,
                  }}
                >
                  N/R
                </div>
              ) : (
                <div
                  style={{
                    width: "76%",
                    height: visibleHeight,
                    maxHeight: height,
                    borderRadius: "9px 9px 0 0",
                    border:
                      datum.variant === "striped"
                        ? `2px solid ${datum.color}`
                        : undefined,
                    background:
                      datum.variant === "striped"
                        ? `repeating-linear-gradient(135deg, ${datum.color} 0 9px, #CBEBDD 9px 18px)`
                        : datum.color,
                    display: "flex",
                    alignItems: "flex-end",
                    justifyContent: "center",
                    paddingBottom: 10,
                    color: P.paper,
                    fontFamily: MONO,
                    fontSize: data.length > 8 ? 12 : 15,
                    fontWeight: 700,
                  }}
                >
                  {datum.value !== null && visibleHeight > 55
                    ? datum.display
                    : ""}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
    <div
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))`,
        gap: data.length > 8 ? 12 : 22,
        padding: "10px 18px 0",
      }}
    >
      {data.map((datum) => (
        <div
          key={datum.label}
          style={{
            minWidth: 0,
            textAlign: "center",
          }}
        >
          <div
            style={{
              width: 24,
              height: 24,
              margin: "0 auto 7px",
              borderRadius: "50%",
              background: datum.color,
              color: P.paper,
              display: "grid",
              placeItems: "center",
              fontFamily: MONO,
              fontSize: 11,
              fontWeight: 700,
            }}
          >
            {(datum.short ?? datum.label).slice(0, 2).toUpperCase()}
          </div>
          <div
            style={{
              fontSize: labelFontSize,
              lineHeight: 1.13,
              fontWeight: 600,
              overflowWrap: "anywhere",
            }}
          >
            {datum.label}
          </div>
          {datum.note ? (
            <div
              style={{
                marginTop: 4,
                color: P.muted,
                fontSize: Math.max(11, labelFontSize - 3),
                lineHeight: 1.15,
              }}
            >
              {datum.note}
            </div>
          ) : null}
        </div>
      ))}
    </div>
  </div>
);

const HighlightCard = () => {
  const wer: readonly BarDatum[] = [
    {
      label: "Echo Parakeet",
      short: "E",
      value: 3.376,
      display: "3.38%",
      color: P.echo,
    },
    {
      label: "Whisper Turbo Q5",
      short: "W",
      value: 3.501,
      display: "3.50%",
      color: P.whisper,
    },
    {
      label: "Qwen INT8",
      short: "Q",
      value: 7.104,
      display: "7.10%",
      color: P.qwen,
    },
  ];
  const speed: readonly BarDatum[] = [
    {
      label: "Echo Parakeet",
      short: "E",
      value: 14.9,
      display: "14.9×",
      color: P.echo,
    },
    {
      label: "Whisper Turbo Q5",
      short: "W",
      value: 6.14,
      display: "6.14×",
      color: P.whisper,
    },
    {
      label: "Qwen INT8",
      short: "Q",
      value: 3.4,
      display: "3.40×",
      color: P.qwen,
    },
  ];
  const price: readonly BarDatum[] = [
    {
      label: "Echo local",
      short: "E",
      value: 0,
      display: "$0",
      color: P.echo,
      note: "API fee",
    },
    {
      label: "Whisper local",
      short: "W",
      value: 0,
      display: "$0",
      color: P.whisper,
      note: "API fee",
    },
    {
      label: "Parakeet hosted",
      short: "P",
      value: 1.5,
      display: "$1.50",
      color: P.violet,
      note: "published",
    },
    {
      label: "Scribe v2",
      short: "S",
      value: 3.67,
      display: "$3.67",
      color: P.aqua,
      note: "published",
    },
    {
      label: "GPT Transcribe",
      short: "G",
      value: 4.5,
      display: "$4.50",
      color: P.qwen,
      note: "published",
    },
  ];

  return (
    <Page
      index="01"
      title="Highlights"
      subtitle="Three separate questions: sampled local accuracy, whole-run throughput, and transcription API fees."
      source="DIRECT COMMON TRACK: 100 CLIPS · PRICES: ARTIFICIAL ANALYSIS, USD PER 1,000 AUDIO MINUTES · LOCAL $0 MEANS NO PER-USE API FEE"
    >
      <div
        style={{
          height: "100%",
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr",
          gap: 22,
        }}
      >
        <Panel
          title="Mean WER"
          subtitle="100 identical public clips · lower is better"
          accent={P.violet}
        >
          <VerticalBars data={wer} max={8} height={330} />
        </Panel>
        <Panel
          title="Whole-run speed"
          subtitle="Audio seconds per wall second · higher is better"
          accent={P.yellow}
        >
          <VerticalBars data={speed} max={16} height={330} />
        </Panel>
        <Panel
          title="API transcription fee"
          subtitle="USD per 1,000 minutes · lower is better"
          accent={P.qwen}
        >
          <VerticalBars data={price} max={5} height={330} labelFontSize={13} />
        </Panel>
      </div>
    </Page>
  );
};

const DirectWerCard = () => {
  const data: readonly BarDatum[] = [
    {
      label: "Echo · Parakeet Core ML",
      short: "E",
      value: 3.376,
      display: "3.38%",
      color: P.echo,
      note: "production",
    },
    {
      label: "Whisper large-v3-turbo Q5",
      short: "W",
      value: 3.501,
      display: "3.50%",
      color: P.whisper,
      note: "benchmark / fallback",
    },
    {
      label: "Echo · Qwen3-ASR INT8",
      short: "Q",
      value: 7.104,
      display: "7.10%",
      color: P.qwen,
      note: "rejected",
    },
  ];
  return (
    <Page
      index="02"
      title="Echo Common-Track Word Error Rate"
      subtitle="% of words transcribed incorrectly · lower is better · identical audio and normalization"
      source="LOCAL COMMON-TRACK-V1 · 50 LIBRISPEECH TEST-CLEAN + 50 TEST-OTHER · 585.350 SECONDS"
    >
      <Panel
        title="Mean utterance WER"
        subtitle="Direct application-route comparison—not borrowed checkpoint scores"
        accent={P.echo}
      >
        <VerticalBars data={data} max={8} height={500} labelFontSize={18} />
      </Panel>
    </Page>
  );
};

const DifficultyCard = () => {
  const rows = [
    {
      name: "Echo · Parakeet",
      color: P.echo,
      clean: 2.834,
      other: 3.919,
    },
    {
      name: "Whisper Turbo Q5",
      color: P.whisper,
      clean: 3.001,
      other: 4.002,
    },
    {
      name: "Echo · Qwen INT8",
      color: P.qwen,
      clean: 3.158,
      other: 11.05,
    },
  ] as const;
  return (
    <Page
      index="03"
      title="Accuracy by Speech Difficulty"
      subtitle="Mean utterance WER · the harder split is where the Qwen INT8 challenger failed"
      source="LOCAL COMMON-TRACK-V1 · 50 ROWS PER SPLIT · LOWER IS BETTER"
    >
      <Panel
        title="LibriSpeech test-clean vs. test-other"
        subtitle="Grouped bars use one shared 12% scale"
        accent={P.qwen}
      >
        <div
          style={{
            height: "100%",
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 80,
            padding: "20px 90px 0",
          }}
        >
          {rows.map((row) => (
            <div
              key={row.name}
              style={{
                minWidth: 0,
                display: "flex",
                flexDirection: "column",
              }}
            >
              <div
                style={{
                  position: "relative",
                  height: 500,
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: 28,
                  alignItems: "end",
                }}
              >
                <Grid />
                {[
                  ["clean", row.clean, 0.6],
                  ["other", row.other, 1],
                ].map(([label, value, opacity]) => (
                  <div
                    key={String(label)}
                    style={{
                      position: "relative",
                      height: "100%",
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "center",
                      justifyContent: "flex-end",
                    }}
                  >
                    <div
                      style={{
                        marginBottom: 8,
                        fontSize: 19,
                        fontWeight: 700,
                      }}
                    >
                      {Number(value).toFixed(2)}%
                    </div>
                    <div
                      style={{
                        width: "100%",
                        height: `${Math.max(18, (Number(value) / 12) * 500)}px`,
                        borderRadius: "10px 10px 0 0",
                        background: row.color,
                        opacity: Number(opacity),
                      }}
                    />
                    <div
                      style={{
                        marginTop: 9,
                        color: P.muted,
                        fontFamily: MONO,
                        fontSize: 14,
                      }}
                    >
                      {label}
                    </div>
                  </div>
                ))}
              </div>
              <div
                style={{
                  marginTop: 24,
                  textAlign: "center",
                  fontSize: 21,
                  fontWeight: 700,
                }}
              >
                {row.name}
              </div>
            </div>
          ))}
        </div>
      </Panel>
    </Page>
  );
};

const SpeedCard = () => {
  const model: readonly BarDatum[] = [
    {
      label: "Echo Parakeet",
      value: 87.8,
      display: "87.8 ms",
      color: P.echo,
    },
    {
      label: "Whisper Q5",
      value: null,
      display: "not captured",
      color: P.whisper,
    },
    {
      label: "Qwen INT8",
      value: 1380,
      display: "1,380 ms",
      color: P.qwen,
    },
  ];
  const wall: readonly BarDatum[] = [
    {
      label: "Echo Parakeet",
      value: 39.3,
      display: "39.30 s",
      color: P.echo,
    },
    {
      label: "Whisper Q5",
      value: 95.27,
      display: "95.27 s",
      color: P.whisper,
    },
    {
      label: "Qwen INT8",
      value: 171.94,
      display: "171.94 s",
      color: P.qwen,
    },
  ];
  return (
    <Page
      index="04"
      title="Local Processing Time"
      subtitle="Model-only and whole-run timings remain separate because they answer different questions."
      source="LOCAL MODEL TIMERS + WALL FILES · WHOLE RUN INCLUDES MODEL LOAD AND RUNNER OVERHEAD"
    >
      <div
        style={{
          height: "100%",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 24,
        }}
      >
        <Panel
          title="Average model time / row"
          subtitle="Milliseconds · lower is better"
          accent={P.echo}
        >
          <VerticalBars data={model} max={1500} height={390} />
        </Panel>
        <Panel
          title="Whole-run wall time"
          subtitle="Seconds for 9.756 minutes of audio · lower is better"
          accent={P.whisper}
        >
          <VerticalBars data={wall} max={180} height={390} />
        </Panel>
      </div>
    </Page>
  );
};

const PublishedShortCard = () => {
  const data: readonly BarDatum[] = [
    {
      label: "Modulate VFast",
      value: 4.43,
      display: "4.43%",
      color: "#121212",
    },
    {
      label: "Microsoft Azure",
      value: 4.51,
      display: "4.51%",
      color: "#35A853",
    },
    {
      label: "ElevenLabs Scribe v2",
      value: 4.65,
      display: "4.65%",
      color: P.aqua,
    },
    {
      label: "AssemblyAI Universal 3.5",
      value: 5.03,
      display: "5.03%",
      color: P.violet,
    },
    {
      label: "Qwen3-ASR 0.6B",
      value: 5.61,
      display: "5.61%",
      color: P.qwen,
    },
    {
      label: "Parakeet TDT 0.6B v3",
      value: 5.66,
      display: "5.66%",
      color: P.echo,
      note: "Echo foundation",
    },
    {
      label: "Whisper large-v3-turbo",
      value: 7.01,
      display: "7.01%",
      color: P.whisper,
      note: "Echo fallback",
    },
  ];
  return (
    <Page
      index="05"
      title="Published Short-Form ASR Context"
      subtitle="Hugging Face seven-domain average cleaned WER · upstream model results, not Echo application scores"
      source="HF-AUDIO/OPEN-ASR-LEADERBOARD-RESULTS · SNAPSHOT RETRIEVED 29 JUL 2026"
      mode="Published"
    >
      <Panel
        title="Average cleaned WER"
        subtitle="Lower is better · common published protocol"
        accent={P.violet}
      >
        <VerticalBars data={data} max={8} height={470} labelFontSize={15} />
      </Panel>
    </Page>
  );
};

const PublishedLongCard = () => {
  const data: readonly BarDatum[] = [
    {
      label: "ElevenLabs Scribe v2",
      value: 7.32,
      display: "7.32%",
      color: P.aqua,
    },
    {
      label: "AssemblyAI Universal 3 Pro",
      value: 8.34,
      display: "8.34%",
      color: P.violet,
    },
    {
      label: "Speechmatics Enhanced",
      value: 8.8,
      display: "8.80%",
      color: "#333333",
    },
    {
      label: "Parakeet TDT 0.6B v3",
      value: 10.72,
      display: "10.72%",
      color: P.echo,
      note: "Echo foundation",
    },
    {
      label: "Whisper large-v3-turbo",
      value: 11.01,
      display: "11.01%",
      color: P.whisper,
      note: "Echo fallback",
    },
    {
      label: "Google Chirp",
      value: 13.05,
      display: "13.05%",
      color: "#35A853",
    },
  ];
  return (
    <Page
      index="06"
      title="Published Long-Form Meeting Context"
      subtitle="Earnings21, Earnings22, TED-LIUM, and CORAAL average WER · Echo has not run the full track"
      source="HF-AUDIO/LEADERBOARD_LONGFORM · PUBLISHED UPSTREAM MODEL RESULTS"
      mode="Published"
    >
      <Panel
        title="Long-form average WER"
        subtitle="Lower is better · transcription only, not meeting summarization"
        accent={P.echo}
      >
        <VerticalBars data={data} max={14} height={470} labelFontSize={15} />
      </Panel>
    </Page>
  );
};

const CloudCard = () => {
  const data: readonly BarDatum[] = [
    {
      label: "ElevenLabs Scribe v2",
      value: 2.18,
      display: "2.18%",
      color: P.aqua,
    },
    {
      label: "Microsoft MAI-Transcribe-1.5",
      value: 2.38,
      display: "2.38%",
      color: "#35A853",
    },
    {
      label: "Gemini 3.1 Pro Preview",
      value: 2.82,
      display: "2.82%",
      color: P.violet,
    },
    {
      label: "AssemblyAI Universal-3.5",
      value: 3.02,
      display: "3.02%",
      color: "#7150A8",
    },
    {
      label: "OpenAI GPT Transcribe",
      value: 3.31,
      display: "3.31%",
      color: "#111111",
    },
    {
      label: "OpenAI GPT-4o Transcribe",
      value: 3.96,
      display: "3.96%",
      color: "#4A4A4A",
    },
    {
      label: "Echo Parakeet Core ML",
      value: 6.1871,
      display: "6.19%*",
      color: P.echo,
      note: "public subset only",
      variant: "striped",
    },
  ];
  return (
    <Page
      index="07"
      title="Independent Cloud Context + Echo Public Run"
      subtitle="Official AA-WER v2 cloud scores beside Echo’s measured 3.89-hour public-subset reconstruction"
      source="* ECHO: 634 PUBLIC FILES · VOXPOPULI 3.25% + EARNINGS22 9.13% · 6.19% EQUAL-WEIGHT COMPOSITE · AGENTTALK EXCLUDED · NOT AN OFFICIAL AA-WER SCORE"
      mode="Published"
    >
      <Panel
        title="Word error rate"
        subtitle="Lower is better · cloud bars use full AA-WER; Echo* uses only the released public half"
        accent={P.violet}
      >
        <VerticalBars data={data} max={7} height={470} labelFontSize={15} />
      </Panel>
    </Page>
  );
};

const MeetingCard = () => (
  <Page
    index="08"
    title="Echo Meeting Intelligence"
    subtitle="A separate grounded-output contract after transcription: map → evidence validation → reduce"
    source="LOCAL MEETING-SUITE-V1-RESULT.JSON · MEETING-INTELLIGENCE-ZENITH.MD"
    mode="Evidence"
  >
    <div
      style={{
        height: "100%",
        display: "grid",
        gridTemplateColumns: "1.12fr .88fr",
        gap: 24,
      }}
    >
      <Panel
        title="Measured contracts"
        subtitle="Structured semantic checks—not a universal accuracy percentage"
        accent={P.echo}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 18,
            height: "100%",
          }}
        >
          {[
            ["5 / 5", "synthetic meeting domains", P.echo],
            ["9 / 9", "corrected financial-call checks", P.echo],
            ["3.06 GB", "Qwen3.5-4B MLX 4-bit", P.violet],
            ["≈3–4 s", "warm cached processing", P.yellow],
          ].map(([value, label, color]) => (
            <div
              key={value}
              style={{
                padding: "27px",
                borderRadius: 13,
                border: `1px solid ${P.border}`,
                background: P.bg,
              }}
            >
              <div
                style={{
                  color,
                  fontFamily: SERIF,
                  fontSize: 56,
                  lineHeight: 1,
                }}
              >
                {value}
              </div>
              <div
                style={{
                  marginTop: 13,
                  fontSize: 21,
                  lineHeight: 1.25,
                }}
              >
                {label}
              </div>
            </div>
          ))}
        </div>
      </Panel>
      <Panel
        title="Grounded pipeline"
        subtitle="Every retained note must point back to transcript evidence"
        accent={P.violet}
      >
        <div
          style={{
            height: "100%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            gap: 18,
          }}
        >
          {[
            ["01", "MAP", "extract candidate facts"],
            ["02", "VALIDATE", "retain supported evidence"],
            ["03", "REDUCE", "produce structured notes"],
          ].map(([number, name, detail], index) => (
            <div
              key={name}
              style={{
                minHeight: 105,
                padding: "20px 22px",
                borderRadius: 12,
                border: `1px solid ${index === 1 ? P.violet : P.border}`,
                background: index === 1 ? "#F1ECFA" : P.bg,
                display: "grid",
                gridTemplateColumns: "60px 1fr",
                alignItems: "center",
                gap: 15,
              }}
            >
              <div
                style={{
                  color: index === 1 ? P.violet : P.muted,
                  fontFamily: MONO,
                  fontSize: 19,
                }}
              >
                {number}
              </div>
              <div>
                <div style={{fontSize: 23, fontWeight: 750}}>{name}</div>
                <div style={{marginTop: 5, color: P.muted, fontSize: 16}}>
                  {detail}
                </div>
              </div>
            </div>
          ))}
          <div
            style={{
              padding: "17px 20px",
              borderRadius: 11,
              border: `1px solid ${P.red}`,
              color: P.red,
              fontSize: 17,
              fontWeight: 650,
            }}
          >
            Qwen3.5-2B rejected: grounded structure was unreliable.
          </div>
        </div>
      </Panel>
    </div>
  </Page>
);

const EvidenceCard = () => {
  const rows = [
    ["100-clip common ASR track", "Measured", "sampled, not full", P.echo],
    ["Generated ASR + non-speech", "Pass", "4.74% · 0/2 FP", P.echo],
    ["Core ML dictation path", "Implemented", "Parakeet TDT 0.6B v3", P.echo],
    ["Model-only latency", "Measured", "≈85 ms average", P.echo],
    ["Deterministic vocabulary + commands", "Implemented", "local rule-based processing", P.echo],
    ["Meeting intelligence", "Pass", "5/5 · 9/9", P.echo],
    ["Current-build delivery", "Missing", "0 successful traces", P.red],
  ] as const;
  return (
    <Page
      index="09"
      title="Current Evidence Status"
      subtitle="Strong local results, with the remaining release-evidence gap kept visible."
      source="AUTHORITATIVE ECHO-CLEAN/REPORTS/RELEASE-ACCEPTANCE.JSON · MODIFIED 29 JUL 2026"
      mode="Evidence"
    >
      <div
        style={{
          height: "100%",
          padding: "20px 26px",
          borderRadius: 14,
          border: `1px solid ${P.border}`,
          background: P.paper,
        }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.4fr .65fr 1.25fr",
            gap: 20,
            padding: "13px 18px",
            color: P.muted,
            fontFamily: MONO,
            fontSize: 14,
            textTransform: "uppercase",
            borderBottom: `1px solid ${P.border}`,
          }}
        >
          <div>Evidence gate</div>
          <div>Status</div>
          <div>Exact boundary</div>
        </div>
        {rows.map(([name, status, detail, color], index) => (
          <div
            key={name}
            style={{
              minHeight: 78,
              display: "grid",
              gridTemplateColumns: "1.4fr .65fr 1.25fr",
              gap: 20,
              alignItems: "center",
              padding: "16px 18px",
              borderBottom:
                index === rows.length - 1
                  ? undefined
                  : `1px solid ${P.border}`,
            }}
          >
            <div style={{fontFamily: SERIF, fontSize: 26}}>{name}</div>
            <div style={{display: "flex", alignItems: "center", gap: 10}}>
              <div
                style={{
                  width: 12,
                  height: 12,
                  borderRadius: "50%",
                  background: color,
                }}
              />
              <div
                style={{
                  color,
                  fontFamily: MONO,
                  fontSize: 15,
                  fontWeight: 700,
                  textTransform: "uppercase",
                }}
              >
                {status}
              </div>
            </div>
            <div style={{color: P.muted, fontSize: 19}}>{detail}</div>
          </div>
        ))}
        <div
          style={{
            marginTop: 18,
            padding: "18px 20px",
            borderRadius: 11,
            border: `1px solid ${P.red}`,
            background: "#FFF6F4",
            color: P.red,
            fontSize: 20,
            fontWeight: 650,
          }}
        >
          Current claim: a fast, private, evidence-backed local voice pipeline—with
          automatic delivery still awaiting current-build release evidence.
        </div>
      </div>
    </Page>
  );
};

export const BenchmarkAnalystCardCompositions = () => (
  <Folder name="Echo-Benchmark-Analyst-Style">
    <Still
      id="EchoAnalyst-01-Highlights"
      component={HighlightCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-02-CommonWER"
      component={DirectWerCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-03-Difficulty"
      component={DifficultyCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-04-Speed"
      component={SpeedCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-05-PublishedShort"
      component={PublishedShortCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-06-PublishedLong"
      component={PublishedLongCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-07-Cloud"
      component={CloudCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-08-Meetings"
      component={MeetingCard}
      width={1920}
      height={1080}
    />
    <Still
      id="EchoAnalyst-09-Evidence"
      component={EvidenceCard}
      width={1920}
      height={1080}
    />
  </Folder>
);
