/* ============================================================================
 * service.jsx — 증상별 독립 사이트 랜딩 (LIGHT · 동물 마스코트 · 통일 시스템)
 *   window.ServicePage({ botKey })
 *   상단: 회사 아이콘 + <Sub>Catcher · Home/TrackCatcher/Company · About/Contact/KO·EN/Admin
 *   본문: 증상 카피 + 동물 마스코트 배지 + 트래커 카드 + 밝은 배경
 *   의존: bots.jsx, service-mascots.jsx, service-backdrops.jsx, service-tracker.jsx
 * ========================================================================== */

const SVC_FONT = '"Pretendard","Inter",-apple-system,system-ui,sans-serif';
const SVC_ALLHOME = 'https://agedlearning.com';
const SVC_TRACKHOME = 'index.html';
const SVC_INK = '#2a2018';
const SVC_SUB = '#6b5d50';
const SVC_SERIF = '"Newsreader","Georgia","Times New Roman",serif';
// 채도 낮춘 권위 있는 증상 색
const SVC_BRIGHT = {
  depression: '#d99a3a', anxiety: '#5fa06a', sleep: '#5d54c0', burnout: '#bf5533',
  ptsd: '#6a6fb0', ocd: '#3f8f86', bipolar: '#b0548f', autism: '#2f9ec4',
  adhd: '#e8702a', learning: '#4f7fc0', peak: '#c43b6e',
};

