// Projects index — filterable grid by sector
function Projects({ onNav }) {
  const { PROJECTS, SECTORS, SECTOR_COUNTS } = window.DI;
  const [filter, setFilter] = useState("all");
  const [view, setView] = useState("grid"); // grid | list

  const filtered = useMemo(() => {
    if (filter === "all") return PROJECTS;
    return PROJECTS.filter((p) => p.sector === filter);
  }, [filter, PROJECTS]);

  return (
    <div className="page-enter">
      {/* Header */}
      <section style={{ paddingTop: "8rem", paddingBottom: "3rem", background: "var(--paper)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem", alignItems: "end" }}>
            <div style={{ gridColumn: "span 8" }}>
              <Eyebrow>Projects · 1,200+ delivered · {PROJECTS.length} featured</Eyebrow>
              <h1 className="h1" style={{ marginTop: "1.25rem" }}>
                A portfolio across eight sectors.
              </h1>
              <p className="lead" style={{ marginTop: "1.5rem", maxWidth: "44rem" }}>
                Corporate to entertainment, banking to bespoke F&B — filtered by sector below.
                Each case study extends our existing metadata with which in-house divisions delivered the work.
              </p>
            </div>
            <div style={{ gridColumn: "span 4", textAlign: "right" }}>
              <div className="eyebrow" style={{ marginBottom: "0.5rem" }}>Showing</div>
              <div className="display num" style={{ fontSize: "3rem", color: "var(--ink)", lineHeight: 1 }}>{filtered.length}<span style={{ color: "var(--accent)", fontSize: "0.4em" }}> / {PROJECTS.length}</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* Filter bar */}
      <section style={{ position: "sticky", top: 65, zIndex: 30, background: "rgba(255,255,255,0.95)", backdropFilter: "blur(8px)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ display: "flex", gap: "0.5rem", padding: "1rem 0", alignItems: "center", flexWrap: "wrap" }}>
          <span className="eyebrow" style={{ marginRight: "1rem" }}>Sector</span>
          <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap", flex: 1 }}>
            {SECTORS.map((s) => {
              const count = s.key === "all" ? PROJECTS.length : (SECTOR_COUNTS[s.key] || 0);
              return (
                <button key={s.key} className="chip" aria-pressed={filter === s.key}
                  onClick={() => setFilter(s.key)}>
                  {s.label}
                  <span style={{ opacity: 0.5, marginLeft: "0.15rem" }} className="num">({count})</span>
                </button>
              );
            })}
          </div>
          <div style={{ display: "flex", gap: "0.5rem", marginLeft: "1rem" }} className="view-toggle">
            <button onClick={() => setView("grid")}
              style={{ background: "transparent", border: 0, color: view === "grid" ? "var(--ink)" : "var(--graphite)", padding: "0.5rem", cursor: "pointer" }} aria-label="Grid view">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="1" y="1" width="6" height="6" /><rect x="9" y="1" width="6" height="6" /><rect x="1" y="9" width="6" height="6" /><rect x="9" y="9" width="6" height="6" /></svg>
            </button>
            <button onClick={() => setView("list")}
              style={{ background: "transparent", border: 0, color: view === "list" ? "var(--ink)" : "var(--graphite)", padding: "0.5rem", cursor: "pointer" }} aria-label="List view">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.2"><line x1="1" y1="3" x2="15" y2="3" /><line x1="1" y1="8" x2="15" y2="8" /><line x1="1" y1="13" x2="15" y2="13" /></svg>
            </button>
          </div>
        </div>
      </section>

      {/* Grid / list */}
      <section className="section bg-paper">
        <div className="container">
          {view === "grid" ? (
            <div className="proj-grid" style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: "1.5rem 1.5rem" }}>
              {filtered.map((p, i) => {
                // Asymmetric — every 5th tile spans bigger
                const span = i % 5 === 0 ? 6 : i % 7 === 3 ? 6 : 4;
                const aspect = span === 6 ? "16/10" : "3/4";
                return (
                  <ProjectCard key={p.slug} project={p} onNav={onNav} span={span} aspect={aspect} />
                );
              })}
            </div>
          ) : (
            <div style={{ borderTop: "1px solid var(--line)" }}>
              {filtered.map((p) => (
                <a key={p.slug} href="#" onClick={(e) => { e.preventDefault(); onNav(`project:${p.slug}`); }}
                  style={{ display: "grid", gridTemplateColumns: "120px 2fr 1.5fr 1.5fr 1fr auto", gap: "1.5rem", alignItems: "center", padding: "1.25rem 0", borderBottom: "1px solid var(--line)", transition: "background 150ms", color: "var(--ink)" }}
                  className="proj-list-row"
                  onMouseEnter={(e) => e.currentTarget.style.background = "var(--mist)"}
                  onMouseLeave={(e) => e.currentTarget.style.background = ""}>
                  <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--mist)" }}>
                    <img src={p.cover} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </div>
                  <h3 className="h3" style={{ margin: 0, fontWeight: 500 }}>{p.name}</h3>
                  <span className="eyebrow">{p.sectorLabel}</span>
                  <span className="eyebrow">{p.location}</span>
                  <span className="num" style={{ fontSize: "0.85rem", color: "var(--graphite)" }}>{p.year}</span>
                  <Arrow />
                </a>
              ))}
            </div>
          )}

          {filtered.length === 0 && (
            <div style={{ padding: "5rem 0", textAlign: "center", color: "var(--graphite)" }}>
              <p>No projects in this sector — yet.</p>
            </div>
          )}
        </div>
      </section>

      <style>{`
        @media (max-width: 880px) {
          .proj-grid > div { grid-column: 1 / -1 !important; }
          .proj-list-row { grid-template-columns: 80px 1fr auto !important; }
          .proj-list-row > *:nth-child(3), .proj-list-row > *:nth-child(4), .proj-list-row > *:nth-child(5) { display: none !important; }
        }
      `}</style>
    </div>
  );
}

