/* global React, useViewport */

const HOMEPAGE_PROJECTS = [
  { slug: "project-adelaide", name: "Adelaide Airport", city: "Adelaide", firm: "Woods Bagot", year: 2025, image: "images/_legacy/projects/adelaide-airport.jpg", collection: "Gateway · Twig" },
  { slug: "project-jubilee-place", name: "Jubilee Place", city: "Brisbane", firm: "Blight Rayner", year: 2022, image: "images/_legacy/projects/jubilee-place.webp", collection: "Mochi" },
  { slug: "project-dfw", name: "DFW International Airport", city: "Dallas–Fort Worth", firm: "Gate Seating", year: 2024, image: "images/_legacy/projects/dfw-airport.webp", collection: "Gateway" },
];

function ProjectsGrid({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <section style={{ padding: isMobile ? "72px 20px" : "140px max(24px, 3vw) 160px", maxWidth: 1440, margin: "0 auto" }}>
      <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: isMobile ? "flex-start" : "flex-end", gap: isMobile ? 20 : 40, marginBottom: isMobile ? 40 : 64, borderBottom: "0.5px solid rgba(26,25,23,0.18)", paddingBottom: isMobile ? 24 : 28 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 10 }}>Projects</div>
          <h2 style={{ fontSize: isMobile ? 18 : 20, lineHeight: 1.3, letterSpacing: "-0.005em", color: "#1a1917", margin: 0, maxWidth: "36ch", fontWeight: 400 }}>
            Specified in airports, campuses and civic institutions.
          </h2>
        </div>
        <a onClick={() => setScreen && setScreen("projects")} style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#1a1917", fontWeight: 500, cursor: "pointer", borderBottom: "0.5px solid #1a1917", paddingBottom: 4, whiteSpace: "nowrap" }}>
          View all →
        </a>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? "32px 0" : "32px" }}>
        {HOMEPAGE_PROJECTS.map((p) => (
          <div key={p.name}
               onClick={() => p.slug && setScreen && setScreen(p.slug)}
               style={{ cursor: p.slug ? "pointer" : "default" }}>
            <div style={{ aspectRatio: "16/10", background: "#e4e2da", overflow: "hidden" }}>
              {p.image && (
                <img src={p.image} srcSet={window.IMG && window.IMG.srcsetFor(p.image)} sizes={window.IMG && window.IMG.sizes()} alt={p.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              )}
            </div>
            <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)", marginTop: 16 }} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 12 }}>
              <div style={{ fontSize: 20, color: "#1a1917", fontWeight: 500, letterSpacing: "-0.01em" }}>{p.name}</div>
              <div style={{ fontSize: 11, color: "#6c6862", letterSpacing: "0.12em", textTransform: "uppercase" }}>{p.year}</div>
            </div>
            <div style={{ fontSize: 13, color: "#6c6862", marginTop: 6, letterSpacing: "0.02em" }}>
              {p.city} · {p.firm}{p.collection ? <span style={{ color: "#9c9890" }}> · {p.collection}</span> : null}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.ProjectsGrid = ProjectsGrid;