// Project gallery as a large slideshow — one hero image at a time, category
// tabs, a thumbnail filmstrip, arrows, counter, and gentle autoplay.
const PROJECTS = [
{ id: 1, city: "Gilbert", type: "Custom Lattice", cat: "louvered", group: "covers", img: "assets/img/IMG_2535.png" },
{ id: 2, city: "North Phoenix", type: "Attached Solid", cat: "insulated", group: "covers", img: "assets/img/IMG_0325.png" },
{ id: 3, city: "Queen Creek", type: "Lattice · Black", cat: "louvered", group: "covers", img: "assets/img/IMG_1155.png" },
{ id: 4, city: "Queen Creek", type: "Attached Solid", cat: "insulated", group: "covers", img: "assets/img/IMG_3159.png" },
{ id: 5, city: "Chandler", type: "Attached Solid Cover", cat: "solid", group: "covers", img: "assets/img/IMG_2710.png" },
{ id: 6, city: "North Phoenix", type: "Freestanding Lattice", cat: "solid", group: "covers", img: "assets/img/Resized_20241124_113856.png" },
{ id: 7, city: "Mesa", type: "Lattice + Solid", cat: "solid", group: "covers", img: "assets/img/IMG_0647.png" },
{ id: 8, city: "Chandler", type: "Freestanding Lattice", cat: "lattice", group: "covers", img: "assets/img/IMG_2803.png" },
{ id: 9, city: "Casa Grande", type: "Attached Lattice", cat: "lattice", group: "covers", img: "assets/img/IMG_0431.png" },
{ id: 10, city: "North Phoenix", type: "Lattice · Poolside", cat: "lattice", group: "covers", img: "assets/img/IMG_2887.png" },
{ id: 13, city: "Gilbert", type: "Motorized Roll-Down Shade", cat: "shade", group: "shades", img: "assets/img/shade-1.png" },
{ id: 14, city: "Chandler", type: "Patio Roll-Down Screen", cat: "shade", group: "shades", img: "assets/img/shade-2.png" },
{ id: 15, city: "Mesa", type: "Solar Roll-Down Shade", cat: "shade", group: "shades", img: "assets/img/shade-3.png" },
{ id: 16, city: "Queen Creek", type: "Roll-Down Privacy Shade", cat: "shade", group: "shades", img: "assets/img/shade-4.png" },
{ id: 11, city: "Queen Creek", type: "Privacy Wall + Cover", cat: "privacy", group: "privacy", img: "assets/img/IMG_0533.png" },
{ id: 12, city: "Maricopa", type: "Privacy Screen", cat: "privacy", group: "privacy", img: "assets/img/IMG_3682.png" },
{ id: 17, city: "Queen Creek", type: "Privacy Screen + Solid Cover", cat: "privacy", group: "privacy", img: "assets/img/IMG_3388.png" },
{ id: 18, city: "Gilbert", type: "Privacy Screen + Lattice", cat: "privacy", group: "privacy", img: "assets/img/IMG_3176.png" }];

const GROUPS = [["covers", "Patio Covers & Pergolas"], ["shades", "Roll Down Shades"], ["privacy", "Privacy Walls"]];

