// Projects index — cinematic, filterable, asymmetric grid + commercial ledger
const { useState: useStateP, useMemo: useMemoP } = React;

function ProjectsPage() {
  const [filter, setFilter] = useStateP("All");
  const cats = ["All", ...Array.from(new Set(PROJECTS.map(p => p.category)))];
  const [view, setView] = useStateP("editorial");

  const filtered = useMemoP(() => {
    if (filter === "All") return PROJECTS;
    return PROJECTS.filter(p => p.category === filter);
  }, [filter]);

  return (
    <div className="page" data-screen-label="02 Projects">
      <section style={{ paddingTop: "calc(var(--pad) + 96px)", paddingBottom: 48 }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>Selected Work</div>
          <h1 style={{ fontSize: "clamp(56px, 8vw, 140px)", lineHeight: .98 }}>
            The <span className="italic" style={{ color: "var(--bronze-2)" }}>portfolio.</span>
          </h1>
          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end", borderTop: "1px solid var(--line)", paddingTop: 28 }}>
            <p style={{ maxWidth: 640, color: "var(--bone-2)", fontSize: 17, lineHeight: 1.6, margin: 0 }}>
              A cross-section of GenTech's work — custom homes, healthcare and commercial projects, senior living, and recreation — across the Chattanooga region and beyond.
              The photographed projects below are a fraction of a deeper body of commercial work, listed further down.
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
              {cats.map(c => (
                <button key={c} className={"chip " + (filter === c ? "active" : "")} onClick={() => setFilter(c)}>{c}</button>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24, alignItems: "center" }}>
            <span className="eyebrow">{filtered.length} photographed project{filtered.length === 1 ? "" : "s"}</span>
            <div style={{ display: "flex", gap: 4, border: "1px solid var(--line-2)" }}>
              {["editorial", "index"].map(v => (
                <button key={v} onClick={() => setView(v)}
                  style={{
                    padding: "8px 14px", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase",
                    background: view === v ? "var(--bone)" : "transparent", color: view === v ? "var(--bg)" : "var(--bone-2)",
                    border: 0, cursor: "pointer", fontFamily: "var(--sans)",
                  }}
                >{v}</button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          {view === "editorial" ? <EditorialGrid items={filtered} /> : <IndexList items={filtered} />}
        </div>
      </section>

      <CommercialLedger />
    </div>
  );
}

function EditorialGrid({ items }) {
  const rows = [];
  let i = 0;
  while (i < items.length) { rows.push(items.slice(i, i + 3)); i += 3; }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 80 }}>
      {rows.map((row, ri) => (
        <EditorialRow key={ri} row={row} ri={ri} startIndex={ri * 3} />
      ))}
    </div>
  );
}

function EditorialRow({ row, ri, startIndex }) {
  const variant = ri % 3;
  if (row.length === 1) {
    return (
      <Reveal>
        <div className="grid grid-12">
          <div style={{ gridColumn: "3 / span 8" }}>
            <ProjectTile project={row[0]} index={startIndex} aspect="ar-16-9" onClick={() => window.__openProject(row[0].id)} />
          </div>
        </div>
      </Reveal>
    );
  }
  if (row.length === 2) {
    return (
      <Reveal>
        <div className="grid grid-12">
          <div style={{ gridColumn: "1 / span 7" }}>
            <ProjectTile project={row[0]} index={startIndex} aspect="ar-4-5" onClick={() => window.__openProject(row[0].id)} />
          </div>
          <div style={{ gridColumn: "8 / span 5", marginTop: 80 }}>
            <ProjectTile project={row[1]} index={startIndex + 1} aspect="ar-3-4" onClick={() => window.__openProject(row[1].id)} />
          </div>
        </div>
      </Reveal>
    );
  }
  if (variant === 0) {
    return (
      <Reveal>
        <div className="grid grid-12">
          <div style={{ gridColumn: "1 / span 7" }}>
            <ProjectTile project={row[0]} index={startIndex} aspect="ar-4-5" onClick={() => window.__openProject(row[0].id)} />
          </div>
          <div style={{ gridColumn: "9 / span 4", display: "flex", flexDirection: "column", gap: 32 }}>
            <ProjectTile project={row[1]} index={startIndex + 1} aspect="ar-3-4" onClick={() => window.__openProject(row[1].id)} />
            <div className="eyebrow" style={{ borderTop: "1px solid var(--line)", paddingTop: 14 }}>{row[1].place}</div>
          </div>
          <div style={{ gridColumn: "1 / span 12", marginTop: 16 }}>
            <ProjectTile project={row[2]} index={startIndex + 2} aspect="ar-21-9" onClick={() => window.__openProject(row[2].id)} />
          </div>
        </div>
      </Reveal>
    );
  }
  if (variant === 1) {
    return (
      <Reveal>
        <div className="grid grid-12">
          <div style={{ gridColumn: "1 / span 5", marginTop: 48 }}>
            <ProjectTile project={row[0]} index={startIndex} aspect="ar-3-4" onClick={() => window.__openProject(row[0].id)} />
          </div>
          <div style={{ gridColumn: "6 / span 7" }}>
            <ProjectTile project={row[1]} index={startIndex + 1} aspect="ar-4-5" onClick={() => window.__openProject(row[1].id)} />
          </div>
          <div style={{ gridColumn: "3 / span 7", marginTop: 16 }}>
            <ProjectTile project={row[2]} index={startIndex + 2} aspect="ar-16-9" onClick={() => window.__openProject(row[2].id)} />
          </div>
        </div>
      </Reveal>
    );
  }
  return (
    <Reveal>
      <div className="grid grid-12">
        <div style={{ gridColumn: "1 / span 12" }}>
          <ProjectTile project={row[0]} index={startIndex} aspect="ar-21-9" onClick={() => window.__openProject(row[0].id)} />
        </div>
        <div style={{ gridColumn: "1 / span 6", marginTop: 16 }}>
          <ProjectTile project={row[1]} index={startIndex + 1} aspect="ar-4-5" onClick={() => window.__openProject(row[1].id)} />
        </div>
        <div style={{ gridColumn: "7 / span 6", marginTop: 96 }}>
          <ProjectTile project={row[2]} index={startIndex + 2} aspect="ar-3-4" onClick={() => window.__openProject(row[2].id)} />
        </div>
      </div>
    </Reveal>
  );
}

function IndexList({ items }) {
  return (
    <div style={{ borderTop: "1px solid var(--line)" }}>
      {items.map((p, i) => <IndexRow key={p.id} p={p} i={i} />)}
    </div>
  );
}

function IndexRow({ p, i }) {
  const [hover, setHover] = useStateP(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={() => window.__openProject(p.id)}
      style={{
        display: "grid", gridTemplateColumns: "70px 2fr 1.2fr 1.4fr 60px",
        alignItems: "center", padding: "28px 0", borderBottom: "1px solid var(--line)",
        cursor: "pointer", position: "relative", gap: 24,
      }}
    >
      <div style={{
        position: "absolute", left: "32%", top: "50%",
        transform: `translate(${hover ? -50 : -40}%, -50%) scale(${hover ? 1 : .96})`,
        width: 240, height: 150, pointerEvents: "none",
        opacity: hover ? 1 : 0, transition: "opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1)",
        zIndex: 4, backgroundImage: `url(${p.img})`, backgroundSize: "cover", backgroundPosition: "center",
        border: "1px solid var(--line-2)",
      }} />
      <span style={{ fontFamily: "var(--mono)", color: "var(--bone-3)", fontSize: 12, letterSpacing: ".14em" }}>—{String(i + 1).padStart(2, "0")}</span>
      <span style={{ fontFamily: "var(--serif)", fontSize: "clamp(24px, 2.4vw, 36px)", color: hover ? "var(--bronze-2)" : "var(--bone)", transition: "color .3s ease" }}>{p.title}</span>
      <span className="eyebrow">{p.category}</span>
      <span style={{ color: "var(--bone-2)", fontSize: 13 }}>{p.place}</span>
      <span style={{ color: hover ? "var(--bronze)" : "var(--bone-4)", textAlign: "right", transition: "color .3s ease, transform .3s ease", transform: hover ? "translateX(4px)" : "none" }}>→</span>
    </div>
  );
}

// Honest list of real GenTech commercial work without published photography.
function CommercialLedger() {
  return (
    <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="grid grid-12" style={{ alignItems: "end", marginBottom: 48 }}>
          <div style={{ gridColumn: "1 / span 7" }}>
            <div className="eyebrow" style={{ marginBottom: 22 }}><span className="dot"></span>Further Commercial Work</div>
            <h2 style={{ fontSize: "clamp(36px, 4vw, 60px)" }}>
              A deeper record <br /><span className="italic" style={{ color: "var(--bronze-2)" }}>than the photographs show.</span>
            </h2>
          </div>
          <div style={{ gridColumn: "9 / span 4", color: "var(--bone-2)", fontSize: 14, lineHeight: 1.65 }}>
            Healthcare, banking, retail, and civic projects across the region. Photography for these is being commissioned as part of the brand refresh.
          </div>
        </div>
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {COMMERCIAL_LEDGER.map((p, i) => (
            <div key={p.name} style={{
              display: "grid", gridTemplateColumns: "70px 1fr 200px", gap: 24,
              padding: "20px 0", borderBottom: "1px solid var(--line)", alignItems: "center",
            }}>
              <span style={{ fontFamily: "var(--mono)", color: "var(--bone-3)", fontSize: 12, letterSpacing: ".14em" }}>—{String(i + 1).padStart(2, "0")}</span>
              <span style={{ fontFamily: "var(--serif)", fontSize: "clamp(20px, 2vw, 28px)", color: "var(--bone)" }}>{p.name}</span>
              <span className="eyebrow" style={{ textAlign: "right" }}>{p.sector}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProjectsPage });