const { Tabs, Button, Readout } = window.JabberwockeeDesignSystem_646027;
function Press() {
  const D = window.JW_DATA;
  const [tab, setTab] = React.useState("all");
  const list = D.press.filter((p) => tab === "all" || p.film === tab);
  const count = (k) => D.press.filter((p) => k === "all" || p.film === k).length;
  return (
    <section id="press" className="jw-section" style={{ background: "oklch(from var(--paper-100) l c h / .55)" }}>
      <div className="jw-container">
        <div className="jw-section-head">
          <h2 style={{ font: "var(--type-display-lg)", color: "var(--text-display)" }}>Press</h2>
          <Tabs items={[{ value: "all", label: "All", count: count("all") }, { value: "soni", label: "Soni", count: count("soni") }, { value: "milestone", label: "Milestone", count: count("milestone") }]} value={tab} onChange={setTab} />
        </div>
        <ol className="jw-press-list">
          {list.map((p, i) => (
            <li key={p.href} className="jw-press-row">
              <Readout tone="muted">{String(i + 1).padStart(2, "0")}</Readout>
              <span className="jw-press-pub">{p.pub}</span>
              <a className="jw-press-title" href={p.href} target="_blank" rel="noreferrer">{p.title}</a>
              <a className="jw-press-read" href={p.href} target="_blank" rel="noreferrer">Read <span aria-hidden>→</span></a>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
window.Press = Press;