function Gallery() {
  const [group, setGroup] = React.useState("covers");
  const [idx, setIdx] = React.useState(0);
  const [hover, setHover] = React.useState(false);
  const shown = PROJECTS.filter((p) => p.group === group);
  const cur = shown[idx] || shown[0];

  const go = React.useCallback((d) => setIdx((i) => (i + d + shown.length) % shown.length), [shown.length]);

  // reset to first when switching tab
  React.useEffect(() => {setIdx(0);}, [group]);

  // keyboard
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowRight") go(1);
      if (e.key === "ArrowLeft") go(-1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [go]);

  // gentle autoplay — keeps running even on hover
  React.useEffect(() => {
    if (shown.length < 2) return;
    const t = setInterval(() => go(1), 5000);
    return () => clearInterval(t);
  }, [go, shown.length, idx]);

  return (
    <Section id="gallery" bg={NP.bone}>
      <Reveal>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 40, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 620 }}>
            <Kicker dark={false}>Gallery</Kicker>
            <h2 style={{ fontFamily: FONT.serif, fontWeight: 500, fontSize: "clamp(44px,5.2vw,68px)", color: NP.textD,
              margin: "16px 0 0", letterSpacing: "-0.01em", lineHeight: 1.0 }}>
              Built across<br />the Valley.
            </h2>
          </div>
          <p style={{ fontFamily: FONT.body, fontSize: 16.5, lineHeight: 1.7, color: NP.textD2, maxWidth: 340, margin: 0 }}>A selection of custom installs — every one designed in-house, from poolside louvered systems to full privacy walls.


          </p>
        </div>
      </Reveal>

      {/* category tabs */}
      <div style={{ display: "flex", gap: 30, margin: "40px 0 30px", paddingBottom: 20, borderBottom: "1px solid rgba(34,28,21,0.14)" }}>
        {GROUPS.map(([id, label]) => {
          const active = group === id;
          return (
            <button key={id} onClick={() => setGroup(id)}
            onMouseEnter={(e) => {if (!active) e.currentTarget.style.color = NP.textD;}}
            onMouseLeave={(e) => {if (!active) e.currentTarget.style.color = NP.textD2;}}
            style={{ position: "relative", display: "inline-flex", alignItems: "baseline", gap: 8,
              fontFamily: FONT.body, fontSize: 16, fontWeight: active ? 700 : 500, letterSpacing: "0.02em",
              padding: "0 0 4px", background: "none", border: "none", cursor: "pointer",
              color: active ? NP.goldDeep : NP.textD2, transition: "color .16s ease" }}>
              {label}
              <span style={{ position: "absolute", left: 0, bottom: -21, height: 2, width: "100%", background: NP.goldDeep,
                opacity: active ? 1 : 0, transition: "opacity .18s ease" }} />
            </button>);

        })}
      </div>

      {/* stage */}
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
        <div style={{ position: "relative", aspectRatio: "16 / 9", overflow: "hidden", background: NP.panel2,
          border: "1px solid rgba(34,28,21,0.12)" }}>
          {shown.map((p, i) =>
          <div key={p.id} style={{ position: "absolute", inset: 0, opacity: i === idx ? 1 : 0,
            transform: i === idx ? "scale(1)" : "scale(1.03)", transition: "opacity .7s ease, transform 6.6s ease" }}>
              <NPImg src={p.img} label={`${p.city.toLowerCase()} · ${p.type.toLowerCase()}`} dark />
            </div>
          )}

          {/* caption overlay */}
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "60px 36px 30px",
            background: "linear-gradient(180deg, rgba(21,17,13,0) 0%, rgba(21,17,13,0.82) 100%)",
            display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, pointerEvents: "none" }}>
            <div>
              <div style={{ fontFamily: FONT.body, fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: NP.gold }}>{cur.city}, AZ</div>
              <div style={{ fontFamily: FONT.serif, fontSize: "clamp(26px,3vw,38px)", fontWeight: 500, color: NP.textL, marginTop: 6, lineHeight: 1 }}>{cur.type}</div>
            </div>
            <div style={{ fontFamily: FONT.body, fontSize: 14, fontWeight: 600, letterSpacing: "0.08em", color: NP.textL2, whiteSpace: "nowrap" }}>
              {String(idx + 1).padStart(2, "0")} <span style={{ opacity: 0.5 }}>/ {String(shown.length).padStart(2, "0")}</span>
            </div>
          </div>

          {/* arrows */}
          <button onClick={() => go(-1)} aria-label="Previous" style={stageArrow("left")}>‹</button>
          <button onClick={() => go(1)} aria-label="Next" style={stageArrow("right")}>›</button>
        </div>

        {/* thumbnail filmstrip */}
        <div style={{ display: "flex", gap: 12, marginTop: 16, overflowX: "auto", paddingBottom: 4 }}>
          {shown.map((p, i) =>
          <button key={p.id} onClick={() => setIdx(i)} aria-label={`View ${p.type}`}
          style={{ flex: "0 0 auto", width: 118, aspectRatio: "16 / 10", padding: 0, cursor: "pointer",
            border: i === idx ? `2px solid ${NP.goldDeep}` : "2px solid transparent", overflow: "hidden",
            opacity: i === idx ? 1 : 0.62, transition: "opacity .2s ease, border-color .2s ease", background: "none" }}
          onMouseEnter={(e) => {if (i !== idx) e.currentTarget.style.opacity = 0.9;}}
          onMouseLeave={(e) => {if (i !== idx) e.currentTarget.style.opacity = 0.62;}}>
              <NPImg src={p.img} label="" dark />
            </button>
          )}
        </div>
      </div>
    </Section>);

}

function stageArrow(side) {
  return { position: "absolute", [side]: 18, top: "50%", transform: "translateY(-50%)", width: 50, height: 50, borderRadius: 25,
    background: "rgba(21,17,13,0.42)", backdropFilter: "blur(4px)", border: "1px solid rgba(243,237,227,0.25)",
    color: NP.textL, fontSize: 26, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
    lineHeight: 1, transition: "background .18s ease" };
}

window.Gallery = Gallery;