// Night-theme home screens · introduces the app, hero-like
// Two screens (logged-out welcome, logged-in home) on dark starry background.
// Main avatar (5-stage evolution) is the protagonist of the brand.
// Art for all 5 stages delivered — assets/avatar-1.png … avatar-5.png.

const { useState: nuseState } = React;

// ---- Character growth system (per app spec · v1.0 MVP) ----
// 5 stages, XP-based. Each stage unlocks objet (cape, lantern, accessories…).
// All 5 stages' art delivered (assets/avatar-1.png … avatar-5.png).
const AVATAR_STAGES = [
  {
    stage: 1, name: '기도 새싹', emoji: '🌱',
    xpFrom: 0, xpTo: 99,
    unlocks: ['기본 랜턴만 보유', '회색 기본 외투', '마스코트 첫 등장'],
    image: 'assets/avatar-1.png',
    art: true,
  },
  {
    stage: 2, name: '기도나무', emoji: '🌿',
    xpFrom: 100, xpTo: 299,
    unlocks: ['외투 색상 선택 해금', '작은 별 배지 장착', '랜턴 빛 강도 업'],
    image: 'assets/avatar-2.png',
    art: true,
  },
  {
    stage: 3, name: '믿음 지킴이', emoji: '⭐',
    xpFrom: 300, xpTo: 599,
    unlocks: ['황금 랜턴 업그레이드', '망토·머리 장식 해금', '기도 두루마리 장착'],
    image: 'assets/avatar-3.png',
    art: true,
  },
  {
    stage: 4, name: '비저너리', emoji: '🌟',
    xpFrom: 600, xpTo: 999,
    unlocks: ['빛나는 별 지팡이 해금', '특수 배경 선택 가능', '황금빛 오라 이펙트'],
    image: 'assets/avatar-4.png',
    art: true,
  },
  {
    stage: 5, name: '드림챔피언', emoji: '🏆',
    xpFrom: 1000, xpTo: Infinity,
    unlocks: ['황금 외투·왕관 해금', '빛의 후광·전설 오브제', '명예의 전당 등재'],
    image: 'assets/avatar-5.png',
    art: true,
  },
];

// XP earning triggers (per spec)
const XP_TRIGGERS = [
  { icon: '⭐', label: 'XP 레벨 달성', desc: '기도·감사·묵상으로 XP 적립 시 자동 해금' },
  { icon: '🔥', label: '미션 완료',    desc: '7일 스트릭·100기도 등 특별 달성 시 해금' },
  { icon: '🏆', label: '멘토 대화',    desc: '특정 멘토 10회 대화 → 전용 오브제 해금' },
];

// Objet slots (visual breakdown of unlockable customization parts)
const OBJET_SLOTS = [
  { slot: '머리',    desc: '모자·후드·왕관·빛의 링',     icon: '👑' },
  { slot: '몸통',    desc: '외투·망토·갑옷·황금 로브',   icon: '🧥' },
  { slot: '왼손',    desc: '랜턴·황금 랜턴·성경',         icon: '🏮' },
  { slot: '오른손',  desc: '별·십자가·빛의 검',           icon: '✨' },
  { slot: '배경/오라', desc: '별빛·성전·황금 오라',        icon: '🌌' },
];

