// site-design.jsx — Hi-Fi mock for 'AI 게임 개발 시작' Q&A site
// 3 pages: Home / QnA / Book Index
// Visual tokens match the official book cover (dark navy + cyan accent)

const T = {
  bg: "#0d1e2e",
  bg2: "#112333",
  bg3: "#16293d",
  bg4: "#1d3450",
  ink: "#f5f8fa",
  inkSoft: "#d8e6f0",
  inkMute: "#9fb4c2",
  rule: "#1f3447",
  rule2: "#2c4a63",
  cyan: "#7DCFF0",
  cyanDeep: "#4ba8d6",
  cyanGlow: "rgba(125,207,240,0.20)",
  amber: "#FFD23F",
  amberDeep: "#e8a800",
  amberGlow: "rgba(255,210,63,0.22)",
  pink: "#ff6f9c",
  ok: "#7ee5b5",
};
const display = '"Black Han Sans", "Noto Sans KR", sans-serif';
const serif = '"Noto Serif KR", serif';
const sans = '"Noto Sans KR", system-ui, sans-serif';
const mono = '"JetBrains Mono", monospace';

// ─────────────────────────────────────────────
// CHAPTER DATA — from manuscript v4
// ─────────────────────────────────────────────
const PARTS = [
  { p: "01", title: "워밍업 — 왕초보편",
    sub: "AI 이미지·영상·시놉시스·세계관 설정까지",
    accent: T.cyan,
    chs: [
      ["01", "AI 이미지 생성원리와 프롬프트 구조", 2,
        "피사체+동작+장면 한 줄 공식에서 5W1H 프레임워크까지"],
      ["02", "초간단 AI 영상 제작 및 편집 기초", 17,
        "구글 Flow로 1분 숏츠 만들기 — 정지 사진에 숨 불어넣기"],
      ["03", "시놉시스 작성하기", 31,
        "Claude로 게임의 첫 한 문장 — 블랭크 오피서의 탄생"],
      ["04", "게임세계관 설정하기", 43,
        "WINC × SODA 모델로 세계관 한 장에 압축"],
    ]},
  { p: "02", title: "게임기획서 작성편",
    sub: "캐릭터·시나리오·GDD·피칭 PPT까지",
    accent: T.cyan,
    chs: [
      ["05", "캐릭터 컨셉 디자인 생성 기초", 62,
        "노트북LM × 슈퍼젬으로 경관의 외모 시트 정리"],
      ["06", "시나리오·스토리보드 생성 기초", 76,
        "9컷 시트로 게임의 흐름을 컷 단위로 자르기"],
      ["07", "GDD 초안 작성하기", 94,
        "게임 한 권을 한 장의 문서로 — 게임 디자인 도큐먼트"],
      ["08", "피칭 PPT 생성하기", 105,
        "게임을 세상에 설명하는 언어 — 피칭의 9슬라이드"],
    ]},
  { p: "03", title: "프로토타이핑",
    sub: "컨셉아트·스프라이트·플레이가능 프로토·Unity 환경",
    accent: T.cyan,
    chs: [
      ["09", "게임 컨셉아트 생성하기", 116,
        "슈퍼젬으로 경관의 첫 얼굴을 본다"],
      ["10", "캐릭터 스프라이트 시트 생성하기", 123,
        "IDLE 2 · WALK 4 · ROCKET JUMP — 프레임으로 쪼개기"],
      ["11", "플레이가능 프로토타이핑 제작하기", 133,
        "[Click Here to Start] — 경관이 처음으로 뛴다"],
      ["12", "Unity 제작 환경설정", 155,
        "Unity Hub · LTS · 2D URP — 회색 화면을 친구로"],
    ]},
  { p: "04", title: "바이브코딩 세팅",
    sub: "스프라이트 디자인 · 타일맵 · Codex · Claude Code",
    accent: T.cyan,
    chs: [
      ["13", "캐릭터 스프라이트 시트 디자인 하기", 186,
        "Grok + Gemini + Claude로 한 장에 28프레임 압축"],
      ["14", "레벨디자인: Unity 타일맵 & 팔레트", 202,
        "경관이 밟을 땅을 만드는 시간 — 타일맵과 팔레트"],
      ["15", "2D플랫포머 구조 이해 (Unity + Codex)", 217,
        "AI가 처음으로 Unity를 직접 조작한다"],
      ["16", "바이브코딩 세팅 (Unity + Claude Code)", 228,
        "터미널 · 데스크탑 · MCP — Claude와 Unity 연결"],
      ["17", "프롬프트 잘 쓰는 노하우 (Unity + Claude Code)", 244,
        "흐름을 끊지 않는 프롬프트 — 다섯 가지 패턴"],
    ]},
  { p: "05", title: "바이브코딩 실전",
    sub: "플랫포머 만들기 · 감각 입히기 · 장르 전환",
    accent: T.amber,
    chs: [
      ["18", "AI 바이브코딩 실전 ① — 플랫포머 게임 만들기", 266,
        "빈 화면 앞에서 멈추지 않는 법 — 한 게임의 1층"],
      ["19", "AI 바이브코딩 실전 ② — 게임에 감각 입히기", 288,
        "작동하는 게임을 느껴지는 게임으로 — 카메라·사운드·이펙트"],
      ["20", "AI 바이브코딩 실전 ③ — 플랫포머에서 탑다운 뱀서라이크로", 306,
        "같은 경관, 다른 장르 — 같은 프로젝트로 한 번 더"],
    ]},
];