const SVC = {
  depression: { animal: { en: 'Bear', ko: '곰' }, en: { ha: 'On the heavy days,', hb: "you're not alone.", sub: 'Track how you feel, take tiny steps, and stay steady — every single day.', chips: ['Daily mood tracking', 'Care plan'] },
                ko: { ha: '가라앉는 날에도,', hb: '혼자가 아니에요.', sub: '매일 기분을 트래킹하고, 작은 행동으로 꾸준히 관리해요.', chips: ['일일 기분 트래킹', '케어 플랜'] } },
  anxiety:    { animal: { en: 'Rabbit', ko: '토끼' }, en: { ha: 'When worry spikes,', hb: 'start with the breath.', sub: 'Track your anxiety and ground each moment with guided care.', chips: ['Anxiety tracking', 'Breathing care'] },
                ko: { ha: '불안이 커질 때,', hb: '호흡부터 천천히.', sub: '불안을 트래킹하고, 가이드와 함께 매 순간을 관리해요.', chips: ['불안 트래킹', '호흡 케어'] } },
  sleep:      { animal: { en: 'Koala', ko: '코알라' }, en: { ha: 'For the nights', hb: "you can't sleep.", sub: 'Track your sleep and build a calmer wind-down, night after night.', chips: ['Sleep tracking', 'Wind-down plan'] },
                ko: { ha: '잠 못 드는', hb: '밤을 부드럽게.', sub: '수면을 트래킹하고, 차분한 루틴으로 매일 밤을 관리해요.', chips: ['수면 트래킹', '수면 루틴'] } },
  burnout:    { animal: { en: 'Panda', ko: '판다' }, en: { ha: 'Before you burn', hb: 'all the way out.', sub: 'Track your energy, catch early signs, and build recovery into your week.', chips: ['Energy tracking', 'Recovery plan'] },
                ko: { ha: '다 타버리기', hb: '전에, 쉬어가요.', sub: '에너지를 트래킹하고, 신호를 일찍 잡아 회복을 관리해요.', chips: ['에너지 트래킹', '회복 플랜'] } },
  ptsd:       { animal: { en: 'Turtle', ko: '거북' }, en: { ha: 'Safely, slowly,', hb: 'getting steadier.', sub: 'Track symptoms and process safely, at your own steady pace.', chips: ['Symptom tracking', 'Safe pacing'] },
                ko: { ha: '안전하게,', hb: '천천히 단단해져요.', sub: '증상을 트래킹하고, 안전하게 내 속도로 관리해요.', chips: ['증상 트래킹', '안전한 속도'] } },
  ocd:        { animal: { en: 'Cat', ko: '고양이' }, en: { ha: 'Loosening the loops,', hb: 'one by one.', sub: 'Track the loops and ease the cycle, one gentle step at a time.', chips: ['Loop tracking', 'Step-down plan'] },
                ko: { ha: '반복의 고리를,', hb: '하나씩 풀어요.', sub: '고리를 트래킹하고, 한 단계씩 부드럽게 관리해요.', chips: ['고리 트래킹', '단계적 완화'] } },
  bipolar:    { animal: { en: 'Fox', ko: '여우' }, en: { ha: 'Through highs and lows,', hb: 'finding balance.', sub: 'Track your rhythm and steady the swing with a daily routine.', chips: ['Mood rhythm tracking', 'Routine plan'] },
                ko: { ha: '오르내림 속에서,', hb: '균형을 잡아요.', sub: '기분 리듬을 트래킹하고, 루틴으로 흔들림을 관리해요.', chips: ['기분 리듬 트래킹', '루틴 플랜'] } },
  autism:     { animal: { en: 'Owl', ko: '부엉이' }, en: { ha: 'Your own way,', hb: 'clearly.', sub: 'Track your patterns with clear, predictable, sensory-aware care.', chips: ['Pattern tracking', 'Sensory plan'] },
                ko: { ha: '내 방식대로,', hb: '또렷하게.', sub: '패턴을 트래킹하고, 또렷하고 예측 가능하게 관리해요.', chips: ['패턴 트래킹', '감각 플랜'] } },
  adhd:       { animal: { en: 'Squirrel', ko: '다람쥐' }, en: { ha: 'Scattered focus,', hb: 'gathered in.', sub: 'Track focus and start with tiny plans that actually move you.', chips: ['Focus tracking', 'Tiny plans'] },
                ko: { ha: '흩어진 집중을,', hb: '한곳으로.', sub: '집중을 트래킹하고, 작은 계획으로 진짜 시작하게 관리해요.', chips: ['집중 트래킹', '작은 계획'] } },
  learning:   { animal: { en: 'Monkey', ko: '원숭이' }, en: { ha: 'Through the hard parts,', hb: 'one step at a time.', sub: 'Track progress, plan your study, and understand step by step.', chips: ['Progress tracking', 'Study plan'] },
                ko: { ha: '막막한 공부,', hb: '한 걸음씩.', sub: '학습을 트래킹하고, 계획을 세워 한 걸음씩 관리해요.', chips: ['학습 트래킹', '학습 플랜'] } },
  peak:       { animal: { en: 'Tiger', ko: '호랑이' }, en: { ha: 'Tuning you', hb: 'to your peak.', sub: 'Track performance and tune your routines for your best days.', chips: ['Performance tracking', 'Peak routine'] },
                ko: { ha: '오늘의 컨디션을', hb: '최고로.', sub: '수행을 트래킹하고, 루틴을 다듬어 최고의 컨디션으로 관리해요.', chips: ['집중 모드', '피크 루틴'] } },
};

function SvcLogo({ color, size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 96 96" style={{ display: 'block' }}>
      <circle cx="48" cy="48" r="48" fill={color} />
      <g fill="#fff">
        <circle cx="40" cy="40" r="7" />
        <circle cx="64" cy="32" r="5.5" />
      </g>
      <g fill="none" stroke="#fff" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M40 49 v15" />
        <path d="M40 64 l-8 13 M40 64 l8 13" />
        <path d="M40 53 l18 -16" />
      </g>
    </svg>
  );
}

