const { useState: useStateGal } = React;

function GallerySection() {
  const [active, setActive] = useStateGal(null);

  // 9-image editorial mosaic — irregular grid
  // each item: { col span, row span, label, variant, tone, aspect }
  // variant index maps to UNSPLASH object: 0-4 = rooms, 5-8 = portraits
  const items = [
    { c: "1 / span 5", r: "1 / span 2", label: "INT. OBSIDIAN / ROOM 04", v: 3, tone: "dark", title: "옵시디언" },
    { c: "6 / span 3", r: "1 / span 1", label: "HOST / HA-EUN", v: 5, tone: "light", title: "하은" },
    { c: "9 / span 4", r: "1 / span 1", label: "INT. VELVET / ROOM 02", v: 1, tone: "dark", title: "벨벳" },
    { c: "6 / span 4", r: "2 / span 1", label: "HOST / SEO-YEON", v: 8, tone: "light", title: "서연" },
    { c: "10 / span 3", r: "2 / span 1", label: "INT. VOID / ROOM 06", v: 2, tone: "dark", title: "보이드" },
    { c: "1 / span 4", r: "3 / span 1", label: "HOST / SO-RA", v: 6, tone: "light", title: "소라" },
    { c: "5 / span 5", r: "3 / span 1", label: "INT. LOUNGE / AMBIENT", v: 4, tone: "dark", title: "라운지" },
    { c: "10 / span 3", r: "3 / span 1", label: "HOST / YOO-JIN", v: 7, tone: "light", title: "유진" },
  ];

  return (
    <section id="gallery" data-screen-label="04 Gallery" style={{ background: "#F4F2ED", color: "#0A0A0A", padding: "120px 0 80px" }}>
      {/* header */}
      <div style={{ padding: "0 32px", marginBottom: 60 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <span className="meta">CHAPTER IV · GALLERY</span>
          <span className="meta">ARCHIVE · 2025 — 2026</span>
        </div>
        <div style={{ height: 1, background: "currentColor", opacity: 0.2 }} />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "end", marginTop: 40 }}>
          <h2 className="display sr-clip" style={{ fontSize: "clamp(80px, 12vw, 200px)", lineHeight: 0.85, letterSpacing: "-0.05em" }}>
            <span className="display-italic" style={{ fontStyle: "italic" }}>Archive</span><br/>
            of nights.
          </h2>
          <p className="kr-display" style={{ fontSize: 22, lineHeight: 1.3, paddingBottom: 24, maxWidth: 440 }}>
            공간, 파티, 게스트.<br/>
            매일 밤의 에디토리얼 아카이브.
          </p>
        </div>
      </div>

      {/* editorial mosaic */}
      <div style={{
        padding: "0 32px",
        display: "grid",
        gridTemplateColumns: "repeat(12, 1fr)",
        gridAutoRows: "280px",
        gap: 12,
      }}>
        {items.map((it, i) => (
          <div
            key={i}
            className={`sr-scale${['',' d100',' d200',' d300',' d100',' d200',' d300',' d400'][i] || ''}`}
            onMouseEnter={() => setActive(i)}
            onMouseLeave={(e) => { setActive(null); e.currentTarget.style.transform = ""; }}
            onMouseMove={(e) => {
              const el = e.currentTarget;
              const r = el.getBoundingClientRect();
              const x = (e.clientX - r.left) / r.width - 0.5;
              const y = (e.clientY - r.top) / r.height - 0.5;
              el.style.transform = `perspective(900px) rotateY(${x * 6}deg) rotateX(${-y * 6}deg) scale(1.02)`;
            }}
            style={{
              gridColumn: it.c,
              gridRow: it.r,
              position: "relative",
              cursor: "pointer",
              transformStyle: "preserve-3d",
            }}
          >
            <EditorialPH
              label={it.label}
              tone={it.tone}
              variant={it.v}
              aspect="auto"
              style={{ width: "100%", height: "100%", aspectRatio: "auto" }}
            />
            {active === i && (
              <div style={{
                position: "absolute",
                left: 0,
                bottom: 0,
                right: 0,
                padding: 16,
                background: "linear-gradient(to top, rgba(10,10,10,0.85), transparent)",
                color: "#F4F2ED",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-end",
              }}>
                <div>
                  <div className="kr-display" style={{ fontSize: 24, lineHeight: 1 }}>{it.title}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", marginTop: 4, opacity: 0.7 }}>
                    N° {String(i + 1).padStart(3, "0")}
                  </div>
                </div>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.16em" }}>VIEW →</span>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* events strip */}
      <div style={{ padding: "80px 32px 0" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <span className="meta">UPCOMING · THIS WEEK</span>
          <span className="meta">3 EVENTS</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[
            { d: "FRI 04.25", t: "BERLIN IMPORT", sub: "DJ ANYA K. · B2B NOIR RES.", tag: "TECHNO" },
            { d: "SAT 04.26", t: "SILK / KARAOKE", sub: "A HI-FI KARAOKE NIGHT · 90s KR", tag: "KARAOKE" },
            { d: "SUN 04.27", t: "SUNDAY SERMON", sub: "LOW-BPM · CHAMPAGNE SERVICE", tag: "LOUNGE" },
          ].map((e) => (
            <div key={e.t} style={{
              border: "1px solid rgba(0,0,0,0.2)",
              padding: 24,
              position: "relative",
              background: "#F4F2ED",
              display: "flex",
              flexDirection: "column",
              gap: 32,
              minHeight: 220,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em" }}>{e.d}</span>
                <span className="tag tag-solid">{e.tag}</span>
              </div>
              <div style={{ flex: 1 }}>
                <div className="display" style={{ fontSize: 40, lineHeight: 0.9, letterSpacing: "-0.03em" }}>{e.t}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                <span className="kr-sans" style={{ fontSize: 12, opacity: 0.6, maxWidth: 220 }}>{e.sub}</span>
                <span className="mono" style={{ fontSize: 11 }}>→</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.GallerySection = GallerySection;