// SECTION 5 — PORTFOLIO
function PortfolioSection() {
  const items = [
    { id: 1, cat: "Color",   title: "Caramel balayage",        cap: "color — caramel balayage on chestnut base, soft face-frame", h: 580 },
    { id: 2, cat: "Cut",     title: "Sharp blunt bob",         cap: "cut — chin-length blunt bob, glassy finish, side profile",   h: 580 },
    { id: 3, cat: "Styling", title: "Editorial chignon",       cap: "styling — low chignon, hand-pinned, soft tendrils",          h: 580 },
    { id: 4, cat: "Color",   title: "Cool ash transformation", cap: "color — cool ash blonde, root-to-tip, vertical detail",      h: 580 },
    { id: 5, cat: "Cut",     title: "Soft layered shag",       cap: "cut — soft shag with curtain bangs, three-quarter view",     h: 580 },
    { id: 6, cat: "Styling", title: "Bridal half-up",          cap: "styling — bridal half-up, textured crown, back view",        h: 580 },
  ];
  const filters = ["All", "Cut", "Color", "Styling"];
  const [active, setActive] = React.useState("All");
  const visible = items.filter((it) => active === "All" || it.cat === active);

  return (
    <section id="portfolio" style={s.portfolio}>
      <RevealGroup baseDelay={0} stagger={80} threshold={0.08} style={s.portfolioInner}>
        <div style={s.portfolioHead} data-portfolio-head>
          <div>
            <Reveal as="p" style={s.sectionLabel}>
              <span style={s.labelRule} />
              Portfolio
            </Reveal>
            <Reveal as="h2" style={s.h2}>
              Werk dat <em style={s.italic}>uithoudt.</em>
            </Reveal>
          </div>
          <Reveal style={s.filters}>
            {filters.map((f) => (
              <button key={f} onClick={() => setActive(f)} style={{
                ...s.filterBtn,
                color: active === f ? BM.c.paper : BM.c.ink,
                background: active === f ? BM.c.navy : "transparent",
                borderColor: active === f ? BM.c.navy : BM.c.rule,
              }}>{f}</button>
            ))}
          </Reveal>
        </div>

        <Reveal style={s.masonry} data-masonry>
          {visible.map((it) => (
            <PortfolioTile key={it.id} item={it} />
          ))}
        </Reveal>
      </RevealGroup>
    </section>
  );
}

function PortfolioTile({ item }) {
  const [hover, setHover] = React.useState(false);

  return (
    <figure
      data-tile
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={s.tile}
    >
      <video
        src={`site/assets/portfolio-${item.id}.mp4`}
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
          objectFit: "cover",
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: `transform 1200ms ${BM.ease}`,
        }}
      />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(6,26,46,0) 50%, rgba(6,26,46,0.78) 100%)",
      }} />
      <figcaption style={{
        position: "absolute", left: 24, right: 24, bottom: 24,
        color: BM.c.paper, zIndex: 2,
      }}>
        <div style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.78, marginBottom: 6 }}>
          {item.cat}
        </div>
        <div style={{ fontFamily: BM.f.serif, fontSize: 24, lineHeight: 1.1, fontWeight: 500 }}>
          {item.title}
        </div>
      </figcaption>
    </figure>
  );
}

window.PortfolioSection = PortfolioSection;

Object.assign(s, {
  portfolio: { background: BM.c.paper, color: BM.c.ink, padding: "160px 80px", fontFamily: BM.f.sans },
  portfolioInner: { maxWidth: 1480, margin: "0 auto" },
  portfolioHead: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    gap: 48, marginBottom: 64, flexWrap: "wrap",
  },
  filters: { display: "flex", gap: 8 },
  filterBtn: {
    fontFamily: BM.f.sans, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
    padding: "10px 18px",
    background: "transparent",
    border: `1px solid ${BM.c.rule}`,
    color: BM.c.ink,
    cursor: "pointer",
    transition: "all 240ms ease",
    fontWeight: 500,
  },
  masonry: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gridTemplateRows: "580px 580px",
    rowGap: 4,
    columnGap: 4,
  },
  tile: {
    position: "relative",
    margin: 0,
    overflow: "hidden",
    background: BM.c.ivory,
    cursor: "pointer",
    height: "100%",
  },
});