// Screenshots page — stylized phone mockups per era

function PhoneFrame({ palette, children, src, alt }) {
  const paletteMap = {
    blue: { bg:"#E8F0FA", fg:"#1E4A7A", accent:"#4A8CC4", surface:"#FFFFFF" },
    teal: { bg:"#E4F4F0", fg:"#1C5E52", accent:"#4FBDA8", surface:"#FFFFFF" },
    mint: { bg:"#EAFBF6", fg:"#0F5D4E", accent:"#2EB89B", surface:"#FFFFFF" },
    mono: { bg:"#F2F1EC", fg:"#57544C", accent:"#A8A499", surface:"#FFFFFF" },
  };
  const p = paletteMap[palette] || paletteMap.mint;
  // 실제 스크린샷 이미지가 있으면 이미지를 렌더, 없으면 children(mock UI) 렌더
  const hasImage = !!src;
  return (
    <div className="phone-frame">
      <div className="phone-screen" style={{background: hasImage ? "#000" : p.bg, padding: hasImage ? 0 : undefined}}>
        {hasImage ? (
          <img
            src={src}
            alt={alt || "Todait screenshot"}
            loading="lazy"
            style={{width:"100%", height:"100%", objectFit:"cover", display:"block", borderRadius:"inherit"}}
          />
        ) : (
          <React.Fragment>
            <div className="phone-status" style={{color: p.fg}}>
              <span className="mono">9:41</span>
              <span style={{display:"flex", gap:4, fontSize:9}}>
                <span>●●●</span><span>⎗</span><span>▮▮</span>
              </span>
            </div>
            <div style={{flex:1, position:"relative", overflow:"hidden"}}>
              {children && children(p)}
            </div>
            <div className="phone-home-indicator"></div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

function MockHome({ p, accent, bars, title = "오늘" }) {
  return (
    <div style={{padding:"14px 16px"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600, letterSpacing:"0.06em"}}>FRI · APR 24</div>
      <div style={{fontSize:22, fontWeight:800, color:p.fg, marginTop:2}}>{title}</div>
      <div style={{background:p.surface, borderRadius:10, padding:"12px 14px", marginTop:12, boxShadow:"0 1px 3px rgba(0,0,0,0.04)"}}>
        <div style={{fontSize:9, color:p.fg, opacity:0.5, fontWeight:600}}>오늘의 분량</div>
        <div style={{fontSize:20, fontWeight:700, color: accent || p.accent, marginTop:2, fontFamily:"var(--font-mono)"}}>2h 48m</div>
        <div style={{height:6, background:p.bg, borderRadius:3, marginTop:10, overflow:"hidden"}}>
          <div style={{width:"62%", height:"100%", background: accent || p.accent, borderRadius:3}}></div>
        </div>
      </div>
      {(bars || [90, 66, 40, 72, 55]).map((w, i) => (
        <div key={i} style={{display:"flex", alignItems:"center", gap:8, marginTop:8, background:p.surface, borderRadius:8, padding:"8px 10px"}}>
          <div style={{width:6, height:6, borderRadius:3, background: i === 0 ? (accent || p.accent) : p.fg, opacity: i === 0 ? 1 : 0.3}}></div>
          <div style={{flex:1}}>
            <div style={{fontSize:10, fontWeight:600, color:p.fg}}>{["수학","영어 독해","한국사","국어","과학"][i]}</div>
            <div style={{height:3, background:p.bg, marginTop:4, borderRadius:2, overflow:"hidden"}}>
              <div style={{width:`${w}%`, height:"100%", background: accent || p.accent, opacity: 0.7}}></div>
            </div>
          </div>
          <div className="mono" style={{fontSize:9, color:p.fg, opacity:0.5}}>{w}%</div>
        </div>
      ))}
    </div>
  );
}

function MockTimer({ p }) {
  const pct = 0.68;
  const r = 50;
  const c = 2 * Math.PI * r;
  return (
    <div style={{padding:"14px 16px", display:"flex", flexDirection:"column", alignItems:"center"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600}}>TIMER</div>
      <div style={{fontSize:16, fontWeight:700, color:p.fg, marginBottom:12}}>수학 · 집중</div>
      <svg viewBox="0 0 120 120" width="150" height="150" style={{marginTop:10}}>
        <circle cx="60" cy="60" r={r} fill="none" stroke={p.bg} strokeWidth="8" />
        <circle cx="60" cy="60" r={r} fill="none" stroke={p.accent} strokeWidth="8"
          strokeDasharray={`${pct*c} ${c}`} strokeLinecap="round"
          transform="rotate(-90 60 60)" />
        <text x="60" y="58" textAnchor="middle" fontSize="16" fontWeight="800" fill={p.fg} fontFamily="var(--font-mono)">32:14</text>
        <text x="60" y="72" textAnchor="middle" fontSize="7" fill={p.fg} opacity="0.5">남음</text>
      </svg>
      <div style={{display:"flex", gap:10, marginTop:20}}>
        <div style={{width:42, height:42, borderRadius:21, background:p.surface, display:"grid", placeItems:"center", color:p.accent, fontSize:16}}>⏸</div>
        <div style={{width:42, height:42, borderRadius:21, background:p.accent, display:"grid", placeItems:"center", color:"white", fontSize:16}}>✓</div>
      </div>
    </div>
  );
}

function MockStats({ p, bars }) {
  return (
    <div style={{padding:"14px 16px"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600}}>STATS · JUN</div>
      <div style={{fontSize:18, fontWeight:800, color:p.fg, marginTop:2}}>주간 통계</div>
      <div style={{background:p.surface, borderRadius:10, padding:"14px 14px 18px", marginTop:12}}>
        <div style={{display:"flex", alignItems:"flex-end", gap:6, height:90}}>
          {(bars || [40, 62, 88, 72, 58, 42, 30]).map((h, i) => (
            <div key={i} style={{flex:1, display:"flex", flexDirection:"column", alignItems:"center", gap:4}}>
              <div style={{width:"100%", height:`${h}%`, background: i === 2 ? p.accent : p.bg, borderRadius:"3px 3px 0 0"}}></div>
              <div style={{fontSize:8, color:p.fg, opacity:0.5}}>{["월","화","수","목","금","토","일"][i]}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginTop:10}}>
        <div style={{background:p.surface, borderRadius:8, padding:"10px 12px"}}>
          <div style={{fontSize:9, color:p.fg, opacity:0.5}}>평균</div>
          <div className="mono" style={{fontSize:14, fontWeight:700, color:p.accent}}>3h 12m</div>
        </div>
        <div style={{background:p.surface, borderRadius:8, padding:"10px 12px"}}>
          <div style={{fontSize:9, color:p.fg, opacity:0.5}}>정점</div>
          <div className="mono" style={{fontSize:14, fontWeight:700, color:p.fg}}>수요일</div>
        </div>
      </div>
    </div>
  );
}

function MockHeatmap({ p }) {
  const cells = [];
  for (let i = 0; i < 7; i++) {
    const row = [];
    for (let j = 0; j < 14; j++) {
      row.push(Math.random());
    }
    cells.push(row);
  }
  const opacity = (v) => v < 0.2 ? 0.1 : v < 0.4 ? 0.3 : v < 0.6 ? 0.55 : v < 0.8 ? 0.8 : 1;
  return (
    <div style={{padding:"14px 16px"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600}}>STATS · 2018</div>
      <div style={{fontSize:18, fontWeight:800, color:p.fg, marginTop:2}}>연간 잔디</div>
      <div style={{background:p.surface, borderRadius:10, padding:14, marginTop:12}}>
        <div style={{display:"grid", gridTemplateRows:"repeat(7, 1fr)", gap:3}}>
          {cells.map((row, i) => (
            <div key={i} style={{display:"grid", gridTemplateColumns:"repeat(14, 1fr)", gap:3}}>
              {row.map((v, j) => (
                <div key={j} style={{aspectRatio:1, borderRadius:2, background:p.accent, opacity: opacity(v)}}></div>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div style={{marginTop:10, display:"flex", justifyContent:"space-between", fontSize:9, color:p.fg, opacity:0.5}}>
        <span>Jan</span><span>Apr</span><span>Jul</span><span>Oct</span>
      </div>
    </div>
  );
}

function MockPlan({ p }) {
  return (
    <div style={{padding:"14px 16px"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600}}>PLAN · 주간</div>
      <div style={{fontSize:18, fontWeight:800, color:p.fg, marginTop:2}}>플랜</div>
      {["수학 I · 100문제","영어 단어 · 200개","한국사 강의 · 3강","국어 문학 · 독해 12지문"].map((t, i) => (
        <div key={i} style={{background:p.surface, borderRadius:10, padding:"10px 12px", marginTop:10, borderLeft:`3px solid ${p.accent}`}}>
          <div style={{fontSize:9, color:p.fg, opacity:0.5, fontFamily:"var(--font-mono)"}}>2018-06-{12+i}</div>
          <div style={{fontSize:11, fontWeight:600, color:p.fg, marginTop:2}}>{t}</div>
          <div style={{display:"flex", gap:2, marginTop:6}}>
            {[...Array(10)].map((_, k) => (
              <div key={k} style={{flex:1, height:4, borderRadius:2, background: k < (7-i) ? p.accent : p.bg}}></div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function MockAdd({ p }) {
  return (
    <div style={{padding:"14px 16px"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600}}>새 계획</div>
      <div style={{fontSize:18, fontWeight:800, color:p.fg, marginTop:2}}>계획 추가</div>
      {[
        {l:"과목",v:"수학 I"},
        {l:"총 분량",v:"100 문제"},
        {l:"기간",v:"2017-04-01 → 05-31"},
        {l:"난이도",v:"● ● ● ○ ○"},
      ].map((f, i) => (
        <div key={i} style={{background:p.surface, borderRadius:8, padding:"10px 12px", marginTop:10}}>
          <div style={{fontSize:9, color:p.fg, opacity:0.5}}>{f.l}</div>
          <div style={{fontSize:12, fontWeight:600, color:p.fg, marginTop:2}}>{f.v}</div>
        </div>
      ))}
      <div style={{background:p.accent, color:"white", borderRadius:10, padding:"12px", marginTop:14, textAlign:"center", fontWeight:700, fontSize:13}}>
        자동 배분하기 →
      </div>
    </div>
  );
}

function MockWidget({ p }) {
  return (
    <div style={{padding:"14px 16px", height:"100%", display:"flex", flexDirection:"column", justifyContent:"space-around", background: "linear-gradient(180deg, #F8F7F2 0%, #E8E5DE 100%)"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600, textAlign:"center"}}>홈 스크린</div>
      <div style={{background:"white", borderRadius:22, padding:"18px 16px", boxShadow:"0 4px 12px rgba(0,0,0,0.08)"}}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:10}}>
          <div style={{fontSize:10, fontWeight:700, color:p.fg}}>오늘의 투데잇</div>
          <div style={{width:14, height:14, borderRadius:4, background:p.accent}}></div>
        </div>
        <div className="mono" style={{fontSize:22, fontWeight:800, color:p.accent}}>2h 48m</div>
        <div style={{fontSize:9, color:p.fg, opacity:0.5, marginTop:2}}>남은 분량</div>
        <div style={{height:4, background:"#F2F1EC", borderRadius:2, marginTop:8, overflow:"hidden"}}>
          <div style={{width:"62%", height:"100%", background:p.accent}}></div>
        </div>
      </div>
      <div style={{display:"flex", gap:8, justifyContent:"center"}}>
        {["📸","🗓","🎵","⚙️"].map((i, k) => (
          <div key={k} style={{width:32, height:32, borderRadius:7, background:"rgba(255,255,255,0.7)", display:"grid", placeItems:"center", fontSize:16}}>{i}</div>
        ))}
      </div>
    </div>
  );
}

function MockOnboarding({ p }) {
  return (
    <div style={{padding:"22px 16px", height:"100%", display:"flex", flexDirection:"column"}}>
      <div style={{display:"flex", justifyContent:"center", gap:6, marginBottom:20}}>
        {[0,1,2,3].map(i => (
          <div key={i} style={{width: i === 1 ? 18 : 6, height:6, borderRadius:3, background: i <= 1 ? p.accent : p.bg}}></div>
        ))}
      </div>
      <div style={{flex:1, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
        <div style={{width:100, height:100, borderRadius:20, background:p.accent, opacity:0.15, display:"grid", placeItems:"center", marginBottom:24}}>
          <div style={{fontSize:40}}>📚</div>
        </div>
        <div style={{fontSize:18, fontWeight:800, color:p.fg, textAlign:"center", lineHeight:1.3, padding:"0 12px"}}>분량을 입력하면<br/>계획이 자동으로 나옵니다</div>
        <div style={{fontSize:11, color:p.fg, opacity:0.5, textAlign:"center", marginTop:12, lineHeight:1.6, padding:"0 20px"}}>
          목표일까지 남은 날짜에 맞춰<br/>매일 해야 할 분량을 계산해드려요.
        </div>
      </div>
      <div style={{background:p.accent, color:"white", borderRadius:10, padding:"12px", textAlign:"center", fontWeight:700, fontSize:13}}>
        다음 →
      </div>
    </div>
  );
}

function MockIPad({ p }) {
  // landscape-like, but use same portrait frame; use 2-column
  return (
    <div style={{padding:"12px 14px"}}>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600}}>iPad · 분할</div>
      <div style={{fontSize:16, fontWeight:800, color:p.fg, marginTop:2}}>오늘</div>
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginTop:12}}>
        {[0,1,2,3].map(i => (
          <div key={i} style={{background:p.surface, borderRadius:8, padding:"8px 10px"}}>
            <div style={{fontSize:8, color:p.fg, opacity:0.5}}>과목 {i+1}</div>
            <div className="mono" style={{fontSize:13, fontWeight:700, color:p.accent, marginTop:2}}>{[42,28,56,74][i]}%</div>
            <div style={{height:3, background:p.bg, marginTop:4, borderRadius:2}}>
              <div style={{width:`${[42,28,56,74][i]}%`, height:"100%", background:p.accent, borderRadius:2}}></div>
            </div>
          </div>
        ))}
      </div>
      <div style={{marginTop:10, background:p.surface, borderRadius:8, padding:"10px 12px"}}>
        <div style={{fontSize:9, color:p.fg, opacity:0.5, fontWeight:600}}>타이머</div>
        <div style={{display:"flex", alignItems:"center", gap:10, marginTop:6}}>
          <div style={{flex:1, height:4, background:p.bg, borderRadius:2, overflow:"hidden"}}>
            <div style={{width:"68%", height:"100%", background:p.accent}}></div>
          </div>
          <div className="mono" style={{fontSize:12, fontWeight:700, color:p.fg}}>32:14</div>
        </div>
      </div>
    </div>
  );
}

function MockFrozen({ p }) {
  return (
    <div style={{padding:"14px 16px", position:"relative"}}>
      <div style={{position:"absolute", inset:0, background:"linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.02))", pointerEvents:"none"}}></div>
      <div style={{fontSize:11, color:p.fg, opacity:0.5, fontWeight:600}}>FRI · SEP 25 · 2019</div>
      <div style={{fontSize:22, fontWeight:800, color:p.fg, marginTop:2}}>오늘</div>
      <div style={{fontSize:10, color:"#A67DB8", marginTop:4, fontStyle:"italic"}}>이후 날짜는 업데이트되지 않습니다</div>
      {[70, 48, 30, 60].map((w, i) => (
        <div key={i} style={{display:"flex", alignItems:"center", gap:8, marginTop:10, background:p.surface, borderRadius:8, padding:"8px 10px", opacity:0.75}}>
          <div style={{width:6, height:6, borderRadius:3, background:p.fg, opacity:0.3}}></div>
          <div style={{flex:1}}>
            <div style={{fontSize:10, fontWeight:600, color:p.fg, opacity:0.7}}>{["수학","영어","한국사","국어"][i]}</div>
            <div style={{height:3, background:p.bg, marginTop:4, borderRadius:2}}>
              <div style={{width:`${w}%`, height:"100%", background:p.fg, opacity:0.25}}></div>
            </div>
          </div>
        </div>
      ))}
      <div style={{marginTop:14, textAlign:"center", fontSize:10, color:p.fg, opacity:0.5, fontStyle:"italic"}}>∴ 4년째 같은 화면</div>
    </div>
  );
}

const SHOT_RENDERERS = {
  "home-16":   (p) => <MockHome p={p} bars={[85, 62, 38]} />,
  "timer-16":  (p) => <MockTimer p={p} />,
  "stats-16":  (p) => <MockStats p={p} bars={[30, 55, 72, 48, 40, 22, 14]} />,
  "home-17":   (p) => <MockHome p={p} bars={[88, 64, 42, 70]} />,
  "add-17":    (p) => <MockAdd p={p} />,
  "goal-17":   (p) => <MockAdd p={p} />,
  "stats-17":  (p) => <MockStats p={p} bars={[40, 62, 84, 72, 58, 42, 30]} />,
  "home-18":   (p) => <MockHome p={p} bars={[92, 68, 44, 72, 55]} />,
  "timer-18":  (p) => <MockTimer p={p} />,
  "widget-18": (p) => <MockWidget p={p} />,
  "plan-18":   (p) => <MockPlan p={p} />,
  "stats-18":  (p) => <MockHeatmap p={p} />,
  "ipad-home": (p) => <MockIPad p={p} />,
  "ipad-plan": (p) => <MockPlan p={p} />,
  "pencil":    (p) => <MockIPad p={p} />,
  "onboarding":(p) => <MockOnboarding p={p} />,
  "frozen-home":  (p) => <MockFrozen p={p} />,
  "frozen-stats": (p) => <MockStats p={p} bars={[40, 62, 84, 72, 58, 42, 30]} />,
};

function ScreenshotCard({ shot, palette, onClick }) {
  // 실제 스크린샷이 없으면 아예 렌더하지 않는다 (존재하지 않는 화면의 가짜 목업 금지)
  if (!shot.src) return null;
  return (
    <button className="shot-card" onClick={onClick}>
      <PhoneFrame palette={palette} src={shot.src} alt={shot.label}>
        {null}
      </PhoneFrame>
      <div className="shot-meta">
        <div className="shot-label">{shot.label}</div>
        <div className="shot-caption">{shot.caption}</div>
      </div>
    </button>
  );
}

function Lightbox({ shot, palette, onClose, onPrev, onNext }) {
  if (!shot || !shot.src) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div style={{position:"relative", display:"flex", flexDirection:"column", alignItems:"center", gap:20, maxWidth:520}} onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} style={{ position:"absolute", top:-56, right:0, width: 44, height: 44, borderRadius: 10, border: "1px solid rgba(255,255,255,0.2)", background: "rgba(0,0,0,0.5)", color: "white", fontSize: 16, cursor: "pointer" }}>✕</button>
        <div style={{transform:"scale(1.6)", transformOrigin:"center center", margin:"60px 0"}}>
          <PhoneFrame palette={palette} src={shot.src} alt={shot.label}>
            {null}
          </PhoneFrame>
        </div>
        <div style={{textAlign:"center", color:"white", maxWidth:"48ch"}}>
          <div style={{fontSize:18, fontWeight:700, marginBottom:8}}>{shot.label}</div>
          <div style={{fontSize:14, opacity:0.7}}>{shot.caption}</div>
        </div>
        <div style={{display:"flex", gap:12}}>
          <button onClick={(e) => { e.stopPropagation(); onPrev(); }} style={{padding:"10px 22px", borderRadius:10, border:"1px solid rgba(255,255,255,0.2)", background:"rgba(0,0,0,0.4)", color:"white", cursor:"pointer"}}>← 이전</button>
          <button onClick={(e) => { e.stopPropagation(); onNext(); }} style={{padding:"10px 22px", borderRadius:10, border:"1px solid rgba(255,255,255,0.2)", background:"rgba(0,0,0,0.4)", color:"white", cursor:"pointer"}}>다음 →</button>
        </div>
      </div>
    </div>
  );
}

function ScreenshotsPage() {
  const data = window.SCREENSHOT_DATA;
  const [lightbox, setLightbox] = React.useState(null);

  // Flatten for navigation — src 없는 shot은 제외 (가짜 목업 금지)
  const allShots = React.useMemo(() => {
    const flat = [];
    data.groups.forEach(g => g.shots.forEach(s => {
      if (s.src) flat.push({ shot: s, palette: g.palette, era: g.era, year: g.year });
    }));
    return flat;
  }, [data]);

  // src 있는 shot이 하나라도 있는 group만 렌더
  const visibleGroups = React.useMemo(
    () => data.groups.map(g => ({...g, shots: g.shots.filter(s => s.src)})).filter(g => g.shots.length > 0),
    [data]
  );

  const currentIdx = lightbox ? allShots.findIndex(x => x.shot.key === lightbox.shot.key) : -1;

  const prev = () => {
    if (currentIdx <= 0) return setLightbox(allShots[allShots.length - 1]);
    setLightbox(allShots[currentIdx - 1]);
  };
  const next = () => {
    if (currentIdx >= allShots.length - 1) return setLightbox(allShots[0]);
    setLightbox(allShots[currentIdx + 1]);
  };

  React.useEffect(() => {
    const onKey = (e) => {
      if (!lightbox) return;
      if (e.key === "ArrowLeft") prev();
      if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lightbox, currentIdx]);

  return (
    <div className="page">
      <section className="reviews-hero">
        <div style={{fontSize:12, letterSpacing:"0.18em", fontWeight:600, textTransform:"uppercase", color:"var(--fg-muted)", marginBottom:16}}>
          Gallery · 스크린샷
        </div>
        <h1>디자인은 <em style={{fontStyle:"normal", color:"var(--accent)"}}>언어</em>였다</h1>
        <p className="reviews-hero-sub">18장의 대표 화면 — 파랑에서 민트로 흐른 10년</p>
      </section>

      <section className="section" style={{marginTop:64}}>
        <Narrative>
          <p>{data.intro}</p>
        </Narrative>
      </section>

      {visibleGroups.map((g, gi) => (
        <section key={g.era} className="section" style={{marginTop: gi === 0 ? 64 : 72}}>
          <div className="era-header">
            <div className={"era-dot era-dot-" + g.palette}></div>
            <div>
              <div className="mono" style={{fontSize:12, letterSpacing:"0.1em", color:"var(--fg-muted)", fontWeight:600}}>{g.year}</div>
              <h2 className="section-title" style={{margin:"4px 0 0"}}>{g.era}</h2>
            </div>
          </div>
          <div className="shots-grid">
            {g.shots.map(s => (
              <ScreenshotCard
                key={s.key}
                shot={s}
                palette={g.palette}
                onClick={() => setLightbox({ shot: s, palette: g.palette, era: g.era, year: g.year })}
              />
            ))}
          </div>
        </section>
      ))}

      <section className="epilogue" style={{marginTop:96}}>
        <div className="epilogue-quote">"색이 멈춘 자리, 시간도 멈췄다."</div>
        <div style={{color:"var(--fg-muted)", fontSize:14, maxWidth:"44ch", margin:"0 auto"}}>
          민트 그린은 2018년에 확정됐고, 2019년 9월 이후로 한 번도 바뀌지 않았다.
        </div>
      </section>

      {lightbox && (
        <Lightbox
          shot={lightbox.shot}
          palette={lightbox.palette}
          onClose={() => setLightbox(null)}
          onPrev={prev}
          onNext={next}
        />
      )}
    </div>
  );
}

Object.assign(window, { ScreenshotsPage });