/* eslint-disable */
// Home — Recent placements (Job Board analog).

function HomePlacements() {
  const placements = [
  { co: "Fetch", initials: "Ck", role: "Senior Engineer", level: "IC5", tc: "$530K", delta: "+$300K", days: 98, type: "Insurance" },
  { co: "Meta", initials: "Rm", role: "Senior Engineer", level: "E5", tc: "$487K", delta: "+$167K", days: 71, type: "FAANG" },
  { co: "Cars Commerce", initials: "Dg", role: "Director of Engineering", level: "Leader", tc: "$450K", delta: "+$450K", days: 76, type: "" },
  { co: "Remitly", initials: "Rp", role: "SDM IV", level: "L6", tc: "$414K", delta: "+$114K", days: 68, type: "Fintech" },
  { co: "Arya Health", initials: "Sc", role: "Staff Engineer", level: "L6", tc: "$375K", delta: "+$323K", days: 88, type: "Healthtech" },
  { co: "Riot Games", initials: "Jm", role: "Principal Architect", level: "Senior IC", tc: "$298K", delta: "+$160K", days: 76, type: "Gaming" },
  { co: "Net Documents", initials: "Rp", role: "Senior SDM", level: "L7", tc: "$295K", delta: "+$20K", days: 68, type: "AI" },
  { co: "PayPal", initials: "Bx", role: "Staff Engineer", level: "Staff", tc: "$270K", delta: "+$270K", days: 87, type: "Fintech" },
  { co: "Manufacturing", initials: "Ll", role: "Director of Technology", level: "Leader", tc: "$225K", delta: "+$225K", days: 65, type: "Enterprise" },
  { co: "Tailor", initials: "Am", role: "Senior Frontend Engineer", level: "L5", tc: "$200K", delta: "+$200K", days: 69, type: "AI" },
  { co: "Getty Images", initials: "Db", role: "Senior ML Engineer", level: "Senior", tc: "$200K", delta: "+$100K", days: 91, type: "B2B SaaS" },
  { co: "EFE", initials: "Jr", role: "Staff Software Engineer", level: "L4", tc: "$281K", delta: "+$121K", days: 76, type: "Fintech" }];

  const filters = ["All", "FAANG", "Fintech", "Gaming", "AI", "Insurance", "Healthtech", "B2B SaaS", "Enterprise"];
  const [filter, setFilter] = React.useState("All");
  const [page, setPage] = React.useState(0);
  const PAGE_SIZE = 6;

  const filtered = filter === "All" ? placements : placements.filter((p) => p.type === filter);
  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
  const visible = filtered.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE);

  // Reset to page 0 when filter changes
  React.useEffect(() => {setPage(0);}, [filter]);

  return (
    <section style={{
      padding: "120px 0",
      background: "var(--navy-900)",
      borderTop: "1px solid rgba(255,255,255,0.05)",
      borderBottom: "1px solid rgba(255,255,255,0.05)"
    }}>
      <div className="wc-container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "start" }}>
          {/* Left intro */}
          <Reveal>
            <div style={{ position: "sticky", top: 100 }}>
              <div className="wc-kicker" style={{ marginBottom: 12 }}>05 · Recent placements</div>
              <h2 style={{
                fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 40,
                color: "#fff", letterSpacing: "-0.025em", lineHeight: 1.12, margin: "0 0 18px"
              }}>The board, but ours.</h2>
              <p style={{
                fontFamily: "'DM Sans', sans-serif", fontSize: 15.5, color: "#7299b5",
                lineHeight: 1.6, margin: "0 0 28px"
              }}>A live, anonymized ledger of some of our offers signed in the last 12 months — the company, the level, the comp, and the days to offer. Filter by sector to find the closest match to your target.

              </p>
              <Button variant="secondary" href="case-studies.html" iconRight="arrow-right">Browse all case studies</Button>

              <div style={{ marginTop: 40, padding: 20, background: "rgba(255,255,255,0.025)", borderRadius: 14, border: "1px solid rgba(255,255,255,0.07)" }}>
                <div className="wc-kicker" style={{ marginBottom: 10 }}>Last 90 days</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div>
                    <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: 28, color: "#fff", letterSpacing: "-0.03em", lineHeight: 1 }}>23</div>
                    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#7299b5", marginTop: 4 }}>Offers landed</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: 28, color: "#fff", letterSpacing: "-0.03em", lineHeight: 1 }}>$92K</div>
                    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#7299b5", marginTop: 4 }}>Avg. TC delta</div>
                  </div>
                </div>
              </div>
            </div>
          </Reveal>

          {/* Right: filterable list */}
          <div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 20 }}>
              {filters.map((f) =>
              <button key={f} onClick={() => setFilter(f)} style={{
                fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 12.5,
                padding: "7px 14px",
                background: f === filter ? "var(--navy-400)" : "rgba(255,255,255,0.04)",
                color: f === filter ? "#fff" : "#9bbdd0",
                border: `1px solid ${f === filter ? "rgba(74,137,200,0.5)" : "rgba(255,255,255,0.08)"}`,
                borderRadius: 100,
                cursor: "pointer",
                transition: "all 180ms cubic-bezier(0.4,0,0.2,1)"
              }}>{f}</button>
              )}
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {visible.map((p, i) =>
              <PlacementRow key={p.co + p.role} p={p} idx={i} />
              )}
            </div>

            {/* Pagination */}
            {totalPages > 1 &&
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 18, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.07)" }}>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 12, color: "#527b9b", letterSpacing: "0.06em" }}>
                  <span style={{ color: "#fff" }}>{page + 1}</span> / {totalPages} &nbsp;·&nbsp; {filtered.length} placements
                </div>
                <div style={{ display: "flex", gap: 8 }}>
                  <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0} style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: page === 0 ? "rgba(255,255,255,0.02)" : "rgba(255,255,255,0.06)",
                  border: "1px solid rgba(255,255,255,0.10)",
                  color: page === 0 ? "rgba(255,255,255,0.2)" : "#fff",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  cursor: page === 0 ? "not-allowed" : "pointer"
                }}>
                    <i data-lucide="arrow-left" style={{ width: 14, height: 14 }} />
                  </button>
                  <button onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))} disabled={page === totalPages - 1} style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: page === totalPages - 1 ? "rgba(255,255,255,0.02)" : "var(--navy-400)",
                  border: "1px solid rgba(74,137,200,0.4)",
                  color: page === totalPages - 1 ? "rgba(255,255,255,0.2)" : "#fff",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  cursor: page === totalPages - 1 ? "not-allowed" : "pointer"
                }}>
                    <i data-lucide="arrow-right" style={{ width: 14, height: 14 }} />
                  </button>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

