// Newsroom feed — masonry-ish grid with a featured hero post + filterable category chips

const NewsroomPage = ({ onOpenPost }) => {
  const [filter, setFilter] = React.useState("All");
  const categories = ["All", ...Array.from(new Set(NEWSROOM_POSTS.map((p) => p.category)))];
  const filtered = filter === "All" ? NEWSROOM_POSTS : NEWSROOM_POSTS.filter((p) => p.category === filter);
  const featured = filtered.find((p) => p.featured) || filtered[0];
  const rest = filtered.filter((p) => p.slug !== featured?.slug);

  return (
    <main style={{ background: "var(--paper)", paddingTop: 24 }}>
      {/* Header */}
      <section className="container r-page-head" style={{ paddingTop: 80, paddingBottom: 64 }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 24 }}>
          <span style={{ color: "var(--blue)" }}>◆</span>&nbsp;&nbsp;04 / Newsroom
        </div>
        <div className="r-grid-1-1" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "end" }}>
          <h1 className="display" style={{
            fontSize: "clamp(56px, 7vw, 104px)",
            margin: 0,
            lineHeight: 0.92,
            letterSpacing: "-0.03em",
          }}>
            <span style={{ fontStyle: "italic", fontWeight: 500 }}>{copyText("newsroom.title_em")}</span> {copyText("newsroom.title_mid")}<br />{copyText("newsroom.title_end")}
          </h1>
          <div>
            <p style={{ fontSize: 18, lineHeight: 1.55, margin: 0, color: "var(--ink)", maxWidth: 540 }}>
              {copyText("newsroom.intro")}
            </p>
          </div>
        </div>
      </section>

      {/* Filter chips */}
      <section className="container" style={{ paddingTop: 16, paddingBottom: 40 }}>
        <div className="hairline" style={{ marginBottom: 32 }} />
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {categories.map((c) => (
            <button
              key={c}
              onClick={() => setFilter(c)}
              className="mono"
              style={{
                background: filter === c ? "var(--ink)" : "transparent",
                color: filter === c ? "var(--paper)" : "var(--ink)",
                border: "1px solid " + (filter === c ? "var(--ink)" : "var(--rule-strong)"),
                padding: "10px 16px",
                borderRadius: 999,
                fontSize: 11,
                cursor: "pointer",
                transition: "all .15s",
              }}
            >
              {c}{c !== "All" && <span style={{ marginLeft: 8, opacity: 0.6 }}>{NEWSROOM_POSTS.filter(p => p.category === c).length}</span>}
            </button>
          ))}
        </div>
      </section>

      {/* Featured */}
      {featured && (
        <section className="container" style={{ paddingBottom: 64 }}>
          <FeaturedCard post={featured} onOpen={() => onOpenPost(featured.slug)} />
        </section>
      )}

      {/* Grid */}
      <section className="container" style={{ paddingBottom: 96 }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 24 }}>↳ More posts · {rest.length}</div>
        <div className="r-grid-news" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {rest.map((p, i) => (
            <PostCard key={p.slug} post={p} index={i + 2} onOpen={() => onOpenPost(p.slug)} />
          ))}
        </div>
      </section>
    </main>
  );
};

const FeaturedCard = ({ post, onOpen }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onOpen}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "block",
        width: "100%",
        background: "transparent",
        border: "none",
        padding: 0,
        textAlign: "left",
        cursor: "pointer",
      }}
    >
      <div className="r-grid-1-1 r-featured-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center" }}>
        <div style={{
          position: "relative",
          aspectRatio: "16/10",
          background: "var(--ink)",
          overflow: "hidden",
          borderRadius: 4,
          transition: "transform .35s",
          transform: hover ? "scale(1.005)" : "scale(1)",
        }}>
          <image-slot
            id={`news-${post.slug}`}
            shape="rect"
            src={post.image || ""}
            fit={post.image && post.image.includes("/clients/") ? "contain" : "cover"}
            placeholder={`Drop hero image for "${post.title}"`}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
          ></image-slot>
          <div className="mono" style={{
            position: "absolute", top: 16, left: 16,
            background: "var(--blue)",
            color: "#fff", padding: "6px 12px", fontSize: 10, borderRadius: 999,
          }}>★ Featured</div>
        </div>
        <div>
          <div className="mono" style={{ color: "var(--blue)", marginBottom: 16 }}>{post.category} · {post.date}</div>
          <h2 className="display" style={{
            fontSize: "clamp(36px, 4.2vw, 56px)",
            fontWeight: 600,
            letterSpacing: "-0.025em",
            lineHeight: 1.02,
            margin: "0 0 20px 0",
            color: "var(--ink)",
          }}>{post.title}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--muted)", margin: "0 0 28px 0", maxWidth: 540 }}>
            {post.excerpt}
          </p>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            color: "var(--blue)",
            borderBottom: "1.5px solid var(--blue)",
            paddingBottom: 4,
            fontSize: 14,
            fontWeight: 500,
          }}>
            Read the post <ArrowUpRight size={12} />
          </span>
        </div>
      </div>
    </button>
  );
};

const PostCard = ({ post, index, onOpen }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onOpen}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "block",
        width: "100%",
        background: "transparent",
        border: "none",
        padding: 0,
        textAlign: "left",
        cursor: "pointer",
      }}
    >
      <div style={{
        position: "relative",
        aspectRatio: "16/10",
        background: "var(--paper-2)",
        overflow: "hidden",
        borderRadius: 4,
        marginBottom: 18,
        transition: "transform .3s",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
      }}>
        <image-slot
          id={`news-${post.slug}`}
          shape="rect"
          src={post.image || ""}
          fit={post.image && post.image.includes("/clients/") ? "contain" : "cover"}
          placeholder={`Drop image`}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
        ></image-slot>
        <div className="mono" style={{
          position: "absolute", top: 12, left: 12,
          background: "rgba(244,241,234,0.95)",
          color: "var(--ink)", padding: "5px 10px", fontSize: 10,
        }}>{String(index).padStart(2, "0")}</div>
      </div>
      <div className="mono" style={{ color: "var(--muted)", marginBottom: 8 }}>{post.category} · {post.date}</div>
      <h3 className="display" style={{
        fontSize: 22, fontWeight: 600, letterSpacing: "-0.015em", lineHeight: 1.2,
        margin: "0 0 10px 0", color: "var(--ink)",
        textWrap: "balance",
        display: "-webkit-box",
        WebkitLineClamp: 2,
        WebkitBoxOrient: "vertical",
        overflow: "hidden",
        minHeight: "calc(22px * 1.2 * 2)",
      }}>{post.title}</h3>
      <p style={{
        fontSize: 14, lineHeight: 1.55, color: "var(--muted)", margin: 0,
        display: "-webkit-box",
        WebkitLineClamp: 2,
        WebkitBoxOrient: "vertical",
        overflow: "hidden",
        minHeight: "calc(14px * 1.55 * 2)",
      }}>{post.excerpt}</p>
    </button>
  );
};

window.NewsroomPage = NewsroomPage;