// ============================================================
// garden.jsx  —  마음의 정원 게임
// 모듈 A: 숨 쉬는 호수 (호흡 훈련)
// 모듈 B: 생각의 가지치기 (SCT × CBT 인지 교정)
// ============================================================

// ── 팔레트 (game_hub 와 동일) ────────────────────────────────
const GC = {
  sage:    '#4A7C59', sageL: '#7BA88A', sagePale: '#EAF2EC',
  cream:   '#FDFCF7', sand:  '#F5EFE0',
  dusty:   '#6B8FA8', dustyL:'#A8C4D4',
  amber:   '#D4954A', amberL:'#E8C47A',
  muted:   '#8A8A78', dark:  '#2C2C20',
  rose:    '#C97B8A', roseL: '#E8B4BE', rosePale:'#FCF0F2',
  night:   '#1A2A3A', nightM:'#2A3F55',
};

// ── 공통 버튼 스타일 ─────────────────────────────────────────
const gbtn = (bg, color='white', extra={}) => ({
  fontFamily: "'Noto Sans KR', sans-serif",
  cursor: 'pointer', border: 'none', outline: 'none',
  background: bg, color, borderRadius: 14,
  fontWeight: 700, transition: 'all 0.2s',
  ...extra,
});

// ════════════════════════════════════════════════════════════
// MODULE A — 숨 쉬는 호수 (호흡 훈련)
// 4-4-4 박스 호흡: 들이마시기 → 참기 → 내쉬기 → 참기
// ════════════════════════════════════════════════════════════
function BreathingModule({ onComplete, onBack }) {
  const { useState, useEffect, useRef, useCallback } = React;

  const PHASES = [
    { id: 'inhale',    label: '들이마시기', color: '#5A8AC0', dur: 4 },
    { id: 'hold_in',  label: '참 기',      color: '#4A7C59', dur: 4 },
    { id: 'exhale',   label: '내쉬기',     color: '#9BA8B0', dur: 4 },
    { id: 'hold_out', label: '참 기',      color: '#6B8FA8', dur: 4 },
  ];
  const TOTAL_CYCLES = 3;

  const [phase, setPhase]       = useState(0);   // 0-3 인덱스
  const [tick, setTick]         = useState(0);    // 0 ~ dur-1
  const [cycles, setCycles]     = useState(0);    // 완료 사이클 수
  const [started, setStarted]   = useState(false);
  const [finished, setFinished] = useState(false);
  const [sessionSec, setSessionSec] = useState(0);

  const intervalRef = useRef(null);
  const startTimeRef = useRef(null);

  const current = PHASES[phase];
  const progress = started ? (tick + 1) / current.dur : 0; // 0~1

  // 호흡 원 크기: inhale=커짐, hold_in=유지, exhale=작아짐, hold_out=유지(작음)
  const circleSize = (() => {
    if (!started) return 0.55;
    if (current.id === 'inhale')    return 0.5 + (tick / (current.dur - 1)) * 0.45;
    if (current.id === 'hold_in')   return 0.95;
    if (current.id === 'exhale')    return 0.95 - (tick / (current.dur - 1)) * 0.45;
    return 0.5; // hold_out
  })();

  // 배경 하늘 색상 보간
  const skyColorTop = current.color;

  const tick_ = useCallback(() => {
    setTick(prev => {
      const nextTick = prev + 1;
      if (nextTick >= PHASES[phase].dur) {
        // 다음 페이즈로
        const nextPhase = (phase + 1) % PHASES.length;
        setPhase(nextPhase);
        if (nextPhase === 0) {
          // 사이클 완료
          setCycles(c => {
            const newC = c + 1;
            if (newC >= TOTAL_CYCLES) {
              clearInterval(intervalRef.current);
              setFinished(true);
              setSessionSec(Math.round((Date.now() - startTimeRef.current) / 1000));
            }
            return newC;
          });
        }
        return 0;
      }
      return nextTick;
    });
  }, [phase]);

  useEffect(() => {
    if (!started || finished) return;
    intervalRef.current = setInterval(tick_, 1000);
    return () => clearInterval(intervalRef.current);
  }, [started, finished, tick_]);

  const handleStart = () => {
    startTimeRef.current = Date.now();
    setPhase(0); setTick(0); setCycles(0);
    setStarted(true); setFinished(false);
  };

  const handleFinish = async () => {
    const score = cycles * 30 + Math.min(sessionSec, 60);
    try {
      const res = await GameEngine.saveSession({
        gameId: 'garden', moduleType: 'breathing',
        score, durationSec: sessionSec,
        metadata: { cycles_completed: cycles },
      });
      onComplete?.({ score, expGained: res.data?.expGained || 0, leveledUp: res.data?.leveledUp, newAchievements: res.data?.newAchievements || [] });
    } catch {
      onComplete?.({ score, expGained: 0, leveledUp: false, newAchievements: [] });
    }
  };

  // ── 호수 SVG ─────────────────────────────────────────────
  const LakeSVG = () => {
    const r = Math.round(100 * circleSize);
    const skyA = current.id === 'exhale' ? '#B0C8D8' : current.id === 'hold_in' ? '#3A6A90' : skyColorTop;

    return (
      <svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: '100%' }}>
        <defs>
          <radialGradient id="lakeGrad" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={skyA} stopOpacity="0.9"/>
            <stop offset="100%" stopColor={GC.night} stopOpacity="0.6"/>
          </radialGradient>
          <radialGradient id="circleGrad" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stopColor={skyA} stopOpacity="0.7"/>
            <stop offset="100%" stopColor={GC.dusty} stopOpacity="0.95"/>
          </radialGradient>
          <filter id="glow">
            <feGaussianBlur stdDeviation="6" result="blur"/>
            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* 배경 호수 */}
        <ellipse cx="160" cy="280" rx="200" ry="60" fill="url(#lakeGrad)" opacity="0.7"/>

        {/* 물결 (고요함을 표현) */}
        {[1, 2, 3].map(i => (
          <ellipse key={i} cx="160" cy={280 + i * 8} rx={180 - i * 20} ry={10 + i * 4}
            fill="none" stroke={GC.dustyL} strokeWidth="0.8"
            opacity={0.3 / i}
            style={{ animationDelay: `${i * 0.4}s` }}
          />
        ))}

        {/* 호흡 원 — 핵심 시각 요소 */}
        <circle cx="160" cy="150" r={r}
          fill="url(#circleGrad)"
          filter="url(#glow)"
          style={{ transition: 'r 0.8s ease-in-out' }}
          opacity="0.88"
        />
        {/* 원 테두리 (물결 효과) */}
        <circle cx="160" cy="150" r={r + 6}
          fill="none" stroke={skyA} strokeWidth="1.5" opacity="0.4"
          style={{ transition: 'r 0.8s ease-in-out' }}
        />
        <circle cx="160" cy="150" r={r + 14}
          fill="none" stroke={skyA} strokeWidth="0.8" opacity="0.2"
          style={{ transition: 'r 0.8s ease-in-out' }}
        />

        {/* 달 (고요함) */}
        <circle cx="260" cy="50" r="16" fill="#E8E0C8" opacity="0.85"/>
        <circle cx="268" cy="45" r="13" fill={GC.night} opacity="0.15"/>

        {/* 별 */}
        {[[80,40],[130,25],[200,30],[240,80],[50,90]].map(([x,y],i) => (
          <circle key={i} cx={x} cy={y} r="1.5" fill="white" opacity={0.5 + (i%3)*0.15}
            style={{ animation: `shimmer ${1.5 + i * 0.4}s ease-in-out infinite`, animationDelay:`${i*0.3}s` }}
          />
        ))}

        {/* 호수 반영 (원의 그림자) */}
        <ellipse cx="160" cy={265 + r * 0.2} rx={r * 0.6} ry={r * 0.15}
          fill={skyA} opacity="0.15"
          style={{ transition: 'all 0.8s ease-in-out' }}
        />
      </svg>
    );
  };

  // ── 완료 화면 ─────────────────────────────────────────────
  if (finished) {
    return (
      <div style={{
        flex:1, display:'flex', flexDirection:'column',
        alignItems:'center', justifyContent:'center',
        background:`linear-gradient(160deg, ${GC.nightM}, ${GC.dusty})`,
        padding:32, textAlign:'center', color:'white',
        animation:'fadeUp 0.5s ease',
      }}>
        <div style={{ fontSize:64, marginBottom:16 }}>🌊</div>
        <h2 style={{ fontSize:24, fontWeight:700, marginBottom:10, fontFamily:"'Noto Serif KR', serif" }}>
          호흡 훈련 완료
        </h2>
        <p style={{ fontSize:14, opacity:0.8, lineHeight:1.8, marginBottom:28 }}>
          {cycles}번의 호흡 사이클을 마쳤어요.<br/>
          {GameEngine.formatDuration(sessionSec)} 동안 마음이 고요해졌습니다.
        </p>
        <div style={{
          background:'rgba(255,255,255,0.12)', borderRadius:16,
          padding:'16px 28px', marginBottom:28,
          display:'flex', gap:28,
        }}>
          <div><div style={{ fontSize:24, fontWeight:700 }}>{cycles}회</div><div style={{ fontSize:12, opacity:0.7 }}>완료 사이클</div></div>
          <div style={{ width:1, background:'rgba(255,255,255,0.2)' }}/>
          <div><div style={{ fontSize:24, fontWeight:700 }}>{GameEngine.formatDuration(sessionSec)}</div><div style={{ fontSize:12, opacity:0.7 }}>수련 시간</div></div>
        </div>
        <button onClick={handleFinish}
          style={{ ...gbtn(`linear-gradient(135deg, ${GC.sage}, ${GC.sageL})`), padding:'14px 40px', fontSize:15 }}>
          경험치 받기 →
        </button>
      </div>
    );
  }

  // ── 메인 UI ───────────────────────────────────────────────
  return (
    <div style={{
      flex:1, display:'flex', flexDirection:'column',
      background:`linear-gradient(160deg, ${GC.night}, ${GC.nightM})`,
      position:'relative', overflow:'hidden',
    }}>

      {/* 뒤로 */}
      <button onClick={onBack} style={{
        ...gbtn('rgba(255,255,255,0.1)', 'rgba(255,255,255,0.8)'),
        position:'absolute', top:16, left:16, zIndex:10,
        padding:'7px 14px', fontSize:12, borderRadius:10,
        backdropFilter:'blur(8px)',
      }}>← 뒤로</button>

      {/* 사이클 카운터 */}
      <div style={{
        position:'absolute', top:16, right:16, zIndex:10,
        background:'rgba(255,255,255,0.1)', backdropFilter:'blur(8px)',
        borderRadius:10, padding:'6px 14px',
        color:'rgba(255,255,255,0.8)', fontSize:12, fontWeight:600,
      }}>
        {started ? `${cycles} / ${TOTAL_CYCLES} 사이클` : '숨 쉬는 호수'}
      </div>

      {/* 호수 비주얼 */}
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', padding:'40px 24px 20px' }}>
        <div style={{ width:'100%', maxWidth:320, aspectRatio:'1', position:'relative' }}>
          <LakeSVG />
          {/* 페이즈 텍스트 (원 위) */}
          {started && (
            <div style={{
              position:'absolute', top:'50%', left:'50%',
              transform:'translate(-50%, -50%)',
              textAlign:'center', pointerEvents:'none',
            }}>
              <div style={{
                fontSize:18, fontWeight:700, color:'white',
                fontFamily:"'Noto Serif KR', serif",
                textShadow:'0 2px 8px rgba(0,0,0,0.4)',
                animation:'fadeUp 0.3s ease',
              }}>
                {current.label}
              </div>
              <div style={{ fontSize:28, fontWeight:300, color:'rgba(255,255,255,0.9)', marginTop:4 }}>
                {current.dur - tick}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 페이즈 인디케이터 */}
      {started && (
        <div style={{ display:'flex', justifyContent:'center', gap:8, paddingBottom:12 }}>
          {PHASES.map((p, i) => (
            <div key={p.id} style={{
              height:4, borderRadius:100,
              width: i === phase ? 28 : 16,
              background: i <= phase ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.2)',
              transition: 'all 0.3s ease',
            }}/>
          ))}
        </div>
      )}

      {/* 시작/안내 */}
      <div style={{
        background:'rgba(0,0,0,0.3)', backdropFilter:'blur(12px)',
        padding:'20px 24px', textAlign:'center',
      }}>
        {!started ? (
          <div>
            <p style={{ color:'rgba(255,255,255,0.75)', fontSize:13, lineHeight:1.7, marginBottom:16 }}>
              호수처럼 고요하게.<br/>
              4초 들이마시고 · 4초 참고 · 4초 내쉬어요
            </p>
            <button onClick={handleStart}
              style={{ ...gbtn(`linear-gradient(135deg, ${GC.dusty}, ${GC.dustyL})`), padding:'12px 36px', fontSize:14, borderRadius:12 }}>
              호흡 시작하기
            </button>
          </div>
        ) : (
          <p style={{ color:'rgba(255,255,255,0.6)', fontSize:12 }}>
            눈을 감아도 좋아요 · {TOTAL_CYCLES - cycles}사이클 남았어요
          </p>
        )}
      </div>
    </div>
  );
}


