/* Work page — selected projects grid. Moody monochrome Unsplash imagery. */

const PROJECTS = [
  {
    title: "Legal Finder",
    client: "witpert",
    discipline: "Web · Mobile App",
    year: "2026",
    img: "https://images.unsplash.com/photo-1604881991720-f91add269bed?q=80&w=1600&auto=format&fit=crop",
    tall: true,
  },
  {
    title: "Solutions Provider",
    client: "Pylus Group",
    discipline: "CRM · Automation",
    year: "2026",
    img: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=1600&auto=format&fit=crop",
  },
  {
    title: "Thrill Seekers",
    client: "Andrenaholic",
    discipline: "Web · Mbile App",
    year: "2026",
    img: "https://images.unsplash.com/photo-1542036772-6e26086f7e9e?q=80&w=1600&auto=format&fit=crop",
  },
  {
    title: "Grade Watch",
    client: "Grade L",
    discipline: "CRM · Web",
    year: "2026",
    img: "https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1600&auto=format&fit=crop",
    tall: true,
  },
  {
    title: "Coffee Brand",
    client: "FuelUp Coffee",
    discipline: "Web · Brand · E-Commerce",
    year: "2025",
    img: "https://images.unsplash.com/photo-1465847899084-d164df4dedc6?q=80&w=1600&auto=format&fit=crop",
  },
  {
    title: "Coffee Roasters",
    client: "Goat Hill Roasters",
    discipline: "Web · Brand · E-Commerce",
    year: "2024",
    img: "https://images.unsplash.com/photo-1543007630-9710e4a00a20?q=80&w=1600&auto=format&fit=crop",
  },
  {
    title: "Fitness Enthusiast",
    client: "ROWSTRADA",
    discipline: "Web · Brand · Interactive",
    year: "2026",
    img: "https://images.unsplash.com/photo-1508094103625-7c8a3c75ba51?q=80&w=1600&auto=format&fit=crop",
  },
];

const workStyles = {
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(12, 1fr)",
    gap: 24,
  },
  gridTablet: { gap: 18 },
  gridMobile: { gridTemplateColumns: "1fr", gap: 16 },
  card: {
    position: "relative",
    overflow: "hidden",
    borderRadius: 6,
    border: "1px solid var(--line)",
    cursor: "pointer",
    background: "var(--bg)",
    aspectRatio: "4 / 3",
    textDecoration: "none",
    color: "inherit",
  },
  cardTall: { aspectRatio: "3 / 4" },
  img: {
    width: "100%",
    height: "100%",
    objectFit: "cover",
    transition: "transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 400ms ease",
    filter: "saturate(0.6) brightness(0.85)",
  },
  scrim: {
    position: "absolute",
    inset: 0,
    background:
      "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%)",
    pointerEvents: "none",
  },
  meta: {
    position: "absolute",
    left: 20,
    right: 20,
    bottom: 18,
    display: "flex",
    alignItems: "flex-end",
    justifyContent: "space-between",
    gap: 12,
  },
  metaTitle: {
    fontSize: 22,
    fontWeight: 500,
    letterSpacing: "-0.015em",
    margin: 0,
    color: "var(--fg)",
  },
  metaSub: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 10,
    letterSpacing: "0.2em",
    textTransform: "uppercase",
    color: "var(--fg-dim)",
    margin: "4px 0 0",
  },
  metaYear: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 11,
    color: "var(--fg-faint)",
    letterSpacing: "0.15em",
  },
  filters: {
    display: "flex",
    gap: 10,
    flexWrap: "wrap",
    marginBottom: 32,
  },
  filtersMobile: { marginBottom: 24, gap: 8 },
  filter: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 11,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    padding: "8px 14px",
    borderRadius: 999,
    border: "1px solid var(--line)",
    background: "transparent",
    color: "var(--fg-dim)",
    cursor: "pointer",
  },
  filterActive: {
    color: "var(--bg)",
    background: "var(--fg)",
    borderColor: "var(--fg)",
  },
};

function WorkCard({ p, isMobile }) {
  const [hover, setHover] = React.useState(false);
  // On mobile, every card spans the single column. On desktop, tall cards
  // span 4 of 12 (so two stand beside one wide), normal cards span 6 (two-up).
  const colSpan = isMobile ? "auto" : (p.tall ? "span 4" : "span 6");
  return (
    <a
      href="#"
      onClick={(e) => e.preventDefault()}
      aria-label={`${p.title} — ${p.client}, ${p.discipline}, ${p.year}`}
      style={{
        ...workStyles.card,
        ...(p.tall && !isMobile ? workStyles.cardTall : null),
        gridColumn: colSpan,
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onFocus={() => setHover(true)}
      onBlur={() => setHover(false)}
    >
      <img
        src={p.img}
        alt=""
        loading="lazy"
        style={{
          ...workStyles.img,
          transform: hover ? "scale(1.04)" : "scale(1)",
          filter: hover
            ? "saturate(0.8) brightness(0.95)"
            : "saturate(0.6) brightness(0.85)",
        }}
      />
      <div style={workStyles.scrim} />
      <div style={workStyles.meta}>
        <div>
          <h3 style={workStyles.metaTitle}>
            {p.title}{" "}
            <span style={{ color: "var(--fg-dim)", fontWeight: 300, fontStyle: "italic" }}>
              — {p.client}
            </span>
          </h3>
          <p style={workStyles.metaSub}>{p.discipline}</p>
        </div>
        <span style={workStyles.metaYear}>{p.year}</span>
      </div>
    </a>
  );
}

function WorkPage() {
  const { isMobile, isTablet } = window.useViewport();
  const filters = ["All", "Web", "Mobile", "Product", "Brand"];
  const [active, setActive] = React.useState("All");

  const gridStyle = {
    ...workStyles.grid,
    ...(isTablet ? workStyles.gridTablet : null),
    ...(isMobile ? workStyles.gridMobile : null),
  };

  return (
    <window.PageShell active="Work" backdrop="quiet">
      <window.PageHero
        eyebrow="Selected work · 2023 — 2026"
        title="Things we shipped for "
        italicTail="people we like."
        sub="A small selection of recent work — websites, mobile apps, design systems. We say no often, so the work that survives tends to mean something. Reach out for more info."
      />
      <window.Section title="Index">
        <div
          style={{ ...workStyles.filters, ...(isMobile ? workStyles.filtersMobile : null) }}
          role="tablist"
          aria-label="Filter projects"
        >
          {filters.map((f) => (
            <button
              key={f}
              type="button"
              role="tab"
              aria-selected={active === f}
              style={{
                ...workStyles.filter,
                ...(active === f ? workStyles.filterActive : null),
              }}
              onClick={() => setActive(f)}
            >
              {f}
            </button>
          ))}
        </div>
        <div style={gridStyle}>
          {PROJECTS.map((p) => (
            <WorkCard key={p.title} p={p} isMobile={isMobile} />
          ))}
        </div>
      </window.Section>
    </window.PageShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<WorkPage />);