function ProjectCard({ project, onNav, span = 4, aspect = "3/4" }) {
  return (
    <div style={{ gridColumn: `span ${span}` }}>
      <a href="#" onClick={(e) => { e.preventDefault(); onNav(`project:${project.slug}`); }} style={{ display: "block" }}>
        <div className="img-hover" style={{ aspectRatio: aspect, position: "relative" }}>
          <img src={project.cover} alt={project.name} />
          <div style={{ position: "absolute", top: "1rem", left: "1rem", display: "inline-flex", alignItems: "center", gap: "0.5rem", background: "rgba(255,255,255,0.92)", padding: "0.35rem 0.7rem" }}>
            <span style={{ width: 4, height: 4, background: "var(--accent)", borderRadius: "50%" }}></span>
            <span className="eyebrow" style={{ color: "var(--ink)" }}>{project.sectorLabel}</span>
          </div>
          {project.award && (
            <div style={{ position: "absolute", top: "1rem", right: "1rem", padding: "0.35rem 0.6rem", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: "0.65rem", letterSpacing: "0.1em", textTransform: "uppercase" }}>
              ★ Award
            </div>
          )}
        </div>
        <div style={{ marginTop: "1.25rem", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "1rem" }}>
          <div style={{ flex: 1 }}>
            <h3 className="h3" style={{ margin: 0, fontSize: span === 6 ? "1.6rem" : "1.35rem" }}>{project.name}</h3>
            <div className="eyebrow" style={{ marginTop: "0.5rem" }}>
              {project.location} · {project.scope}{project.size && project.size !== "—" ? ` · ${project.size}` : ""} · {project.year}
            </div>
          </div>
          <Arrow />
        </div>
      </a>
    </div>
  );
}

Object.assign(window, { Projects, ProjectCard });