// SalonGallery.jsx — salon-style hang using real gilt frame PNGs.
// Each painting sits BEHIND its frame, tucked into the frame's detected inner
// opening; the frame's own gilt masks the shape (oval / arch / circle / rect).
// Lightbox stays frameless (untouched).
(function () {
  const A = (f) => "assets/eli_website_" + f;
  const F = (f) => "assets/" + f;

  // ── Frame catalogue: inner-opening rect as fractions of the PNG, plus the
  //    PNG's natural W/H (for a stable aspect-ratio before the image loads). ──
  const FRAMES = {
    round:  { img: "frame_round.png",  l: 0.1792, t: 0.1708, r: 0.8208, b: 0.8250, W: 3072, H: 3072, shape: "ellipse" },
    rect_a: { img: "frame_rect_a.png", l: 0.1667, t: 0.1329, r: 0.8542, b: 0.8792, W: 1341, H: 1850, shape: "rect" },
    rect_b: { img: "frame_rect_b.png", l: 0.1917, t: 0.1421, r: 0.8125, b: 0.8607, W: 1223, H: 1828, shape: "rect" },
    arch:   { img: "frame_arch.png",   l: 0.1792, t: 0.1689, r: 0.8083, b: 0.8767, W: 1208, H: 1879, shape: "rect" },
    oval_a: { img: "frame_oval_a.png", l: 0.1208, t: 0.1339, r: 0.8833, b: 0.8720, W: 1342, H: 1879, shape: "ellipse" },
    oval_b: { img: "frame_oval_b.png", l: 0.1458, t: 0.1373, r: 0.8500, b: 0.8725, W: 1403, H: 1786, shape: "ellipse" },
    oval_c: { img: "frame_oval_c.png", l: 0.1867, t: 0.2075, r: 0.8100, b: 0.7966, W: 1248, H: 1986, shape: "ellipse" },
    square: { img: "frame_square.png", l: 0.1808, t: 0.1877, r: 0.7962, b: 0.8123, W: 2975, H: 2982, shape: "rect" },
    land:   { img: "frame_land.png",   l: 0.1633, t: 0.2041, r: 0.8167, b: 0.7918, W: 2996, H: 2451, shape: "rect" },
  };
  const OVER = 0.045; // overscan: tuck the painting a touch under the frame lip

  // curated salon wall — order tuned for column flow
  const WORKS = [
    { src: A("maryjane_2026.png"), title: "Mary Jane", year: "2026" },
    { src: A("goodluckgold_2026.png"), title: "Good Luck Gold", year: "2026", oval: true, zoom: 1.16 },
    { src: A("portraitstudy_2026.png"), title: "Portrait Study", year: "2026", crop: 0.03 },
    { src: A("cat_2026.png"), title: "Cat", year: "2026" },
    { src: A("lucy_2026.png"), title: "Lucy", year: "2026" },
    { src: A("conversationinshadow_2026.png"), title: "Conversation in Shadow", year: "2026" },
    { src: A("noodles_2026.png"), title: "Noodles", year: "2026" },
    { src: A("girlwithbunny_2022.png"), title: "Girl with Bunny", year: "2022" },
    { src: A("clownshoes_2026.png"), title: "Clown Shoes", year: "2026" },
    { src: A("portrait_2026_2.png"), title: "Portrait", year: "2026" },
    { src: A("mothermary_2020.png"), title: "Mother Mary", year: "2020" },
    { src: A("ophelia_2020.png"), title: "Ophelia", year: "2020" },
    { src: A("tastingtemptation_2026.png"), title: "Tasting Temptation", year: "2026", oval: true, zoom: 1.2 },
    { src: A("circus_2022.png"), title: "Circus", year: "2022" },
    { src: A("bunnies_2022.png"), title: "Bunnies", year: "2022" },
    { src: A("fairies_2020.png"), title: "Fairies", year: "2020" },
    { src: A("elsa_2026.png"), title: "Elsa", year: "2026", oval: true, openFull: true },
    { src: A("portrait_2026_3.png"), title: "Portrait", year: "2026" },
    { src: A("beauty_2025.png"), title: "Beauty", year: "2025", oval: true, openFull: true },
    { src: A("portrait_2026_5.png"), title: "Portrait", year: "2026", oval: true },
    { src: A("portraitofjenny_2019.png"), title: "Portrait of Jenny", year: "2019" },
    { src: A("hyeokinred_2019.png"), title: "Hye-ok in Red", year: "2019", oval: true, openFull: true },
    { src: A("ophelia_2019.png"), title: "Ophelia", year: "2019" },
    { src: A("outstretched_2019.png"), title: "Outstretched", year: "2019" },
    { src: A("change_2021.png"), title: "Change", year: "2021", oval: true, openFull: true },
    { src: A("sleep_2019.png"), title: "Sleep", year: "2019" },
    { src: A("blur_2019.png"), title: "Blur", year: "2019", oval: true, openFull: true },
    { src: A("umbrella_2021.png"), title: "Umbrella", year: "2021" },
    { src: A("portrait_2026_4.png"), title: "Portrait", year: "2026" },
    { src: A("portrait_2026_1.png"), title: "Portrait", year: "2026" },
  ];

  // Frame assignment: round → the 3 requested pieces; the rest dispersed evenly
  // by shape (oval frames over oval pieces, rect/arch over rectangular pieces).
  const ROUND_SET = ["goodluckgold", "tastingtemptation", "portrait_2026_5"];
  const SQUARE_SET = ["portraitstudy", "maryjane"];
  const FORCED = { portraitofjenny: "rect_a", blur: "land", sleep: "land", ophelia_2020: "land" };
  const OVAL_CYCLE = ["oval_a", "oval_b", "oval_c"];
  const RECT_CYCLE = ["rect_a", "arch", "rect_b"];
  function assignFrames() {
    let ov = 0, rc = 0;
    return WORKS.map((w) => {
      if (ROUND_SET.some((k) => w.src.includes(k))) return "round";
      if (SQUARE_SET.some((k) => w.src.includes(k))) return "square";
      const forced = Object.keys(FORCED).find((k) => w.src.includes(k));
      if (forced) return FORCED[forced];
      if (w.oval) return OVAL_CYCLE[ov++ % OVAL_CYCLE.length];
      return RECT_CYCLE[rc++ % RECT_CYCLE.length];
    });
  }

  function Work({ work, onOpen, frameKey }) {
    const [hover, setHover] = React.useState(false);
    const fr = FRAMES[frameKey] || FRAMES.rect_a;
    const openW = fr.r - fr.l, openH = fr.b - fr.t;
    const ovx = OVER * openW, ovy = OVER * openH;

    return (
      <figure
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        onClick={() => onOpen(work)}
        style={{
          breakInside: "avoid", margin: "0 0 30px", padding: 0, cursor: "pointer",
          transform: hover ? "translateY(-4px)" : "none",
          transition: "transform 0.45s cubic-bezier(0.4,0,0.2,1)",
        }}
      >
        <div style={{ position: "relative", width: "100%", aspectRatio: `${fr.W} / ${fr.H}` }}>
          {/* painting — sits behind the frame, filling the opening (+overscan) */}
          <img
            src={work.src}
            alt={work.title}
            style={{
              position: "absolute",
              left: `${(fr.l - ovx) * 100}%`,
              top: `${(fr.t - ovy) * 100}%`,
              width: `${(openW + 2 * ovx) * 100}%`,
              height: `${(openH + 2 * ovy) * 100}%`,
              objectFit: "cover",
              borderRadius: fr.shape === "ellipse" ? "50%" : 0,
              objectPosition: "center " + (work.focusY || "center"),
              transform: work.zoom ? `scale(${work.zoom})` : "none",
              filter: hover ? "brightness(1.05) saturate(1.04)" : "none",
              transition: "filter 0.45s ease",
              zIndex: 1,
            }}
          />
          {/* the gilt frame on top — masks the painting to its shape */}
          <img
            src={F(fr.img)}
            alt=""
            aria-hidden="true"
            style={{
              position: "relative", display: "block", width: "100%", height: "100%",
              objectFit: "fill", zIndex: 2, pointerEvents: "none",
              filter: "drop-shadow(0 14px 24px rgba(80,50,20,0.28))",
            }}
          />
        </div>
        <Plaque title={work.title} year={work.year} />
      </figure>
    );
  }

  // ── Frameless lightbox (untouched) ──────────────────────────────────
  function Lightbox({ work, onClose }) {
    const [shown, setShown] = React.useState(false);
    React.useEffect(() => {
      const r = requestAnimationFrame(() => setShown(true));
      function onKey(e) { if (e.key === "Escape") onClose(); }
      document.addEventListener("keydown", onKey);
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {
        cancelAnimationFrame(r);
        document.removeEventListener("keydown", onKey);
        document.body.style.overflow = prev;
      };
    }, [onClose]);

    if (!work) return null;
    return (
      <div
        onClick={onClose}
        style={{
          position: "fixed", inset: 0, zIndex: 200,
          display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center", gap: 22,
          padding: "6vh 6vw",
          background: "rgba(243,229,226,0.86)",
          backdropFilter: "blur(6px)",
          opacity: shown ? 1 : 0,
          transition: "opacity 0.4s ease",
          cursor: "zoom-out",
        }}
      >
        {work.oval && !work.openFull ? (
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              width: "min(80vh, 88vw, 760px)", height: "min(80vh, 88vw, 760px)",
              borderRadius: "50%", overflow: "hidden", background: "var(--cream)",
              boxShadow: "0 30px 80px -30px rgba(40,20,10,0.6), 0 8px 30px -12px rgba(40,20,10,0.4)",
              transform: shown ? "scale(1)" : "scale(0.94)",
              transition: "transform 0.45s cubic-bezier(0.4,0,0.2,1)",
              cursor: "default", flex: "none",
            }}
          >
            <img src={work.src} alt={work.title}
              style={{
                display: "block", width: "100%", height: "100%", objectFit: "cover",
                transform: work.zoom ? `scale(${work.zoom})` : "none",
              }} />
          </div>
        ) : (
          <img
            src={work.src}
            alt={work.title}
            onClick={(e) => e.stopPropagation()}
            style={{
              display: "block",
              maxWidth: "min(92vw, 1100px)", maxHeight: "80vh",
              width: "auto", height: "auto", objectFit: "contain",
              borderRadius: 2,
              clipPath: work.crop ? `inset(${work.crop * 100}%)` : "none",
              boxShadow: "0 30px 80px -30px rgba(40,20,10,0.6), 0 8px 30px -12px rgba(40,20,10,0.4)",
              transform: `scale(${(shown ? 1 : 0.94) * (work.crop ? 1 / (1 - 2 * work.crop) : 1)})`,
              transition: "transform 0.45s cubic-bezier(0.4,0,0.2,1)",
              cursor: "default",
            }}
          />
        )}
        <figcaption style={{ textAlign: "center", lineHeight: 1.3 }}>
          <div style={{
            fontFamily: '"Suisse Neue", sans-serif', fontStyle: "italic",
            fontWeight: 500, fontSize: 26, color: "var(--ink)",
          }}>{work.title}</div>
          <div style={{
            fontFamily: '"Suisse Neue", sans-serif', fontSize: 16,
            letterSpacing: "0.16em", color: "var(--gold-deep)", marginTop: 3,
          }}>{work.year}</div>
        </figcaption>
      </div>
    );
  }

  function SalonGallery() {
    const [selected, setSelected] = React.useState(null);
    const frameKeys = React.useMemo(assignFrames, []);
    return (
      <React.Fragment>
        <div style={{
          maxWidth: 1180, margin: "0 auto", padding: "0 40px",
          columnCount: 3, columnGap: 40,
        }}
        className="salon-cols">
          {WORKS.map((w, i) => (
            <Work key={i} work={w} onOpen={setSelected} frameKey={frameKeys[i]} />
          ))}
        </div>
        {selected && <Lightbox work={selected} onClose={() => setSelected(null)} />}
      </React.Fragment>
    );
  }

  window.SalonGallery = SalonGallery;
})();