// primer-insights.jsx — Insights index: hero, category filter, featured post, grid.

const { useState: useStI, useMemo: useMemoI } = React;

// striped placeholder art w/ a monospace caption — stand-in for real photography/renders
function ArtPlaceholder({ label, height = 220, style, src, fit }) {
  if (src) {
    const auto = height === "auto";
    const contain = fit === "contain";
    return (
      <div style={{ height: auto ? "auto" : height, borderRadius: 14, overflow: "hidden", border: "1px solid var(--hairline)", background: contain ? "#FFFFFF" : undefined, display: contain ? "flex" : undefined, alignItems: contain ? "center" : undefined, justifyContent: contain ? "center" : undefined, ...style }}>
        <img src={src} alt={label || ""} style={{ width: contain ? "auto" : "100%", height: auto ? "auto" : "100%", maxWidth: contain ? "100%" : undefined, objectFit: auto ? "contain" : (contain ? "contain" : "cover"), display: "block" }} />
      </div>
    );
  }
  return (
    <div style={{
      height, borderRadius: 14, position: "relative", overflow: "hidden",
      background: "repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 10px, var(--paper) 10px, var(--paper) 20px)",
      border: "1px solid var(--hairline)",
      display: "flex", alignItems: "flex-end", ...style,
    }}>
      <span className="p-mono" style={{
        margin: 12, padding: "5px 10px", background: "var(--ink)", color: "var(--paper)",
        borderRadius: 999, fontSize: 10.5, letterSpacing: "0.06em", opacity: 0.82,
      }}>{label}</span>
    </div>
  );
}

function formatDate(iso) {
  const d = new Date(iso + "T00:00:00");
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
}

function PostCard({ post }) {
  return (
    <a href={`Post.html?slug=${post.slug}`} className="p-ins-card">
      <ArtPlaceholder label={post.image || "PHOTO"} src={post.imageSrc} fit={post.imageFit} height={188} />
      <div className="p-mono p-ins-card-tag">{post.category}</div>
      <h3 className="p-ins-card-title">{post.title}</h3>
      <p className="p-ins-card-excerpt">{post.excerpt}</p>
      <div className="p-mono p-ins-card-meta">{formatDate(post.date)} · {post.readTime}</div>
    </a>
  );
}

function FeaturedPost({ post }) {
  return (
    <a href={`Post.html?slug=${post.slug}`} className="p-ins-feature">
      <ArtPlaceholder label={post.image || "PHOTO"} src={post.imageSrc} fit={post.imageFit} height={340} style={{ borderRadius: 18 }} />
      <div className="p-ins-feature-body">
        <div className="p-mono p-ins-card-tag">{post.category} · FEATURED</div>
        <h2 className="p-ins-feature-title">{post.title}</h2>
        <p className="p-ins-feature-excerpt">{post.excerpt}</p>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 6 }}>
          <span className="p-mono" style={{ color: "var(--muted)" }}>{post.author} · {formatDate(post.date)} · {post.readTime}</span>
        </div>
      </div>
    </a>
  );
}

function InsightsHero({ categories, active, setActive }) {
  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "64px 0 56px" }}>
      <div className="p-container" style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
        <div className="p-mono" style={{ color: "#9AE6B4", letterSpacing: "0.1em", marginBottom: 18 }}></div>
        <h1 className="p-page-h1" style={{ fontSize: 56, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.05, maxWidth: 900, marginBottom: 18 }}>
          Notes on zoning, underwriting,<br/>and the deals that pencil.
        </h1>
        <p style={{ fontSize: 17, color: "rgba(255,255,255,0.55)", maxWidth: 540, lineHeight: 1.6, marginBottom: 36 }}>
          Field notes from our zoning, product, and customer teams, for developers, brokers, and analysts underwriting real sites.
        </p>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>
          {categories.map((c) => (
            <button
              key={c}
              onClick={() => setActive(c)}
              className="p-ins-filter"
              style={{
                background: active === c ? "var(--paper)" : "rgba(255,255,255,0.08)",
                color: active === c ? "var(--ink)" : "rgba(255,255,255,0.75)",
                border: "1px solid " + (active === c ? "var(--paper)" : "rgba(255,255,255,0.14)"),
              }}
            >
              {c}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function InsightsPage() {
  const categories = useMemoI(() => ["All", ...Array.from(new Set(BLOG_POSTS.map(p => p.category)))], []);
  const [active, setActive] = useStI("All");

  const sorted = useMemoI(() => [...BLOG_POSTS].sort((a, b) => new Date(b.date) - new Date(a.date)), []);
  const featured = useMemoI(() => sorted.find(p => p.featured) || sorted[0], [sorted]);
  const rest = useMemoI(() => sorted.filter(p => p.slug !== featured.slug), [sorted, featured]);
  const filtered = useMemoI(
    () => active === "All" ? rest : rest.filter(p => p.category === active),
    [rest, active]
  );
  const showFeatured = active === "All";

  return (
    <div style={{ position: "relative" }}>
      <div className="p-top-black-bg" />
      <Nav />
      <InsightsHero categories={categories} active={active} setActive={setActive} />

      <section className="p-section" style={{ paddingTop: 72 }}>
        <div className="p-container">
          {showFeatured && <FeaturedPost post={featured} />}

          <div className="p-ins-grid" style={{ marginTop: showFeatured ? 64 : 0 }}>
            {filtered.map((post) => <PostCard key={post.slug} post={post} />)}
          </div>

          {filtered.length === 0 &&
            <p className="p-mono" style={{ color: "var(--muted)", textAlign: "center", padding: "60px 0" }}>No posts in this category yet.</p>
          }
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { InsightsPage, ArtPlaceholder, PostCard, formatDate });