// home-v2.jsx — 新首页:整本食谱书,每页一道菜,左右滑动翻页

const { useState: uH2, useRef: rH2, useEffect: eH2 } = React;

// ── Cooking quotes (random pick on each launch) ──
const COOKING_QUOTES = [
  { zh: '人间烟火气', en: '— 汪曾祺' },
  { zh: '味无定味,适口者珍', en: '— 黄庭坚' },
  { zh: '美食与爱不可辜负', en: '— 蔡澜' },
  { zh: '食不厌精,脍不厌细', en: '— 论语' },
  { zh: '治大国若烹小鲜', en: '— 老子' },
  { zh: '民以食为天', en: '— 史记' },
  { zh: '一粥一饭,当思不易', en: '— 朱柏庐' },
  { zh: '心急吃不了热豆腐', en: '— 俗语' },
  { zh: '慢工出细活', en: '— 俗语' },
  { zh: '料理即心意', en: '— 北野武' },
  { zh: '能吃是福,会吃是艺术', en: '— 林语堂' },
  { zh: '吃在中国,味在四川', en: '— 俗语' },
];

function pickRandomQuote() {
  return COOKING_QUOTES[Math.floor(Math.random() * COOKING_QUOTES.length)];
}

function HomeV2({ recipes, categories, onPickRecipe, t, density }) {
  // pageIdx: 0 = cover, 1 = TOC, 2..N+1 = recipes, N+2 = back cover/index
  const COVER = 0;
  const TOC = 1;
  const recipePages = recipes.length;
  const TOTAL = 2 + recipePages; // cover + toc + recipes
  const [pageIdx, setPageIdx] = uH2(0);
  const [flipping, setFlipping] = uH2(null); // { from, to, dir }
  const [drag, setDrag] = uH2(0);
  const dragStartX = rH2(0);
  const dragging = rH2(false);
  const [activeCat, setActiveCat] = uH2('all');
  // Random quote, picked once per mount (per page-load / app-launch)
  const [quote] = uH2(pickRandomQuote);

  const pad = density === 'compact' ? 22 : 26;

  const goTo = (newIdx) => {
    if (newIdx < 0 || newIdx >= TOTAL || newIdx === pageIdx || flipping) return;
    const dir = newIdx > pageIdx ? 'next' : 'prev';
    setFlipping({ from: pageIdx, to: newIdx, dir });
    setTimeout(() => {
      setPageIdx(newIdx);
      setFlipping(null);
      setDrag(0);
    }, 540);
  };

  const onPointerDown = (e) => {
    if (flipping) return;
    dragging.current = true;
    dragStartX.current = e.clientX || e.touches?.[0]?.clientX || 0;
  };
  const onPointerMove = (e) => {
    if (!dragging.current || flipping) return;
    const x = e.clientX || e.touches?.[0]?.clientX || 0;
    const dx = x - dragStartX.current;
    const w = 320;
    setDrag(Math.max(-1, Math.min(1, dx / w)));
  };
  const onPointerUp = () => {
    if (!dragging.current) return;
    dragging.current = false;
    if (drag < -0.22 && pageIdx < TOTAL - 1) goTo(pageIdx + 1);
    else if (drag > 0.22 && pageIdx > 0) goTo(pageIdx - 1);
    else setDrag(0);
  };

  // Determine z-order/transform per page index
  const pageProps = (i) => {
    let z = 0, transform = '', display = 'none', opacity = 1;
    if (flipping) {
      if (i === flipping.from) {
        display = 'block';
        if (flipping.dir === 'next') {
          z = 30;
          transform = 'rotateY(-180deg)';
        } else {
          z = 5;
          transform = 'rotateY(0deg)';
        }
      } else if (i === flipping.to) {
        display = 'block';
        if (flipping.dir === 'next') {
          z = 5;
          transform = 'rotateY(0deg)';
        } else {
          z = 30;
          transform = 'rotateY(0deg)';
        }
      }
    } else {
      if (i === pageIdx) {
        display = 'block';
        z = 20;
        const rot = drag < 0 ? drag * 180 : 0;
        transform = `rotateY(${rot}deg)`;
      } else if (i === pageIdx + 1) {
        display = 'block';
        z = 5;
      } else if (i === pageIdx - 1) {
        display = 'block';
        z = drag > 0 ? 30 : 4;
        const rot = drag > 0 ? -180 + drag * 180 : -180;
        transform = `rotateY(${rot}deg)`;
      }
    }
    return { z, transform, display, opacity };
  };

  // PAGE RENDERERS
  // ─── Cover page ───
  function renderCover() {
    return (
      <div style={{ position: 'relative', height: '100%', display: 'flex',
        flexDirection: 'column', padding: '60px 32px 50px 44px',
        background: '#E8DAB8',
        backgroundImage: `
          repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px),
          repeating-linear-gradient(0deg, transparent 0 60px, rgba(0,0,0,0.02) 60px 61px)
        `,
      }}>
        {/* Decorative border frame */}
        <div style={{
          position: 'absolute', inset: 16,
          border: `1px solid ${BOOK.ink}50`,
          pointerEvents: 'none',
        }} />
        <div style={{
          position: 'absolute', inset: 22,
          border: `0.5px solid ${BOOK.ink}30`,
          pointerEvents: 'none',
        }} />

        {/* Top series mark */}
        <div style={{
          textAlign: 'center', marginBottom: 18, position: 'relative',
        }}>
          <div style={{
            fontFamily: '"DM Mono", monospace', fontSize: 9,
            letterSpacing: '0.5em', color: BOOK.ink + 'AA',
            textTransform: 'uppercase',
          }}>残卷 · 卷一 · LOST SCROLL</div>
          <div style={{
            width: 32, height: 1, background: BOOK.ink + '60',
            margin: '14px auto',
          }} />
        </div>

        {/* Drop / acquisition banner — wuxia "you got an item" feel */}
        <div style={{
          textAlign: 'center', marginBottom: 18,
          padding: '10px 14px',
          border: `1px dashed ${BOOK.ink}66`,
          background: 'rgba(255, 240, 200, 0.35)',
          fontFamily: '"Noto Serif SC", serif', fontSize: 11,
          color: BOOK.ink + 'CC', lineHeight: 1.7,
          letterSpacing: '0.04em',
        }}>
          <span style={{ color: BOOK.ink, fontWeight: 500 }}>恭喜阁下</span> · 拾得上古食神坠落之笔记<br/>
          <span style={{
            fontFamily: '"DM Mono", monospace', fontSize: 8.5,
            letterSpacing: '0.25em', color: BOOK.ink + '99',
            textTransform: 'uppercase',
          }}>Lost Manual of the Eternal Chef</span>
        </div>

        {/* Title block */}
        <div style={{ textAlign: 'center', marginTop: 16, marginBottom: 16, position: 'relative' }}>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 16, color: BOOK.ink + 'BB', marginBottom: 12,
            letterSpacing: '0.05em',
          }}>A Lost Recipe Manual · Tested in This Lifetime</div>
          <h1 style={{
            margin: 0, fontFamily: '"Noto Serif SC", serif',
            fontSize: 52, fontWeight: 300, color: BOOK.ink,
            letterSpacing: '0.12em', lineHeight: 1.05,
            writingMode: 'horizontal-tb',
          }}>食神<br/>笔记</h1>
          <div style={{
            width: 60, height: 1, background: BOOK.ink + '60',
            margin: '20px auto',
          }} />
          <div style={{
            fontFamily: '"Noto Serif SC", serif', fontSize: 13, fontWeight: 300,
            color: BOOK.ink + 'BB', letterSpacing: '0.3em',
          }}>心 · 法 · 秘 · 传</div>
        </div>

        <div style={{ flex: 1 }} />

        {/* Bottom mark */}
        <div style={{ textAlign: 'center', position: 'relative' }}>
          <div style={{
            display: 'inline-block', padding: '8px 22px',
            border: `1px solid ${BOOK.ink}55`,
            fontFamily: '"DM Mono", monospace', fontSize: 9.5,
            letterSpacing: '0.35em', color: BOOK.ink,
            textTransform: 'uppercase',
          }}>{recipes.length} 道 · 秘传</div>
          <div style={{
            marginTop: 14, fontFamily: '"DM Mono", monospace',
            fontSize: 8.5, letterSpacing: '0.4em', color: BOOK.ink + '88',
            textTransform: 'uppercase',
          }}>初抄本 · FIRST TRANSCRIPT · MMXXVI</div>
        </div>
      </div>
    );
  }

  // ─── TOC page ───
  function renderTOC() {
    return (
      <div style={{ position: 'relative', height: '100%',
        padding: '40px 24px 50px 44px', display: 'flex', flexDirection: 'column' }}>
        <PageHeader chapter="TABLE OF CONTENTS" no={null} accent={BOOK.ink} t={t} />
        <h2 style={{
          margin: '8px 0 6px', fontFamily: '"Noto Serif SC", serif',
          fontSize: 32, fontWeight: 300, color: BOOK.ink, letterSpacing: '0.06em',
        }}>目 录</h2>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontSize: 13, color: BOOK.ink + 'AA', marginBottom: 22,
        }}>Contents</div>

        <div style={{ flex: 1, overflow: 'hidden' }}>
          {recipes.map((r, i) => {
            const matches = activeCat === 'all' || r.category === activeCat;
            return (
              <button key={r.id}
                onClick={() => goTo(2 + i)}
                disabled={!matches}
                style={{
                  width: '100%', display: 'flex', alignItems: 'baseline',
                  gap: 8, padding: '11px 0',
                  borderBottom: `1px dotted ${BOOK.ruleSoft}`,
                  background: 'transparent', border: 'none',
                  borderBottomWidth: 1, borderBottomStyle: 'dotted',
                  borderBottomColor: BOOK.ruleSoft,
                  cursor: matches ? 'pointer' : 'default',
                  textAlign: 'left',
                  opacity: matches ? 1 : 0.32,
                  transition: 'opacity .25s',
                }}>
                <span style={{
                  fontFamily: '"DM Mono", monospace', fontSize: 10,
                  color: r.accent, letterSpacing: '0.15em',
                  width: 26,
                }}>{String(i + 1).padStart(2, '0')}</span>
                <div style={{ flex: 1, display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{
                    fontFamily: '"Noto Serif SC", serif', fontSize: 16,
                    color: BOOK.ink, fontWeight: 400, letterSpacing: '0.04em',
                  }}>{r.name}</span>
                  <span style={{
                    fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                    fontSize: 11, color: BOOK.ink + '88',
                  }}>· {r.nameEn}</span>
                </div>
                <span style={{
                  fontFamily: '"DM Mono", monospace', fontSize: 9.5,
                  color: BOOK.ink + '88', letterSpacing: '0.1em',
                }}>p. {String((i + 1) * 12).padStart(3, '0')}</span>
              </button>
            );
          })}
        </div>

        {/* Categories at bottom — clickable filter */}
        <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${BOOK.rule}` }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            marginBottom: 8,
          }}>
            <div style={{
              fontFamily: '"DM Mono", monospace', fontSize: 9,
              letterSpacing: '0.3em', color: BOOK.ink + '88',
              textTransform: 'uppercase',
            }}>BY CATEGORY</div>
            {activeCat !== 'all' && (
              <button onClick={() => setActiveCat('all')} style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                fontFamily: '"DM Mono", monospace', fontSize: 9,
                letterSpacing: '0.2em', color: BOOK.ink + '99',
                textTransform: 'uppercase', padding: 0,
              }}>× clear</button>
            )}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {[{ id: 'all', label: '全部', count: recipes.length }, ...categories].map(c => {
              const isActive = activeCat === c.id;
              return (
                <button key={c.id}
                  onClick={() => setActiveCat(isActive ? 'all' : c.id)}
                  style={{
                    fontFamily: '"Noto Sans SC"', fontSize: 11,
                    padding: '3px 8px',
                    border: `1px solid ${isActive ? BOOK.ink : BOOK.rule}`,
                    color: isActive ? '#fff' : BOOK.ink,
                    letterSpacing: '0.04em',
                    background: isActive ? BOOK.ink : 'rgba(255,255,255,0.3)',
                    cursor: 'pointer',
                    transition: 'all .15s',
                  }}>
                  {c.label} <span style={{
                    fontFamily: '"DM Mono"', fontSize: 9,
                    opacity: 0.6,
                  }}>{c.count}</span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  // ─── Recipe page ───
  function renderRecipe(r, i) {
    return (
      <div style={{
        position: 'relative', height: '100%',
        padding: '32px 22px 40px 44px',
        display: 'flex', flexDirection: 'column',
      }}>
        <PageHeader chapter={`CH. ${String(i + 1).padStart(2, '0')} · ${r.category.toUpperCase()}`}
          no={i + 1} accent={r.accent} t={t} />

        {/* Photo plate — real image if heroImage set, else cookbook placeholder */}
        <div style={{
          position: 'relative', width: '100%', height: 188,
          background: BOOK.paperDeep, overflow: 'hidden',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `1px solid ${BOOK.rule}`, marginBottom: 14,
          flexShrink: 0,
        }}>
          {r.heroImage ? (
            <>
              <img src={r.heroImage} alt={r.name}
                loading="lazy"
                style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  display: 'block',
                  filter: 'saturate(0.96) contrast(1.02)',
                }} />
              <span style={{
                position: 'absolute', top: 6, left: 8,
                fontFamily: '"DM Mono", monospace', fontSize: 8,
                letterSpacing: '0.3em', color: '#F5EFE2',
                textTransform: 'uppercase',
                background: 'rgba(0,0,0,0.45)',
                padding: '2px 6px',
              }}>FIG. {String(i + 1).padStart(2, '0')}</span>
            </>
          ) : (
            <>
              <div style={{
                position: 'absolute', inset: 0,
                background: `repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,0.04) 8px 9px)`,
              }} />
              <div style={{
                position: 'relative', textAlign: 'center', maxWidth: '78%',
                padding: '10px 14px', background: BOOK.paper,
                border: `1px dashed ${BOOK.ink}55`,
              }}>
                <div style={{
                  fontFamily: '"DM Mono", monospace', fontSize: 8.5,
                  letterSpacing: '0.3em', color: BOOK.ink + '88', textTransform: 'uppercase',
                  marginBottom: 4,
                }}>PHOTO PLATE</div>
                <div style={{
                  fontFamily: '"Noto Serif SC", serif', fontSize: 12,
                  color: BOOK.ink + 'BB', lineHeight: 1.5, fontWeight: 300,
                }}>{r.heroImageDesc || `${r.name} · 成品图`}</div>
              </div>
              <span style={{
                position: 'absolute', top: 6, left: 8,
                fontFamily: '"DM Mono", monospace', fontSize: 8,
                letterSpacing: '0.3em', color: BOOK.ink + '99',
                textTransform: 'uppercase',
              }}>FIG. {String(i + 1).padStart(2, '0')}</span>
            </>
          )}
        </div>

        {/* Title */}
        <div style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontSize: 13, color: BOOK.ink + 'AA', marginBottom: 2,
        }}>{r.nameEn}</div>
        <h2 style={{
          margin: 0, fontFamily: '"Noto Serif SC", serif',
          fontSize: 28, fontWeight: 400, color: BOOK.ink, letterSpacing: '0.05em',
          lineHeight: 1.15,
        }}>{r.name}</h2>

        {/* Decorative divider */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          margin: '12px 0',
        }}>
          <div style={{ flex: 1, height: 1, background: BOOK.rule }} />
          <span style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 16, color: BOOK.ink + '88',
          }}>§</span>
          <div style={{ flex: 1, height: 1, background: BOOK.rule }} />
        </div>

        {/* Meta */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-around',
          fontFamily: '"DM Mono", monospace', fontSize: 9.5,
          letterSpacing: '0.18em', color: BOOK.ink + 'AA',
          marginBottom: 12,
        }}>
          <span><b style={{ color: BOOK.ink, fontWeight: 600 }}>{r.time}</b> MIN</span>
          <span style={{ color: BOOK.ruleSoft }}>·</span>
          <span><b style={{ color: BOOK.ink, fontWeight: 600 }}>{r.difficulty}</b></span>
          <span style={{ color: BOOK.ruleSoft }}>·</span>
          <span><b style={{ color: BOOK.ink, fontWeight: 600 }}>{r.steps.length}</b> 步</span>
        </div>

        {/* Intro */}
        <p style={{
          margin: 0, fontFamily: '"Noto Serif SC", serif', fontSize: 13,
          lineHeight: 1.85, color: BOOK.ink, fontWeight: 300,
          textIndent: '2em', letterSpacing: '0.02em',
          flex: 1, overflow: 'hidden',
          display: '-webkit-box', WebkitLineClamp: 4,
          WebkitBoxOrient: 'vertical',
        }}>{r.intro}</p>

        {/* Tags as marginalia */}
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10,
        }}>
          {r.tags.map(tg => (
            <span key={tg} style={{
              fontFamily: '"Noto Sans SC"', fontSize: 10.5,
              padding: '3px 8px', border: `1px solid ${BOOK.rule}`,
              color: BOOK.ink + 'CC', letterSpacing: '0.04em',
              background: 'rgba(255,255,255,0.4)',
            }}>{tg}</span>
          ))}
        </div>

        {/* CTA */}
        <button onClick={() => onPickRecipe(i)} style={{
          marginTop: 14, padding: '11px 16px',
          background: r.accent, color: '#fff', border: 'none',
          fontFamily: '"Noto Sans SC"', fontSize: 12.5,
          letterSpacing: '0.15em', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <UIIcons.book size={13} /> 翻入此页 · 开始制作
          </span>
          <UIIcons.forward size={13} />
        </button>

        {/* Page footer */}
        <div style={{
          position: 'absolute', bottom: 12, left: 44, right: 22,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: '"DM Mono", monospace', fontSize: 9,
          color: BOOK.ink + '77', letterSpacing: '0.25em', textTransform: 'uppercase',
          pointerEvents: 'none',
        }}>
          <span>VOL. 04 · 我不是厨神</span>
          <span>p. {String((i + 1) * 12).padStart(3, '0')}</span>
        </div>
      </div>
    );
  }

  function renderPage(i) {
    if (i === COVER) return renderCover();
    if (i === TOC) return renderTOC();
    return renderRecipe(recipes[i - 2], i - 2);
  }

  // Page back (visible briefly during flip)
  function renderBack(i) {
    return (
      <div style={{
        position: 'absolute', inset: 0,
        background: BOOK.paperDeep,
        backgroundImage: `repeating-linear-gradient(0deg, transparent 0 24px, rgba(140,100,40,0.05) 24px 25px)`,
        border: `1px solid ${BOOK.rule}`,
        borderRight: `2px solid ${BOOK.ink}25`,
        backfaceVisibility: 'hidden',
        transform: 'rotateY(180deg)',
        padding: '40px 44px 40px 22px',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        boxShadow: 'inset -10px 0 14px -12px rgba(0,0,0,0.18)',
      }}>
        <div style={{
          fontFamily: '"DM Mono", monospace', fontSize: 9,
          letterSpacing: '0.4em', color: BOOK.ink + '88',
          textTransform: 'uppercase', marginBottom: 14,
        }}>PAGE TURN</div>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
          fontSize: 28, color: BOOK.ink + '88', textAlign: 'center',
        }}>flip</div>
        <div style={{
          width: 36, height: 1, background: BOOK.rule, margin: '18px 0',
        }} />
        <div style={{
          fontFamily: '"Noto Serif SC", serif', fontSize: 12,
          color: BOOK.ink + 'AA', fontWeight: 300, letterSpacing: '0.1em',
        }}>翻 页 中</div>
      </div>
    );
  }

  const currentPage = pageIdx;

  return (
    <div style={{
      background: '#E8E1D4',
      backgroundImage: `
        repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,0.015) 4px 5px)
      `,
      color: BOOK.ink, minHeight: '100%',
      fontFamily: '"Inter", "Noto Sans SC", system-ui, sans-serif',
      paddingBottom: 32,
    }}>
      {/* Top bar — minimal, sits ON the table-top */}
      <div style={{
        padding: `52px ${pad}px 14px`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        color: BOOK.ink,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 14,
            background: BOOK.ink, color: '#E8DAB8',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <UIIcons.chef size={15} />
          </div>
          <div style={{ minWidth: 0, maxWidth: 230 }}>
            <div style={{
              fontFamily: '"Noto Serif SC", serif', fontSize: 13, fontWeight: 400,
              letterSpacing: '0.06em', lineHeight: 1.2, color: BOOK.ink,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }} title={`${quote.zh} ${quote.en}`}>「{quote.zh}」</div>
            <div style={{
              fontFamily: '"DM Mono", monospace', fontSize: 8,
              color: BOOK.ink + '88', letterSpacing: '0.25em',
              marginTop: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>{quote.en}</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          <button style={{ ...iconBtn(t), color: BOOK.ink }}><UIIcons.search size={18} /></button>
          <button style={{ ...iconBtn(t), color: BOOK.ink }}><UIIcons.bookmark size={18} /></button>
        </div>
      </div>

      {/* BOOK STAGE — full bleed */}
      <div
        onMouseDown={onPointerDown}
        onMouseMove={onPointerMove}
        onMouseUp={onPointerUp}
        onMouseLeave={onPointerUp}
        onTouchStart={onPointerDown}
        onTouchMove={onPointerMove}
        onTouchEnd={onPointerUp}
        style={{
          position: 'relative',
          margin: `8px 16px 0`,
          height: 596,
          perspective: '1800px',
          perspectiveOrigin: '0% 50%',
          touchAction: 'pan-y',
          userSelect: 'none',
        }}
      >
        {/* Book base shadow — gives the "thick book on table" feeling */}
        <div style={{
          position: 'absolute', inset: '-6px -8px -10px -2px',
          background: 'rgba(0,0,0,0.45)',
          filter: 'blur(14px)',
          zIndex: 0,
          borderRadius: 4,
        }} />

        {/* Right page edge stack */}
        <BookSpine pos="right" />

        {/* Spine binding stripe on left */}
        <div style={{
          position: 'absolute', top: 0, bottom: 0, left: -3, width: 8,
          background: 'linear-gradient(90deg, #2A1E10, #5A4528)',
          borderRight: `1px solid #1A0F05`,
          boxShadow: 'inset -1px 0 0 rgba(0,0,0,0.6)',
          zIndex: 35,
          pointerEvents: 'none',
        }} />

        {Array.from({ length: TOTAL }, (_, i) => {
          const { z, transform, display, opacity } = pageProps(i);
          const useTransition = !dragging.current;
          return (
            <div key={i} style={{
              position: 'absolute', inset: 0,
              display, zIndex: z, opacity,
              transformStyle: 'preserve-3d',
              transformOrigin: 'left center',
              transform,
              transition: useTransition
                ? 'transform 0.54s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s'
                : 'none',
            }}>
              {/* Front */}
              <div style={{
                position: 'absolute', inset: 0,
                background: BOOK.paper,
                backgroundImage: `repeating-linear-gradient(0deg, transparent 0 26px, rgba(140,100,40,0.04) 26px 27px)`,
                border: `1px solid ${BOOK.rule}`,
                borderLeft: `2px solid ${BOOK.ink}30`,
                backfaceVisibility: 'hidden',
                boxShadow: i === pageIdx
                  ? '0 18px 36px -22px rgba(0,0,0,0.7), inset 8px 0 12px -10px rgba(0,0,0,0.18)'
                  : 'inset 8px 0 12px -10px rgba(0,0,0,0.18)',
                overflow: 'hidden',
              }}>
                {/* Binding holes */}
                <div style={{
                  position: 'absolute', left: 14, top: 0, bottom: 0,
                  display: 'flex', flexDirection: 'column',
                  justifyContent: 'space-around', padding: '70px 0',
                  pointerEvents: 'none', zIndex: 1,
                }}>
                  {[0,1,2,3,4].map(k => (
                    <span key={k} style={{
                      width: 5, height: 5, borderRadius: 3,
                      background: BOOK.hole,
                    }} />
                  ))}
                </div>
                {renderPage(i)}
              </div>
              {/* Back */}
              {renderBack(i)}
            </div>
          );
        })}
      </div>

      {/* Bottom controls — looks like a brass bookmark band */}
      <div style={{
        margin: `18px ${pad}px 0`,
        padding: '12px 14px',
        background: 'rgba(232, 218, 184, 0.08)',
        border: `1px solid rgba(232, 218, 184, 0.2)`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 10,
      }}>
        <button onClick={() => goTo(pageIdx - 1)}
          disabled={pageIdx === 0}
          style={{
            background: 'transparent', border: 'none',
            color: '#E8DAB8',
            opacity: pageIdx === 0 ? 0.3 : 1,
            cursor: pageIdx === 0 ? 'default' : 'pointer',
            display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: '"DM Mono", monospace', fontSize: 10,
            letterSpacing: '0.2em', textTransform: 'uppercase',
            padding: '4px 8px',
          }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M15 6l-6 6 6 6" />
          </svg>
          上一页
        </button>

        <div style={{
          fontFamily: '"DM Mono", monospace', fontSize: 11,
          color: '#E8DAB8', letterSpacing: '0.15em',
          textAlign: 'center',
        }}>
          {String(pageIdx + 1).padStart(2, '0')}
          <span style={{ color: '#C9B894', opacity: 0.6 }}> / {String(TOTAL).padStart(2, '0')}</span>
        </div>

        <button onClick={() => goTo(pageIdx + 1)}
          disabled={pageIdx === TOTAL - 1}
          style={{
            background: 'transparent', border: 'none',
            color: '#E8DAB8',
            opacity: pageIdx === TOTAL - 1 ? 0.3 : 1,
            cursor: pageIdx === TOTAL - 1 ? 'default' : 'pointer',
            display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: '"DM Mono", monospace', fontSize: 10,
            letterSpacing: '0.2em', textTransform: 'uppercase',
            padding: '4px 8px',
          }}>
          下一页
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M9 6l6 6-6 6" />
          </svg>
        </button>
      </div>
    </div>
  );
}

window.HomeV2 = HomeV2;