// ─────────────────────────────────────────────
// SHARED — NavBar
// ─────────────────────────────────────────────
function NavBar({ active = "home", scrolled = true }) {
  const items = [
    ["home", "/",        "홈"],
    ["book", "/book",    "책 소개"],
    ["qna",  "/qna",     "Q&A"],
    ["gallery","/gallery","갤러리"],
    ["author","/author", "저자"],
  ];
  return (
    <nav style={{
      position:"relative", zIndex:50,
      background: scrolled ? "rgba(7,17,26,0.85)" : "transparent",
      backdropFilter:"blur(12px)",
      borderBottom: `1px solid ${T.rule}`,
      padding:"0 56px", height:72,
      display:"flex", alignItems:"center", justifyContent:"space-between",
    }}>
      {/* logo */}
      <a href="/" style={{display:"flex", alignItems:"center", gap:12, textDecoration:"none"}}>
        <div style={{
          width:30, height:30, background: T.cyan, color: T.bg,
          display:"flex", alignItems:"center", justifyContent:"center",
          fontFamily: serif, fontWeight:900, fontSize:18,
        }}>金</div>
        <div>
          <div style={{
            fontFamily: serif, fontWeight:900, fontSize:14, color:"#fff",
            letterSpacing:"-0.01em", lineHeight:1.1,
          }}>AI 게임 개발 시작</div>
          <div style={{
            fontFamily: mono, fontSize:9.5, color: T.cyan,
            letterSpacing:".25em", marginTop:2,
          }}>ANYONE CAN MAKE A GAME</div>
        </div>
      </a>

      {/* nav items */}
      <div style={{display:"flex", alignItems:"center", gap:32}}>
        {items.map(([k, url, t]) => (
          <a key={k} href={url} style={{
            fontFamily: sans, fontSize:14, fontWeight: active===k ? 700 : 500,
            color: active===k ? T.cyan : T.inkSoft,
            position: "relative", cursor: "pointer",
            paddingBottom: 4, textDecoration:"none",
            borderBottom: active===k ? `2px solid ${T.cyan}` : "2px solid transparent",
          }}>{t}</a>
        ))}
      </div>

      {/* CTA */}
      <div style={{display:"flex", alignItems:"center", gap:12}}>
        <div style={{
          fontFamily: mono, fontSize:11, color: T.inkMute, letterSpacing:".2em",
        }}>VOL.03</div>
        <button style={{
          background: T.cyan, color: T.bg, border:"none",
          padding:"10px 20px", fontFamily: sans, fontWeight:900, fontSize:13,
          letterSpacing:"-0.01em", cursor:"pointer",
        }}>책 구매하기 ▸</button>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────
// SHARED — Footer
// ─────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{
      background:"#06101a", borderTop:`1px solid ${T.rule}`,
      padding:"54px 56px 32px",
    }}>
      <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr 1fr 1fr", gap:48}}>
        <div>
          <div style={{
            fontFamily: serif, fontWeight:900, fontSize:18, color:"#fff",
            letterSpacing:"-0.01em", marginBottom:8,
          }}>AI 게임 개발 시작</div>
          <div style={{
            fontFamily: mono, fontSize:10.5, color: T.cyan, letterSpacing:".2em",
            marginBottom:14,
          }}>ANYONE CAN MAKE A GAME</div>
          <div style={{fontSize:12.5, lineHeight:1.85, color: T.inkMute}}>
            게임을 만들고 싶다는 마음이 있으면,<br/>
            방법은 반드시 생긴다는 것을 30년 게임 현장에서 확신했습니다.
          </div>
        </div>
        {[
          ["사이트", [
            {t:"홈",       href:"/"},
            {t:"책 소개",  href:"/book"},
            {t:"Q&A",      href:"/qna"},
            {t:"갤러리",   href:"/gallery"},
            {t:"저자",     href:"/author"},
          ]],
          ["책 구매", [
            {t:"교보문고", href:"#"},
            {t:"예스24",   href:"#"},
            {t:"알라딘",   href:"#"},
            {t:"리디북스", href:"#"},
          ]],
          ["연락", [
            {t:"저자에게 메일",  href:"/contact?subject=저자에게 메일"},
            {t:"교재 채택 문의", href:"/contact?subject=교재 채택 문의"},
            {t:"오류 신고",      href:"/contact?subject=오류 신고"},
            {t:"강연 신청",      href:"/lecture"},
          ]],
        ].map(([title, items])=>(
          <div key={title}>
            <div style={{
              fontFamily: mono, fontSize:10.5, color: T.cyan,
              letterSpacing:".25em", marginBottom:14,
            }}>{title.toUpperCase()}</div>
            <div style={{display:"flex", flexDirection:"column", gap:8}}>
              {items.map(it=>(
                <a key={it.t} href={it.href} style={{fontSize:13, color: T.inkSoft, cursor:"pointer", textDecoration:"none"}}>{it.t}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop:42, paddingTop:22, borderTop:`1px solid ${T.rule}`,
        display:"flex", justifyContent:"space-between", alignItems:"center",
        fontFamily: mono, fontSize:11, color: T.inkMute, letterSpacing:".15em",
      }}>
        <span>© 2026 김정태 · 도서출판 홍릉 · 모두의 AI</span>
        <span>ISBN 979-11-7570-059-8 · IT/게임개발 · 22,000원</span>
        <span>이용약관 · 개인정보처리방침</span>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────
// SHARED — Floating chat button
// ─────────────────────────────────────────────
function ChatFAB() {
  return (
    <a href="/qna" style={{
      position:"absolute", right:32, bottom:32, zIndex:60,
      width:64, height:64, background: T.cyan, color: T.bg,
      borderRadius:"50%", display:"flex", alignItems:"center", justifyContent:"center",
      boxShadow: `0 12px 40px ${T.cyanGlow}, 0 0 0 0 ${T.cyanGlow}`,
      cursor:"pointer", textDecoration:"none",
    }}>
      <div style={{fontFamily: mono, fontSize:9, fontWeight:700, letterSpacing:".15em", textAlign:"center", lineHeight:1.2}}>
        ASK<br/>OFFICER
      </div>
    </a>
  );
}

// ─────────────────────────────────────────────
// PAGE 1 — HOME
// ─────────────────────────────────────────────
// ─────────────────────────────────────────────
// PAGE 4 — GALLERY  /gallery
// ─────────────────────────────────────────────
window.SiteGallery = function SiteGallery() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    fetch('/gallery-data.json')
      .then(r => r.json())
      .then(setItems)
      .catch(() => {});
  }, []);
  return (
    <div style={{background: T.bg, color: T.ink, fontFamily: sans, position:"relative"}}>
      <NavBar active="gallery" scrolled={true}/>
      <section style={{padding:"56px 56px 24px", borderBottom:`1px solid ${T.rule}`}}>
        <div style={{maxWidth:1500, margin:"0 auto"}}>
          <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
            letterSpacing:".3em", marginBottom:12}}>VISUAL ARCHIVE</div>
          <h1 style={{fontFamily: display, fontWeight:400, fontSize:50,
            letterSpacing:"-0.01em", margin:"0 0 12px", color: T.amber}}>
            갤러리 — 책 속의 모든 비주얼
          </h1>
          <p style={{fontSize:15, color: T.inkSoft, lineHeight:1.8, maxWidth:720, margin:0}}>
            컨셉아트, 캐릭터 스프라이트, 인게임 스크린샷, 표지까지 — 책의 5 Part가 만들어낸
            시각 자산을 한 자리에서 모아봅니다.
          </p>
        </div>
      </section>
      <section style={{padding:"48px 56px 80px"}}>
        <div style={{maxWidth:1500, margin:"0 auto",
          display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:18}}>
          {items.map((it, i)=>(
            <div key={i} style={{
              background: T.bg2, border:`1px solid ${T.rule}`,
              overflow:"hidden", display:"flex", flexDirection:"column",
            }}>
              <div style={{width:"100%", aspectRatio:"4/3", background:"#000",
                overflow:"hidden", position:"relative"}}>
                <img src={it.src} alt={it.title} style={{
                  width:"100%", height:"100%", objectFit:"cover",
                  imageRendering:"pixelated",
                }}/>
                <div style={{position:"absolute", top:10, left:10,
                  fontFamily: mono, fontSize:9.5, color: T.cyan, letterSpacing:".2em",
                  padding:"3px 8px", background:"rgba(7,17,26,0.7)",
                  border:`1px solid ${T.cyan}`,
                }}>{it.ch}</div>
              </div>
              <div style={{padding:"14px 16px"}}>
                <div style={{fontFamily: serif, fontWeight:700, fontSize:15,
                  letterSpacing:"-0.015em", marginBottom:4}}>{it.title}</div>
                <div style={{fontSize:12, color: T.inkMute, lineHeight:1.6}}>{it.note}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
      <Footer/>
      <ChatFAB/>
    </div>
  );
};

// ─────────────────────────────────────────────
// PAGE 5 — AUTHOR  /author
// ─────────────────────────────────────────────
window.SiteAuthor = function SiteAuthor() {
  const career = [
    ["2024–",     "동양대학교 게임학부 · AI게임융합전공 전임교수"],
    ["2020–2024", "동양대학교 콘텐츠창업학과 학과장"],
    ["2008–2018", "지스타 국제게임전시회 1·2회 총괄감독"],
    ["2003–2010", "게임스튜디오 · 모바일 게임 스타트업 대표"],
    ["1995–2003", "삼성전자 게임그룹 게임 PD · 200편+ 게임·엔터 타이틀"],
  ];
  const books = [
    ["2026", "AI 게임 개발 시작 — 누구나 게임을 만든다"],
    ["2022", "게이미피케이션 개론"],
    ["2015", "게임의 역사와 이해"],
    ["2010", "모바일 게임 비즈니스 입문"],
  ];
  return (
    <div style={{background: T.bg, color: T.ink, fontFamily: sans, position:"relative"}}>
      <NavBar active="author" scrolled={true}/>
      <section style={{padding:"56px 56px 56px", borderBottom:`1px solid ${T.rule}`,
        background: T.bg2}}>
        <div style={{maxWidth:1500, margin:"0 auto",
          display:"grid", gridTemplateColumns:"180px 1fr", gap:48, alignItems:"flex-start"}}>
          <div style={{
            width:180, height:180, background: T.cyan, color: T.bg,
            display:"flex", alignItems:"center", justifyContent:"center",
            fontFamily: serif, fontWeight:900, fontSize:96,
            boxShadow:`0 20px 60px rgba(0,0,0,0.5), 10px 10px 0 ${T.rule2}`,
          }}>金</div>
          <div>
            <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
              letterSpacing:".3em", marginBottom:12}}>AUTHOR · 김정태</div>
            <h1 style={{fontFamily: display, fontWeight:400, fontSize:54,
              letterSpacing:"-0.01em", margin:"0 0 12px", lineHeight:1.05}}>
              30년 게임 현장에서<br/>
              <span style={{color: T.amber}}>200편을 만들었습니다.</span>
            </h1>
            <p style={{fontSize:15.5, color: T.inkSoft, lineHeight:1.85, maxWidth:760, margin:"0 0 22px"}}>
              대학 시절 꿈이 오락실 주인이었던 사람. 게임이 좋아서 친구들과 스타트업을 차렸고,
              삼성전자에서 200편이 넘는 게임·엔터 타이틀을 만들었고, 지스타 국제게임전시회 1·2회
              총괄감독을 맡았고, 지금은 학생들과 함께 매일 게임을 만드는 교수입니다.
            </p>
            <div style={{display:"flex", gap:10}}>
              <a href="/lecture" style={{background: T.cyan, color: T.bg, border:"none",
                padding:"13px 24px", fontFamily: sans, fontWeight:900, fontSize:13,
                cursor:"pointer", textDecoration:"none", display:"inline-block"}}>강연 신청하기 ▸</a>
              <a href="/contact?subject=저자에게 메일" style={{background:"transparent", color: T.cyan,
                border:`1px solid ${T.cyan}`, padding:"13px 24px",
                fontFamily: sans, fontWeight:700, fontSize:13, cursor:"pointer",
                textDecoration:"none", display:"inline-block"}}>이메일 문의 →</a>
            </div>
          </div>
        </div>
      </section>
      <section style={{padding:"56px 56px"}}>
        <div style={{maxWidth:1500, margin:"0 auto",
          display:"grid", gridTemplateColumns:"1.4fr 1fr", gap:56}}>
          <div>
            <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
              letterSpacing:".25em", marginBottom:18}}>CAREER · 경력</div>
            {career.map(([y, t], i)=>(
              <div key={i} style={{display:"grid", gridTemplateColumns:"130px 1fr",
                gap:18, paddingTop:14, paddingBottom:14,
                borderBottom: i<career.length-1 ? `1px solid ${T.rule}` : "none"}}>
                <span style={{fontFamily: mono, fontSize:12, color: T.cyan,
                  letterSpacing:".15em"}}>{y}</span>
                <span style={{fontSize:14, color: T.inkSoft, lineHeight:1.55}}>{t}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
              letterSpacing:".25em", marginBottom:18}}>BOOKS · 저서</div>
            {books.map(([y, t], i)=>(
              <div key={i} style={{display:"grid", gridTemplateColumns:"60px 1fr",
                gap:14, paddingTop:12, paddingBottom:12,
                borderBottom: i<books.length-1 ? `1px solid ${T.rule}` : "none"}}>
                <span style={{fontFamily: mono, fontSize:11, color: T.inkMute,
                  letterSpacing:".15em"}}>{y}</span>
                <span style={{fontSize:13.5, color: T.inkSoft, fontWeight: i===0?700:400}}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Footer/>
      <ChatFAB/>
    </div>
  );
};

window.SiteHome = function SiteHome() {
  return (
    <div style={{background: T.bg, color: T.ink, fontFamily: sans, position:"relative"}}>
      <NavBar active="home" scrolled={false}/>

      {/* ── HERO — split layout featuring the actual book cover ───── */}
      <section style={{position:"relative", overflow:"hidden",
        marginTop: -72, paddingTop:118, paddingBottom: 70,
        background: `radial-gradient(600px 500px at 22% 55%, rgba(255,210,63,0.07) 0%, transparent 70%),
                     radial-gradient(900px 600px at 28% 50%, #122436 0%, ${T.bg} 70%)`,
      }}>
        {/* faint pixel-grid backdrop */}
        <div style={{position:"absolute", inset:0, pointerEvents:"none",
          backgroundImage: `linear-gradient(${T.rule}40 1px, transparent 1px), linear-gradient(90deg, ${T.rule}40 1px, transparent 1px)`,
          backgroundSize: "24px 24px", opacity: 0.65,
        }}/>
        {/* scanlines */}
        <div style={{position:"absolute", inset:0, pointerEvents:"none",
          background:"repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px)",
          mixBlendMode:"multiply",
        }}/>

        {/* content */}
        <div style={{position:"relative", zIndex:5, padding:"0 56px", maxWidth:1500, margin:"0 auto",
          display:"grid", gridTemplateColumns:"1.5fr 1fr", gap:64, alignItems:"center",
        }}>
          <div>
          <div style={{
            fontFamily: mono, fontSize:11, color: T.cyan, letterSpacing:".35em",
            marginBottom:18,
          }}>AI GAME DEVELOPMENT · COMPANION SITE</div>

          <h1 style={{
            fontFamily: display, fontWeight:400, fontSize:72, lineHeight:1.05,
            letterSpacing:"-0.01em", margin:"0 0 22px",
            color: T.amber,
            textShadow:`0 0 60px ${T.amberGlow}, 0 0 20px ${T.amberGlow}, 0 4px 24px rgba(0,0,0,0.7)`,
          }}>
            AI 게임 개발 시작<br/>
            <span style={{color: T.cyan, fontSize:"0.68em", fontFamily: display, fontWeight:400, letterSpacing:"-0.01em"}}>— 누구나 게임을 만든다</span>
          </h1>

          <p style={{
            fontFamily: serif, fontSize:17, lineHeight:1.7, color: T.inkSoft,
            margin:0, textShadow:"0 2px 8px rgba(0,0,0,0.6)",
          }}>
            코딩을 몰라도, 그림을 못 그려도, 어디서부터 시작해야 할지 몰라도. AI가 옆에 있으면
            달라집니다. 책의 모든 챕터에 대해 <b style={{color:T.cyan}}>"경관"</b>에게 직접 물어보세요.
          </p>

          {/* Q&A entry */}
          <div style={{
            marginTop:42, maxWidth: 720,
            background: T.bg2, border: `1px solid ${T.cyan}`,
            padding: "8px 8px 8px 22px",
            display:"flex", alignItems:"center", gap:14,
            boxShadow: `0 12px 60px ${T.cyanGlow}`,
          }}>
            <div style={{width:34, height:34, position:"relative", flexShrink:0}}>
              <img src="/assets/figures/officer-hero.png" alt=""
                style={{width:"100%", height:"100%", objectFit:"cover",
                  imageRendering:"pixelated", objectPosition:"center top"}}/>
            </div>
            <div style={{flex:1, fontFamily: serif, fontSize:16, color: T.inkMute, fontStyle:"italic"}}>
              "12장에서 Unity 처음 켜는 법 다시 설명해줘…"
            </div>
            <a href="/qna" style={{
              background: T.cyan, color: T.bg, border:"none",
              padding:"12px 22px", fontFamily: sans, fontWeight:900, fontSize:14,
              letterSpacing:"-0.01em", cursor:"pointer", flexShrink:0,
              textDecoration:"none",
            }}>물어보기 ▸</a>
          </div>

          {/* quick prompt chips */}
          <div style={{
            marginTop:18, display:"flex", gap:8, flexWrap:"wrap",
          }}>
            <span style={{fontFamily: mono, fontSize:10.5, color:T.inkMute,
              letterSpacing:".2em", alignSelf:"center", marginRight:8}}>자주 묻는 질문 →</span>
            {[
              "Unity 처음인데 따라할 수 있나요?",
              "5요소 프롬프트가 뭐예요?",
              "Claude Code 설치는 어떻게?",
              "GDD 작성 예시 보여줘",
            ].map(q=>(
              <span key={q} onClick={() => window.location.href = '/qna?q=' + encodeURIComponent(q)} style={{
                padding:"6px 12px", border:`1px solid ${T.rule2}`, color: T.inkSoft,
                fontSize:12, cursor:"pointer", background:"rgba(7,17,26,0.7)",
              }}>{q}</span>
            ))}
          </div>
          </div>

          {/* RIGHT — actual book cover */}
          <div style={{position:"relative", display:"flex", justifyContent:"center", alignItems:"center"}}>
            <div style={{position:"absolute", inset:"-30px",
              background:`radial-gradient(closest-side, ${T.cyanGlow}, transparent 70%)`,
              filter:"blur(20px)", zIndex:0,
            }}/>
            <div style={{position:"absolute", top:-12, left:"50%", transform:"translateX(-50%)",
              fontFamily: mono, fontSize:10, color: T.bg, letterSpacing:".3em",
              padding:"4px 12px", background: T.cyan, fontWeight:700,
              zIndex:3,
            }}>2026.06 · OUT NOW</div>
            <img src="/assets/figures/cover-final.png" alt="AI 게임 개발 시작 책표지"
              style={{
                position:"relative", zIndex:2,
                width:"100%", maxWidth: 420,
                height:"auto", display:"block",
                imageRendering: "pixelated",
                boxShadow:`0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px ${T.rule2}, 10px 10px 0 ${T.cyan}`,
              }}/>
          </div>
        </div>
      </section>

      {/* ── STAT STRIP ─────────────────────── */}
      <section style={{
        borderTop:`1px solid ${T.rule}`,
        borderBottom:`1px solid ${T.rule}`,
        background: T.bg2,
      }}>
        <div style={{
          maxWidth:1500, margin:"0 auto", padding:"30px 56px",
          display:"grid", gridTemplateColumns:"repeat(5,1fr)", gap:0,
        }}>
          {[
            ["5","PARTS"],
            ["20","CHAPTERS"],
            ["341","PAGES"],
            ["1","GAME · BLANK OFFICER"],
            ["∞","QUESTIONS"],
          ].map(([n,l],i)=>(
            <div key={l} style={{
              borderRight: i<4 ? `1px solid ${T.rule}` : "none",
              padding:"0 24px",
            }}>
              <div style={{fontFamily: display, fontWeight:400, fontSize:42, color: T.amber,
                lineHeight:1, letterSpacing:"0"}}>{n}</div>
              <div style={{fontFamily: mono, fontSize:10, color: T.inkMute,
                letterSpacing:".2em", marginTop:8}}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── 5 PARTS ─────────────────────── */}
      <section style={{padding:"80px 56px"}}>
        <div style={{maxWidth:1500, margin:"0 auto"}}>
          <div style={{
            display:"flex", justifyContent:"space-between", alignItems:"flex-end",
            marginBottom:42,
          }}>
            <div>
              <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
                letterSpacing:".3em", marginBottom:10}}>CONTENTS</div>
              <h2 style={{fontFamily: serif, fontWeight:900, fontSize:42,
                letterSpacing:"-0.025em", margin:0, color: T.amber}}>
                5 Part · 20장으로 한 권을 완주합니다
              </h2>
            </div>
            <div style={{fontSize:13, color: T.inkMute, maxWidth:340, lineHeight:1.7}}>
              각 챕터에 막힐 때마다 챗봇이 그 챕터의 본문만 끌어와 답해드립니다.<br/>
              답 아래엔 항상 출처 페이지가 함께 표시됩니다.
            </div>
          </div>

          <div style={{display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap:14}}>
            {PARTS.map(P => (
              <div key={P.p} style={{
                background: T.bg2, border:`1px solid ${T.rule}`, padding:"22px 18px",
                display:"flex", flexDirection:"column", minHeight: 260,
              }}>
                <div style={{
                  fontFamily: mono, fontSize:11, color: P.accent,
                  letterSpacing:".25em", marginBottom:10,
                }}>PART {P.p}</div>
                <h3 style={{
                  fontFamily: display, fontWeight:400, fontSize:18,
                  lineHeight:1.25, margin:"0 0 10px", color:"#fff",
                  letterSpacing:"0",
                }}>{P.title}</h3>
                <p style={{
                  fontSize:12, lineHeight:1.65, color: T.inkMute, margin:"0 0 16px",
                }}>{P.sub}</p>
                <div style={{display:"flex", flexDirection:"column", gap:5, marginTop:"auto"}}>
                  {P.chs.map(c=>(
                    <div key={c[0]} style={{
                      display:"flex", gap:8, fontSize:11.5, color: T.inkSoft,
                      lineHeight:1.5, alignItems:"baseline",
                    }}>
                      <span style={{fontFamily: mono, fontSize:9.5, color: P.accent,
                        letterSpacing:".05em", flexShrink:0}}>{c[0]}</span>
                      <span>{c[1].length > 22 ? c[1].slice(0,22) + "…" : c[1]}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── HERO GAME — BLANK OFFICER ─── */}
      <section style={{
        background: T.bg2, borderTop:`1px solid ${T.rule}`,
        borderBottom:`1px solid ${T.rule}`,
        padding:"80px 56px",
      }}>
        <div style={{maxWidth:1500, margin:"0 auto",
          display:"grid", gridTemplateColumns:"1fr 1fr", gap:60, alignItems:"center"}}>
          <div>
            <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
              letterSpacing:".3em", marginBottom:14}}>THE GAME WE BUILD</div>
            <h2 style={{fontFamily: serif, fontWeight:900, fontSize:42,
              letterSpacing:"-0.025em", margin:"0 0 18px", lineHeight:1.15}}>
              이 책 한 권으로 만드는<br/>진짜 게임 — <span style={{color: T.amber}}>BLANK OFFICER</span>
            </h2>
            <p style={{fontSize:15, lineHeight:1.85, color: T.inkSoft, margin:"0 0 28px"}}>
              이름 없는 경관. 낡은 재킷, 한 손엔 유탄발사기. 브루탈리즘 콘크리트 건물 앞에 선
              한 사람. 시놉시스 세 줄에서 시작해 Unity 위에서 처음 두 발로 달리는 순간까지 —
              그 여정을 독자가 직접 만듭니다.
            </p>
            <div style={{display:"flex", flexDirection:"column", gap:14}}>
              {[
                ["P1·P2", "기획", "시놉시스부터 GDD·피칭 PPT까지"],
                ["P3·P4", "프로토", "컨셉아트·스프라이트·Unity 환경"],
                ["P5",    "실전", "플랫포머에서 탑다운 뱀서라이크까지"],
              ].map(([k,t,d],i)=>(
                <div key={i} style={{
                  display:"grid", gridTemplateColumns:"68px 86px 1fr", gap:14,
                  paddingBottom:14, borderBottom: i<2 ? `1px solid ${T.rule}` : "none",
                  alignItems:"baseline",
                }}>
                  <span style={{fontFamily: mono, fontSize:10.5, color: T.cyan,
                    letterSpacing:".15em"}}>{k}</span>
                  <span style={{fontFamily: serif, fontWeight:700, fontSize:14, color:"#fff"}}>{t}</span>
                  <span style={{fontSize:13, color: T.inkSoft}}>{d}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{position:"relative"}}>
            <div style={{
              border:`1px solid ${T.cyan}`,
              padding:8, background: T.bg, position:"relative",
              boxShadow: `0 30px 80px ${T.cyanGlow}`,
            }}>
              <img src="/assets/figures/ingame-redzone.png" alt=""
                style={{width:"100%", display:"block", imageRendering:"pixelated"}}/>
              <div style={{
                position:"absolute", top:18, left:18,
                fontFamily: mono, fontSize:9.5, color: T.cyan,
                letterSpacing:".2em", padding:"3px 8px",
                background: "rgba(10,22,32,0.7)",
              }}>NOW PLAYING · STAGE 1-1</div>
            </div>
            {/* small officer mask floating */}
            <div style={{
              position:"absolute", bottom:-32, right:-32,
              width:120, height:170,
              filter:`drop-shadow(0 8px 24px rgba(0,0,0,0.6))`,
            }}>
              <img src="/assets/figures/officer-hero.png" alt=""
                style={{width:"100%", height:"100%", objectFit:"contain",
                  imageRendering:"pixelated"}}/>
            </div>
          </div>
        </div>
      </section>

      {/* ── AUTHOR ─────────────────────── */}
      <section style={{padding:"80px 56px"}}>
        <div style={{maxWidth:1500, margin:"0 auto",
          display:"grid", gridTemplateColumns:"1.6fr 1fr", gap:60}}>
          <div>
            <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
              letterSpacing:".3em", marginBottom:14}}>AUTHOR</div>
            <h2 style={{fontFamily: display, fontWeight:400, fontSize:38,
              letterSpacing:"-0.01em", margin:"0 0 12px"}}>
              김정태 — <span style={{color: T.amber}}>30년의 게임 현장</span>에서
            </h2>
            <p style={{fontSize:15, lineHeight:1.85, color: T.inkSoft, margin:"0 0 16px"}}>
              대학 시절 DKB라는 게임 스타트업을 차렸고, 삼성전자 게임 PD로 200편이 넘는 게임·엔터 타이틀을 기획·제작·퍼블리싱했고,
              지스타 국제게임전시회 1·2회 총괄감독을 맡았고, 지금은 동양대 게임학부에서 학생들과 매일 게임을 만듭니다.
            </p>
            <p style={{fontSize:14, lineHeight:1.75, color: T.inkMute, fontStyle:"italic",
              borderLeft:`3px solid ${T.cyan}`, paddingLeft:14, margin:"24px 0"}}>
              "이제 진짜 원 없이 게임 만들 수 있겠구나."<br/>
              <span style={{fontSize:12, color: T.inkMute, fontStyle:"normal"}}>
                — AI 시대를 본 그가 30년 끝에서 확인한 한 문장
              </span>
            </p>
            <div style={{
              display:"inline-flex", gap:10, marginTop:18,
            }}>
              <a href="/author" style={{
                background: T.cyan, color: T.bg, border:"none", padding:"11px 20px",
                fontFamily: sans, fontWeight:900, fontSize:13, cursor:"pointer",
                textDecoration:"none", display:"inline-block",
              }}>저자 소개 더 보기 ▸</a>
              <a href="/contact?subject=AI게임개발시작 1:1문의" style={{
                background: "transparent", color: T.cyan, border:`1px solid ${T.cyan}`,
                padding:"11px 20px", fontFamily: sans, fontWeight:700, fontSize:13, cursor:"pointer",
                textDecoration:"none", display:"inline-block",
              }}>1:1 문의 →</a>
            </div>
          </div>
          <div style={{
            background: T.bg2, border:`1px solid ${T.rule}`, padding:"24px 22px",
            display:"flex", flexDirection:"column", gap:12,
          }}>
            <div style={{fontFamily: mono, fontSize:10.5, color: T.cyan,
              letterSpacing:".25em"}}>PROFILE</div>
            {[
              ["현직",    "동양대 게임학부 · AI게임융합전공 교수"],
              ["前",      "삼성전자 게임 PD · 게임스튜디오 대표 · 지스타 1·2회 총괄감독"],
              ["저서",    "「게임의 역사와 이해」(2015) · 「게이미피케이션 개론」(2022)"],
              ["관심",    "AI 게임 개발 · 게임 교육 · 인디 스튜디오"],
            ].map(([k,v])=>(
              <div key={k} style={{display:"grid", gridTemplateColumns:"56px 1fr", gap:12,
                paddingBottom:10, borderBottom:`1px solid ${T.rule}`,
                fontSize:13, lineHeight:1.5,
              }}>
                <span style={{fontFamily: mono, fontSize:10, color: T.inkMute,
                  letterSpacing:".15em"}}>{k.toUpperCase()}</span>
                <span style={{color: T.inkSoft}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer/>
      <ChatFAB/>
    </div>
  );
};

// ─────────────────────────────────────────────
// PAGE 2 — Q&A CHAT
// ─────────────────────────────────────────────
window.SiteQnA = function SiteQnA() {
  const WELCOME = {
    role: "assistant",
    text: "안녕하세요. 저는 경관입니다.\n\n책 『AI 게임 개발 시작 — 누구나 게임을 만든다』에 대해 궁금한 것을 물어보세요.\n\nUnity 설치, 5요소 프롬프트, GDD 작성, 스프라이트 디자인, 게임 배포까지 — 책의 모든 내용을 함께 살펴봅니다.",
  };

  const SUGGESTIONS = [
    "Unity 6 LTS는 어디서 받아요?",
    "5요소 프롬프트가 뭐예요?",
    "GDD를 한 장으로 어떻게 써요?",
    "WebGL로 게임 배포하는 법",
  ];

  const [msgs, setMsgs] = React.useState([WELCOME]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const bottomRef = React.useRef(null);
  const taRef = React.useRef(null);
  const queryCount = msgs.filter(m => m.role === 'user').length;
  const autoSentRef = React.useRef(false);

  React.useEffect(() => {
    if (autoSentRef.current) return;
    const params = new URLSearchParams(window.location.search);
    const q = params.get('q');
    if (q) {
      autoSentRef.current = true;
      send(q);
    }
  }, []);

  React.useEffect(() => {
    if (bottomRef.current) {
      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [msgs, loading]);

  async function send(text) {
    const q = (text || input).trim();
    if (!q || loading) return;
    const nextMsgs = [...msgs, { role: 'user', text: q }];
    setMsgs(nextMsgs);
    setInput('');
    setLoading(true);
    try {
      const firstUserIdx = nextMsgs.findIndex(m => m.role === 'user');
      const apiMessages = nextMsgs.slice(firstUserIdx).slice(-12).map(m => ({
        role: m.role,
        content: m.text,
      }));
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: apiMessages }),
      });
      const data = await res.json();
      setMsgs(prev => [...prev, {
        role: 'assistant',
        text: data.text || data.error || '응답을 받지 못했습니다.',
      }]);
    } catch (e) {
      setMsgs(prev => [...prev, {
        role: 'assistant',
        text: '연결 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
      }]);
    } finally {
      setLoading(false);
      if (taRef.current) taRef.current.focus();
    }
  }

  function onKey(e) {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
  }

  function resetChat() {
    setMsgs([WELCOME]);
    setInput('');
    if (taRef.current) taRef.current.focus();
  }

  const canSend = input.trim().length > 0 && !loading;

  return (
    <div style={{background: T.bg, color: T.ink, fontFamily: sans, position:"relative"}}>
      <NavBar active="qna" scrolled={true}/>

      <div style={{
        display:"grid", gridTemplateColumns:"240px 1fr 280px", gap:0,
        height:"calc(100vh - 64px)", minHeight:640,
        borderBottom:`1px solid ${T.rule}`,
      }}>

        {/* ── SIDEBAR ── */}
        <aside style={{
          background:"#06101a", borderRight:`1px solid ${T.rule}`,
          padding:"20px 16px", display:"flex", flexDirection:"column", gap:14, overflow:"hidden",
        }}>
          <button onClick={resetChat} style={{
            background: T.cyan, color: T.bg, border:"none",
            padding:"11px 14px", fontFamily: sans, fontWeight:900, fontSize:13,
            cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"space-between",
            flexShrink:0,
          }}>+ 새 대화 <span style={{fontFamily: mono, fontSize:10, opacity:0.75}}>N</span></button>

          <div style={{flex:1, overflow:"hidden"}}>
            <div style={{fontFamily: mono, fontSize:10, color: T.inkMute,
              letterSpacing:".25em", margin:"4px 0 10px"}}>RECENT</div>
            <div style={{display:"flex", flexDirection:"column", gap:3}}>
              {[
                ["현재 대화", "지금", true],
                ["5요소 프롬프트가 뭐예요", "예시"],
                ["Claude Code 설치 방법", "예시"],
                ["GDD 한 장 작성하기", "예시"],
                ["스프라이트 시트 만들기", "예시"],
                ["탑다운 카메라 설정법", "예시"],
              ].map(([t,d,active],i)=>(
                <div key={i} style={{
                  padding:"9px 11px",
                  background: active ? T.bg3 : "transparent",
                  borderLeft: active ? `2px solid ${T.cyan}` : "2px solid transparent",
                  cursor: active ? "default" : "not-allowed",
                  opacity: active ? 1 : 0.45,
                }}>
                  <div style={{fontSize:12, color: active ? "#fff" : T.inkSoft,
                    fontWeight: active ? 600 : 400,
                    overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{t}</div>
                  <div style={{fontFamily: mono, fontSize:9, color: T.inkMute,
                    letterSpacing:".1em", marginTop:2}}>{d}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{paddingTop:14, borderTop:`1px solid ${T.rule}`, flexShrink:0}}>
            <div style={{display:"flex", alignItems:"center", gap:10, padding:"6px 4px"}}>
              <div style={{width:30, height:30, background:T.bg3, color: T.cyan,
                display:"flex", alignItems:"center", justifyContent:"center",
                fontFamily: serif, fontWeight:700, fontSize:12, flexShrink:0}}>독</div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:12, fontWeight:600}}>독자님</div>
                <div style={{fontFamily: mono, fontSize:9, color:T.cyan,
                  letterSpacing:".1em"}}>책 독자</div>
              </div>
            </div>
          </div>
        </aside>

        {/* ── CONVERSATION ── */}
        <main style={{display:"flex", flexDirection:"column", background: T.bg, overflow:"hidden"}}>
          {/* topbar */}
          <div style={{
            padding:"14px 28px", borderBottom:`1px solid ${T.rule}`,
            display:"flex", justifyContent:"space-between", alignItems:"center", flexShrink:0,
          }}>
            <div>
              <div style={{fontSize:14, fontWeight:700}}>경관에게 물어보기</div>
              <div style={{fontFamily: mono, fontSize:10, color: T.inkMute,
                letterSpacing:".15em", marginTop:3}}>{queryCount} MESSAGES · BOOK SCOPE</div>
            </div>
            <div style={{display:"flex", gap:8}}>
              <span style={{
                fontFamily: mono, fontSize:10, color: T.cyan, letterSpacing:".2em",
                border:`1px solid ${T.cyan}`, padding:"4px 9px",
              }}>BOOK SCOPE</span>
              <span style={{
                fontFamily: mono, fontSize:10, color: T.amber, letterSpacing:".2em",
                border:`1px solid ${T.amber}`, padding:"4px 9px",
              }}>AI 게임 개발 시작</span>
            </div>
          </div>

          {/* messages area — scrollable */}
          <div style={{flex:1, overflowY:"auto", padding:"28px 28px 12px",
            display:"flex", flexDirection:"column", gap:0}}>

            {msgs.map((m, i) => m.role === "user" ? (
              <div key={i} style={{alignSelf:"flex-end", maxWidth:520, marginBottom:20, marginLeft:"auto"}}>
                <div style={{display:"flex", justifyContent:"flex-end", gap:8, alignItems:"flex-end"}}>
                  <div style={{
                    background: T.bg3, color: T.ink, padding:"12px 16px",
                    fontSize:14, lineHeight:1.65, border:`1px solid ${T.rule2}`,
                    whiteSpace:"pre-wrap", wordBreak:"break-word",
                  }}>{m.text}</div>
                  <div style={{width:30, height:30, background:T.bg3, color: T.cyan,
                    display:"flex", alignItems:"center", justifyContent:"center",
                    fontFamily: serif, fontWeight:700, fontSize:12, flexShrink:0}}>독</div>
                </div>
              </div>
            ) : (
              <div key={i} style={{display:"flex", gap:12, alignItems:"flex-start", maxWidth:700, marginBottom:20}}>
                <div style={{width:34, height:34, flexShrink:0, background:T.bg2,
                  border:`1px solid ${T.cyan}`, overflow:"hidden"}}>
                  <img src="/assets/figures/officer-hero.png" alt=""
                    style={{width:"100%", height:"100%", objectFit:"cover",
                      objectPosition:"center top", imageRendering:"pixelated"}}/>
                </div>
                <div style={{flex:1}}>
                  <div style={{display:"flex", alignItems:"baseline", gap:10, marginBottom:6}}>
                    <span style={{fontSize:13, fontWeight:700, color: T.cyan}}>경관 — The Officer</span>
                    <span style={{fontFamily: mono, fontSize:9.5, color: T.inkMute,
                      letterSpacing:".15em"}}>BOOK ASSISTANT</span>
                  </div>
                  <div style={{
                    background: T.bg2, border:`1px solid ${T.cyan}`,
                    padding:"16px 18px", lineHeight:1.75, fontSize:14,
                    whiteSpace:"pre-wrap", wordBreak:"break-word",
                  }}>{m.text}</div>

                  {/* suggestion chips only after welcome */}
                  {i === 0 && (
                    <div style={{display:"flex", flexWrap:"wrap", gap:6, marginTop:12}}>
                      <span style={{fontFamily: mono, fontSize:9.5, color:T.inkMute,
                        letterSpacing:".2em", alignSelf:"center", marginRight:4}}>예시 질문 →</span>
                      {SUGGESTIONS.map(s => (
                        <span key={s} onClick={() => send(s)} style={{
                          padding:"6px 12px", border:`1px solid ${T.rule2}`,
                          color: T.inkSoft, fontSize:12, cursor:"pointer",
                          transition:"border-color 0.15s",
                        }}>{s}</span>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}

            {/* typing indicator */}
            {loading && (
              <div style={{display:"flex", gap:12, alignItems:"flex-start", marginBottom:20}}>
                <div style={{width:34, height:34, flexShrink:0, background:T.bg2,
                  border:`1px solid ${T.cyan}`, overflow:"hidden"}}>
                  <img src="/assets/figures/officer-hero.png" alt=""
                    style={{width:"100%", height:"100%", objectFit:"cover",
                      objectPosition:"center top", imageRendering:"pixelated"}}/>
                </div>
                <div style={{padding:"14px 18px", background: T.bg2, border:`1px solid ${T.cyan}`,
                  display:"flex", gap:6, alignItems:"center"}}>
                  <span style={{width:6, height:6, borderRadius:"50%", background: T.cyan, opacity:0.9}}/>
                  <span style={{width:6, height:6, borderRadius:"50%", background: T.cyan, opacity:0.6}}/>
                  <span style={{width:6, height:6, borderRadius:"50%", background: T.cyan, opacity:0.3}}/>
                  <span style={{fontFamily: mono, fontSize:10, color: T.inkMute,
                    letterSpacing:".2em", marginLeft:6}}>생각하는 중…</span>
                </div>
              </div>
            )}

            <div ref={bottomRef}/>
          </div>

          {/* input box */}
          <div style={{padding:"14px 28px 20px", borderTop:`1px solid ${T.rule}`,
            background:"#06101a", flexShrink:0}}>
            <div style={{
              background: T.bg2, border:`1px solid ${canSend ? T.cyan : T.rule2}`,
              padding:"10px 10px 10px 16px",
              display:"flex", alignItems:"flex-end", gap:12,
              transition:"border-color 0.2s",
            }}>
              <textarea
                ref={taRef}
                value={input}
                onChange={e => setInput(e.target.value)}
                onKeyDown={onKey}
                placeholder="질문을 입력하세요… (Enter 전송 · Shift+Enter 줄바꿈)"
                rows={2}
                style={{
                  flex:1, background:"transparent", border:"none", outline:"none",
                  fontFamily: sans, fontSize:14, color: T.ink, resize:"none",
                  lineHeight:1.55, padding:0, placeholder:{color:T.inkMute},
                }}
              />
              <div style={{display:"flex", flexDirection:"column", alignItems:"flex-end", gap:6, flexShrink:0}}>
                <span style={{fontFamily: mono, fontSize:9.5, color: T.inkMute,
                  letterSpacing:".1em"}}>{input.length} / 500</span>
                <button
                  onClick={() => send()}
                  disabled={!canSend}
                  style={{
                    background: canSend ? T.cyan : T.rule2,
                    color: canSend ? T.bg : T.inkMute,
                    border:"none", padding:"9px 18px",
                    fontFamily: sans, fontWeight:900, fontSize:13,
                    letterSpacing:"-0.01em",
                    cursor: canSend ? "pointer" : "not-allowed",
                    transition:"background 0.2s, color 0.2s",
                  }}
                >{loading ? '전송 중…' : '전송 ▸'}</button>
              </div>
            </div>
            <div style={{
              marginTop:9, display:"flex", justifyContent:"space-between",
              fontFamily: mono, fontSize:10, color: T.inkMute, letterSpacing:".12em",
            }}>
              <span>책 내용 기반 답변 · 출처 포함 · AI가 실수할 수 있습니다</span>
              <span>{queryCount}번 질문</span>
            </div>
          </div>
        </main>

        {/* ── INFO PANEL ── */}
        <aside style={{
          background:"#06101a", borderLeft:`1px solid ${T.rule}`,
          padding:"20px 18px", display:"flex", flexDirection:"column", gap:12, overflowY:"auto",
        }}>
          <div style={{fontFamily: mono, fontSize:10, color: T.cyan,
            letterSpacing:".25em"}}>BOOK GUIDE · 책 구성</div>

          {[
            { part:"Part 1", title:"워밍업 — 왕초보편", chapters:"1~4장", note:"AI 이미지·영상·시놉시스·세계관 설정" },
            { part:"Part 2", title:"게임기획서 작성편", chapters:"5~8장", note:"캐릭터·시나리오·GDD·피칭 PPT" },
            { part:"Part 3", title:"프로토타이핑", chapters:"9~12장", note:"컨셉아트·스프라이트·플레이가능 프로토·Unity 환경" },
            { part:"Part 4", title:"바이브코딩 세팅", chapters:"13~17장", note:"스프라이트·타일맵·Codex·Claude Code" },
            { part:"Part 5", title:"바이브코딩 실전", chapters:"18~20장", note:"플랫포머·감각 입히기·장르 전환" },
          ].map((p,i)=>(
            <div key={i} style={{
              background: T.bg2, border:`1px solid ${T.rule}`,
              padding:"11px 13px",
            }}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                <span style={{fontFamily: mono, fontSize:9.5, color: T.cyan,
                  letterSpacing:".15em"}}>{p.part}</span>
                <span style={{fontFamily: mono, fontSize:9.5, color: T.amber,
                  letterSpacing:".12em"}}>{p.chapters}</span>
              </div>
              <div style={{fontSize:13, fontWeight:600, marginTop:5, color:"#fff"}}>{p.title}</div>
              <div style={{fontSize:11.5, color: T.inkMute, lineHeight:1.5, marginTop:3}}>{p.note}</div>
              <a href="/lecture" style={{
                display:"block", marginTop:10,
                fontFamily: sans, fontSize:11, fontWeight:900,
                color: T.bg, textAlign:"center",
                background: `linear-gradient(135deg, ${T.cyanDeep} 0%, ${T.cyan} 60%, ${T.amber} 100%)`,
                padding:"9px 0", letterSpacing:".05em",
                textDecoration:"none",
                boxShadow:`0 4px 18px ${T.cyanGlow}, 0 0 0 1px rgba(125,207,240,0.3)`,
                position:"relative", overflow:"hidden",
              }}>
                <span style={{position:"relative", zIndex:1}}>✦ AI게임 특강 요청하기 ▸</span>
              </a>
            </div>
          ))}

          <div style={{marginTop:"auto", paddingTop:12, borderTop:`1px solid ${T.rule}`}}>
            <div style={{fontFamily: mono, fontSize:10, color: T.inkMute,
              letterSpacing:".2em", marginBottom:8}}>이 대화</div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, fontSize:12}}>
              <div>
                <span style={{color: T.inkMute, fontSize:10, display:"block"}}>QUERIES</span>
                <b style={{color:"#fff", fontSize:18}}>{queryCount}</b>
              </div>
              <div>
                <span style={{color: T.inkMute, fontSize:10, display:"block"}}>MODEL</span>
                <b style={{color:"#fff", fontSize:11}}>Haiku</b>
              </div>
            </div>
            <div style={{marginTop:10, fontFamily:mono, fontSize:9.5, color:T.inkMute,
              letterSpacing:".1em", lineHeight:1.6}}>
              AI 답변은 책 내용에 기반하나 항상 원서를 최종 확인하세요.
            </div>
          </div>
        </aside>
      </div>

      <Footer/>
    </div>
  );
};

// ─────────────────────────────────────────────
// PAGE 3 — BOOK INDEX
// ─────────────────────────────────────────────
window.SiteBook = function SiteBook() {
  return (
    <div style={{background: T.bg, color: T.ink, fontFamily: sans, position:"relative"}}>
      <NavBar active="book" scrolled={true}/>

      {/* ── BOOK HERO ─────────────────────── */}
      <section style={{
        padding:"60px 56px", background: T.bg2, borderBottom:`1px solid ${T.rule}`,
      }}>
        <div style={{maxWidth:1500, margin:"0 auto",
          display:"grid", gridTemplateColumns:"380px 1fr", gap:64, alignItems:"flex-start"}}>
          {/* cover thumbnail — actual final cover */}
          <div style={{
            width:380, position:"relative",
            boxShadow:`0 30px 80px rgba(0,0,0,0.55), 10px 10px 0 ${T.cyan}`,
            border:`1px solid ${T.rule2}`,
          }}>
            <img src="/assets/figures/cover-final.png" alt="AI 게임 개발 시작 책표지"
              style={{width:"100%", height:"auto", display:"block",
                imageRendering:"pixelated"}}/>
            <div style={{display:"none"}}>
            {/* top */}
            <div style={{position:"absolute", top:32, left:32, right:32, textAlign:"center"}}>
              <div style={{fontFamily: mono, fontSize:11, color:"#fff",
                letterSpacing:".3em"}}>AI GAME DEVELOPMENT</div>
              <div style={{fontSize:11, color: T.cyan, marginTop:4,
                fontStyle:"italic"}}>Anyone Can Make a Game</div>
            </div>
            {/* bottom title */}
            <div style={{position:"absolute", left:32, right:32, bottom:54}}>
              <h2 style={{margin:0, fontFamily: serif, fontWeight:900, fontSize:38,
                lineHeight:1.0, letterSpacing:"-0.04em", color: T.cyan,
                textShadow:"0 4px 14px rgba(0,0,0,0.7)"}}>
                AI 게임 개발<br/>시작
              </h2>
              <div style={{
                marginTop:14, fontFamily: sans, fontWeight:700, fontSize:14,
                color:"#fff", letterSpacing:"-0.01em",
                textShadow:"0 2px 8px rgba(0,0,0,0.7)",
              }}>: 누구나 게임을 만든다</div>
              <div style={{
                marginTop:18, fontFamily: serif, fontWeight:700, fontSize:14, color:"#fff",
              }}>김정태 <span style={{color: T.inkMute, fontSize:11, fontWeight:400}}>지음</span></div>
            </div>
            {/* publisher */}
            <div style={{position:"absolute", bottom:20, left:0, right:0, textAlign:"center"}}>
              <span style={{
                fontFamily: serif, fontWeight:700, fontSize:11, color: T.cyan,
                letterSpacing:".15em",
              }}>도서출판 홍릉 · 50th</span>
            </div>
            </div>
          </div>

          {/* book meta */}
          <div>
            <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
              letterSpacing:".3em", marginBottom:12}}>VOL.03 · BEGINNER</div>
            <h1 style={{
              fontFamily: display, fontWeight:400, fontSize:58, lineHeight:1.05,
              letterSpacing:"-0.01em", margin:"0 0 8px", color: T.amber,
              textShadow:`0 0 40px ${T.amberGlow}`,
            }}>
              AI 게임 개발 시작
            </h1>
            <div style={{fontFamily: display, fontWeight:400, fontSize:24,
              color: T.cyan, marginBottom:24, letterSpacing:"-0.01em"}}>
              — 누구나 게임을 만든다
            </div>
            <p style={{fontSize:15.5, lineHeight:1.85, color: T.inkSoft,
              maxWidth:680, margin:"0 0 32px"}}>
              코딩을 몰라도, 그림을 못 그려도, 어디서부터 시작해야 할지 몰라도 — AI가 옆에 있으면
              달라집니다. 30년 게임 현장에서 200편을 만든 저자가 정리한,
              <b style={{color: T.cyan}}> 5 Part · 20장의 가장 친절한 입문서</b>.
            </p>

            <div style={{display:"grid", gridTemplateColumns:"repeat(4,auto) 1fr", gap:0,
              borderTop:`1px solid ${T.rule}`, borderBottom:`1px solid ${T.rule}`,
              padding:"18px 0", marginBottom:32,
            }}>
              {[
                ["출간","2026.06.15"],
                ["분량","341쪽 · B5"],
                ["가격","22,000원"],
                ["ISBN","979-11-7570-059-8"],
                ["출판사","도서출판 홍릉 · 모두의 AI 시리즈 03"],
              ].map(([k,v])=>(
                <div key={k} style={{paddingRight:24, marginRight:24,
                  borderRight: `1px solid ${T.rule}`}}>
                  <div style={{fontFamily: mono, fontSize:10, color: T.inkMute,
                    letterSpacing:".2em", marginBottom:6}}>{k.toUpperCase()}</div>
                  <div style={{fontSize:13, fontWeight:600, color:"#fff"}}>{v}</div>
                </div>
              ))}
            </div>

            <div style={{display:"flex", gap:10, flexWrap:"wrap"}}>
              <button style={{
                background: T.cyan, color: T.bg, border:"none", padding:"14px 28px",
                fontFamily: sans, fontWeight:900, fontSize:14, cursor:"pointer",
              }}>교보문고에서 구매 ▸</button>
              {["예스24","알라딘","리디북스"].map(s=>(
                <button key={s} style={{
                  background:"transparent", color: T.cyan, border:`1px solid ${T.cyan}`,
                  padding:"14px 24px", fontFamily: sans, fontWeight:700, fontSize:13, cursor:"pointer",
                }}>{s}</button>
              ))}
              <button style={{
                background:"transparent", color: T.inkSoft, border:`1px solid ${T.rule2}`,
                padding:"14px 24px", fontFamily: sans, fontWeight:500, fontSize:13, cursor:"pointer",
              }}>샘플 PDF 다운로드 ↓</button>
            </div>
          </div>
        </div>
      </section>

      {/* ── 5 PART INDEX ─────────────────── */}
      <section style={{padding:"60px 56px"}}>
        <div style={{maxWidth:1500, margin:"0 auto"}}>
          <div style={{
            display:"flex", justifyContent:"space-between", alignItems:"flex-end",
            marginBottom:36, paddingBottom:18, borderBottom:`1px solid ${T.rule}`,
          }}>
            <div>
              <div style={{fontFamily: mono, fontSize:11, color: T.cyan,
                letterSpacing:".3em", marginBottom:10}}>TABLE OF CONTENTS</div>
              <h2 style={{fontFamily: serif, fontWeight:500, fontSize:38,
                letterSpacing:"-0.01em", margin:0, color: T.amber}}>
                목차 · 5 Part · 20장
              </h2>
            </div>
            <div style={{fontSize:12, color: T.inkMute, fontFamily: mono,
              letterSpacing:".15em"}}>각 챕터 카드에서 바로 "물어보기" 진입 가능 →</div>
          </div>

          {PARTS.map((P, idx) => (
            <div key={P.p} style={{marginBottom: idx === PARTS.length-1 ? 0 : 56}}>
              {/* Part header */}
              <div style={{
                display:"grid", gridTemplateColumns:"110px 1fr",
                gap:20, marginBottom:18, alignItems:"flex-end",
                paddingBottom:14, borderBottom:`2px solid ${P.accent}`,
              }}>
                <div>
                  <div style={{
                    background: P.accent, color: T.bg, fontFamily: mono, fontSize:10,
                    fontWeight:700, letterSpacing:".2em", padding:"4px 9px",
                    display:"inline-block",
                  }}>PART {P.p}</div>
                </div>
                <div>
                  <h3 style={{
                    fontFamily: serif, fontWeight:900, fontSize:26,
                    letterSpacing:"-0.02em", margin:"0 0 4px",
                  }}>{P.title}</h3>
                  <div style={{fontSize:13, color: T.inkMute}}>{P.sub}</div>
                </div>
              </div>

              {/* Chapter cards */}
              <div style={{
                display:"grid",
                gridTemplateColumns:`repeat(${P.chs.length},1fr)`,
                gap:12,
              }}>
                {P.chs.map(c=>(
                  <div key={c[0]} style={{
                    background: T.bg2, border:`1px solid ${T.rule}`,
                    padding:"20px 18px", display:"flex", flexDirection:"column",
                    minHeight:180, cursor:"pointer", position:"relative",
                  }}>
                    {/* ch number */}
                    <div style={{
                      display:"flex", justifyContent:"space-between", alignItems:"baseline",
                      marginBottom:12,
                    }}>
                      <span style={{fontFamily: mono, fontSize:11, color: P.accent,
                        letterSpacing:".25em", fontWeight:600}}>CH.{c[0]}</span>
                      <span style={{fontFamily: mono, fontSize:10, color: T.inkMute,
                        letterSpacing:".15em"}}>p.{String(c[2]).padStart(3,'0')}</span>
                    </div>
                    <div style={{
                      fontFamily: serif, fontWeight:700, fontSize:15,
                      lineHeight:1.4, color:"#fff", marginBottom:10,
                      letterSpacing:"-0.015em",
                    }}>{c[1]}</div>
                    <div style={{
                      fontSize:12, color: T.inkMute, lineHeight:1.65, marginBottom:14,
                      flex:1,
                    }}>{c[3]}</div>
                    <div style={{
                      display:"flex", justifyContent:"space-between", alignItems:"center",
                      paddingTop:10, borderTop:`1px solid ${T.rule}`,
                    }}>
                      <a href={parseInt(c[0]) >= 9 ? "/lecture" : `/qna?q=CH.${c[0]} ${c[1]}에 대해 설명해줘`} style={{
                        fontFamily: mono, fontSize:10, color: P.accent,
                        letterSpacing:".15em", textDecoration:"none",
                        cursor:"pointer",
                      }}>{parseInt(c[0]) >= 9 ? "강연 신청하기 ▸" : "이 장에 대해 물어보기 ▸"}</a>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <Footer/>
      <ChatFAB/>
    </div>
  );
};