/* AppContent.jsx — unified "SRIKI app" section
   Landscape phone mock shows the actual SRIKI app user journey across
   six screens, cycling automatically:
     ① 홈화면     — student-mode dashboard
     ② 게임 단원  — track → unit selector
     ③ 게임 카드  — game grid inside a unit
     ④ 실제 게임  — embeds the real SRIKI app via <iframe src="…/preview">
     ⑤ 환전화면   — coin-to-cash exchange request
     ⑥ 상점화면   — avatar/room shop
   Each screen mimics the actual 844×390 SRIKI canvas aspect. */

/* PreviewIframe — 진짜 SRIKI 화면 6장(자동 캡처 PNG)을 페이드 캐러셀로 표시.
   라이브 iframe은 매 phase마다 다시 렌더하느라 깜빡임이 심해서 정적 캡처로 전환.
   캡처는 C:/tmp/cap-sriki-preview.cjs로 갱신 (sriki.pages.dev/preview를 6 phase 순회). */
const PHASE_IMAGES = {
  home:    'assets/preview/home.png',
  units:   'assets/preview/units.png',
  cards:   'assets/preview/cards.png',
  play:    'assets/preview/play.png',
  cashout: 'assets/preview/cashout.png',
  shop:    'assets/preview/shop.png',
};

const PreviewIframe = ({ phase }) => (
  <div style={{ position: 'absolute', inset: 0, background: '#06061a' }}>
    {Object.entries(PHASE_IMAGES).map(([p, src]) => (
      <img
        key={p}
        src={src}
        alt={`SRIKI ${p} screen`}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover',
          objectPosition: 'top',
          opacity: p === phase ? 1 : 0,
          transition: 'opacity 400ms cubic-bezier(0.2,0.6,0.25,1)',
        }}
      />
    ))}
  </div>
);

const APPC_ICONS = {
  /* AI tutor — sparkles. The contemporary visual shorthand for AI
     (Gemini, Copilot, Apple Intelligence all use a 4-point star). */
  ai:     <><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></>,
  /* Review — notebook + circular arrow / check */
  review: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M9 14l2 2 4-4"/></>,
  /* Coin → allowance — wallet/cash icon */
  wallet: <><path d="M3 7V5a2 2 0 0 1 2-2h13v4"/><path d="M3 7v12a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z"/><circle cx="17" cy="14" r="1.5"/></>,
  /* Shop & room — a doorway / room icon */
  room:   <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-5v-6h-4v6H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></>,
};