function ServiceTopbar({ botKey, bot, accent, lang, setLang }) {
  const ghost = (label, href) => (
    <a href={href}
      onMouseEnter={(e) => { e.currentTarget.style.color = SVC_INK; e.currentTarget.style.background = `${accent}1e`; }}
      onMouseLeave={(e) => { e.currentTarget.style.color = SVC_SUB; e.currentTarget.style.background = 'transparent'; }}
      style={{ display: 'inline-flex', alignItems: 'center', padding: '7px 12px', borderRadius: 999,
        fontFamily: SVC_FONT, fontSize: 12.5, fontWeight: 700, color: SVC_SUB,
        textDecoration: 'none', transition: 'all 0.15s', whiteSpace: 'nowrap' }}>{label}</a>
  );
  return (
    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 64, zIndex: 10,
      display: 'flex', alignItems: 'center', padding: '0 26px', fontFamily: SVC_FONT }}>
      <a href={SVC_ALLHOME} style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', marginRight: 20 }}>
        <SvcLogo color={accent} size={30} />
        <span style={{ width: 1, height: 18, background: 'rgba(0,0,0,0.14)' }} />
        <span style={{ fontSize: 15, fontWeight: 800, color: SVC_INK, letterSpacing: '-0.01em' }}>{bot.sub}Catcher</span>
      </a>
      <div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
        {ghost(lang === 'en' ? 'Home' : '홈', botKey + '.html')}
        {ghost('TrackCatcher', SVC_TRACKHOME)}
        {ghost(lang === 'en' ? 'Company' : '회사', SVC_ALLHOME)}
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 4, alignItems: 'center' }}>
        {ghost(lang === 'en' ? 'About' : '소개', '#about')}
        {ghost(lang === 'en' ? 'Contact' : '문의', '#contact')}
        <span style={{ width: 1, height: 14, background: 'rgba(0,0,0,0.14)', margin: '0 6px' }} />
        <div style={{ display: 'flex', padding: 2, borderRadius: 999,
          background: '#fff', border: '1px solid rgba(0,0,0,0.12)' }}>
          {['KO', 'EN'].map((L) => (
            <button key={L} onClick={() => setLang(L.toLowerCase())}
              style={{ padding: '3px 8px', borderRadius: 999, border: 0, cursor: 'pointer',
                background: lang === L.toLowerCase() ? accent : 'transparent',
                color: lang === L.toLowerCase() ? '#fff' : SVC_SUB,
                fontFamily: SVC_FONT, fontWeight: 800, fontSize: 10 }}>{L}</button>
          ))}
        </div>
        <a href={botKey + '-admin.html'}
          onMouseEnter={(e) => { e.currentTarget.style.background = `${accent}1e`; e.currentTarget.style.color = SVC_INK; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = SVC_SUB; }}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 12px', borderRadius: 999,
            background: '#fff', border: '1px solid rgba(0,0,0,0.12)',
            fontFamily: SVC_FONT, fontSize: 11.5, fontWeight: 700, color: SVC_SUB,
            textDecoration: 'none', transition: 'all 0.15s' }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: accent }} />
          {lang === 'en' ? 'Admin' : '관리자'}
        </a>
      </div>
    </div>
  );
}