function PlacementRow({ p, idx }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: "auto 1fr auto auto auto",
        alignItems: "center",
        gap: 20,
        padding: "18px 22px",
        background: hover ? "rgba(255,255,255,0.045)" : "rgba(255,255,255,0.025)",
        border: `1px solid ${hover ? "rgba(74,137,200,0.30)" : "rgba(255,255,255,0.07)"}`,
        borderRadius: 14,
        cursor: "pointer",
        transition: "all 180ms cubic-bezier(0.4,0,0.2,1)",
        animation: `wc-fade-up 320ms cubic-bezier(0.4,0,0.2,1) ${idx * 40}ms both`
      }}>
      
      <div style={{
        width: 40, height: 40, borderRadius: 10,
        background: "rgba(74,137,200,0.10)",
        border: "1px solid rgba(74,137,200,0.25)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14,
        color: "#7aade0", letterSpacing: "-0.01em"
      }}>{p.initials || p.co.slice(0, 2)}</div>

      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 16, color: "#fff", letterSpacing: "-0.01em" }}>{p.role}</span>
          <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: "#7aade0", letterSpacing: "0.05em" }}>{p.level}</span>
        </div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12.5, color: "#7299b5" }}>
          {p.co}{p.type ? ` · ${p.type}` : ""}
        </div>
      </div>

      <div style={{ textAlign: "right" }}>
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: "#fff", letterSpacing: "-0.01em" }}>{p.tc}</div>
        <div className="wc-kicker" style={{ fontSize: 9.5, marginTop: 3 }}>Total comp</div>
      </div>

      <div style={{ textAlign: "right", minWidth: 80 }}>
        <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 13, fontWeight: 600, color: "#34d399" }}>{p.delta ? `↑ ${p.delta}` : ""}</div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11.5, color: "#527b9b", marginTop: 3 }}>{p.days}d to offer</div>
      </div>

      <i data-lucide="arrow-right" style={{ width: 16, height: 16, color: hover ? "#fff" : "#527b9b", transition: "color 180ms" }} />
    </div>);

}

window.HomePlacements = HomePlacements;