function MainAvatar({ stage = 1, size = 240, glow = true }) {
  const [imgFailed, setImgFailed] = nuseState(false);
  const stageData = AVATAR_STAGES.find(s => s.stage === stage) || AVATAR_STAGES[0];
  const isLocked = !stageData.art;

  return (
    <div className={`main-avatar-wrap ${isLocked ? 'locked' : ''}`} style={{ width: size, height: size }}>
      {glow && <div className="ma-glow" />}
      {!imgFailed && !isLocked && (
        <img
          src={window.__res(stageData.image)}
          alt={stageData.name}
          className="ma-img"
          onError={() => setImgFailed(true)}
        />
      )}
      {(imgFailed || isLocked) && (
        <div className="ma-placeholder">
          <img
            src={window.__res("assets/avatar-placeholder.svg")}
            alt={`${stageData.name} 일러스트 제작중`}
            className="ma-img placeholder"
          />
          {isLocked && (
            <div className="ma-lock-badge">
              <span>🔒</span>
              <span>Lv{stage} 제작중</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// Starry-sky background — pure CSS/SVG, no images
function NightSky({ showStars = true, showMoon = true }) {
  return (
    <div className="night-bg" aria-hidden="true">
      <div className="ns-gradient" />
      {showStars && (
        <svg className="ns-stars" viewBox="0 0 390 844" preserveAspectRatio="none">
          {[
            [40, 80, 1.2], [120, 50, 1.6], [200, 100, 1.0], [280, 70, 1.8], [340, 120, 1.2],
            [60, 180, 1.4], [160, 220, 1.0], [240, 170, 1.6], [320, 230, 1.0], [80, 280, 1.2],
            [180, 320, 1.8], [260, 290, 1.0], [350, 340, 1.4], [30, 380, 1.6], [110, 420, 1.0],
            [70, 540, 1.2], [180, 580, 1.0], [290, 560, 1.4],
          ].map(([cx, cy, r], i) => (
            <circle key={i} cx={cx} cy={cy} r={r} fill="#FFF" opacity={0.85} />
          ))}
          {[
            [150, 130, 4], [70, 240, 3], [310, 100, 5], [220, 410, 3.5],
          ].map(([cx, cy, r], i) => (
            <g key={`s${i}`}>
              <circle cx={cx} cy={cy} r={r * 0.4} fill="#FFE6A8" />
              <circle cx={cx} cy={cy} r={r} fill="#FFE6A8" opacity="0.3" />
            </g>
          ))}
        </svg>
      )}
      {showMoon && (
        <div className="ns-moon">
          <div className="ns-moon-core" />
          <div className="ns-moon-glow" />
        </div>
      )}
      <div className="ns-hills" />
    </div>
  );
}

// Church footer
function ChurchFooter({ inverse = false }) {
  return (
    <div className={`church-footer ${inverse ? 'inverse' : ''}`}>
      <span className="cf-mark">⛪</span>
      <span className="cf-label">중문교회 · Joong Moon Church</span>
    </div>
  );
}

// ============================================================
// E1 · 로그인 전 (Welcome)
//   서사적 밤하늘, 큰 캐릭터, 작은 버튼 2개 (시작/로그인)
// ============================================================
function WelcomeScreen({ onStart, onLogin }) {
  return (
    <>
      {/* Use the supplied mockup as the narrative backdrop — keeps the AI-Men
          wordmark, character, and hill scene exactly as designed. Bottom area
          extends with matching dark sky for our chrome. */}
      <div className="welcome-mockup-bg" />
      <div className="welcome-mockup-stars" aria-hidden="true">
        <NightSky showMoon={false} />
      </div>

      <div className="welcome-shell mockup-layout">
        {/* Top: mockup art (logo + character + hills) */}
        <div className="welcome-mockup-art">
          <img src={window.__res("assets/intro-mockup.png")} alt="AI-Men · 기도노트 & 감사노트" />
        </div>

        {/* Bottom: church welcome + actions, sitting on the dark sky extension */}
        <div className="welcome-bottom">
          <div className="church-welcome compact">
            <div className="cw-eyebrow">중문교회 · Joong Moon Church</div>
            <div className="cw-title-sm">중문교회에 오신 것을 환영합니다</div>
          </div>

          <div className="welcome-actions">
            <button className="wa-primary" onClick={onStart}>
              시작하기
            </button>
            <button className="wa-secondary" onClick={onLogin}>
              이미 계정이 있어요
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

// ============================================================
// E2 · 로그인 후 (Home)
//   캐릭터 + XP 게이지 + 작은 버튼들 + 오늘의 격려
//   XP-based progression (per spec). Default state: 220 XP = Lv 2.
// ============================================================
function HomeNightScreen({ onTab, currentXP = 0 }) {
  const stageData = AVATAR_STAGES.find(s => currentXP >= s.xpFrom && currentXP <= s.xpTo) || AVATAR_STAGES[0];
  const currentStage = stageData.stage;
  const nextStage = AVATAR_STAGES.find(s => s.stage === currentStage + 1);
  const fromXP = stageData.xpFrom;
  const toXP = nextStage ? nextStage.xpFrom : stageData.xpTo;
  const progress = Math.min(1, (currentXP - fromXP) / (toXP - fromXP));
  const xpLeft = Math.max(0, toXP - currentXP);

  // 나의 인생 구절 — 사용자가 편집 가능 (UserStore에 저장)
  const _u = (window.UserStore && window.UserStore.get()) || {};
  const _firstVerse = (_u.lifeVerses && _u.lifeVerses[0]) || { verse: '내게 능력 주시는 자 안에서 내가 모든 것을 할 수 있느니라', ref: '빌립보서 4:13' };
  const [lifeVerse, setLifeVerse] = nuseState(_firstVerse);
  const [coachReady, setCoachReady] = nuseState((_u.recordCount || 5) >= 3);

  return (
    <>
      <NightSky showMoon={false} />
      <div className="welcome-shell home-night">
        {/* Top bar */}
        <div className="home-night-topbar">
          <div className="hnt-brand">
            <span className="cross-glow small" />
            <span>AI-Men</span>
          </div>
          <button className="hnt-icon" aria-label="Menu" onClick={() => onTab && onTab('growth')}>
            <Icon name="dots" />
          </button>
        </div>

        {/* Greeting */}
        <div className="home-night-hello">
          <div className="hnh-eyebrow">오늘도 출석 · 첫걸음</div>
          <div className="hnh-title">은혜님, 안녕하세요</div>
        </div>

        {/* Character + level */}
        <div className="home-night-hero">
          <div className="ma-floating">
            <MainAvatar stage={currentStage} size={180} />
          </div>
          <div className="hnh-level">
            <div className="hnl-label">
              <span className="hnl-stage-num">Lv.{currentStage}</span>
              <span className="hnl-stage-name">{stageData.emoji} {stageData.name}</span>
            </div>
            <div className="hnl-bar">
              <div className="hnl-fill" style={{ width: `${progress * 100}%` }} />
              <div className="hnl-ticks">
                {AVATAR_STAGES.map((s, i) => (
                  <span
                    key={s.stage}
                    className={`hnl-tick ${currentStage >= s.stage ? 'reached' : ''}`}
                    style={{ left: `${(i / (AVATAR_STAGES.length - 1)) * 100}%` }}
                    title={`Lv${s.stage} · ${s.name}`}
                  />
                ))}
              </div>
            </div>
            <div className="hnl-xp">
              <span className="hnl-xp-now"><strong>{currentXP}</strong> XP</span>
              {nextStage && (
                <span className="hnl-xp-next">다음 <strong>{nextStage.name}</strong>까지 {xpLeft} XP</span>
              )}
            </div>
          </div>
        </div>

        {/* Today's verse — compact */}
        <div className="hn-verse">
          <div className="hnv-eyebrow">오늘의 말씀</div>
          <div className="hnv-quote">"수고하고 무거운 짐 진 자들아 다 내게로 오라"</div>
          <div className="hnv-ref">마태복음 11:28</div>
        </div>

        {/* AI 코칭 카드 — 핵심 신규 기능 */}
        <button className="hn-coach-card" type="button" onClick={() => onTab && onTab('coaching')}>
          <div className="hcc-glow" aria-hidden="true" />
          <div className="hcc-orb">✨</div>
          <div className="hcc-text">
            <div className="hcc-eyebrow">AI 신앙 코칭{coachReady && <span className="hcc-dot">●</span>}</div>
            <div className="hcc-title">나의 기록을 분석한<br/>맞춤 신앙 코칭이 도착했어요</div>
            <div className="hcc-sub">{coachReady ? '기도·꿈·소명에 대한 가이드 + 말씀 3개' : '기록을 3개 이상 쓰면 코칭이 열려요'}</div>
          </div>
          <span className="hcc-go"><Icon name="chev-right" size={20} stroke={2.4} /></span>
        </button>

        {/* 나의 인생 구절 카드 — 편집 가능 · 락인 타임라인 */}
        <button className="hn-lifeverse" type="button" onClick={() => onTab && onTab('life-verse')}>
          <div className="hlv-head">
            <span className="hlv-eyebrow">📖 나의 인생 구절</span>
            <span className="hlv-edit">기록 보기 ›</span>
          </div>
          <div className="hlv-quote">"{lifeVerse.verse}"</div>
          <div className="hlv-ref">{lifeVerse.ref}</div>
        </button>

        {/* Action buttons — small */}
        <div className="hn-actions">
          <button className="hna-btn" onClick={() => onTab && onTab('log')}>
            <span className="hna-emoji">📝</span>
            <span className="hna-label">기도노트<span className="hna-xp">+10 XP</span></span>
          </button>
          <button className="hna-btn" onClick={() => onTab && onTab('mentor')}>
            <span className="hna-emoji">📖</span>
            <span className="hna-label">신앙 멘토<span className="hna-xp">+5 XP</span></span>
          </button>
          <button className="hna-btn" onClick={() => onTab && onTab('community')}>
            <span className="hna-emoji">💬</span>
            <span className="hna-label">커뮤니티<span className="hna-xp">+3 XP</span></span>
          </button>
          <button className="hna-btn" onClick={() => onTab && onTab('donation')}>
            <span className="hna-emoji">💛</span>
            <span className="hna-label">후원하기</span>
          </button>
        </div>

        {/* Church event banner */}
        <button className="hn-event-banner" type="button" onClick={() => onTab && onTab('board')}>
          <span className="heb-badge">EVENT</span>
          <span className="heb-text">
            <span className="heb-title">2026 중문교회 여름페스티벌</span>
            <span className="heb-sub">중고등부 성경학교 개강 · 7.1 – 8.30</span>
          </span>
          <span className="heb-arrow"><Icon name="chev-right" size={20} stroke={2.4} /></span>
        </button>

        <ChurchFooter inverse />
      </div>
    </>
  );
}

// ============================================================
// E3 · 캐릭터 성장 시스템 (전체 단계 한눈에)
//   현재 진행도, 다음 해금 미리보기, 오브제 슬롯
// ============================================================
function GrowthTreeScreen({ onBack, currentXP = 220 }) {
  const currentStage = (AVATAR_STAGES.find(s => currentXP >= s.xpFrom && currentXP <= s.xpTo) || AVATAR_STAGES[0]).stage;

  return (
    <>
      <NightSky showMoon={false} />
      <div className="welcome-shell growth-tree">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>캐릭터 성장</span></div>
          <div style={{ width: 34 }} />
        </div>

        <div className="gt-header">
          <div className="gt-eyebrow">현재 진행도</div>
          <div className="gt-title">기도할수록<br/>캐릭터가 자라요</div>
          <div className="gt-sub">XP 획득 → 레벨업 → 캐릭터 진화</div>
        </div>

        {/* Stage tiles */}
        <div className="gt-stages">
          {AVATAR_STAGES.map(s => {
            const reached = currentStage >= s.stage;
            const current = currentStage === s.stage;
            const locked = !s.art;
            return (
              <div key={s.stage} className={`gt-stage ${reached ? 'reached' : ''} ${current ? 'current' : ''} ${locked ? 'locked' : ''}`}>
                <div className="gts-avatar">
                  <MainAvatar stage={s.stage} size={64} glow={false} />
                </div>
                <div className="gts-body">
                  <div className="gts-row1">
                    <span className="gts-lv">Lv.{s.stage}</span>
                    <span className="gts-name">{s.emoji} {s.name}</span>
                    {current && <span className="gts-badge">진행중</span>}
                    {locked && <span className="gts-badge-lock">🔒 제작중</span>}
                  </div>
                  <div className="gts-xp">
                    {s.xpTo === Infinity ? `${s.xpFrom}+ XP` : `${s.xpFrom} – ${s.xpTo} XP`}
                  </div>
                  <ul className="gts-unlocks">
                    {s.unlocks.map((u, i) => <li key={i}>{u}</li>)}
                  </ul>
                </div>
              </div>
            );
          })}
        </div>

        {/* XP triggers */}
        <div className="gt-section">
          <div className="gt-section-title">XP 획득 방법</div>
          <div className="gt-triggers">
            {XP_TRIGGERS.map((t, i) => (
              <div key={i} className="gt-trigger">
                <div className="gtt-icon">{t.icon}</div>
                <div className="gtt-body">
                  <div className="gtt-label">{t.label}</div>
                  <div className="gtt-desc">{t.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <ChurchFooter inverse />
      </div>
    </>
  );
}

// ============================================================
// E4 · About (이 앱에 대해서 / 중문교회 소개)
//   Night-themed. App intro + church info + credits.
//   All church data is placeholder — editable later.
// ============================================================
function AboutScreen({ onBack }) {
  return (
    <>
      <NightSky showMoon={false} />
      <div className="welcome-shell about-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>이 앱에 대해서</span></div>
          <div style={{ width: 34 }} />
        </div>

        {/* App hero */}
        <div className="about-hero">
          <div className="ah-cross"><span className="cross-glow" /></div>
          <div className="ah-name">AI-Men</div>
          <div className="ah-tag">기도노트 &amp; 감사노트</div>
          <div className="ah-desc">
            기도와 감사를 매일 기록하고, AI 신앙 멘토와 함께 묵상하는 여정을 시작하세요.
          </div>
          <div className="ah-version">버전 1.0 MVP · 중문교회 (기독교한국침례회)</div>
        </div>

        {/* Church section — large header per request */}
        <div className="church-card">
          <div className="cc-banner">
            <div className="cc-mark">⛪</div>
            <div className="cc-name-wrap">
              <div className="cc-eyebrow">소속 교회 · 기독교한국침례회</div>
              <div className="cc-name">중문교회</div>
              <div className="cc-name-en">Joong Moon Church</div>
            </div>
          </div>

          <div className="cc-greeting">
            "주님의 놀라우신 은혜와 사랑이 여러분 삶의 모든 순간에 함께 하시길 소원합니다."
            <span className="cc-greeting-ref">— 담임목사 장경동</span>
          </div>

          <div className="cc-info-list">
            <div className="cc-info-row">
              <span className="cc-info-icon">👤</span>
              <div>
                <div className="cc-info-label">담임 목사</div>
                <div className="cc-info-value">장경동 목사</div>
              </div>
            </div>
            <div className="cc-info-row">
              <span className="cc-info-icon">📍</span>
              <div>
                <div className="cc-info-label">주소</div>
                <div className="cc-info-value">대전광역시 서구 도산로431번길 21 (탄방동)</div>
              </div>
            </div>
            <div className="cc-info-row">
              <span className="cc-info-icon">📞</span>
              <div>
                <div className="cc-info-label">연락처</div>
                <div className="cc-info-value">042-525-9191</div>
              </div>
            </div>
            <div className="cc-info-row">
              <span className="cc-info-icon">🕒</span>
              <div>
                <div className="cc-info-label">예배 안내</div>
                <div className="cc-info-value">토요 1부 17:00 · 주일 2부 08:00 · 3부 10:00 · 4부 12:00 · 5부 14:00</div>
              </div>
            </div>
          </div>

          <div className="cc-mission">
            <div className="cc-mission-eyebrow">우리 교회 비전</div>
            <div className="cc-mission-text">
              복음을 분명하고 확실하게 전하는 교회.<br/>
              예수 그리스도의 사랑을 전하는 일에<br/>
              크게 쓰임 받는 교회를 꿈꿉니다.
            </div>
          </div>

          <div className="cc-actions">
            <button className="cc-action-btn primary" onClick={() => window.open('http://www.jch.or.kr', '_blank')}>
              <span>🏠</span>
              <span>교회 홈페이지 (jch.or.kr)</span>
            </button>
            <button className="cc-action-btn" onClick={() => window.open('https://www.youtube.com/@중문교회방송', '_blank')}>
              <span>📺</span>
              <span>예배 다시보기 (중문TV)</span>
            </button>
            <button className="cc-action-btn">
              <span>🤝</span>
              <span>새가족 등록</span>
            </button>
          </div>
        </div>

        {/* App features summary */}
        <div className="about-section">
          <div className="as-title">이 앱의 4가지 기능</div>
          <div className="as-grid">
            <div className="as-feat">
              <div className="asf-icon">📝</div>
              <div className="asf-label">기도노트</div>
              <div className="asf-desc">매일 기도·감사 기록</div>
            </div>
            <div className="as-feat">
              <div className="asf-icon">📖</div>
              <div className="asf-label">신앙 멘토</div>
              <div className="asf-desc">5명의 AI 멘토와 대화</div>
            </div>
            <div className="as-feat">
              <div className="asf-icon">💬</div>
              <div className="asf-label">커뮤니티</div>
              <div className="asf-desc">묵상·간증 나눔</div>
            </div>
            <div className="as-feat">
              <div className="asf-icon">🌱</div>
              <div className="asf-label">캐릭터 성장</div>
              <div className="asf-desc">6단계 진화 시스템</div>
            </div>
          </div>
        </div>

        {/* Credits */}
        <div className="about-section">
          <div className="as-title">제작</div>
          <div className="credits-card">
            <div className="cr-row">
              <span className="cr-label">기획·운영</span>
              <span className="cr-value">중문교회 미디어팀</span>
            </div>
            <div className="cr-row">
              <span className="cr-label">개발·디자인</span>
              <span className="cr-value">에이맨 프로젝트</span>
            </div>
            <div className="cr-row">
              <span className="cr-label">문의</span>
              <span className="cr-value">support@aimen.app</span>
            </div>
          </div>
        </div>

        <div className="about-foot">
          ⓒ {new Date().getFullYear()} 중문교회 · Joong Moon Church<br/>
          All rights reserved.
        </div>
      </div>
    </>
  );
}
// ============================================================
// E5 · 후원 / 헌금 (Giving)
//   Night-themed. One-time / recurring giving with amount + purpose.
// ============================================================
function DonationScreen({ onBack }) {
  const [mode, setMode] = nuseState('once');     // once | monthly
  const [amount, setAmount] = nuseState(30000);
  const [custom, setCustom] = nuseState('');
  const [purpose, setPurpose] = nuseState('감사헌금');
  const [done, setDone] = nuseState(false);

  const AMOUNTS = [10000, 30000, 50000, 100000];
  const PURPOSES = ['십일조', '감사헌금', '선교헌금', '건축헌금'];
  const won = (custom ? parseInt(custom.replace(/[^0-9]/g, ''), 10) : amount) || 0;
  const fmt = n => n.toLocaleString('ko-KR');

  if (done) {
    return (
      <>
        <NightSky showMoon={false} />
        <div className="welcome-shell donation-screen">
          <div className="home-night-topbar">
            <div style={{ width: 34 }} />
            <div className="hnt-brand"><span>후원 완료</span></div>
            <div style={{ width: 34 }} />
          </div>
          <div className="dn-done">
          <div className="dn-done-art">💛</div>
            <div className="dn-done-title">감사합니다</div>
            <div className="dn-done-desc">
              {mode === 'monthly' ? '매월 ' : ''}<strong>{fmt(won)}원</strong>의 {purpose}이<br/>
              {mode === 'monthly' ? '정기 후원으로 등록되었어요.' : '소중하게 쓰이도록 전달되었어요.'}
            </div>
            <div className="dn-receipt">📧 기부금 영수증은 이메일로 보내드려요</div>
            <button className="wa-primary" style={{ marginTop: 24 }} onClick={onBack}>홈으로 돌아가기</button>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <NightSky showMoon={false} />
      <div className="welcome-shell donation-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>후원하기</span></div>
          <div style={{ width: 34 }} />
        </div>

        <div className="dn-hero">
          <div className="dn-hero-art">💛</div>
          <div className="dn-hero-title">함께 세워가요</div>
          <div className="dn-hero-sub">중문교회의 사역에 마음을 보태주세요</div>
        </div>

        <div className="dn-modes">
          <button className={`dn-mode ${mode === 'once' ? 'on' : ''}`} onClick={() => setMode('once')}>일시 후원</button>
          <button className={`dn-mode ${mode === 'monthly' ? 'on' : ''}`} onClick={() => setMode('monthly')}>매월 정기</button>
        </div>

        <div className="dn-label">후원 목적</div>
        <div className="dn-chips">
          {PURPOSES.map(p => (
            <button key={p} className={`dn-chip ${purpose === p ? 'on' : ''}`} onClick={() => setPurpose(p)}>{p}</button>
          ))}
        </div>

        <div className="dn-label">금액</div>
        <div className="dn-amounts">
          {AMOUNTS.map(a => (
            <button
              key={a}
              className={`dn-amt ${!custom && amount === a ? 'on' : ''}`}
              onClick={() => { setAmount(a); setCustom(''); }}
            >
              {fmt(a)}원
            </button>
          ))}
        </div>
        <div className="dn-custom">
          <input
            className="dn-custom-input"
            inputMode="numeric"
            placeholder="직접 입력"
            value={custom ? fmt(parseInt(custom.replace(/[^0-9]/g, ''), 10) || 0) : ''}
            onChange={e => setCustom(e.target.value)}
          />
          <span className="dn-won">원</span>
        </div>

        <button
          className={`dn-cta ${won > 0 ? '' : 'disabled'}`}
          onClick={() => won > 0 && setDone(true)}
        >
          {mode === 'monthly' ? `매월 ${fmt(won)}원 후원하기` : `${fmt(won)}원 후원하기`}
        </button>
        <div className="dn-foot">🔒 안전한 결제 · 기부금 영수증 발급 가능</div>
      </div>
    </>
  );
}
window.DonationScreen = DonationScreen;

window.HomeNightScreen = HomeNightScreen;
window.GrowthTreeScreen = GrowthTreeScreen;
window.AboutScreen = AboutScreen;
window.AVATAR_STAGES = AVATAR_STAGES;