function SvcTherapist({ accent, size = 240 }) {
  const SKIN = '#e8c6a4', COAT = '#fdfdfb', INKL = '#d8cab2', HAIR = '#a99f93';
  return (
    <svg width={size} height={size * 1.08} viewBox="0 0 150 162" style={{ display: 'block', overflow: 'visible' }}>
      {/* 왼쪽으로 꽃을 건네는 팔 */}
      <path d="M70 108 Q44 106 22 116" fill="none" stroke={COAT} strokeWidth="15" strokeLinecap="round" />
      <path d="M70 108 Q44 106 22 116" fill="none" stroke={INKL} strokeWidth="1" opacity="0.5" />
      <circle cx="21" cy="117" r="7" fill={SKIN} stroke="#caa27e" strokeWidth="0.9" />
      {/* 가운 (깔끔한 어깨) */}
      <path d="M38 162 Q40 116 64 104 L74 99 Q75 109 82 99 L92 104 Q116 116 118 162 Z" fill={COAT} stroke={INKL} strokeWidth="1.4" strokeLinejoin="round" />
      <path d="M74 99 L78 120 M82 99 L78 120" fill="none" stroke={INKL} strokeWidth="1.2" />
      {/* 청진기 (권위 · 심플) */}
      <path d="M68 100 Q66 124 78 130 Q90 124 88 100" fill="none" stroke={accent} strokeWidth="2.4" strokeLinecap="round" />
      <circle cx="78" cy="133" r="5" fill={accent} />
      {/* 목 */}
      <path d="M70 90 h14 v10 q-7 4 -14 0Z" fill="#d6b08c" />
      {/* 얼굴 — 단순한 둥근 사각 */}
      <rect x="56" y="38" width="42" height="52" rx="20" fill={SKIN} stroke="#caa27e" strokeWidth="1" />
      <circle cx="97" cy="64" r="3.5" fill={SKIN} />
      {/* 머리 — 단정한 회색 (심플) */}
      <path d="M54 50 Q54 32 77 32 Q100 32 100 50 Q92 42 77 42 Q62 42 54 50Z" fill={HAIR} />
      {/* 눈 · 차분한 눈썹 · 미소 (최소) */}
      <path d="M64 56 h6 M84 56 h6" stroke="#7a6a58" strokeWidth="1.6" strokeLinecap="round" />
      <g fill="#3a2e26"><circle cx="67" cy="62" r="2" /><circle cx="87" cy="62" r="2" /></g>
      <path d="M70 75 Q77 79 84 75" stroke="#9a7558" strokeWidth="1.8" fill="none" strokeLinecap="round" />
    </svg>
  );
}

function SvcHero({ botKey, accent, lang }) {
  const Mascot = window.SvcMascot;
  const BOTS = window.BOTS || [];
  const bot = BOTS.find((b) => b.key === botKey) || {};
  const DISC = 392;
  return (
    <div style={{ position: 'absolute', right: 150, top: '50%', transform: 'translateY(-50%)',
      width: DISC, height: 500, zIndex: 5 }}>
      <div style={{ width: '100%', height: '100%',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        animation: 'svcFloat 7s ease-in-out infinite' }}>
      {/* 원형 무대 — 의사 + 꽃 함께 (통일) */}
      <div style={{ position: 'relative', width: DISC, height: DISC, flexShrink: 0, borderRadius: '50%',
        background: `radial-gradient(circle at 50% 44%, ${accent}22 0%, ${accent}12 46%, ${accent}07 64%, transparent 73%)` }}>
        <div style={{ position: 'absolute', inset: 30, borderRadius: '50%', border: `1px solid ${accent}30` }} />
        <div style={{ position: 'absolute', right: 26, top: 72, zIndex: 5 }}>
          <SvcTherapist accent={accent} size={224} />
        </div>
        <div style={{ position: 'absolute', left: 40, top: 118, zIndex: 6,
          filter: `drop-shadow(0 14px 26px ${accent}40)` }}>
          {Mascot && <Mascot k={botKey} size={162} />}
        </div>
      </div>
      {/* 이름 — 대문자·자간 산세리프 + 꽃 색 (세리프 헤드라인과 구별, unique) */}
      <div style={{ marginTop: -50, textAlign: 'center', zIndex: 7 }}>
        <div style={{ fontFamily: SVC_FONT, fontSize: 42, fontWeight: 800, color: accent,
          letterSpacing: '0.04em', lineHeight: 0.95, textTransform: 'uppercase' }}>{bot.sub}</div>
        <div style={{ fontFamily: SVC_FONT, fontSize: 14, fontWeight: 700, color: accent,
          letterSpacing: '0.42em', textTransform: 'uppercase', marginTop: 6, opacity: 0.75,
          paddingLeft: '0.42em' }}>Catcher</div>
      </div>
      </div>
    </div>
  );
}

