// KASHA website — portfolio gallery (album → lightbox popup), all shot by KASHA
function PortfolioScreen({ onNavigate }) {
  const { Tag, Badge, IconButton, Icon } = window.DS;
  const [cat, setCat] = React.useState("전체");
  const [album, setAlbum] = React.useState(null); // open work
  const works = window.WORKS.filter((w) => cat === "전체" || w.cat === cat);

  return (
    <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "56px 24px 80px" }}>
      <h1 style={{ fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)" }}>포트폴리오</h1>
      <p style={{ marginTop: 10, color: "var(--text-secondary)", fontSize: "var(--text-body-lg)" }}>
        KASHA가 직접 촬영한 인물 사진이에요. 앨범을 눌러 전체 갤러리를 확인해 보세요.
      </p>

      <div style={{ display: "flex", gap: 8, marginTop: 28, flexWrap: "wrap" }}>
        {window.CATEGORIES.map((c) => (
          <Tag key={c} selected={cat === c} onClick={() => setCat(c)}>{c}</Tag>
        ))}
      </div>

      <div style={{ columnCount: 3, columnGap: 20, marginTop: 32 }}>
        {works.map((w) => (
          <div
            key={w.id}
            onClick={() => setAlbum(w)}
            style={{ cursor: "pointer", breakInside: "avoid", marginBottom: 20, borderRadius: "var(--radius-card)", overflow: "hidden", background: "#fff", boxShadow: "var(--shadow-card)", border: "1px solid var(--border-subtle)" }}
          >
            <div style={{ position: "relative", height: w.h, overflow: "hidden" }}>
              <img src={window.pimg(w.seed, 480, Math.round(w.h * 1.4))} alt={w.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform var(--dur-slow) var(--ease-out)" }}
                onMouseEnter={(e) => (e.currentTarget.style.transform = "scale(1.04)")}
                onMouseLeave={(e) => (e.currentTarget.style.transform = "scale(1)")} />
              <div style={{ position: "absolute", top: 12, left: 12 }}>
                <Badge tone="neutral" variant="solid" style={{ background: "rgba(23,23,28,0.72)", backdropFilter: "blur(8px)" }}>{w.cat}</Badge>
              </div>
              <div style={{ position: "absolute", bottom: 12, right: 12, display: "flex", alignItems: "center", gap: 5, padding: "5px 10px", borderRadius: 999, background: "rgba(23,23,28,0.62)", backdropFilter: "blur(8px)", color: "#fff", fontSize: 12, fontWeight: 600 }}>
                <Icon name="image" size={14} color="#fff" /> {w.count}
              </div>
            </div>
            <div style={{ padding: "14px 16px", display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text-strong)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{w.title}</div>
                <div style={{ fontSize: 12, color: "var(--text-tertiary)", marginTop: 2 }}>{w.cat} · {w.count}컷</div>
              </div>
              <Icon name="chevronRight" size={18} color="var(--gray-400)" />
            </div>
          </div>
        ))}
      </div>

      {album && <AlbumLightbox work={album} onClose={() => setAlbum(null)} onNavigate={onNavigate} />}
    </div>
  );
}

// Full-screen album viewer with thumbnail strip
function AlbumLightbox({ work, onClose, onNavigate }) {
  const { Button, IconButton, Icon, Badge } = window.DS;
  const photos = window.albumPhotos(work);
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIdx((i) => (i + 1) % photos.length);
      if (e.key === "ArrowLeft") setIdx((i) => (i - 1 + photos.length) % photos.length);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [photos.length, onClose]);

  const go = (d) => setIdx((i) => (i + d + photos.length) % photos.length);

  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 1200, display: "flex", flexDirection: "column", background: "rgba(15,17,21,0.96)", backdropFilter: "blur(8px)", animation: "kashaFade var(--dur-base) var(--ease-out)" }}>
      <style>{`@keyframes kashaFade{from{opacity:0}to{opacity:1}}`}</style>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 28px", color: "#fff", flexShrink: 0 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <h2 style={{ color: "#fff", fontSize: 20, letterSpacing: "var(--tracking-title)" }}>{work.title}</h2>
            <Badge tone="accent">{work.cat}</Badge>
          </div>
          <div style={{ fontSize: 13, color: "rgba(255,255,255,0.6)", marginTop: 4 }}>{idx + 1} / {photos.length}</div>
        </div>
        <IconButton name="x" variant="plain" ariaLabel="닫기" onClick={onClose} style={{ color: "#fff" }} />
      </div>

      {/* Main stage */}
      <div style={{ flex: 1, position: "relative", display: "flex", alignItems: "center", justifyContent: "center", padding: "0 28px", minHeight: 0 }}>
        <button onClick={() => go(-1)} aria-label="이전"
          style={{ position: "absolute", left: 24, zIndex: 2, width: 52, height: 52, borderRadius: "50%", border: "none", background: "rgba(255,255,255,0.12)", color: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(8px)" }}>
          <Icon name="chevronLeft" size={26} color="#fff" />
        </button>
        <div key={idx} style={{ position: "relative", maxWidth: "100%", maxHeight: "100%", display: "inline-flex", animation: "kashaFade var(--dur-base) var(--ease-out)" }}>
          <img src={window.pimg(photos[idx].src, 1100, 760)} alt=""
            style={{ maxWidth: "100%", maxHeight: "78vh", objectFit: "contain", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-xl)" }} />
          <Watermark />
          {photos[idx].cosplayer && (
            <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "20px 16px 12px", background: "linear-gradient(transparent, rgba(15,17,21,0.8))", color: "#fff", borderRadius: "0 0 var(--radius-md) var(--radius-md)" }}>
              <span style={{ fontSize: 12, color: "rgba(255,255,255,0.7)" }}>코스어</span>
              <div style={{ fontSize: 16, fontWeight: 700 }}>{photos[idx].cosplayer}</div>
            </div>
          )}
        </div>
        <button onClick={() => go(1)} aria-label="다음"
          style={{ position: "absolute", right: 24, zIndex: 2, width: 52, height: 52, borderRadius: "50%", border: "none", background: "rgba(255,255,255,0.12)", color: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(8px)" }}>
          <Icon name="chevronRight" size={26} color="#fff" />
        </button>
      </div>

      {/* Thumbnail strip */}
      <div style={{ flexShrink: 0, padding: "16px 28px 20px" }}>
        <div style={{ display: "flex", gap: 8, overflowX: "auto", paddingBottom: 6 }}>
          {photos.map((p, i) => (
            <button key={i} onClick={() => setIdx(i)}
              style={{ flexShrink: 0, width: 72, height: 72, borderRadius: 10, overflow: "hidden", border: `2px solid ${i === idx ? "#fff" : "transparent"}`, padding: 0, cursor: "pointer", background: "none", opacity: i === idx ? 1 : 0.55, transition: "opacity var(--dur-fast) var(--ease-standard)" }}>
              <img src={window.pimg(p.src, 150, 150)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            </button>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 16 }}>
          <Button variant="accent" size="lg" trailingIcon={<Icon name="arrowRight" size={20} />} onClick={() => { onClose(); onNavigate("booking"); }}>
            이런 사진 촬영 예약하기
          </Button>
        </div>
      </div>
    </div>
  );
}
// 사진 보호용 50% 반투명 워터마크 오버레이 (KASHA 타일)
function Watermark() {
  return (
    <div aria-hidden="true" style={{
      position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.35, overflow: "hidden",
      display: "flex", flexWrap: "wrap", alignContent: "center", justifyContent: "center",
      gap: "10px 22px", transform: "rotate(-24deg) scale(1.5)",
    }}>
      {Array.from({ length: 48 }).map((_, i) => (
        <span key={i} style={{ color: "rgba(255,255,255,0.75)", fontWeight: 800, fontSize: 13, letterSpacing: "0.18em", whiteSpace: "nowrap", textShadow: "0 1px 2px rgba(0,0,0,0.3)" }}>KASHA</span>
      ))}
    </div>
  );
}
window.PortfolioScreen = PortfolioScreen;