// Mosaic site — SOURCES directory page
// Exports: SourcesPage

const SrcTable = ({ rows }) => (
  <div className="srctable">
    <div className="thead">
      {["Source", "Owner / parent", "Ownership", "Founded", "Country"].map((h, i) => (
        <span key={i} className="kicker" style={{ fontSize: 10 }}>{h}</span>
      ))}
    </div>
    {rows.map((r, i) => (
      <div className="trow" key={i}>
        <span style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <SFav id={r.f} size={26} />
          <span>
            <span style={{ fontWeight: 600, fontSize: 13.5, display: "block", color: "var(--text-primary)" }}>{FAVS[r.f].n}</span>
            <span className="micro" style={{ fontSize: 10.5 }}>{r.k}</span>
          </span>
        </span>
        <span className="cell">{r.o}</span>
        <span className="cell">{r.t}</span>
        <span className="cell" style={{ fontVariantNumeric: "tabular-nums" }}>{r.y}</span>
        <span className="cell">{r.c}</span>
      </div>
    ))}
  </div>
);

const SourcesPage = () => {
  // One flat table — the filter chips do the grouping, no section headings.
  const all = [
    ...SOURCE_DIR.outlets.map((r) => ({ ...r, g: "outlets" })),
    ...SOURCE_DIR.independent.map((r) => ({ ...r, g: "independent" })),
    ...SOURCE_DIR.youtube.map((r) => ({ ...r, g: "youtube" })),
    ...SOURCE_DIR.international.map((r) => ({ ...r, g: "international" })),
  ];
  const [filter, setFilter] = React.useState("all");
  const rows = filter === "all" ? all : all.filter((r) => r.g === filter);
  return (
    <FadeIn style={{ paddingBottom: 44 }}>
      <div style={{ padding: "30px 0 6px" }}>
        <div className="kicker">Source directory · who owns what</div>
        <h1 className="display" style={{ fontSize: "clamp(26px, 6vw, 38px)", margin: "12px 0 12px" }}>Sources</h1>
        <p className="dek" style={{ maxWidth: 680, fontSize: 14.5, margin: 0 }}>
          Verifiable ownership facts only — no bias or quality ratings here. Where a source leans is shown
          per story in each topic's source map, based on what it actually published. Compiled from the Media
          Ownership Monitor (RSF/Freedom Network), Wikipedia and reporting. Last checked Jun 2026.
        </p>
      </div>
      <div style={{ display: "flex", gap: 8, padding: "16px 0 24px", flexWrap: "wrap" }}>
        <button className={"chip" + (filter === "all" ? " on" : "")} onClick={() => setFilter("all")}>All</button>
        {[["outlets", "Outlets"], ["independent", "Independent"], ["youtube", "YouTube"], ["international", "International"]].map(([k, label]) => (
          <button key={k} className={"chip" + (filter === k ? " on" : "")} onClick={() => setFilter(k)}>{label}</button>
        ))}
      </div>
      <SrcTable rows={rows} />
    </FadeIn>
  );
};

Object.assign(window, { SourcesPage });