function ServicePage({ botKey, full = false }) {
  // 한영토글 = bnm-lang-sync 표준 (절대규칙). React state는 body[data-lang]를 따라감.
  const __readLang = () => (document.body && document.body.dataset.lang) || 'en';
  const BOTS = window.BOTS || [];
  const idx = Math.max(0, BOTS.findIndex((b) => b.key === botKey));
  const bot = BOTS[idx] || {};
  const accent = SVC_BRIGHT[botKey] || bot.color || '#5a8acc';
  const [lang, setLangState] = React.useState(__readLang);
  const setLang = (l) => { if (window.bnmSetLang) window.bnmSetLang(l); else setLangState(l); };
  React.useEffect(() => {
    const sync = () => setLangState(__readLang());
    sync();
    const mo = new MutationObserver(sync);
    mo.observe(document.body, { attributes: true, attributeFilter: ['data-lang'] });
    return () => mo.disconnect();
  }, []);
  const cfg = SVC[botKey] || SVC.depression;
  const c = cfg[lang];
  const fl = (window.SVC_FLOWER || {})[botKey] || {};

  const chip = (t, i) => (
    <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px', borderRadius: 999, background: '#ffffff',
      border: `1px solid ${accent}55`, boxShadow: '0 2px 8px rgba(120,90,50,0.08)',
      fontSize: 12, fontWeight: 600, color: SVC_INK, whiteSpace: 'nowrap' }}>
      <span style={{ width: 5, height: 5, borderRadius: 999, background: accent }} />{t}
    </span>
  );

  return (
    <div style={{ width: '100%', height: full ? 'auto' : '100%', background: '#fdf3ea', fontFamily: SVC_FONT }}>
    <div style={{ width: '100%', height: full ? 900 : '100%', position: 'relative', overflow: 'hidden',
      background: '#fdf3ea', fontFamily: SVC_FONT }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap');
        @keyframes svcFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
        @keyframes svcGlow { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:.7;transform:scale(1.04)} }
        @keyframes svcSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
        @keyframes aromaDrift { from{stroke-dashoffset:0} to{stroke-dashoffset:-180} }
        @keyframes aromaFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-14px,-8px)} }
        @keyframes aromaRise { from{stroke-dashoffset:0} to{stroke-dashoffset:-180} }
        @keyframes aromaRise2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-8px,-14px)} }
        @keyframes aromaReach { from{stroke-dashoffset:0} to{stroke-dashoffset:-180} }
        @keyframes aromaReach2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-12px,-8px)} }
        @keyframes aromaWisp { 0%,100%{transform:translate(0,0); opacity:.5} 50%{transform:translate(-22px,-12px); opacity:.85} }
      `}</style>

      {window.ServiceBackdrop && <window.ServiceBackdrop botKey={botKey} accent={accent} />}

      {/* 꽃향기 — 꽃에서 왼쪽 카피로 은은하게 퍼지는 흐름 (색 있는 버전) */}
      <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 1, pointerEvents: 'none' }}>
        <defs>
          <linearGradient id={`aroma-${botKey}`} x1="758" y1="430" x2="576" y2="322" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.95" />
            <stop offset="34%" stopColor={accent} stopOpacity="0.5" />
            <stop offset="100%" stopColor={accent} stopOpacity="0.12" />
          </linearGradient>
          <radialGradient id={`aromaP-${botKey}`} cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.98" />
            <stop offset="50%" stopColor={accent} stopOpacity="0.5" />
            <stop offset="100%" stopColor={accent} stopOpacity="0" />
          </radialGradient>
          <filter id={`aromaBlur-${botKey}`} x="-40%" y="-40%" width="180%" height="180%">
            <feGaussianBlur stdDeviation="1.1" />
          </filter>
        </defs>
        {/* 향기 — 꽃에서 앞쪽 대상(왼쪽 카피)을 향해 다가감, 글씨 옮에서 멈춤 */}
        {[0, 1, 2].map((i) => (
          <path key={i}
            d={`M${756 - i * 4} ${432 - i * 2} C ${700 - i * 6} ${406 - i * 8} ${648 - i * 6} ${372 - i * 8} ${600 - i * 6} ${346 - i * 8} S ${592 - i * 6} ${330 - i * 8} ${574 - i * 6} ${320 - i * 8}`}
            fill="none" stroke={`url(#aroma-${botKey})`} strokeWidth={2.6 - i * 0.4}
            strokeLinecap="round" strokeDasharray="2 16" filter={`url(#aromaBlur-${botKey})`}
            style={{ animation: `aromaReach ${9 + i * 2}s linear infinite`, animationDelay: `${i * 1.4}s` }} />
        ))}
        {/* 피어나는 향기 입자 — 꽃에서 카피 옆까지 (x>=574, 글씨 안 걹침) */}
        {[[748, 424, 3.6], [718, 406, 3.2], [688, 388, 3.6], [658, 368, 3], [630, 350, 3.4], [604, 336, 2.8], [584, 326, 3], [574, 320, 2.6]].map((p, i) => (
          <circle key={'p' + i} cx={p[0]} cy={p[1]} r={p[2]} fill={`url(#aromaP-${botKey})`}
            style={{ animation: `aromaReach2 ${6 + (i % 4)}s ease-in-out infinite`, animationDelay: `${i * 0.5}s`, opacity: 0.95 - i * 0.07 }} />
        ))}
      </svg>

      <ServiceTopbar botKey={botKey} bot={bot} accent={accent} lang={lang} setLang={setLang} />
      <SvcHero botKey={botKey} accent={accent} lang={lang} />

      <div style={{ position: 'absolute', left: 96, top: '50%', transform: 'translateY(-50%)', maxWidth: 470, zIndex: 6 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 22,
          padding: '6px 14px 6px 8px', borderRadius: 999, background: '#fff',
          border: `1px solid ${accent}55`, boxShadow: '0 3px 10px rgba(120,90,50,0.1)' }}>
          <span style={{ width: 22, height: 22, borderRadius: 7, background: `${accent}22`,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            {window.SvcGlyph && <window.SvcGlyph k={botKey} c={accent} size={14} />}
          </span>
          <span style={{ fontSize: 11, fontWeight: 800, color: accent, letterSpacing: '0.12em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{lang === 'en' ? 'Clinically informed' : '임상 기반 케어'}</span>
        </div>
        <h1 style={{ margin: 0, fontSize: 43, lineHeight: 1.16, fontWeight: 600,
          fontFamily: SVC_SERIF, letterSpacing: '-0.015em', color: SVC_INK }}>
          <span style={{ display: 'block', whiteSpace: 'nowrap' }}>{c.ha}</span>
          <span style={{ display: 'block', whiteSpace: 'nowrap', color: accent, fontStyle: 'italic' }}>{c.hb}</span>
        </h1>
        <p style={{ marginTop: 20, marginBottom: 22, fontSize: 15.5, lineHeight: 1.6,
          color: SVC_SUB, maxWidth: 410, textWrap: 'pretty' }}>{c.sub}</p>
        {/* 로그인 / 사인업 — chips 자리. 클릭 시 인증/결제 모달 */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 26 }}>
          <button onClick={() => { if (window.TC_openFlow) window.TC_openFlow('login'); }}
            onMouseEnter={(e) => { e.currentTarget.style.background = `${accent}14`; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; }}
            style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 14px', borderRadius: 999, background: '#fff',
              border: `1px solid ${accent}55`, boxShadow: '0 2px 8px rgba(120,90,50,0.08)',
              fontSize: 12.5, fontWeight: 700, color: SVC_INK, whiteSpace: 'nowrap',
              cursor: 'pointer', fontFamily: SVC_FONT, transition: 'background 0.15s ease' }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: accent }} />
            {lang === 'en' ? 'Log in' : '로그인'}
          </button>
          <button onClick={() => { if (window.TC_openFlow) window.TC_openFlow('signup'); }}
            onMouseEnter={(e) => { e.currentTarget.style.background = `${accent}14`; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; }}
            style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 14px', borderRadius: 999, background: '#fff',
              border: `1px solid ${accent}55`, boxShadow: '0 2px 8px rgba(120,90,50,0.08)',
              fontSize: 12.5, fontWeight: 700, color: SVC_INK, whiteSpace: 'nowrap',
              cursor: 'pointer', fontFamily: SVC_FONT, transition: 'background 0.15s ease' }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: accent }} />
            {lang === 'en' ? 'Sign up' : '회원가입'}
          </button>
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
            onClick={() => { if (window.TC_startService) window.TC_startService(); }}
            style={{ padding: '12px 22px', borderRadius: 999, border: 0, cursor: 'pointer',
              background: accent, color: '#fff', fontFamily: SVC_FONT, fontSize: 14, fontWeight: 800,
              transition: 'transform 0.18s ease', boxShadow: `0 8px 22px ${accent}55` }}>
            {lang === 'en' ? 'Start tracking' : '트래킹 시작'}
          </button>
          <button onMouseEnter={(e) => { e.currentTarget.style.background = `${accent}14`; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; }}
            style={{ padding: '12px 20px', borderRadius: 999, cursor: 'pointer',
              background: '#fff', color: SVC_INK, border: `1.5px solid ${accent}66`,
              fontFamily: SVC_FONT, fontSize: 14, fontWeight: 700, transition: 'background 0.18s ease' }}>
            {lang === 'en' ? 'How it works' : '작동 방식'}
          </button>
        </div>
      </div>

      <a href={SVC_TRACKHOME}
        onMouseEnter={(e) => { e.currentTarget.style.color = SVC_INK; }}
        onMouseLeave={(e) => { e.currentTarget.style.color = SVC_SUB; }}
        style={{ position: 'absolute', left: 30, bottom: 22, zIndex: 7,
          fontFamily: SVC_FONT, fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
          color: SVC_SUB, textDecoration: 'none' }}>
        ← {lang === 'en' ? 'All 11 Catchers' : '11개 캐쳐 전체'}
      </a>

      {/* 하단 꽃말 한 줄 */}
      <div style={{ position: 'absolute', left: '50%', bottom: 22, transform: 'translateX(-50%)', zIndex: 7,
        display: 'flex', alignItems: 'center', gap: 9, fontFamily: SVC_FONT, fontSize: 12.5, color: SVC_SUB, whiteSpace: 'nowrap' }}>
        <svg width="13" height="13" viewBox="0 0 24 24"><g fill={accent}><circle cx="12" cy="12" r="3" />{[0,60,120,180,240,300].map((a)=>{const r=a*Math.PI/180;return <ellipse key={a} cx={12+Math.cos(r)*6} cy={12+Math.sin(r)*6} rx="2.4" ry="4" transform={`rotate(${a+90} ${12+Math.cos(r)*6} ${12+Math.sin(r)*6})`} opacity="0.85" />;})}</g></svg>
        <span style={{ fontFamily: SVC_SERIF, fontStyle: 'italic', color: SVC_INK }}>{lang === 'en' ? fl.en : fl.ko}</span>
        <span style={{ opacity: 0.5 }}>—</span>
        <span>{lang === 'en' ? fl.mEn : fl.mKo}</span>
      </div>
    </div>
    {full && window.ServiceSections && (
      <window.ServiceSections botKey={botKey} lang={lang} accent={accent} bot={bot} />
    )}
    </div>
  );
}

Object.assign(window, { ServicePage });