/* Fabrica Interiors — Website UI kit · Gallery (masonry + lightbox) */
const { Eyebrow: GalEyebrow, Lead: GalLead } = window.FabricaInteriorsDesignSystem_978348;

const GALLERY = [
  { src: "../../assets/IMG_8108.jpg", cap: "Dubové schodiště" },
  { src: "../../assets/IMG_8092.jpg", cap: "Vestavěné úložné stěny" },
  { src: "../../assets/IMG_8115.jpg", cap: "Kuchyně pod schodištěm" },
  { src: "../../assets/IMG_8117.jpg", cap: "Detail bezúchytkové kuchyně" },
  { src: "../../assets/IMG_8123.jpg", cap: "Vnitřní vybavení zásuvek" },
  { src: "../../assets/IMG_8103.jpg", cap: "Pracovní zóna na míru" },
  { src: "../../assets/IMG_8120.jpg", cap: "Dřez & pracovní deska" },
  { src: "../../assets/IMG_8130.jpg", cap: "Schodiště & kuchyně" },
];

function Gallery() {
  const [open, setOpen] = React.useState(false);
  const [cur, setCur] = React.useState(0);

  const show = (i) => { setCur(i); setOpen(true); };
  const close = () => setOpen(false);
  const step = (d) => setCur((c) => (c + d + GALLERY.length) % GALLERY.length);

  React.useEffect(() => {
    const onKey = (e) => {
      if (!open) return;
      if (e.key === "Escape") close();
      if (e.key === "ArrowRight") step(1);
      if (e.key === "ArrowLeft") step(-1);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <section id="galerie" style={{ padding: "var(--section-y) 0", background: "var(--surface-sunken)" }}>
      <div className="kit-wrap">
        <div className="kit-sec-head">
          <div>
            <GalEyebrow>Galerie</GalEyebrow>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "var(--fs-h2)", lineHeight: 1.04, letterSpacing: "-.01em", marginTop: "20px", color: "var(--ink)" }}>Vybrané realizace</h2>
          </div>
          <GalLead style={{ maxWidth: "34ch" }}>Klikněte na fotografii pro zvětšení. Každý projekt je originál vyrobený na míru.</GalLead>
        </div>

        <div className="kit-masonry">
          {GALLERY.map((g, i) => <GalleryItem key={i} g={g} onClick={() => show(i)} />)}
        </div>
      </div>

      {open && <Lightbox g={GALLERY[cur]} onClose={close} onPrev={() => step(-1)} onNext={() => step(1)} />}
    </section>
  );
}

function GalleryItem({ g, onClick }) {
  const [h, setH] = React.useState(false);
  // Phones/tablets (<=1000px) load a downscaled copy so iOS Safari's decoded-image
  // memory limit isn't exceeded; desktop keeps the full-resolution original.
  const srcMobile = g.src.replace(/\.jpg$/i, "-m.jpg");
  return (
    <figure onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ breakInside: "avoid", marginBottom: "clamp(14px,1.6vw,22px)", position: "relative", overflow: "hidden", borderRadius: "var(--radius-xs)", cursor: "pointer", background: "#ddd" }}>
      <picture>
        <source media="(max-width: 1000px)" srcSet={srcMobile} />
        <img src={g.src} alt={g.cap} loading="lazy" style={{ width: "100%", height: "auto", display: "block", transform: h ? "scale(1.06)" : "scale(1)", transition: "transform 1.1s var(--ease)" }} />
      </picture>
      <span style={{ position: "absolute", inset: 0, background: "var(--scrim-image)", opacity: h ? 1 : 0, transition: "opacity .5s var(--ease)" }} />
      <span style={{ position: "absolute", left: "16px", bottom: "14px", zIndex: 2, color: "#fff", fontFamily: "var(--font-body)", fontSize: "var(--fs-caption)", fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase", opacity: h ? 1 : 0, transform: h ? "translateY(0)" : "translateY(8px)", transition: "opacity .5s var(--ease), transform .5s var(--ease)" }}>{g.cap}</span>
      <span style={{ position: "absolute", right: "14px", top: "14px", zIndex: 2, width: "34px", height: "34px", borderRadius: "50%", background: "rgba(244,238,228,.92)", display: "grid", placeItems: "center", opacity: h ? 1 : 0, transform: h ? "scale(1)" : "scale(.8)", transition: "opacity .45s var(--ease), transform .45s var(--ease)" }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="#211C16" strokeWidth="1.4" /></svg>
      </span>
    </figure>
  );
}

function Lightbox({ g, onClose, onPrev, onNext }) {
  return (
    <div onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(20,16,12,.94)", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <LbBtn style={{ top: "24px", right: "24px" }} onClick={onClose} label="Zavřít">✕</LbBtn>
      <LbBtn style={{ left: "24px", top: "50%", transform: "translateY(-50%)" }} onClick={(e) => { e.stopPropagation(); onPrev(); }} label="Předchozí">←</LbBtn>
      <img src={g.src} alt={g.cap} style={{ maxWidth: "88vw", maxHeight: "84vh", objectFit: "contain", borderRadius: "var(--radius-xs)", boxShadow: "var(--shadow-lightbox)" }} />
      <LbBtn style={{ right: "24px", top: "50%", transform: "translateY(-50%)" }} onClick={(e) => { e.stopPropagation(); onNext(); }} label="Další">→</LbBtn>
      <div style={{ position: "absolute", bottom: "26px", left: "50%", transform: "translateX(-50%)", color: "#e8ddcc", fontFamily: "var(--font-body)", fontSize: ".78rem", letterSpacing: ".14em", textTransform: "uppercase" }}>{g.cap}</div>
    </div>
  );
}

function LbBtn({ children, style, onClick, label }) {
  const [h, setH] = React.useState(false);
  return (
    <button aria-label={label} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "absolute", background: h ? "rgba(244,238,228,.22)" : "rgba(244,238,228,.1)", border: "1px solid rgba(244,238,228,.25)", color: "#fff", width: "50px", height: "50px", borderRadius: "50%", display: "grid", placeItems: "center", cursor: "pointer", transition: "background .3s", ...style }}>
      {children}
    </button>
  );
}

window.Gallery = Gallery;