// Root app + modals
const { useState, useEffect, useRef } = React;

function VideoPlayer({ src }) {
  const [ready, setReady] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    if (v.readyState >= 3) { setReady(true); return; }
    const onReady = () => setReady(true);
    v.addEventListener("canplay", onReady, { once: true });
    return () => v.removeEventListener("canplay", onReady);
  }, [src]);
  return (
    <>
      <video
        ref={ref}
        src={src}
        controls
        autoPlay
        playsInline
        preload="auto"
        style={{ width: "100%", height: "100%", display: "block", background: "#000" }}
      />
      {!ready && (
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
          background: "rgba(0,0,0,.65)", color: "var(--cream)", pointerEvents: "none",
          zIndex: 1,
        }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
            <div style={{
              width: 36, height: 36, borderRadius: "50%",
              border: "2px solid rgba(245,240,225,.25)",
              borderTopColor: "var(--cream)",
              animation: "vp-spin 0.9s linear infinite",
            }} />
            <div className="mono" style={{ fontSize: 11, letterSpacing: ".14em", opacity: .85 }}>BUFFERING · 缓冲中</div>
          </div>
        </div>
      )}
      <style>{`@keyframes vp-spin { to { transform: rotate(360deg); } }`}</style>
    </>
  );
}

function Modal({ open, onClose, children }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    addEventListener("keydown", onKey);
    document.body.style.overflow = open ? "hidden" : "";
    return () => removeEventListener("keydown", onKey);
  }, [open]);
  return (
    <div className={"modal" + (open ? " open" : "")} onClick={onClose}>
      <button className="close" onClick={onClose}>关闭 · CLOSE  ✕</button>
      <div className="inner" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

function App() {
  const data = JSON.parse(document.getElementById("site-data").textContent);
  const [video, setVideo] = useState(null);
  const [poster, setPoster] = useState(null);
  const [resumeOpen, setResumeOpen] = useState(false);

  const scrollDown = () => {
    document.getElementById("about")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <window.Hero onScrollDown={scrollDown} onOpenResume={() => setResumeOpen(true)} />
      <window.About stats={data.stats} />
      <window.WeChatGrid />
      <window.VideoGrid onPlay={setVideo} />
      <window.BrandWall onOpen={setPoster} />
      <window.Contact />
      <window.Footer />

      {/* Video modal */}
      <Modal open={!!video} onClose={() => setVideo(null)}>
        {video && (
          <div className="card" style={{ background: "var(--paper)", padding: 0, maxWidth: 1080, margin: "0 auto", border: "1px solid var(--line-2)", boxShadow: "0 60px 120px -40px rgba(0,0,0,.55)" }}>
            <div style={{ position: "relative", background: "#000", aspectRatio: "16/9" }}>
              {video.src ? (
                <VideoPlayer src={video.src} />
              ) : (
                <div className="imgph" style={{ width: "100%", height: "100%" }}>
                  <div className="label">VIDEO PLAYER · 暂无来源</div>
                </div>
              )}
              <div className="mono" style={{ position: "absolute", top: 14, left: 14, background: "var(--paper)", padding: "4px 10px", fontSize: 10, border: "1px solid var(--line-2)", zIndex: 2 }}>{video.type}</div>
              <div className="mono" style={{ position: "absolute", right: 14, top: 14, background: "rgba(20,15,10,.78)", color: "var(--cream)", padding: "4px 10px", fontSize: 10, zIndex: 2 }}>{video.dur}</div>
            </div>
            <div style={{ padding: 24, display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap", alignItems: "end" }}>
              <div style={{ flex: "1 1 360px", minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--mute)" }}>{video.type} · {video.dur}</div>
                <div className="serif" style={{ fontSize: 26, marginTop: 8, lineHeight: 1.3 }}>{video.title}</div>
                {video.desc && (
                  <p style={{ margin: "12px 0 0", fontSize: 14, lineHeight: 1.75, color: "var(--ink-2)" }}>{video.desc}</p>
                )}
              </div>
              <div className="mono" style={{ fontSize: 10, color: "var(--mute)", whiteSpace: "nowrap" }}>NOW PLAYING</div>
            </div>
          </div>
        )}
      </Modal>

      {/* Resume lightbox — same kraft case file style */}
      <Modal open={resumeOpen} onClose={() => setResumeOpen(false)}>
        <div className="poster-modal resume-case" style={{
          maxWidth: 1080,
          margin: "0 auto",
          background: "var(--cream)",
          border: "1px solid var(--line-2)",
          boxShadow: "0 60px 120px -40px rgba(0,0,0,.55), 0 12px 30px -10px rgba(0,0,0,.35)",
          position: "relative",
        }}>
          {/* top bar */}
          <div style={{
            padding: "20px 28px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 16,
            borderBottom: "1px solid var(--line-2)",
            background: "var(--paper)",
            flexWrap: "wrap",
          }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: "var(--mute)", letterSpacing: ".14em" }}>CV · RESUME · 2026</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 4, lineHeight: 1.2 }}>上官清越 · 内容作品集随附简历</div>
            </div>
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
              <a
                href="assets/resume.pdf"
                target="_blank"
                rel="noopener"
                className="tag"
                style={{ fontSize: 12 }}
              >新窗口打开 ↗</a>
              <a
                href="assets/resume.pdf"
                download="上官清越-简历.pdf"
                className="mbtn"
                style={{ padding: "12px 20px", fontSize: 14 }}
              >
                <span>下载 PDF</span>
                <span className="arr">↓</span>
              </a>
            </div>
          </div>

          {/* PDF viewport */}
          <div style={{
            padding: 20,
            background: "var(--cream)",
          }}>
            <div style={{
              border: "1px solid var(--line-2)",
              background: "var(--paper)",
              overflow: "hidden",
              position: "relative",
            }}>
              <div className="mono" style={{
                position: "absolute", top: 10, right: 14, zIndex: 2,
                fontSize: 9, color: "var(--mute)",
                background: "var(--paper)", padding: "3px 8px",
                border: "1px solid var(--line-2)",
              }}>1 / 1 · A4</div>
              <iframe
                src="assets/resume.pdf#view=FitH&toolbar=0&navpanes=0"
                title="上官清越 简历 Resume"
                style={{
                  width: "100%",
                  height: "min(78vh, 920px)",
                  border: 0,
                  display: "block",
                  background: "var(--paper)",
                }}
              />
            </div>
          </div>

          {/* footer mono */}
          <div className="mono" style={{
            padding: "14px 28px 18px",
            fontSize: 10,
            color: "var(--mute)",
            display: "flex",
            justifyContent: "space-between",
            borderTop: "1px solid var(--line-2)",
            background: "var(--paper)",
          }}>
            <span>附件 · ATTACHMENT</span>
            <span>END / 完</span>
          </div>
        </div>
      </Modal>

      {/* Poster lightbox — kraft case file style */}
      <Modal open={!!poster} onClose={() => setPoster(null)}>
        {poster && (() => {
          const imgs = (poster.imgs && poster.imgs.length) ? poster.imgs : (poster.img ? [poster.img] : []);
          return (
            <div className="poster-modal poster-case" style={{
              maxWidth: 1120,
              margin: "0 auto",
              background: "var(--cream)",
              border: "1px solid var(--line-2)",
              boxShadow: "0 60px 120px -40px rgba(0,0,0,.55), 0 12px 30px -10px rgba(0,0,0,.35)",
              display: "grid",
              gridTemplateColumns: "minmax(0, 1fr) 360px",
              gap: 0,
              position: "relative",
            }}>
              {/* corner mono tag */}
              <div className="mono" style={{
                position: "absolute", top: 14, left: 14, zIndex: 2,
                fontSize: 10, color: "var(--mute)",
                background: "var(--paper)", padding: "4px 10px",
                border: "1px solid var(--line-2)",
              }}>CASE FILE · {poster.date}</div>

              {/* left — posters */}
              <div className={"poster-img-col" + (poster.layout === "split2" ? " is-split2" : "")} style={{
                padding: "56px 32px 32px",
                borderRight: "1px solid var(--line-2)",
                display: poster.layout === "split2" ? "grid" : "flex",
                gridTemplateColumns: poster.layout === "split2" ? "1fr 1fr" : undefined,
                flexDirection: poster.layout === "split2" ? undefined : "column",
                gap: poster.layout === "split2" ? 14 : 18,
                alignItems: "start",
                minWidth: 0,
              }}>
                {imgs.length ? imgs.map((src, i) => (
                  <div key={i} style={{
                    border: "1px solid var(--line-2)",
                    background: "var(--paper)",
                    overflow: "hidden",
                    position: "relative",
                  }}>
                    <div className="mono" style={{
                      position: "absolute", top: 10, right: 10, zIndex: 2,
                      fontSize: 9, color: "var(--mute)",
                      background: "var(--paper)", padding: "3px 8px",
                      border: "1px solid var(--line-2)",
                    }}>{String(i + 1).padStart(2, "0")} / {String(imgs.length).padStart(2, "0")}</div>
                    <img src={src} alt={poster.name + " " + (i + 1)} style={{ width: "100%", objectFit: "contain", display: "block" }} />
                  </div>
                )) : (
                  <div className="imgph" style={{ aspectRatio: "3/4", width: "100%" }}>
                    <div className="label">POSTER · {poster.name}</div>
                  </div>
                )}
              </div>

              {/* right — info column */}
              <div style={{
                padding: "56px 32px 40px",
                background: "var(--paper)",
                alignSelf: "start",
                position: "sticky",
                top: 0,
                color: "var(--ink)",
              }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--mute)", letterSpacing: ".14em" }}>{poster.date}</div>
                <div className="serif" style={{ fontSize: 34, marginTop: 10, lineHeight: 1.15, color: "var(--ink)", letterSpacing: "-.01em" }}>{poster.name}</div>
                <div className="mono" style={{ fontSize: 11, marginTop: 10, color: "var(--mute)" }}>{poster.type}</div>

                {poster.role && (
                  <div style={{ marginTop: 22 }}>
                    <span className="stamp">{poster.role}</span>
                  </div>
                )}

                {poster.slogan && (
                  <div className="italic" style={{
                    marginTop: 24,
                    fontSize: 22,
                    lineHeight: 1.3,
                    color: "var(--ink-2)",
                    borderLeft: "2px solid var(--kraft-d)",
                    paddingLeft: 14,
                  }}>「{poster.slogan}」</div>
                )}

                <p style={{
                  fontFamily: '"Noto Serif SC","Songti SC","STSong","SimSun",serif',
                  fontSize: 14,
                  lineHeight: 1.85,
                  marginTop: 24,
                  color: "var(--ink-2)",
                }}>
                  {poster.desc || "完整项目案例正在整理。点击外部链接可跳转至小红书 / 站酷 / 公众号原帖查看大图与详细说明。"}
                </p>

                {poster.highlights && poster.highlights.length > 0 && (
                  <div style={{ marginTop: 28 }}>
                    <div className="mono" style={{ fontSize: 10, color: "var(--mute)", marginBottom: 12 }}>项目要点 · KEY POINTS</div>
                    <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
                      {poster.highlights.map((h, i) => (
                        <li key={i} style={{
                          display: "grid",
                          gridTemplateColumns: "26px 1fr",
                          gap: 10,
                          fontSize: 13.5,
                          lineHeight: 1.65,
                          color: "var(--ink-2)",
                          fontFamily: '"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif',
                          paddingBottom: 10,
                          borderBottom: i === poster.highlights.length - 1 ? "none" : "1px dashed var(--line-2)",
                        }}>
                          <span className="mono" style={{ fontSize: 10, color: "var(--kraft-d)", paddingTop: 3 }}>
                            0{i + 1}
                          </span>
                          <span>{h}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                <div className="mono" style={{
                  fontSize: 10,
                  marginTop: 32,
                  color: "var(--mute)",
                  display: "flex", justifyContent: "space-between",
                  paddingTop: 18,
                  borderTop: "1px solid var(--line-2)",
                }}>
                  <span>{imgs.length} 张项目图 · 向下滚动查看 ↓</span>
                  <span>END / 完</span>
                </div>
              </div>
            </div>
          );
        })()}
      </Modal>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);

/* responsive helpers */
const css = `
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr !important;}
  .about-grid{grid-template-columns:1fr !important; gap:48px !important;}
  .contact-grid{grid-template-columns:1fr !important; gap:48px !important;}
  .grid-3{grid-template-columns:repeat(2,1fr) !important;}
  .masonry{column-count:2 !important;}
}
@media (max-width: 640px){
  .grid-3, .grid-2{grid-template-columns:1fr !important;}
  .masonry{column-count:1 !important;}
}
@media (max-width: 760px){
  .poster-modal{grid-template-columns:1fr !important;}
  .poster-case > div:last-child{position:static !important; border-top:1px solid var(--line-2);}
  .poster-case > div:first-of-type{border-right:0 !important;}
  .poster-img-col.is-split2{grid-template-columns:1fr !important;}
}
`;
const s = document.createElement("style"); s.textContent = css; document.head.appendChild(s);