// ════════════════════════════════════════════════════════════
// MODULE B — 생각의 가지치기 (SCT × CBT 인지 교정)
// 부정적 생각 → AI 긍정 확언 변환 → 나무에 꽃 피우기
// ════════════════════════════════════════════════════════════
function CBTModule({ onComplete, onBack }) {
  const { useState, useEffect, useRef } = React;

  const TOTAL_BRANCHES = 3;

  // 시작 프롬프트 — 사용자가 골라서 시작하거나 직접 입력
  const SEED_THOUGHTS = [
    '나는 항상 일을 망친다.',
    '아무도 나를 이해하지 못한다.',
    '나는 쓸모없는 사람이다.',
    '나는 변하지 못할 것이다.',
    '나는 행복할 자격이 없다.',
    '모든 것이 내 탓이다.',
  ];

  const [step, setStep]         = useState('intro');   // intro | input | transform | confirm | done
  const [branches, setBranches] = useState([]);         // 완성된 가지들
  const [current, setCurrent]   = useState({ original:'', transformed:'', editing:false });
  const [inputText, setInputText] = useState('');
  const [aiLoading, setAiLoading] = useState(false);
  const [aiError, setAiError]   = useState('');
  const [sessionSec, setSessionSec] = useState(0);
  const [finished, setFinished] = useState(false);
  const startRef = useRef(Date.now());

  useEffect(() => {
    const timer = setInterval(() => {
      setSessionSec(Math.round((Date.now() - startRef.current) / 1000));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const handleSelectSeed = (text) => {
    setInputText(text);
    setStep('input');
  };

  const handleRequestAI = async () => {
    const text = inputText.trim();
    if (!text || text.length < 3) { setAiError('생각을 더 써주세요'); return; }
    setAiLoading(true); setAiError('');
    try {
      const res = await GameEngine.transformSentence(text);
      if (res.success) {
        setCurrent({ original: text, transformed: res.data.result, editing: false });
        setStep('transform');
      } else {
        setAiError(res.error || 'AI 변환 실패');
      }
    } catch {
      setAiError('연결 오류. 다시 시도해주세요.');
    }
    setAiLoading(false);
  };

  const handleAccept = (transformed) => {
    const newBranch = { original: current.original, transformed };
    setBranches(prev => {
      const next = [...prev, newBranch];
      if (next.length >= TOTAL_BRANCHES) {
        setFinished(true);
        setStep('done');
      } else {
        setInputText('');
        setStep('input');
      }
      return next;
    });
    setCurrent({ original:'', transformed:'', editing:false });
  };

  const handleFinish = async () => {
    const score = branches.length * 40 + Math.min(sessionSec * 0.5, 40);
    try {
      const res = await GameEngine.saveSession({
        gameId:'garden', moduleType:'cbt',
        score: Math.round(score), durationSec: sessionSec,
        metadata: { branches_completed: branches.length, branch_texts: branches.map(b=>b.original) },
      });
      onComplete?.({ score:Math.round(score), expGained:res.data?.expGained||0, leveledUp:res.data?.leveledUp, newAchievements:res.data?.newAchievements||[] });
    } catch {
      onComplete?.({ score:Math.round(score), expGained:0, leveledUp:false, newAchievements:[] });
    }
  };

  // ── 나무 SVG (가지 상태에 따라 꽃이 피어남) ─────────────
  const TreeSVG = ({ branchCount = 0, totalBranches = 3 }) => {
    const FLOWER_POS = [
      { cx:160, cy:72,  r:18 },
      { cx:120, cy:95,  r:14 },
      { cx:198, cy:90,  r:15 },
    ];
    const PETAL_COLORS = ['#F9A8D4','#FCD34D','#86EFAC'];

    return (
      <svg viewBox="0 0 320 220" xmlns="http://www.w3.org/2000/svg" style={{ width:'100%', height:'100%' }}>
        <defs>
          <linearGradient id="trunkGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#8B6B4A"/>
            <stop offset="100%" stopColor="#5A3E28"/>
          </linearGradient>
          <filter id="bloom">
            <feGaussianBlur stdDeviation="2" result="blur"/>
            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* 배경 — 새벽 안개 (시든 상태) 에서 맑음 (개화 상태) */}
        <rect width="320" height="220" fill={branchCount === 0 ? '#D8CFC0' : branchCount === 1 ? '#C8D8B8' : '#B0CCB0'} opacity="0.3"/>

        {/* 지면 */}
        <ellipse cx="160" cy="205" rx="140" ry="20" fill="#7A9A6A" opacity={0.3 + branchCount * 0.15}/>

        {/* 풀 */}
        {branchCount > 0 && [40,80,130,185,235,275].map((x,i)=>(
          <g key={x}>
            <line x1={x} y1="205" x2={x-5} y2={196-i%2*4} stroke="#5A8A4A" strokeWidth="1.5" strokeLinecap="round"/>
            <line x1={x} y1="205" x2={x+4} y2={197-i%3*3} stroke="#5A8A4A" strokeWidth="1.5" strokeLinecap="round"/>
          </g>
        ))}

        {/* 나무 몸통 */}
        <rect x="148" y="148" width="24" height="57" rx="8" fill="url(#trunkGrad)"/>

        {/* 주요 가지 3개 */}
        {/* 왼쪽 가지 */}
        <path d="M 160 170 Q 130 155 110 140" fill="none"
          stroke={branchCount >= 2 ? '#7B5F3A' : '#9A8070'} strokeWidth="6" strokeLinecap="round"
          style={{ transition:'stroke 0.8s' }}/>
        {/* 오른쪽 가지 */}
        <path d="M 160 163 Q 188 150 205 138" fill="none"
          stroke={branchCount >= 3 ? '#7B5F3A' : '#9A8070'} strokeWidth="6" strokeLinecap="round"
          style={{ transition:'stroke 0.8s' }}/>
        {/* 위 가지 */}
        <path d="M 160 155 Q 160 130 160 115" fill="none"
          stroke={branchCount >= 1 ? '#7B5F3A' : '#9A8070'} strokeWidth="7" strokeLinecap="round"
          style={{ transition:'stroke 0.8s' }}/>

        {/* 잎 무리 (배경) */}
        {[{cx:158,cy:115,rx:42,ry:36},{cx:118,cy:132,rx:30,ry:26},{cx:200,cy:128,rx:30,ry:25}].map(({cx,cy,rx,ry},i)=>(
          <ellipse key={i} cx={cx} cy={cy} rx={rx} ry={ry}
            fill={branchCount > i ? '#4A8A3A' : '#8A9A7A'}
            opacity={branchCount > i ? 0.9 : 0.5}
            style={{ transition:'fill 0.8s, opacity 0.8s' }}
          />
        ))}

        {/* 꽃 — 완성된 가지 수만큼 */}
        {FLOWER_POS.slice(0, branchCount).map(({cx,cy,r}, bi) => {
          const pc = PETAL_COLORS[bi % PETAL_COLORS.length];
          return (
            <g key={bi} filter="url(#bloom)" style={{ animation:'fadeUp 0.6s ease' }}>
              {[0,60,120,180,240,300].map(a=>(
                <ellipse key={a}
                  cx={cx + Math.cos(a*Math.PI/180)*(r*0.55)}
                  cy={cy + Math.sin(a*Math.PI/180)*(r*0.55)}
                  rx={r*0.45} ry={r*0.35}
                  fill={pc} opacity="0.92"
                  transform={`rotate(${a}, ${cx + Math.cos(a*Math.PI/180)*(r*0.55)}, ${cy + Math.sin(a*Math.PI/180)*(r*0.55)})`}
                />
              ))}
              <circle cx={cx} cy={cy} r={r*0.3} fill="#FFF8A0"/>
            </g>
          );
        })}

        {/* 나비 (2개 이상 완성 시) */}
        {branchCount >= 2 && (
          <g fill={PETAL_COLORS[0]} opacity="0.8"
            style={{ animation:'float 3s ease-in-out infinite', transformOrigin:'80px 90px' }}>
            <path d="M 80 90 Q 68 82 72 72 Q 80 80 80 90"/>
            <path d="M 80 90 Q 92 82 88 72 Q 80 80 80 90"/>
            <line x1="80" y1="90" x2="80" y2="96" stroke="#8A5A5A" strokeWidth="1"/>
          </g>
        )}

        {/* 완전 개화 시 추가 나비 */}
        {branchCount >= 3 && (
          <g fill={PETAL_COLORS[2]} opacity="0.75"
            style={{ animation:'float 2.5s ease-in-out infinite 0.7s', transformOrigin:'235px 110px' }}>
            <path d="M 235 110 Q 225 103 228 95 Q 235 102 235 110"/>
            <path d="M 235 110 Q 245 103 242 95 Q 235 102 235 110"/>
          </g>
        )}
      </svg>
    );
  };

  // ── 완료 화면 ─────────────────────────────────────────────
  if (step === 'done') {
    return (
      <div style={{
        flex:1, display:'flex', flexDirection:'column',
        background:`linear-gradient(160deg, ${GC.sagePale}, #D4EAD0)`,
        padding:24, animation:'fadeUp 0.5s ease',
      }}>
        <div style={{ height:180 }}><TreeSVG branchCount={TOTAL_BRANCHES}/></div>
        <div style={{ textAlign:'center', marginBottom:24 }}>
          <h2 style={{ fontSize:22, fontWeight:700, color:GC.dark, marginBottom:8, fontFamily:"'Noto Serif KR', serif" }}>
            꽃이 피었습니다 🌸
          </h2>
          <p style={{ fontSize:13, color:GC.muted, lineHeight:1.8 }}>
            {TOTAL_BRANCHES}개의 생각을 새롭게 바꿨어요.<br/>
            이 변화가 마음에 스며들고 있어요.
          </p>
        </div>

        {/* 변환 요약 */}
        <div style={{ flex:1, overflowY:'auto', display:'flex', flexDirection:'column', gap:10, marginBottom:20 }}>
          {branches.map((b, i) => (
            <div key={i} style={{
              background:'white', borderRadius:14, padding:'14px 16px',
              boxShadow:'0 2px 8px rgba(0,0,0,0.06)',
            }}>
              <div style={{ fontSize:11, fontWeight:700, color:GC.muted, marginBottom:5 }}>이전 생각</div>
              <div style={{ fontSize:13, color:GC.muted, marginBottom:8, textDecoration:'line-through' }}>{b.original}</div>
              <div style={{ fontSize:11, fontWeight:700, color:GC.sage, marginBottom:5 }}>새로운 생각 ✓</div>
              <div style={{ fontSize:13, color:GC.dark, fontWeight:500, lineHeight:1.6 }}>{b.transformed}</div>
            </div>
          ))}
        </div>

        <button onClick={handleFinish}
          style={{ ...gbtn(`linear-gradient(135deg, ${GC.sage}, ${GC.sageL})`), padding:'14px', fontSize:15, textAlign:'center' }}>
          경험치 받기 →
        </button>
      </div>
    );
  }

  // ── 메인 UI ───────────────────────────────────────────────
  return (
    <div style={{
      flex:1, display:'flex', flexDirection:'column',
      background:`linear-gradient(160deg, #F0EDE5, ${GC.cream})`,
      overflow:'hidden',
    }}>

      {/* 헤더 */}
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'12px 16px',
        background:'rgba(255,255,255,0.7)', backdropFilter:'blur(8px)',
        borderBottom:'1px solid rgba(0,0,0,0.06)',
      }}>
        <button onClick={onBack} style={{
          ...gbtn('rgba(0,0,0,0.06)', GC.muted, { borderRadius:9 }),
          padding:'6px 14px', fontSize:12,
        }}>← 뒤로</button>
        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
          {Array.from({length: TOTAL_BRANCHES}).map((_,i) => (
            <div key={i} style={{
              width:10, height:10, borderRadius:'50%',
              background: i < branches.length ? GC.sage : 'rgba(0,0,0,0.12)',
              transition:'background 0.4s',
            }}/>
          ))}
        </div>
        <div style={{ fontSize:11, color:GC.muted, fontWeight:600 }}>
          {branches.length}/{TOTAL_BRANCHES} 완성
        </div>
      </div>

      {/* 나무 비주얼 */}
      <div style={{ height:190, padding:'0 24px', flexShrink:0 }}>
        <TreeSVG branchCount={branches.length}/>
      </div>

      {/* 스크롤 콘텐츠 */}
      <div style={{ flex:1, overflowY:'auto', padding:'0 20px 24px' }}>

        {/* 인트로 */}
        {step === 'intro' && (
          <div style={{ animation:'fadeUp 0.4s ease' }}>
            <h2 style={{ fontSize:18, fontWeight:700, color:GC.dark, marginBottom:8, fontFamily:"'Noto Serif KR', serif" }}>
              생각의 가지치기
            </h2>
            <p style={{ fontSize:13, color:GC.muted, lineHeight:1.75, marginBottom:20 }}>
              마음속 부정적인 생각을 하나씩 꺼내어<br/>
              새로운 시선으로 바라봐요.<br/>
              {TOTAL_BRANCHES}개의 가지에 꽃을 피워보세요.
            </p>
            <div style={{ fontSize:12, fontWeight:700, color:GC.muted, marginBottom:10 }}>자주 드는 생각을 선택하거나</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:20 }}>
              {SEED_THOUGHTS.slice(0,4).map(t => (
                <button key={t} onClick={() => handleSelectSeed(t)}
                  style={{
                    ...gbtn('rgba(255,255,255,0.8)', GC.dark, { fontWeight:400, textAlign:'left', borderRadius:12 }),
                    padding:'11px 14px', fontSize:13, lineHeight:1.5,
                    border:'1px solid rgba(0,0,0,0.08)',
                    boxShadow:'0 1px 4px rgba(0,0,0,0.05)',
                  }}>
                  "{t}"
                </button>
              ))}
            </div>
            <button onClick={() => { setInputText(''); setStep('input'); }}
              style={{ ...gbtn(GC.sagePale, GC.sage, { borderRadius:12 }), padding:'10px 20px', fontSize:13, width:'100%' }}>
              직접 입력하기
            </button>
          </div>
        )}

        {/* 입력 */}
        {step === 'input' && (
          <div style={{ animation:'fadeUp 0.4s ease' }}>
            <div style={{ fontSize:13, fontWeight:700, color:GC.dark, marginBottom:6 }}>
              {branches.length + 1}번째 생각
            </div>
            <p style={{ fontSize:12, color:GC.muted, marginBottom:14 }}>
              지금 마음속에 자주 떠오르는 부정적인 생각을 솔직하게 써주세요.
            </p>
            <textarea
              value={inputText}
              onChange={e => setInputText(e.target.value)}
              placeholder="예) 나는 늘 혼자인 것 같다."
              rows={3}
              style={{
                width:'100%', padding:'13px 14px',
                border:`1.5px solid ${GC.sage}44`, borderRadius:12,
                fontSize:14, fontFamily:"'Noto Sans KR', sans-serif",
                outline:'none', resize:'none', lineHeight:1.65,
                background:'rgba(255,255,255,0.9)',
                color:GC.dark, marginBottom:12,
              }}
              onFocus={e => e.target.style.borderColor = GC.sage}
              onBlur={e => e.target.style.borderColor = `${GC.sage}44`}
            />
            {aiError && (
              <div style={{ fontSize:12, color:'#C05050', marginBottom:10 }}>{aiError}</div>
            )}
            <div style={{ display:'flex', gap:9 }}>
              <button onClick={() => setStep('intro')}
                style={{ ...gbtn('rgba(0,0,0,0.07)', GC.muted, { borderRadius:12, flex:1 }), padding:'11px' }}>
                다시 선택
              </button>
              <button onClick={handleRequestAI} disabled={aiLoading || !inputText.trim()}
                style={{
                  ...gbtn(
                    aiLoading || !inputText.trim() ? 'rgba(0,0,0,0.1)' : `linear-gradient(135deg, ${GC.sage}, ${GC.sageL})`,
                    aiLoading || !inputText.trim() ? GC.muted : 'white',
                    { borderRadius:12, flex:2 }
                  ), padding:'11px',
                }}>
                {aiLoading ? '변환 중...' : '🌱 AI로 새롭게 보기'}
              </button>
            </div>
          </div>
        )}

        {/* AI 변환 결과 */}
        {step === 'transform' && (
          <div style={{ animation:'fadeUp 0.4s ease' }}>
            {/* 이전 생각 */}
            <div style={{
              background:'rgba(0,0,0,0.05)', borderRadius:12,
              padding:'12px 14px', marginBottom:14,
              borderLeft:`3px solid ${GC.muted}`,
            }}>
              <div style={{ fontSize:11, fontWeight:700, color:GC.muted, marginBottom:5 }}>이전 생각</div>
              <div style={{ fontSize:13, color:GC.muted, lineHeight:1.6, textDecoration:'line-through' }}>
                {current.original}
              </div>
            </div>

            {/* 새로운 생각 */}
            <div style={{
              background:`${GC.sagePale}CC`, borderRadius:12,
              padding:'14px', marginBottom:16,
              border:`1.5px solid ${GC.sage}44`,
            }}>
              <div style={{ fontSize:11, fontWeight:700, color:GC.sage, marginBottom:8 }}>
                🌸 새로운 시선
              </div>
              {current.editing ? (
                <textarea
                  value={current.transformed}
                  onChange={e => setCurrent(c => ({...c, transformed:e.target.value}))}
                  rows={3}
                  style={{
                    width:'100%', padding:'10px', border:`1px solid ${GC.sage}66`,
                    borderRadius:9, fontSize:13, fontFamily:"'Noto Sans KR', sans-serif",
                    outline:'none', resize:'none', lineHeight:1.65,
                    background:'white', color:GC.dark,
                  }}
                />
              ) : (
                <div style={{ fontSize:14, color:GC.dark, lineHeight:1.75, fontWeight:500 }}>
                  {current.transformed}
                </div>
              )}
            </div>

            <div style={{ display:'flex', gap:9, marginBottom:10 }}>
              <button onClick={() => setCurrent(c => ({...c, editing:!c.editing}))}
                style={{ ...gbtn('rgba(0,0,0,0.07)', GC.muted, { borderRadius:12, flex:1 }), padding:'10px', fontSize:12 }}>
                {current.editing ? '완료' : '✏️ 수정'}
              </button>
              <button onClick={() => { setStep('input'); setAiError(''); }}
                style={{ ...gbtn(GC.sand, GC.muted, { borderRadius:12, flex:1, border:`1px solid rgba(0,0,0,0.08)` }), padding:'10px', fontSize:12 }}>
                다시 쓰기
              </button>
            </div>

            {/* 수용 버튼 */}
            <button onClick={() => handleAccept(current.transformed)}
              style={{
                ...gbtn(`linear-gradient(135deg, ${GC.sage}, ${GC.sageL})`),
                width:'100%', padding:'14px', fontSize:14,
                borderRadius:14, boxShadow:`0 4px 16px ${GC.sage}40`,
              }}>
              이 생각을 받아들이기 🌸
            </button>

            {/* 완성된 가지 요약 (있을 때) */}
            {branches.length > 0 && (
              <div style={{ marginTop:14 }}>
                <div style={{ fontSize:11, fontWeight:700, color:GC.muted, marginBottom:6 }}>완성된 가지</div>
                {branches.map((b, i) => (
                  <div key={i} style={{ fontSize:12, color:GC.sage, marginBottom:4, paddingLeft:8, borderLeft:`2px solid ${GC.sageL}` }}>
                    {b.transformed}
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}


// ════════════════════════════════════════════════════════════
// GardenGame — 마음의 정원 메인 (모듈 선택 + 실행 + 완료)
// ════════════════════════════════════════════════════════════
function GardenGame({ onExit }) {
  const { useState } = React;

  const [screen, setScreen]   = useState('select');  // select | breathing | cbt | result
  const [result, setResult]   = useState(null);

  const MODULES = [
    {
      id:      'breathing',
      name:    '숨 쉬는 호수',
      emoji:   '💧',
      desc:    '4-4-4 박스 호흡으로 몸과 마음을 고요하게',
      duration:'약 5분',
      tags:    ['이완', '스트레스'],
      color:   GC.dusty,
      colorL:  GC.dustyL,
      bgFrom:  '#1A2A3A',
      bgTo:    '#2A3F55',
    },
    {
      id:      'cbt',
      name:    '생각의 가지치기',
      emoji:   '🌱',
      desc:    '부정적인 생각을 AI와 함께 긍정 확언으로 변환',
      duration:'약 7~10분',
      tags:    ['인지교정', 'CBT'],
      color:   GC.sage,
      colorL:  GC.sageL,
      bgFrom:  '#F0EDE5',
      bgTo:    GC.cream,
    },
  ];

  const handleModuleComplete = (res) => {
    setResult(res);
    setScreen('result');
  };

  // ── 모듈 선택 화면 ──────────────────────────────────────
  if (screen === 'select') {
    return (
      <div style={{
        flex:1, display:'flex', flexDirection:'column',
        background:`linear-gradient(160deg, ${GC.sagePale}, ${GC.cream})`,
      }}>
        {/* 헤더 */}
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          padding:'14px 18px',
          background:'rgba(255,255,255,0.75)', backdropFilter:'blur(10px)',
          borderBottom:'1px solid rgba(0,0,0,0.06)',
        }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ fontSize:20 }}>🌿</span>
            <span style={{ fontSize:15, fontWeight:700, color:GC.dark, fontFamily:"'Noto Serif KR', serif" }}>마음의 정원</span>
          </div>
          <button onClick={onExit}
            style={{ ...gbtn('rgba(0,0,0,0.06)', GC.muted, { borderRadius:9 }), padding:'6px 13px', fontSize:12 }}>
            허브로 →
          </button>
        </div>

        <div style={{ flex:1, padding:'24px 20px', overflowY:'auto' }}>
          {/* 오늘의 안내 */}
          <div style={{
            background:'rgba(255,255,255,0.7)', borderRadius:18, padding:'16px 18px',
            marginBottom:22, backdropFilter:'blur(8px)',
            border:'1px solid rgba(255,255,255,0.6)',
          }}>
            <div style={{ fontSize:12, fontWeight:700, color:GC.muted, marginBottom:5 }}>오늘의 정원</div>
            <div style={{ fontSize:15, color:GC.dark, fontWeight:500 }}>
              어떤 훈련을 해볼까요?
            </div>
            <div style={{ fontSize:12, color:GC.muted, marginTop:4, lineHeight:1.6 }}>
              호흡으로 몸을 안정시키거나,<br/>
              생각을 새롭게 가꿔보세요.
            </div>
          </div>

          {/* 모듈 카드 */}
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            {MODULES.map(m => (
              <button key={m.id} onClick={() => setScreen(m.id)}
                style={{
                  ...gbtn('transparent', GC.dark, { textAlign:'left', borderRadius:20 }),
                  padding:0, overflow:'hidden',
                  boxShadow:'0 4px 20px rgba(0,0,0,0.08)',
                  border:`1px solid rgba(255,255,255,0.7)`,
                }}>
                {/* 모듈 상단 컬러 밴드 */}
                <div style={{
                  height:6,
                  background:`linear-gradient(90deg, ${m.color}, ${m.colorL})`,
                }}/>
                <div style={{ padding:'18px 18px 16px', background:'rgba(255,255,255,0.85)' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                    <span style={{ fontSize:32, lineHeight:1 }}>{m.emoji}</span>
                    <div>
                      <div style={{ fontSize:16, fontWeight:700, color:GC.dark }}>{m.name}</div>
                      <div style={{ fontSize:11, color:m.color, fontWeight:600 }}>{m.duration}</div>
                    </div>
                  </div>
                  <div style={{ fontSize:13, color:GC.muted, lineHeight:1.6, marginBottom:10 }}>{m.desc}</div>
                  <div style={{ display:'flex', gap:6 }}>
                    {m.tags.map(t => (
                      <span key={t} style={{
                        fontSize:10, padding:'2px 9px', borderRadius:100,
                        background:`${m.color}18`, color:m.color, fontWeight:600,
                      }}>{t}</span>
                    ))}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // ── 결과 화면 ────────────────────────────────────────────
  if (screen === 'result') {
    const r = result || {};
    return (
      <div style={{
        flex:1, display:'flex', flexDirection:'column', alignItems:'center',
        justifyContent:'center', padding:28, textAlign:'center',
        background:`linear-gradient(160deg, ${GC.sagePale}, #D4EAD0)`,
        animation:'fadeUp 0.5s ease',
      }}>
        <div style={{ fontSize:72, marginBottom:16 }}>
          {r.leveledUp ? '🎉' : '🌿'}
        </div>
        <h2 style={{ fontSize:22, fontWeight:700, color:GC.dark, marginBottom:10, fontFamily:"'Noto Serif KR', serif" }}>
          {r.leveledUp ? '레벨 업!' : '오늘도 수고했어요'}
        </h2>
        <div style={{
          background:'white', borderRadius:18, padding:'20px 32px',
          boxShadow:'0 4px 20px rgba(0,0,0,0.08)', marginBottom:24,
          display:'flex', gap:28,
        }}>
          <div>
            <div style={{ fontSize:26, fontWeight:700, color:GC.sage }}>+{r.expGained}</div>
            <div style={{ fontSize:12, color:GC.muted }}>경험치</div>
          </div>
          {r.newAchievements?.length > 0 && (
            <>
              <div style={{ width:1, background:'rgba(0,0,0,0.08)' }}/>
              <div>
                <div style={{ fontSize:26, fontWeight:700, color:GC.amber }}>
                  {r.newAchievements.map(id => GameEngine.getAchievementInfo(id).emoji).join('')}
                </div>
                <div style={{ fontSize:12, color:GC.muted }}>새 업적</div>
              </div>
            </>
          )}
        </div>

        {r.newAchievements?.length > 0 && (
          <div style={{
            background:`${GC.amberL}33`, borderRadius:12, padding:'10px 20px',
            marginBottom:20,
          }}>
            {r.newAchievements.map(id => {
              const a = GameEngine.getAchievementInfo(id);
              return (
                <div key={id} style={{ fontSize:13, color:GC.amber, fontWeight:600 }}>
                  {a.emoji} {a.name} 달성!
                </div>
              );
            })}
          </div>
        )}

        <div style={{ display:'flex', gap:10, width:'100%', maxWidth:280 }}>
          <button onClick={() => setScreen('select')}
            style={{ ...gbtn(GC.sagePale, GC.sage, { borderRadius:13, flex:1 }), padding:'12px', fontSize:13 }}>
            한 번 더
          </button>
          <button onClick={onExit}
            style={{
              ...gbtn(`linear-gradient(135deg, ${GC.sage}, ${GC.sageL})`),
              flex:2, padding:'12px', fontSize:13, borderRadius:13,
            }}>
            허브로 →
          </button>
        </div>
      </div>
    );
  }

  // ── 게임 모듈 실행 ───────────────────────────────────────
  return (
    <div style={{ flex:1, display:'flex', flexDirection:'column' }}>
      {screen === 'breathing' && (
        <BreathingModule
          onComplete={handleModuleComplete}
          onBack={() => setScreen('select')}
        />
      )}
      {screen === 'cbt' && (
        <CBTModule
          onComplete={handleModuleComplete}
          onBack={() => setScreen('select')}
        />
      )}
    </div>
  );
}