// ============================================================
// LandingPage.jsx — 부바 랜딩 페이지 (Home C · 스크롤 내러티브)
// ============================================================
// 기존 app.jsx 계약 유지:
//   props: { onNavigate, user, token, onLogout }
//   onNavigate keys: 'landing' | 'login' | 'register' | 'templates' | 'mypage'
// ------------------------------------------------------------
// 외부 의존: Nav, BubaLogo, Ico, BookSpecs, SiteFooter (common.jsx)
//           window.BUBA_STORIES, window.BUBA_TAGS (data/stories.js)
// ============================================================

window.LandingPage = function LandingPage({ onNavigate, user, token, onLogout }) {
  const { useState, useEffect, useRef } = React;
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [uploadedPhoto, setUploadedPhoto] = useState(null);
  const [convertedPhoto, setConvertedPhoto] = useState(null);
  const [converting, setConverting] = useState(false);
  const [storyTemplates, setStoryTemplates] = useState([]);
  const [landingImages, setLandingImages] = useState({});
  const fileInputRef = useRef(null);

  useEffect(() => {
    fetch('/api/templates')
      .then(r => r.json())
      .then(data => setStoryTemplates(Array.isArray(data) ? data : (data.templates || [])))
      .catch(() => {});
    fetch('/api/admin/landing-images-public')
      .then(r => r.json())
      .then(setLandingImages)
      .catch(() => {});
  }, []);

  // 체험 업로드 → 무료 변환 API
  const handlePhotoUpload = (file) => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => setUploadedPhoto(e.target.result);
    reader.readAsDataURL(file);
  };
  const handleConvertFace = async () => {
    if (!uploadedPhoto) return;
    setConverting(true);
    try {
      const res = await fetch('/api/trial/face-convert', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ imageData: uploadedPhoto }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || '변환 실패');
      setConvertedPhoto('data:image/jpeg;base64,' + data.image);
    } catch (err) {
      alert('사진 변환에 실패했습니다: ' + err.message);
    } finally {
      setConverting(false);
    }
  };

  // ---------- 네비: 실제 auth 상태와 연결 ----------
  const TopNav = () => (
    <nav aria-label="주요 메뉴" style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'18px 32px', position:'sticky', top:0, zIndex:100,
      background:'rgba(255,255,255,0.85)', backdropFilter:'blur(14px)',
      borderBottom:'1px solid rgba(209,196,233,0.4)',
    }}>
      <div style={{cursor:'pointer'}} onClick={() => onNavigate('landing')}>
        <BubaLogo/>
      </div>
      {/* Desktop */}
      <div className="hide-mobile" style={{display:'flex', gap:12, alignItems:'center'}}>
        {token && user ? (
          <>
            <span style={{fontSize:14, color:'#37274A', fontWeight:600, marginRight:4}}>{user.name || user.email}님</span>
            <button onClick={() => onNavigate('mypage')}
              style={{background:'transparent', border:'1.5px solid #B39DDB', color:'#7E57C2', padding:'9px 20px', borderRadius:22, cursor:'pointer', fontWeight:600, fontSize:14}}>
              마이페이지
            </button>
            <button onClick={() => onNavigate('upload')} className="btn btn-primary" style={{padding:'9px 20px', fontSize:14}}>
              <Ico.Wand size={14}/> 동화 만들기
            </button>
            <button onClick={onLogout}
              style={{background:'transparent', border:'1.5px solid #D1C4E9', color:'#9575CD', padding:'9px 20px', borderRadius:22, cursor:'pointer', fontWeight:600, fontSize:14}}>
              로그아웃
            </button>
          </>
        ) : (
          <>
            <button onClick={() => onNavigate('login')}
              style={{background:'transparent', border:'1.5px solid #B39DDB', color:'#7E57C2', padding:'9px 20px', borderRadius:22, cursor:'pointer', fontWeight:600, fontSize:14}}>
              로그인
            </button>
            <button onClick={() => onNavigate('register')} className="btn btn-primary" style={{padding:'9px 20px', fontSize:14}}>
              <Ico.Wand size={14}/> 무료 시작하기
            </button>
          </>
        )}
      </div>
      {/* Mobile */}
      <button className="show-mobile-only" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        style={{display:'none', background:'none', border:'none', cursor:'pointer', padding:8, fontSize:24, color:'#311B57'}}>
        {mobileMenuOpen ? '✕' : '☰'}
      </button>
    </nav>
  );

  return (
    <div style={{minHeight:'100vh', background:'#FBF8FF', color:'#37274A', overflow:'hidden'}}>
      <TopNav/>

      {/* Mobile dropdown */}
      {mobileMenuOpen && (
        <div style={{position:'fixed', top:72, left:0, right:0, background:'rgba(255,255,255,0.97)', backdropFilter:'blur(10px)', padding:20, zIndex:99, borderBottom:'1px solid #D1C4E9', display:'flex', flexDirection:'column', gap:12}}>
          {token && user ? (<>
            <span style={{color:'#37274A', fontWeight:600, fontSize:14, padding:'8px 0'}}>{user.name || user.email}님</span>
            <button onClick={()=>{onNavigate('mypage'); setMobileMenuOpen(false);}} className="btn btn-secondary">마이페이지</button>
            <button onClick={()=>{onNavigate('upload'); setMobileMenuOpen(false);}} className="btn btn-primary">동화 만들기</button>
            <button onClick={()=>{onLogout(); setMobileMenuOpen(false);}} className="btn btn-secondary">로그아웃</button>
          </>) : (<>
            <button onClick={()=>{onNavigate('login'); setMobileMenuOpen(false);}} className="btn btn-secondary">로그인</button>
            <button onClick={()=>{onNavigate('register'); setMobileMenuOpen(false);}} className="btn btn-primary">무료 시작하기</button>
          </>)}
        </div>
      )}

      {/* ========== HERO: 풀블리드 + 중앙 카피 ========== */}
      <section style={{position:'relative', height:'min(720px, 85vh)', minHeight:560, overflow:'hidden'}}>
        <img src="assets/stories/buba/p10.png" alt="" aria-hidden="true"
          style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}}/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(251,248,255,0.2) 0%, rgba(49,27,87,0.5) 60%, rgba(30,15,56,0.88) 100%)'}}/>
        <div style={{position:'absolute', inset:0, display:'flex', alignItems:'flex-end', justifyContent:'center', paddingBottom:'8vh'}}>
          <div style={{textAlign:'center', color:'#fff', maxWidth:820, padding:'0 32px'}}>
            <div style={{fontFamily:'var(--font-hand)', fontSize:20, color:'#FFD166', marginBottom:16, letterSpacing:2}}>
              ✦ 옛날 옛날에 ✦
            </div>
            <h1 style={{fontSize:'clamp(40px, 6vw, 72px)', lineHeight:1.1, marginBottom:20, textShadow:'0 4px 24px rgba(0,0,0,0.4)'}}>
              사진 한 장이,<br/>우리 아이의 동화가 돼요.
            </h1>
            <p style={{fontSize:17, opacity:0.92, marginBottom:32, lineHeight:1.7, maxWidth:640, margin:'0 auto 32px'}}>
              AI가 아이의 얼굴로 수채화 주인공을 그려내고,<br/>
              <b style={{color:'#FFD166'}}>전문 일러스트레이터가 모든 장면을 최종 검수</b>합니다.
            </p>
            <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
              <button onClick={() => onNavigate(token ? 'upload' : 'register')}
                className="btn btn-gold" style={{padding:'16px 32px', fontSize:16}}>
                <Ico.Wand size={18}/> 지금 시작하기
              </button>
              <button onClick={() => document.getElementById('story-showcase')?.scrollIntoView({behavior:'smooth', block:'start'})}
                className="btn" style={{background:'rgba(255,255,255,0.15)', color:'#fff', border:'1.5px solid rgba(255,255,255,0.3)', backdropFilter:'blur(12px)', padding:'16px 26px'}}>
                <Ico.Book size={18}/> 샘플 보기
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ========== CHAPTER 1: 사진 업로드 ========== */}
      <section style={{padding:'clamp(80px, 12vw, 120px) 32px', background:'#FBF8FF', position:'relative'}}>
        <div style={{maxWidth:1200, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}} className="responsive-grid">
          <div>
            <div style={{fontFamily:'var(--font-hand)', fontSize:18, color:'#9575CD', marginBottom:8}}>— Chapter 1 —</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:88, color:'#EDE7F6', lineHeight:0.9, marginBottom:-30, userSelect:'none'}}>01</div>
            <h2 style={{fontSize:'clamp(32px, 4vw, 42px)', color:'#311B57', marginBottom:20, position:'relative'}}>
              사진 한 장, 그걸로<br/>충분해요.
            </h2>
            <p style={{fontSize:17, color:'#7B6B8A', lineHeight:1.8, marginBottom:28}}>
              아이의 정면 얼굴 사진 한 장이면 돼요. 정돈된 스튜디오 사진이 아니어도,
              일상에서 찍은 환한 웃음 사진이면 충분합니다.
              AI는 얼굴의 특징만 부드럽게 학습해, 수채화 속 주인공으로 그려냅니다.
            </p>
            <div style={{display:'flex', gap:16, padding:'16px 20px', background:'#F3E5F5', borderRadius:12, fontSize:14, color:'#37274A', alignItems:'flex-start'}}>
              <Ico.Sparkle size={20}/>
              <div>업로드한 원본 사진은 48시간 후 자동 삭제됩니다. 개인정보는 안전하게 보호돼요.</div>
            </div>

            {/* 무료 체험 영역 */}
            <div style={{marginTop:24, padding:'24px', background:'#fff', borderRadius:16, border:'1px dashed #D1C4E9'}}>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:16}}>
                <span style={{fontSize:12, fontWeight:700, padding:'4px 12px', borderRadius:9999, background:'#FFD166', color:'#3C1E1E'}}>FREE TRIAL</span>
                <div style={{fontSize:14, color:'#7B6B8A'}}>지금 바로 변환을 체험해보세요</div>
              </div>
              <div style={{display:'grid', gridTemplateColumns: uploadedPhoto ? '1fr 1fr' : '1fr', gap:16, alignItems:'stretch'}}>
                <div onClick={() => fileInputRef.current?.click()}
                  onDragOver={(e)=>{e.preventDefault();}}
                  onDrop={(e)=>{e.preventDefault(); const f=e.dataTransfer.files[0]; if(f) handlePhotoUpload(f);}}
                  style={{border:'2px dashed #B39DDB', borderRadius:12, padding:24, textAlign:'center', cursor:'pointer', background:'#FBF8FF', minHeight:160, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
                  {uploadedPhoto ? (
                    <img src={uploadedPhoto} alt="업로드한 사진" style={{maxWidth:'100%', maxHeight:160, borderRadius:8}}/>
                  ) : (
                    <>
                      <Ico.Camera size={32}/>
                      <p style={{fontSize:14, fontWeight:600, color:'#37274A', marginTop:8}}>사진 선택 또는 드래그</p>
                    </>
                  )}
                  <input ref={fileInputRef} type="file" accept="image/*" style={{display:'none'}}
                    onChange={(e) => handlePhotoUpload(e.target.files?.[0])}/>
                </div>
                {uploadedPhoto && (
                  <div style={{display:'flex', flexDirection:'column', gap:12, justifyContent:'center'}}>
                    {convertedPhoto ? (
                      <>
                        <img src={convertedPhoto} alt="변환된 수채화 일러스트" style={{width:'100%', borderRadius:8}}/>
                        <button onClick={() => onNavigate(token ? 'upload' : 'register')} className="btn btn-primary" style={{fontSize:14}}>
                          {token ? '동화 만들기' : '가입하고 동화 만들기'}
                        </button>
                      </>
                    ) : (
                      <button onClick={handleConvertFace} disabled={converting} className="btn btn-primary" style={{fontSize:14, opacity:converting?0.6:1}}>
                        {converting ? '변환 중...' : 'AI로 변환하기'}
                      </button>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* 업로드 시각화 */}
          <div style={{position:'relative', minHeight:520}} className="hide-mobile" aria-hidden="true">
            <div style={{position:'absolute', top:40, left:0, width:280, height:360, borderRadius:16, background:'#fff', padding:16, boxShadow:'0 16px 40px rgba(55,39,74,0.15)', transform:'rotate(-4deg)'}}>
              <div style={{width:'100%', height:'90%', borderRadius:10, background:'repeating-linear-gradient(45deg, #EDE7F6, #EDE7F6 8px, #F3E5F5 8px, #F3E5F5 16px)', display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', gap:12, color:'#9575CD'}}>
                <Ico.Camera size={48}/>
                <div style={{fontFamily:'monospace', fontSize:11}}>[아이의 얼굴 사진]</div>
              </div>
              <div style={{padding:'8px 4px', fontSize:12, color:'#7B6B8A', fontFamily:'var(--font-hand)'}}>📸 지우 · 6살</div>
            </div>
            <div style={{position:'absolute', top:240, left:300, fontSize:48, color:'#B39DDB'}} className="float-soft">→</div>
            <div style={{position:'absolute', top:60, right:0, width:360, height:180, borderRadius:10, overflow:'hidden', boxShadow:'0 16px 40px rgba(55,39,74,0.2)', transform:'rotate(4deg)', position:'relative'}}>
              <img src="assets/stories/buba/p8.png" alt="수채화 스타일의 동화 일러스트 샘플" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
              <div aria-hidden="true" style={{position:'absolute', top:0, bottom:0, left:'50%', width:2, background:'rgba(0,0,0,0.12)', transform:'translateX(-1px)'}}/>
            </div>
            <div style={{position:'absolute', top:10, right:20}} className="twinkle"><Ico.Sparkle size={28}/></div>
            <div style={{position:'absolute', bottom:40, left:60}} className="twinkle"><Ico.Sparkle size={20} color="#F48FB1"/></div>
          </div>
        </div>
      </section>

      {/* ========== CHAPTER 2: 스토리 선택 ========== */}
      <section id="story-showcase" style={{padding:'clamp(80px, 12vw, 120px) 32px', background:'#F3E5F5', position:'relative', overflow:'hidden'}}>
        <div style={{maxWidth:1240, margin:'0 auto', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:56, alignItems:'center'}} className="responsive-grid">
          {/* 스토리 카드 스택 — 단순 2열 그리드, 표지 2:1 비율 온전히 유지 */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20, position:'relative'}} className="hide-mobile" aria-hidden="true">
            {/* 부키 표지 3장 + 바바 카드 3장 — 총 6칸, 관리자 이미지 우선 */}
            {window.BUBA_STORIES.boy.slice(0,3).map((s, idx)=>{
              const adminImg = landingImages[`story_boy${idx+1}`];
              return (
                <div key={s.id} style={{borderRadius:14, overflow:'hidden', boxShadow:'0 12px 28px rgba(55,39,74,0.15)', background:'#fff'}}>
                  {(adminImg || s.cover)
                    ? <img src={adminImg || s.cover} alt="" style={{width:'100%', aspectRatio:'2/1', objectFit:'cover', display:'block'}}/>
                    : <div style={{width:'100%', aspectRatio:'2/1', background:`linear-gradient(145deg, ${s.color}, ${s.color}cc)`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:44, color:'#fff'}}>{s.emoji}</div>}
                  <div style={{padding:'12px 14px'}}>
                    <div className="pill" style={{fontSize:10, padding:'3px 8px', marginBottom:6, display:'inline-block'}}>{s.tag}</div>
                    <div style={{fontFamily:'var(--font-display)', fontSize:14, color:'#311B57', lineHeight:1.3}}>{s.title}</div>
                  </div>
                </div>
              );
            })}
            {window.BUBA_STORIES.girl.slice(0,3).map((s, idx)=>{
              const adminImg = landingImages[`story_girl${idx+1}`];
              return (
                <div key={s.id} style={{borderRadius:14, overflow:'hidden', boxShadow:'0 12px 28px rgba(55,39,74,0.15)', background: adminImg ? '#fff' : `linear-gradient(145deg, ${s.color}, ${s.color}cc)`, color: adminImg ? '#311B57' : '#fff', minHeight:150}}>
                  {adminImg
                    ? <><img src={adminImg} alt="" style={{width:'100%', aspectRatio:'2/1', objectFit:'cover', display:'block'}}/><div style={{padding:'12px 14px'}}><div className="pill" style={{fontSize:10, padding:'3px 8px', marginBottom:6, display:'inline-block'}}>{s.tag}</div><div style={{fontFamily:'var(--font-display)', fontSize:14, lineHeight:1.3}}>{s.title}</div></div></>
                    : <div style={{padding:18, display:'flex', flexDirection:'column', justifyContent:'space-between', height:'100%'}}><div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}><div style={{fontSize:28}}>{s.emoji}</div><div className="pill" style={{fontSize:10, padding:'3px 8px', background:'rgba(255,255,255,0.25)', color:'#fff'}}>{s.tag}</div></div><div style={{fontFamily:'var(--font-display)', fontSize:16, lineHeight:1.3}}>{s.title}</div></div>}
                </div>
              );
            })}
          </div>
          <div>
            <div style={{fontFamily:'var(--font-hand)', fontSize:18, color:'#7E57C2', marginBottom:8}}>— Chapter 2 —</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:88, color:'rgba(179,157,219,0.3)', lineHeight:0.9, marginBottom:-30}}>02</div>
            <h2 style={{fontSize:'clamp(32px, 4vw, 42px)', color:'#311B57', marginBottom:20}}>
              우리 아이에게<br/>어울리는 이야기를 고르세요.
            </h2>
            <p style={{fontSize:17, color:'#7B6B8A', lineHeight:1.8, marginBottom:24}}>
              남자아이 주인공 <b style={{color:'#7E57C2'}}>부키 12편</b>,
              여자아이 주인공 <b style={{color:'#7E57C2'}}>바바 10편</b>.
              판타지, 모험, 전래동화, 우주 과학까지 —
              연령과 취향에 맞춰 고를 수 있어요.
            </p>
            <div style={{display:'flex', flexWrap:'wrap', gap:8, marginBottom:28}}>
              {(window.BUBA_TAGS || []).slice(1,7).map(t=>(
                <span key={t} className="pill" style={{background:'#fff', border:'1px solid #D1C4E9'}}>{t}</span>
              ))}
            </div>
            <button onClick={() => onNavigate('catalog')} className="btn btn-primary">
              <Ico.Book size={16}/> 22편 전체 둘러보기
            </button>
          </div>
        </div>
      </section>

      {/* ========== CHAPTER 3: 전문가 검수 ========== */}
      <section style={{padding:'clamp(80px, 12vw, 120px) 32px', background:'#311B57', color:'#fff', position:'relative', overflow:'hidden'}}>
        <div className="blob-2" style={{top:-150, right:-150, opacity:0.5}}/>
        <div className="blob-3" style={{bottom:-100, left:-100, opacity:0.4}}/>
        <div style={{maxWidth:1200, margin:'0 auto', position:'relative', display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}} className="responsive-grid">
          <div>
            <div style={{fontFamily:'var(--font-hand)', fontSize:18, color:'#FFD166', marginBottom:8}}>— Chapter 3 —</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:88, color:'rgba(255,255,255,0.1)', lineHeight:0.9, marginBottom:-30}}>03</div>
            <h2 style={{fontSize:'clamp(32px, 4vw, 42px)', marginBottom:20, lineHeight:1.2}}>
              AI가 아닌,<br/><span style={{color:'#FFD166'}}>사람의 손</span>으로 완성합니다.
            </h2>
            <p style={{fontSize:17, opacity:0.85, lineHeight:1.8, marginBottom:28}}>
              AI가 만든 초안을 전문 일러스트레이터가 한 장 한 장 검수하고 다듬습니다.
              어색한 표정, 구도, 색감 불일치 — 모두 사람이 봅니다.
              그래서 <b style={{color:'#FFD166'}}>부바 동화책은 3–5일이 걸립니다.</b>
            </p>
            <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:16}}>
              {[
                {n:'03', t:'장인의 수정', d:'표정·구도·색감 수작업 보정'},
                {n:'04', t:'이중 승인', d:'내부 검수 → 부모님 최종 확인'},
              ].map((s,i)=>(
                <div key={i} style={{padding:20, background:'rgba(255,255,255,0.08)', borderRadius:14, border:'1px solid rgba(255,255,255,0.1)'}}>
                  <div style={{fontFamily:'var(--font-display)', fontSize:22, color:'#FFD166', marginBottom:6}}>Step {s.n}</div>
                  <div style={{fontWeight:700, marginBottom:4}}>{s.t}</div>
                  <div style={{fontSize:13, opacity:0.7}}>{s.d}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{position:'relative', height:540}} className="hide-mobile" aria-hidden="true">
            <div style={{position:'absolute', top:0, left:0, right:40, background:'#fff', borderRadius:16, padding:24, color:'#37274A', boxShadow:'0 16px 48px rgba(0,0,0,0.3)'}}>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
                <div style={{width:32, height:32, borderRadius:'50%', background:'#B39DDB', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff'}}><Ico.Wand size={16}/></div>
                <div style={{fontSize:13, fontWeight:600}}>디자이너 수정 중</div>
                <div style={{marginLeft:'auto', fontSize:11, color:'#9575CD'}}>3/5 단계</div>
              </div>
              <div style={{height:6, background:'#EDE7F6', borderRadius:3, overflow:'hidden', marginBottom:16}}>
                <div style={{width:'60%', height:'100%', background:'linear-gradient(90deg, #B39DDB, #F48FB1)'}}/>
              </div>
              <div style={{display:'flex', gap:8, marginBottom:16}}>
                <div style={{flex:1, aspectRatio:'2/1', borderRadius:10, overflow:'hidden'}}><img src="assets/stories/buba/p5.png" alt="" style={{width:'100%', height:'100%', objectFit:'cover'}}/></div>
                <div style={{flex:1, aspectRatio:'2/1', borderRadius:10, overflow:'hidden'}}><img src="assets/stories/buba/p6.png" alt="" style={{width:'100%', height:'100%', objectFit:'cover'}}/></div>
                <div style={{flex:1, aspectRatio:'2/1', borderRadius:10, overflow:'hidden'}}><img src="assets/stories/buba/p7.png" alt="" style={{width:'100%', height:'100%', objectFit:'cover'}}/></div>
              </div>
              <div style={{fontSize:12, color:'#7B6B8A'}}>✓ 얼굴 일관성 확인 · ✓ 배경 색감 조정 · ⏳ 최종 검수 대기</div>
            </div>
            {/* 카톡 알림 목업 */}
            <div style={{position:'absolute', bottom:0, right:0, width:320, background:'#FEE500', borderRadius:16, padding:'16px 20px', boxShadow:'0 12px 32px rgba(0,0,0,0.25)', transform:'rotate(3deg)'}}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:8}}>
                <Ico.Chat size={18}/>
                <div style={{fontSize:13, fontWeight:700, color:'#3C1E1E'}}>카카오톡 알림</div>
              </div>
              <div style={{fontSize:14, color:'#3C1E1E', lineHeight:1.5}}>
                <b>[부바]</b> 지우의 동화책이 완성됐어요! 🎉<br/>
                <span style={{fontSize:12, opacity:0.8}}>지금 바로 읽어보세요 →</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== FINAL: 평생 소장 ========== */}
      <section style={{padding:'clamp(80px, 12vw, 120px) 32px', background:'#FBF8FF'}}>
        <div style={{maxWidth:1200, margin:'0 auto', textAlign:'center'}}>
          <div style={{fontFamily:'var(--font-hand)', fontSize:18, color:'#9575CD', marginBottom:8}}>— Final Chapter —</div>
          <h2 style={{fontSize:'clamp(32px, 4vw, 48px)', color:'#311B57', marginBottom:20, lineHeight:1.2}}>
            그리고, 아이는<br/>
            <span className="gold-underline">평생 간직할 이야기</span>를 얻습니다.
          </h2>
          <p style={{fontSize:17, color:'#7B6B8A', marginBottom:56, maxWidth:640, margin:'0 auto 56px', lineHeight:1.8}}>
            전자책은 마이페이지에서 언제든 다시 열람할 수 있고,
            카톡 링크로 할머니·할아버지에게도 쉽게 공유할 수 있어요.
          </p>
          {/* 뷰어 목업 */}
          <div style={{maxWidth:960, margin:'0 auto', background:'#1E0F38', borderRadius:20, padding:24, boxShadow:'0 24px 64px rgba(55,39,74,0.25)'}}>
            <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:16}}>
              {['#FF8A80','#FFD166','#81C784'].map((c,i)=>(
                <div key={i} style={{width:12, height:12, borderRadius:'50%', background:c}}/>
              ))}
              <div style={{marginLeft:12, fontSize:12, color:'rgba(255,255,255,0.5)'}}>buba.co.kr/reader/yr-dongwha</div>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr', gap:12, borderRadius:12, overflow:'hidden'}}>
              <div style={{position:'relative', aspectRatio:'2/1'}}>
                <img src="assets/stories/buba/p9.png" alt="동화책 뷰어 샘플 페이지" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                <div aria-hidden="true" style={{position:'absolute', top:0, bottom:0, left:'50%', width:2, background:'rgba(0,0,0,0.12)', transform:'translateX(-1px)'}}/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== CTA ========== */}
      <section style={{padding:'clamp(80px, 10vw, 100px) 32px', background:'linear-gradient(135deg, #B39DDB, #7E57C2)', color:'#fff', textAlign:'center', position:'relative', overflow:'hidden'}}>
        <div style={{position:'relative', maxWidth:680, margin:'0 auto'}}>
          <h2 style={{fontSize:'clamp(32px, 5vw, 52px)', marginBottom:18, lineHeight:1.2}}>
            오늘 이야기의 주인공,<br/>우리 아이입니다.
          </h2>
          <button onClick={() => onNavigate(token ? 'upload' : 'register')}
            className="btn btn-gold" style={{padding:'18px 36px', fontSize:17, marginTop:24}}>
            <Ico.Wand size={20}/> {token ? '지금 시작하기' : '무료로 시작하기'}
          </button>
        </div>
      </section>

      {/* 전자책 뷰어 스펙 + 법적 푸터 */}
      <BookSpecs variant="light"/>
      <SiteFooter variant="dark"/>
    </div>
  );
};