const AppContent = () => {
  const t = window.useT();
  const { lang } = React.useContext(window.LangContext);
  const isKo = lang === 'ko';

  const [slide, setSlide] = React.useState(0);
  const SCREENS = [
    { id: 'home',    label: isKo ? '홈' : 'Home',         sub: 'Home' },
    { id: 'units',   label: isKo ? '단원' : 'Units',      sub: 'Units' },
    { id: 'cards',   label: isKo ? '게임 카드' : 'Games', sub: 'Games' },
    { id: 'play',    label: isKo ? '플레이' : 'Play',     sub: 'Play' },
    { id: 'cashout', label: isKo ? '환전' : 'Cash out',   sub: 'Cash out' },
    { id: 'shop',    label: isKo ? '상점' : 'Shop',       sub: 'Shop' },
  ];
  React.useEffect(() => {
    // 6개 화면을 3초마다 자동으로 넘김 (자연스러운 쇼케이스)
    const id = setTimeout(() => setSlide(s => (s + 1) % SCREENS.length), 3000);
    return () => clearTimeout(id);
  }, [slide]);

  const EXS_KO = {
    t1: ['분수 도미노', '도형 회전', '곱셈 격자'],
    t2: ['점-사각형 카운트', '거울 빛', '시계 손바늘'],
    t3: ['모의 투자', '광고 속임수', '빚의 함정'],
  };
  const EXS_EN = {
    t1: ['Fraction dominoes', 'Shape rotation', 'Multiplication grid'],
    t2: ['Dot rectangles', 'Mirror light', 'Clock hands'],
    t3: ['Mock investing', 'Ad tricks', 'Debt traps'],
  };
  const pickExs = key => (lang === 'ko' ? EXS_KO : EXS_EN)[key];

  const tracks = [
    { key: 't1', tone: 'math',     color: '#A78BFA', deepColor: '#5B21B6', bg: 'rgba(167,139,250,0.10)',
      name: t('appc.t1.name'), count: t('appc.t1.count'), unit: t('appc.t1.unit'),
      meta: t('appc.t1.meta'), body: t('appc.t1.body') },
    { key: 't2', tone: 'thinking', color: '#3B82F6', deepColor: '#1E3A8A', bg: 'rgba(59,130,246,0.10)',
      name: t('appc.t2.name'), count: t('appc.t2.count'), unit: t('appc.t2.unit'),
      meta: t('appc.t2.meta'), body: t('appc.t2.body') },
    { key: 't3', tone: 'finance',  color: '#FCD34D', deepColor: '#92400E', bg: 'rgba(252,211,77,0.16)',
      name: t('appc.t3.name'), count: t('appc.t3.count'), unit: t('appc.t3.unit'),
      meta: t('appc.t3.meta'), body: t('appc.t3.body') },
  ];

  const concepts = [
    { icon: 'ai',     title: t('appc.c1.t'), body: t('appc.c1.b') },
    { icon: 'review', title: t('appc.c2.t'), body: t('appc.c2.b') },
    { icon: 'wallet', title: t('appc.c3.t'), body: t('appc.c3.b') },
    { icon: 'room',   title: t('appc.c4.t'), body: t('appc.c4.b') },
  ];

  return (
    <section id="app" className="section">
      <div className="section-inner">
        {/* ── Header ─────────────────────────────────────────────── */}
        <div className="label-ko" style={{ marginBottom: 16 }}>
          {t('appc.eyebrow')}
        </div>
        <h2 style={{
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 'clamp(16px, 5vw, 42px)', fontWeight: 700, letterSpacing: '-0.4px',
          color: '#0B1727', margin: 0, maxWidth: 820, lineHeight: 1.20,
          whiteSpace: 'nowrap',
        }}>{t('appc.h2')}</h2>
        <p style={{
          fontSize: 16.5, fontWeight: 400,
          color: '#475569', lineHeight: 1.70,
          marginTop: 18,
          whiteSpace: 'nowrap',
        }}>{t('appc.sub')}</p>

        <div style={{
          marginTop: 26, padding: '10px 16px',
          background: 'linear-gradient(90deg, rgba(109,40,217,0.08), rgba(109,40,217,0.02))',
          border: '1px solid rgba(109,40,217,0.20)', borderRadius: 9999,
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
          textTransform: 'uppercase', letterSpacing: '0.08em',
          color: '#6D28D9',
        }}>
          <span style={{
            display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
            background: '#6D28D9', boxShadow: '0 0 12px rgba(109,40,217,0.6)',
          }} />
          {t('appc.headline')}
        </div>

        {/* ── 3 Track cards ──────────────────────────────────────── */}
        <div className="appc-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16, marginTop: 36,
        }}>
          {tracks.map(tr => (
            <div key={tr.key} className="card" style={{
              padding: 0, display: 'flex', flexDirection: 'column',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* Header band — tinted, track identity + meta + big number */}
              <div style={{
                padding: '26px 26px 22px',
                background: `linear-gradient(160deg, ${tr.color}18 0%, ${tr.color}06 60%, transparent 100%)`,
                borderBottom: `1px solid ${tr.color}1F`,
              }}>
                {/* Track label + meta inline */}
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  gap: 8, marginBottom: 18,
                }}>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center',
                    padding: '6px 14px', borderRadius: 9999,
                    background: '#fff',
                    border: `1.5px solid ${tr.color}55`,
                    color: tr.deepColor,
                    fontFamily: 'var(--font-ko)',
                    fontSize: 13, fontWeight: 700,
                    letterSpacing: '-0.01em',
                  }}>{tr.name}</span>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10.5, fontWeight: 700,
                    color: tr.deepColor, opacity: 0.75,
                    letterSpacing: '0.06em',
                  }}>{tr.meta}</span>
                </div>

                {/* Big number — hero of the card */}
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span className="tnum appc-count" style={{
                    fontFamily: 'var(--font-sans)', fontFeatureSettings: '"tnum"',
                    fontSize: 56, fontWeight: 800, letterSpacing: '-1.4px',
                    color: tr.deepColor, lineHeight: 1,
                  }}>{tr.count}</span>
                  <span className="appc-unit" style={{
                    fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                    fontSize: 16, fontWeight: 600, color: tr.deepColor, opacity: 0.7,
                  }}>{tr.unit}</span>
                </div>
              </div>

              {/* Body */}
              <div style={{
                padding: '22px 26px 24px',
                display: 'flex', flexDirection: 'column', gap: 18,
                flex: 1,
              }}>
                <p style={{
                  fontSize: 14, fontWeight: 400,
                  color: '#1E293B', lineHeight: 1.72, margin: 0,
                  letterSpacing: '-0.01em',
                }}>{tr.body}</p>

                {/* Featured games as chip-style tags */}
                <div style={{
                  marginTop: 'auto', paddingTop: 16, borderTop: '1px dashed #E2E8F0',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
                    textTransform: 'uppercase', letterSpacing: '0.10em',
                    color: '#94A3B8', marginBottom: 12,
                  }}>
                    {t('appc.exs.h')}
                  </div>
                  <div style={{
                    display: 'flex', flexWrap: 'wrap', gap: 6,
                  }}>
                    {pickExs(tr.key).map((g, i) => (
                      <span key={i} style={{
                        padding: '6px 11px', borderRadius: 7,
                        background: `${tr.color}14`,
                        border: `1px solid ${tr.color}33`,
                        color: tr.deepColor,
                        fontFamily: 'var(--font-ko)',
                        fontSize: 12.5, fontWeight: 600,
                        letterSpacing: '-0.01em',
                      }}>{g}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* ── Landscape phone mock — 6-step user journey ────────── */}
        <div style={{ marginTop: 72 }}>
          <div className="label-ko" style={{ marginBottom: 16, display: 'inline-flex', justifyContent: 'center' }}>
            {isKo ? '실제 앱 화면 · LIVE PREVIEW' : 'Real app screens · LIVE PREVIEW'}
          </div>
          <div className="game-mock-shell" style={{
            margin: '0 auto', maxWidth: 820,
            position: 'relative',
            padding: 16,
            background: 'linear-gradient(135deg, #0B1727 0%, #1c1e54 100%)',
            borderRadius: 36,
            boxShadow:
              '0 12px 36px -12px rgba(15,23,42,0.30),' +
              '0 40px 80px -40px rgba(109,40,217,0.40)',
            aspectRatio: '844 / 390',
          }}>
            {/* Camera notch (landscape orientation — left side) */}
            <div style={{
              position: 'absolute', top: '50%', left: 8, transform: 'translateY(-50%)',
              width: 16, height: 70, borderRadius: 10,
              background: '#06081A', zIndex: 3,
              boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.05)',
            }} />
            <div style={{
              width: '100%', height: '100%', borderRadius: 22,
              background: '#06061a', overflow: 'hidden',
              position: 'relative',
              boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)',
            }}>
              <PreviewIframe phase={SCREENS[slide].id} />
            </div>
          </div>

          {/* Slide tab strip */}
          <div style={{
            marginTop: 22, display: 'flex', justifyContent: 'center',
            gap: 8, flexWrap: 'wrap',
          }}>
            {SCREENS.map((s, i) => (
              <button key={s.id}
                onClick={() => setSlide(i)}
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '8px 16px', borderRadius: 9999,
                  border: '1.5px solid',
                  borderColor: i === slide ? '#6D28D9' : '#E2E8F0',
                  background: i === slide ? 'rgba(109,40,217,0.08)' : '#fff',
                  cursor: 'pointer',
                  fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                  fontSize: 13, fontWeight: 600,
                  color: i === slide ? '#5B21B6' : '#475569',
                  transition: 'all 160ms cubic-bezier(0.25,0.1,0.25,1)',
                }}>
                <span className="tnum" style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  color: i === slide ? '#6D28D9' : '#94A3B8',
                  fontWeight: 700,
                }}>0{i + 1}</span>
                {s.label}
              </button>
            ))}
          </div>
        </div>

        {/* ── Concepts (4 cards) ─────────────────────────────────── */}
        <div style={{ marginTop: 72 }}>
          <div className="label-ko" style={{ marginBottom: 16 }}>
            {t('appc.c.h')}
          </div>
          <div className="appc-concepts" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
          }}>
            {concepts.map((c, i) => {
              const accents = [
                { bg: 'rgba(109,40,217,0.10)', fg: '#6D28D9' },
                { bg: 'rgba(59,130,246,0.10)', fg: '#1E40AF' },
                { bg: 'rgba(245,158,11,0.14)', fg: '#92400E' },
                { bg: 'rgba(244,114,182,0.10)', fg: '#9D174D' },
              ];
              const a = accents[i % accents.length];
              return (
                <div key={i} className="card" style={{
                  padding: 22, display: 'flex', flexDirection: 'column', gap: 12,
                }}>
                  <div style={{
                    width: 42, height: 42, borderRadius: 11,
                    background: a.bg, color: a.fg,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" strokeWidth="1.75"
                      strokeLinecap="round" strokeLinejoin="round">
                      {APPC_ICONS[c.icon]}
                    </svg>
                  </div>
                  <div style={{
                    fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                    fontSize: 16, fontWeight: 700, color: '#0B1727',
                    lineHeight: 1.32, letterSpacing: '-0.01em',
                  }}>{c.title}</div>
                  <div style={{
                    fontSize: 13.5, fontWeight: 400,
                    color: '#475569', lineHeight: 1.65,
                  }}>{c.body}</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* ── Download CTA ───────────────────────────────────────── */}
        <div className="appc-download" style={{
          marginTop: 72, padding: '36px 32px',
          background:
            'radial-gradient(circle at 0% 100%, rgba(109,40,217,0.08), transparent 50%),' +
            'radial-gradient(circle at 100% 0%, rgba(245,158,11,0.08), transparent 50%),' +
            'linear-gradient(135deg, #FAFCFE 0%, #F8FAFC 100%)',
          border: '1px solid #E2E8F0', borderRadius: 16,
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32,
          alignItems: 'center',
        }}>
          <div>
            <div className="label-ko" style={{ marginBottom: 12 }}>
              {t('app.eyebrow')}
            </div>
            <div style={{
              fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
              fontSize: 'clamp(13px, 3.2vw, 24px)', fontWeight: 700, letterSpacing: '-0.3px',
              color: '#0B1727', lineHeight: 1.32,
              whiteSpace: 'nowrap',
            }}>{t('app.h2')}</div>
            <div style={{
              marginTop: 14, padding: '6px 14px',
              border: '1px solid rgba(21,128,61,0.30)',
              background: 'rgba(21,128,61,0.10)',
              borderRadius: 9999, display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 12, fontWeight: 700, color: '#15803D',
            }}>
              <span aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', background: '#15803D' }} />
              {t('app.free')}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#" style={badgeStyle}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.6 12.6c0-2.5 2-3.7 2.1-3.7-1.1-1.7-2.9-2-3.5-2-1.5-.2-2.9.9-3.6.9s-1.9-.9-3.2-.9c-1.6 0-3.2 1-4 2.4-1.7 2.9-.4 7.3 1.2 9.7.8 1.2 1.8 2.5 3.1 2.4 1.2-.1 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8 0 0-2.6-1-2.8-3.6zM15.5 5.6c.7-.8 1.1-2 1-3.1-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 2.9 1.1.1 2.2-.6 2.9-1.3z"/>
              </svg>
              <span style={badgeText}>
                <span style={{ fontSize: 9, color: '#cfd2db' }}>Download on the</span>
                <span style={{ fontSize: 14, fontWeight: 400, color: '#fff' }}>App Store</span>
              </span>
            </a>
            <a href="#" style={badgeStyle}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M3 20.5V3.5c0-.4.1-.7.4-1L13 12 3.4 21.5c-.3-.3-.4-.6-.4-1z" fill="#34A853"/>
                <path d="M13 12L3.4 2.5c.1-.1.2-.2.4-.2.4 0 .8.2 1.3.5L17 9.5 13 12z" fill="#EA4335"/>
                <path d="M13 12l4-2.5 4 2.3c1 .6 1 1.5 0 2.1l-4 2.4L13 12z" fill="#FBBC04"/>
                <path d="M13 12l4.1 4.3-12 6.9c-.5.3-.9.5-1.3.5-.2 0-.3 0-.4-.2L13 12z" fill="#4285F4"/>
              </svg>
              <span style={badgeText}>
                <span style={{ fontSize: 9, color: '#cfd2db' }}>GET IT ON</span>
                <span style={{ fontSize: 14, fontWeight: 400, color: '#fff' }}>Google Play</span>
              </span>
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          .appc-grid     { grid-template-columns: 1fr !important; }
          .appc-concepts { grid-template-columns: 1fr 1fr !important; }
          .appc-download { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 480px) {
          .appc-concepts { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 767px) {
          /* Card hero number: 56px is over-balanced on phones — scale down */
          .appc-count { font-size: 36px !important; letter-spacing: -0.9px !important; }
          .appc-unit  { font-size: 13px !important; }
        }
      `}</style>
    </section>
  );
};

/* ─── Shared HUD strip used by every game-context screen ────────── */
const TopBar = ({ left, right }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '10px 16px',
    borderBottom: '1px solid #f1f5f9',
    background: '#fff',
  }}>
    {left}
    <span style={{ flex: 1 }} />
    {right}
  </div>
);

/* ─── ① 홈화면 — student-mode dashboard ─────────────────────────── */
const ScreenHome = () => (
  <div style={{ width: '100%', height: '100%', background: '#fafcfe', display: 'flex', flexDirection: 'column' }}>
    <TopBar
      left={
        <>
          <div style={{
            width: 26, height: 26, borderRadius: 6,
            background: 'linear-gradient(135deg, #7c3aed, #b9b9f9)',
            color: '#fff', fontSize: 11,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>JY</div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 400, color: '#061b31', lineHeight: 1 }}>최진영</div>
            <div className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#7c3aed', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 2 }}>● PLANET TIER</div>
          </div>
        </>
      }
      right={
        <>
          <span className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#92400E', fontWeight: 500 }}>★ 1,248</span>
        </>
      }
    />
    <div style={{ flex: 1, padding: 12, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 10 }}>
      {/* Big challenge card */}
      <div style={{
        padding: 14, borderRadius: 12,
        background: 'linear-gradient(135deg, #7c3aed 0%, #4434d4 100%)',
        color: '#fff', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>오늘의 도전</div>
          <div style={{ fontSize: 16, fontWeight: 400, marginTop: 6 }}>사고력 5문제</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>약 12분 · ★ +500</div>
        </div>
        <div>
          <div style={{ height: 4, background: 'rgba(255,255,255,0.20)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: '60%', height: '100%', background: '#fff' }} />
          </div>
          <div className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 10, marginTop: 4, color: 'rgba(255,255,255,0.85)' }}>3 / 5</div>
        </div>
      </div>

      {/* Right column: 3 track shortcuts + medal mini */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[
          ['수학',   '#A78BFA', 'Lv 3'],
          ['사고력', '#3B82F6', 'Lv 2'],
          ['금융',   '#FCD34D', 'Lv 4'],
        ].map(([name, color, lv]) => (
          <div key={name} style={{
            padding: '7px 10px', background: '#fff', border: '1px solid #e5edf5', borderRadius: 8,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: color }} />
            <span style={{ flex: 1, fontSize: 12, fontWeight: 400, color: '#061b31' }}>{name}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#64748d' }}>{lv}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* ─── ② 게임 단원 — track > unit selector ──────────────────────── */
const ScreenUnits = () => {
  const UNITS = [
    { num: 1, title: '분수의 의미',      games: 12, locked: false, done: true },
    { num: 2, title: '분수의 덧셈·뺄셈',  games: 14, locked: false, done: true },
    { num: 3, title: '분수의 곱셈',      games: 10, locked: false, done: false, current: true },
    { num: 4, title: '분수의 나눗셈',    games: 11, locked: false, done: false },
    { num: 5, title: '비례식',          games: 13, locked: true,  done: false },
    { num: 6, title: '확률의 시작',      games:  9, locked: true,  done: false },
  ];
  return (
    <div style={{ width: '100%', height: '100%', background: '#fafcfe', display: 'flex', flexDirection: 'column' }}>
      <TopBar
        left={
          <>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>← 홈</span>
            <span style={{ padding: '3px 9px', borderRadius: 9999, background: 'rgba(167,139,250,0.16)', color: '#5B21B6', fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 500 }}>● 수학 · 초고 4</span>
          </>
        }
        right={<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#64748d' }}>6 단원</span>}
      />
      <div style={{ flex: 1, padding: 12, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {UNITS.map(u => {
          const tone =
            u.current ? { bg: 'linear-gradient(135deg, #A78BFA 0%, #7c3aed 100%)', fg: '#fff', sub: 'rgba(255,255,255,0.8)', border: 'transparent' } :
            u.done    ? { bg: '#fff', fg: '#5B21B6', sub: '#5B21B6', border: '#b9b9f9' } :
            u.locked  ? { bg: '#f1f5f9', fg: '#94a3b8', sub: '#cbd5e1', border: '#e5edf5' } :
                        { bg: '#fff', fg: '#061b31', sub: '#64748d', border: '#e5edf5' };
          return (
            <div key={u.num} style={{
              padding: 10, borderRadius: 8,
              background: tone.bg, color: tone.fg,
              border: `1px solid ${tone.border}`,
              display: 'flex', flexDirection: 'column', gap: 4,
              minHeight: 0,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span className="tnum" style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  color: u.current ? 'rgba(255,255,255,0.85)' : tone.sub,
                  fontWeight: 500,
                }}>UNIT {u.num}</span>
                {u.current && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, padding: '1px 5px', borderRadius: 3, background: 'rgba(255,255,255,0.25)' }}>NOW</span>}
                {u.locked && (
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke={tone.sub} strokeWidth="2" style={{ marginLeft: 'auto' }}>
                    <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                  </svg>
                )}
                {u.done && <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#15be53' }}>✓</span>}
              </div>
              <div style={{ fontSize: 12, fontWeight: 400, lineHeight: 1.25 }}>{u.title}</div>
              <div className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: tone.sub, marginTop: 'auto' }}>{u.games} 게임</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* ─── ③ 게임 카드 — game grid inside a unit ────────────────────── */
const ScreenCards = () => {
  const GAMES = [
    { name: '분수 도미노',       lv: 'Lv 3', stars: 3, color: '#A78BFA', tag: 'PLAY' },
    { name: '분수 막대 비교',    lv: 'Lv 3', stars: 3, color: '#A78BFA', tag: 'PLAY' },
    { name: '분수 피자 나누기',  lv: 'Lv 3', stars: 2, color: '#A78BFA', tag: 'NEW'  },
    { name: '분수의 합 카드',    lv: 'Lv 3', stars: 1, color: '#A78BFA', tag: 'PLAY' },
    { name: '같은 분수 찾기',    lv: 'Lv 3', stars: 0, color: '#A78BFA', tag: 'NEW'  },
    { name: '분수 미궁',         lv: 'Lv 3', stars: 0, color: '#A78BFA', tag: 'LOCK' },
  ];
  return (
    <div style={{ width: '100%', height: '100%', background: '#fafcfe', display: 'flex', flexDirection: 'column' }}>
      <TopBar
        left={
          <>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>← 단원</span>
            <span style={{ fontSize: 12, fontWeight: 400, color: '#061b31' }}>분수의 곱셈</span>
            <span style={{ padding: '2px 7px', borderRadius: 4, background: 'rgba(167,139,250,0.16)', color: '#5B21B6', fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 500 }}>UNIT 3</span>
          </>
        }
        right={<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#64748d' }}>10 게임</span>}
      />
      <div style={{ flex: 1, padding: 12, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {GAMES.map(g => (
          <div key={g.name} style={{
            padding: 10, borderRadius: 8,
            background: g.tag === 'LOCK' ? '#f1f5f9' : '#fff',
            border: '1px solid #e5edf5',
            display: 'flex', flexDirection: 'column', gap: 6,
            opacity: g.tag === 'LOCK' ? 0.6 : 1,
            minHeight: 0,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: 22, height: 22, borderRadius: 5,
                background: g.tag === 'LOCK' ? '#cbd5e1' : `linear-gradient(135deg, ${g.color}, #5B21B6)`,
              }} />
              <span style={{
                marginLeft: 'auto',
                padding: '1px 5px', borderRadius: 3,
                background: g.tag === 'NEW'  ? 'rgba(124,58,237,0.12)' :
                            g.tag === 'PLAY' ? 'rgba(21,190,83,0.14)'  : 'transparent',
                color:      g.tag === 'NEW'  ? '#4434d4' :
                            g.tag === 'PLAY' ? '#108c3d' : '#94a3b8',
                fontFamily: 'var(--font-mono)', fontSize: 8,
                fontWeight: 600,
                textTransform: 'uppercase', letterSpacing: '0.08em',
              }}>{g.tag === 'LOCK' ? '잠금' : g.tag}</span>
            </div>
            <div style={{ fontSize: 11, fontWeight: 400, color: '#061b31', lineHeight: 1.2 }}>{g.name}</div>
            <div className="tnum" style={{ marginTop: 'auto', fontFamily: 'var(--font-mono)', fontSize: 9, color: '#94a3b8', letterSpacing: '0.06em' }}>
              {'★'.repeat(g.stars)}{'☆'.repeat(3 - g.stars)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ─── ④ 실제 게임 — 진짜 SRIKI 앱을 iframe으로 임베드 ──────────────
   sriki.pages.dev/preview는 인증 없이 들어와서 대표 게임 3종을 자동 로테이션함.
   isActive일 때만 src를 채워 다른 슬라이드에서는 게임이 백그라운드로 안 돎. */
const ScreenPlay = ({ isActive }) => (
  <div style={{
    width: '100%', height: '100%',
    background: '#06061a',
    position: 'relative',
  }}>
    {isActive ? (
      <iframe
        src={SRIKI_PREVIEW_URL}
        title="SRIKI 실제 게임 미리보기"
        loading="lazy"
        allow="autoplay"
        style={{
          width: '100%', height: '100%',
          border: 0, display: 'block',
          background: '#06061a',
        }}
      />
    ) : (
      <div style={{
        width: '100%', height: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#94a3b8', fontFamily: 'var(--font-sans)', fontSize: 13,
      }}>
        실제 게임 로딩 대기 중…
      </div>
    )}
  </div>
);
/* ─── ⑤ 환전 — coin to cash ────────────────────────────────────── */
const ScreenCashout = () => (
  <div style={{ width: '100%', height: '100%', background: '#fafcfe', display: 'flex', flexDirection: 'column' }}>
    <TopBar
      left={
        <>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>← 홈</span>
          <span style={{ fontSize: 12, fontWeight: 400, color: '#061b31' }}>환전 신청</span>
        </>
      }
      right={
        <span className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#92400E', fontWeight: 500 }}>★ 1,248</span>
      }
    />
    <div style={{ flex: 1, padding: '12px 16px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 14 }}>
      {/* Left — coin balance hero */}
      <div style={{
        padding: 14, borderRadius: 12,
        background: 'linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%)',
        color: '#92400E', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(146,64,14,0.7)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>내 코인</div>
          <div className="tnum" style={{
            fontFamily: 'var(--font-sans)', fontFeatureSettings: '"tnum"',
            fontSize: 36, fontWeight: 300, letterSpacing: '-0.7px',
            color: '#92400E', marginTop: 4, lineHeight: 1,
          }}>1,248 ★</div>
          <div className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(146,64,14,0.7)', marginTop: 4 }}>
            환산 ₩ 12,480
          </div>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(146,64,14,0.65)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
          1 ★ = ₩ 10
        </div>
      </div>

      {/* Right — exchange form */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={{ padding: '8px 10px', background: '#fff', border: '1px solid #e5edf5', borderRadius: 8 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8, color: '#64748d', textTransform: 'uppercase', letterSpacing: '0.06em' }}>환전 금액</div>
          <div className="tnum" style={{ fontFamily: 'var(--font-sans)', fontFeatureSettings: '"tnum"', fontSize: 18, fontWeight: 400, color: '#061b31', marginTop: 2 }}>500 ★ → ₩ 5,000</div>
        </div>
        <div style={{ padding: '8px 10px', background: '#fff', border: '1px solid #e5edf5', borderRadius: 8 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8, color: '#64748d', textTransform: 'uppercase', letterSpacing: '0.06em' }}>받는 계좌</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#061b31', marginTop: 2 }}>국민 ●●● 1234</div>
        </div>
        <div style={{ padding: '8px 10px', background: 'rgba(124,58,237,0.06)', border: '1px solid rgba(124,58,237,0.30)', borderRadius: 8 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8, color: '#4434d4', textTransform: 'uppercase', letterSpacing: '0.06em' }}>부모 승인 대기</div>
          <div style={{ fontSize: 11, color: '#273951', marginTop: 2 }}>승인되면 1-2일 안에 입금</div>
        </div>
        <button style={{
          marginTop: 'auto', padding: '8px',
          background: '#7c3aed', color: '#fff',
          border: '1px solid #7c3aed', borderRadius: 6,
          fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
          fontSize: 12, fontWeight: 400,
          cursor: 'pointer',
        }}>환전 신청</button>
      </div>
    </div>
  </div>
);

/* ─── ⑥ 상점 — avatar/room shop ────────────────────────────────── */
const ScreenShop = () => {
  const SHOP_ITEMS = [
    { name: '우주 헬멧',   rarity: 'EPIC', price: 480, color: '#A78BFA', glyph: '🪐' },
    { name: '별빛 망토',   rarity: 'RARE', price: 240, color: '#3B82F6', glyph: '✨' },
    { name: '코스믹 안경', rarity: 'COMMON', price: 80,  color: '#10B981', glyph: '🕶️' },
    { name: '행성 화분',   rarity: 'RARE', price: 200, color: '#FCD34D', glyph: '🌱' },
  ];
  const rarityTone = {
    EPIC:   { bg: 'rgba(167,139,250,0.16)', fg: '#5B21B6' },
    RARE:   { bg: 'rgba(59,130,246,0.14)',  fg: '#1E3A8A' },
    COMMON: { bg: 'rgba(100,116,141,0.12)', fg: '#475569' },
  };
  return (
    <div style={{ width: '100%', height: '100%', background: '#fafcfe', display: 'flex', flexDirection: 'column' }}>
      <TopBar
        left={
          <>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.06em' }}>← 홈</span>
            <span style={{ fontSize: 12, fontWeight: 400, color: '#061b31' }}>상점</span>
            <span style={{ display: 'inline-flex', gap: 4 }}>
              {['아바타', '룸', '환전'].map((tab, i) => (
                <span key={tab} style={{
                  padding: '2px 7px', borderRadius: 4,
                  background: i === 0 ? 'rgba(124,58,237,0.10)' : '#fff',
                  border: '1px solid', borderColor: i === 0 ? 'rgba(124,58,237,0.30)' : '#e5edf5',
                  color: i === 0 ? '#4434d4' : '#64748d',
                  fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 500,
                }}>{tab}</span>
              ))}
            </span>
          </>
        }
        right={
          <span className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#92400E', fontWeight: 500 }}>★ 1,248</span>
        }
      />
      <div style={{ flex: 1, padding: '12px 16px', display: 'grid', gridTemplateColumns: '1.1fr 1.4fr', gap: 12, minHeight: 0 }}>
        {/* Left — featured preview */}
        <div style={{
          padding: 12, borderRadius: 10,
          background: 'linear-gradient(135deg, #4434d4 0%, #7c3aed 60%, #b9b9f9 100%)',
          color: '#fff', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,0.75)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>오늘의 추천</div>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ fontSize: 56, lineHeight: 1, filter: 'drop-shadow(0 4px 10px rgba(0,0,0,0.25))' }}>🪐</span>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 400 }}>우주 헬멧</div>
            <div className="tnum" style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.80)', marginTop: 2 }}>EPIC · ★ 480</div>
            <button style={{
              marginTop: 6, width: '100%', padding: '6px',
              background: '#fff', color: '#4434d4',
              border: 'none', borderRadius: 6,
              fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
              fontSize: 11, fontWeight: 500, cursor: 'pointer',
            }}>구매하기</button>
          </div>
        </div>

        {/* Right — item grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, minHeight: 0 }}>
          {SHOP_ITEMS.map((it, i) => {
            const tone = rarityTone[it.rarity];
            return (
              <div key={i} style={{
                padding: 8, borderRadius: 8,
                background: '#fff', border: '1px solid #e5edf5',
                display: 'flex', flexDirection: 'column', gap: 4, minHeight: 0,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: `linear-gradient(135deg, ${it.color}, ${it.color}99)`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16,
                  }}>{it.glyph}</div>
                  <span style={{
                    marginLeft: 'auto',
                    padding: '1px 5px', borderRadius: 3,
                    background: tone.bg, color: tone.fg,
                    fontFamily: 'var(--font-mono)', fontSize: 8, fontWeight: 600,
                    letterSpacing: '0.08em',
                  }}>{it.rarity}</span>
                </div>
                <div style={{ fontSize: 11, fontWeight: 400, color: '#061b31', lineHeight: 1.25 }}>{it.name}</div>
                <div className="tnum" style={{ marginTop: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#92400E', fontWeight: 500 }}>★ {it.price.toLocaleString()}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

const badgeStyle = {
  display: 'inline-flex', alignItems: 'center', gap: 10,
  padding: '10px 18px', borderRadius: 10,
  background: '#0B1727', color: '#fff',
  textDecoration: 'none',
  border: '1px solid #0B1727',
  boxShadow: '0 1px 2px rgba(15,23,42,0.10), 0 12px 24px -12px rgba(15,23,42,0.30)',
  transition: 'all 160ms cubic-bezier(0.25,0.1,0.25,1)',
};
const badgeText = { display: 'flex', flexDirection: 'column', lineHeight: 1.15 };

window.AppContent = AppContent;