// landings.jsx — v8 · 캐릭터 중심, 따뜻한 미니멀 배경 // // 원칙: // · 캐릭터가 메인 (크게, 표정 명확) // · 배경 = 따뜻한 그라데이션 + 부드러운 atmospheric blob/모양만 // · 사각형 가구 ❌ → 캐릭터 옆 작은 floating 디테일만 // · 사이트 정체성은 작은 소품·thought bubble·헤드라인으로 const { Person, PersonStanding, SITE_COLORS, INK } = window; const FONT = '"Pretendard","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif'; // ── 그라운디드 버전: "차분하지만 단단한" (서양 웰니스 시장용) ───────────────── // 파스텔의 부드러움은 유지하되 채도·대비·그라데이션 범위를 키워 깊이(무게감)를 줌. // 같은 사이트별 hue는 유지 → 여전히 한 패밀리. 다만 더 그라운디드하고 자신감 있게. const SHARED_BG = { floor: '#ccb993', floorDark: '#b09a6f', wood: '#b39668', woodDark: '#86703f', woodLight: '#cdb88c', fabric: '#d8c8a8', fabricSoft: '#e6d8bd', fabricDeep: '#a68d66', leaf: '#6e8e58', leafDark: '#506b3e', leafLight: '#9bb87a', cream: '#f5efe2', }; // 사이트별 틴트 (파스텔보다 깊고 단단 — 채도↑, 벽 하단 더 진하게 = 그라운디드) const SITE_TINTS = { talk: { // 깊은 블루그레이 wallTop: '#dde8f1', wallMid: '#bbd2e5', wallBot: '#98b8d3', glow: '#e8f1f8', skyTop: '#dde8f1', skyMid: '#b6cce2', skyBot: '#96b6d2', sun: '#d6e4ee', }, neuro: { // 단단한 피치/테라코타 wallTop: '#f9dcc2', wallMid: '#f0bb92', wallBot: '#e29e6a', glow: '#fbe2cd', skyTop: '#f9d9bc', skyMid: '#f0b486', skyBot: '#e29862', sun: '#ffbf80', }, modality: { // 깊은 세이지 wallTop: '#e0ebd2', wallMid: '#c4d8b1', wallBot: '#a4bf87', glow: '#ecf3df', skyTop: '#e0ebd2', skyMid: '#c2d6ad', skyBot: '#a0be84', sun: '#e3ebac', }, boston: { // 진한 허니골드 wallTop: '#f7e7bd', wallMid: '#eecd86', wallBot: '#ddb85c', glow: '#faecc1', skyTop: '#f7e4b7', skyMid: '#eec882', skyBot: '#ddb55c', sun: '#f6d56c', }, }; const SITE_PALETTES = Object.fromEntries( Object.entries(window.SITE_PALETTES).map(([k, v]) => [ k, { ...v, ...SHARED_BG, ...(SITE_TINTS[k] || {}) }, ]) ); // ───────────────────────────────────────────────────────────────────────────── // 공통 UI // ───────────────────────────────────────────────────────────────────────────── // 사이트별 풀다운 메뉴 정의 (각 5개) — 4 catcher만 메인 nav, About/Contact는 코너로 const SITE_NAV = [ { key: 'talk', ko: '상담봇캐쳐', en: 'TalkCatcher', file: 'https://agedlearning.com', items: [ { action: 'guide', ko: '📖 사용 안내', en: '📖 Guide' }, { action: 'mechanism', ko: '⚙️ 작동 메커니즘', en: '⚙️ How it works' }, { ko: '우울 봇', en: 'Depression', href: 'T.html#depression' }, { ko: '불안 봇', en: 'Anxiety', href: 'T.html#anxiety' }, { ko: '수면 봇', en: 'Sleep', href: 'T.html#sleep' }, { ko: '학습 봇', en: 'Learning', href: 'T.html#learning' }, { ko: '11 봇 전체', en: 'See all 11 bots', href: 'T.html' }, ], }, { key: 'boston', ko: '증상판별캐쳐', en: 'SymptomCatcher', file: 'https://agedlearning.com/symptomcatcher.html', items: [ { ko: '증상진단', en: 'Symptom Screening', href: 'https://agedlearning.com/symptomcatcher.html' }, { ko: 'DSM-5-TR 판별진단', en: 'DSM-5-TR Differential', href: 'https://agedlearning.com/symptom_catcher/dmda/index.html' }, { ko: '얼굴기반 DSM-5-TR 진단', en: 'Face-based DSM-5-TR', href: 'https://agedlearning.com/symptom_catcher/face-reading/face-reading-v3.5.html' }, ], }, { key: 'neuro', ko: '개별증상캐쳐', en: 'TrackCatcher', file: 'https://agedlearning.com/track', items: [ { ko: 'Mood 트래킹', en: 'Mood tracking', href: 'N.html#mood' }, { ko: 'Sleep 트래킹', en: 'Sleep tracking', href: 'N.html#sleep' }, { ko: 'Focus 트래킹', en: 'Focus tracking', href: 'N.html#focus' }, { ko: '11 증상 모듈', en: 'See all 11 modules', href: 'N.html#modules' }, { ko: '데이터 보기', en: 'View my data', href: 'N.html#data' }, ], }, { key: 'modality', ko: '치료방법캐쳐', en: 'ModalityCatcher', file: 'https://agedlearning.com', items: [ { ko: 'CBT-I', en: 'CBT-I', href: 'M.html#cbt' }, { ko: 'MBSR', en: 'MBSR', href: 'M.html#mbsr' }, { ko: 'ACT', en: 'ACT', href: 'M.html#act' }, { ko: 'EMDR', en: 'EMDR', href: 'M.html#emdr' }, { ko: '9 치료법 전체', en: 'See all 9 modalities', href: 'M.html' }, ], }, ]; // 3 PROGRAM 탭 (상위 메뉴 prominent) const PROGRAMS = [ { key: 'attention', ko: '주의집중', en: 'Attention', href: '#attention', color: '#E8A317' }, { key: 'learning', ko: '학습', en: 'Learning', href: '#learning', color: '#6B9B5C' }, { key: 'peak', ko: '최고수행', en: 'Peak Performance', href: '#peak', color: '#4A90C2' }, ]; // 코너 유틸리티 링크 (About, Contact, KO/EN, Admin) const UTILITY_NAV = [ { key: 'about', ko: '소개', en: 'About', href: '#about' }, { key: 'contact', ko: '연락', en: 'Contact', href: '#contact' }, // 동의서 제거 — 로그인 시 동의 게이트가 처리(beta consent + 가입 동의) ]; // footer 법적 링크 (Stripe 결제 요구 — agedlearning.com/legal/) const LEGAL_NAV = [ { ko: '약관', en: 'Terms', href: 'https://agedlearning.com/legal/terms.html' }, { ko: '개인정보', en: 'Privacy', href: 'https://agedlearning.com/legal/privacy.html' }, { ko: '환불', en: 'Refunds', href: 'https://agedlearning.com/legal/refunds.html' }, { ko: '구독', en: 'Subscriptions', href: 'https://agedlearning.com/legal/subscriptions.html' }, { ko: '연락처', en: 'Contact', href: 'https://agedlearning.com/legal/contact.html' }, ]; function ProgramTab({ p, lang }) { const [hover, setHover] = React.useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '7px 10px', minWidth: 110, boxSizing: 'border-box', background: hover ? `${p.color}22` : '#fffdf6', border: `1.5px solid ${hover ? p.color : INK + '22'}`, borderRadius: 999, color: hover ? p.color : '#2a2018', fontSize: 10.5, fontWeight: 700, textDecoration: 'none', transition: 'background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s', whiteSpace: 'nowrap', fontFamily: FONT, transform: hover ? 'translateY(-1.5px)' : 'translateY(0)', boxShadow: hover ? `0 5px 12px ${p.color}33` : `0 2px 0 ${INK}1a`, letterSpacing: '-0.005em', }}> {lang === 'en' ? p.en : p.ko} ); } function NavItem({ s, lang, accent, currentSite, darkMode, onAction }) { const [hover, setHover] = React.useState(false); const siteColor = (window.SITE_COLORS && window.SITE_COLORS[s.key] && window.SITE_COLORS[s.key].value) || '#9a8763'; const label = lang === 'en' ? s.en : s.ko; const bgIdle = darkMode ? 'rgba(255,255,255,0.08)' : '#fffdf6'; const bgHover = darkMode ? `${siteColor}33` : `${siteColor}1a`; const borderIdle = darkMode ? 'rgba(255,255,255,0.25)' : INK + '22'; const borderHover = darkMode ? siteColor : siteColor; const colorIdle = darkMode ? 'rgba(255,255,255,0.9)' : '#5a4a35'; const colorHover = darkMode ? '#ffffff' : '#2a2018'; const shadowIdle = darkMode ? `0 2px 0 rgba(0,0,0,0.3)` : `0 2px 0 ${INK}1a`; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative' }}> {label} {s.items && ( ▾ )} {/* Dropdown */} {s.items && (
{s.items.map((it, i) => { const itemStyle = { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', fontSize: 12, fontWeight: 600, color: '#2a2018', textDecoration: 'none', borderRadius: 8, transition: 'background 0.12s, color 0.12s, padding 0.14s', whiteSpace: 'nowrap', position: 'relative', zIndex: 1, fontFamily: FONT, cursor: 'pointer', border: 0, background: 'transparent', width: '100%', textAlign: 'left', }; const onEnter = (e) => { e.currentTarget.style.background = `${siteColor}16`; e.currentTarget.style.color = siteColor; e.currentTarget.style.paddingLeft = '16px'; }; const onLeave = (e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#2a2018'; e.currentTarget.style.paddingLeft = '12px'; }; const dot = ; const label = lang === 'en' ? it.en : it.ko; return it.action ? ( ) : ( {dot}{label} ); })}
)}
); } // ThunderNeurofeedback — 지휘봉 스타일 pill (한번 치는 애니메이션) function ThunderNeurofeedback() { return (
Neurofeedback
); } function Nav({ siteName, items, ctaLabel, accent, lang, setLang, currentSite, darkMode, onCta, authButtons, ctaColor, ctaSoft, onNavAction }) { return ( <> ); } function CornerCopy({ eyebrow, headline, sub, primaryCta, secondaryCta, accent, position = 'left', copyScale = 1, copyOffset = 0 }) { const isRight = position === 'right'; return (
{!isRight && } {eyebrow} {isRight && }

{headline}

{sub}

); } // ───────────────────────────────────────────────────────────────────────────── // 따뜻한 배경 — 사이트별 톤. 사각형 가구 없음. 큰 둥근 blob + 카페트 + 부드러운 빛. function WarmRoom({ site }) { const p = { ...SITE_PALETTES[site], id: site }; return ( {/* 벽 */} {/* 바닥 */} {/* 부드러운 spot light (좌측) — 따뜻한 빛 */} {/* 부드러운 spot light (우상단) */} ); } // ═════════════════════════════════════════════════════════════════════════════ // T · 11 봇 + 큰 고객 const TALK_BOTS = [ { name: 'Depression', exp: 'depression' }, { name: 'Anxiety', exp: 'anxiety' }, { name: 'Sleep', exp: 'sleep' }, { name: 'Burnout', exp: 'burnout' }, { name: 'PTSD', exp: 'ptsd' }, { name: 'OCD', exp: 'ocd' }, { name: 'Bipolar', exp: 'bipolar' }, { name: 'Autism', exp: 'autism' }, { name: 'ADHD', exp: 'adhd' }, { name: 'Learning', exp: 'learning' }, { name: 'Peak', exp: 'peak' }, { name: 'Attention', exp: 'attention' }, ]; function BotInArc({ x, y, bot, size = 86 }) { const C = bot.C; return (
{bot.sub}
); } function PoseTalk({ p, accent }) { // 가운데 큰 고객 + 11 봇 위쪽 반호 (각 봇은 고유 디자인). attention(초롱이)은 히어로서 제외(라벨/돋보기 정리). const cx = 920, cy = 720, R = 380; const arcBots = (window.BOTS || []).filter((b) => b.key !== 'attention'); return ( <> {/* 봇 11개 위쪽 반호 */} {arcBots.map((bot, i) => { const angleDeg = -180 + i * 18; const angleRad = angleDeg * Math.PI / 180; const x = cx + R * Math.cos(angleRad); const y = cy + R * Math.sin(angleRad); return ( ); })} {/* 연결 점선 (고객 → 각 봇) */} {TALK_BOTS.filter((b) => b.exp !== 'attention').map((_, i) => { const angleDeg = -180 + i * 18; const angleRad = angleDeg * Math.PI / 180; const x = cx + R * Math.cos(angleRad); const y = cy + R * Math.sin(angleRad); return ( ); })} {/* 가운데 큰 고객 */}
); } // ═════════════════════════════════════════════════════════════════════════════ // B · 부엌 (미니멀) — 큰 standing 두 캐릭터 + 카운터 partial + 작은 도구 function SceneBostonExtras({ p }) { return ( {/* 따뜻한 태양 (우상단) — 작게, 예약 카드 위쪽 */} ); } // ───────────────────────────────────────────────────────────────────────────── // B · 오프라인 클리닉 예약 모듈 // 따뜻한 appointment card — 3 프로그램 (Inattention / Learning / Peak) function OfflineBookingCard({ p, initialProgram = 0, onClose, lang = 'ko' }) { const [program, setProgram] = React.useState(initialProgram); const [day, setDay] = React.useState(2); const [slot, setSlot] = React.useState(2); const [mode, setMode] = React.useState('offline'); const [withTool, setWithTool] = React.useState(false); const [videoOpen, setVideoOpen] = React.useState(false); React.useEffect(() => { setProgram(initialProgram); }, [initialProgram]); const videos = [ { ko: '뉴로피드백 소개', en: 'Neurofeedback intro', dur: '3:42' }, { ko: 'ADHD 사례 연구', en: 'ADHD case study', dur: '7:15' }, { ko: '난독증 학습 코칭', en: 'Dyslexia coaching', dur: '5:28' }, { ko: '최고수행 훈련', en: 'Peak performance training', dur: '4:55' }, { ko: '14년 임상 인터뷰', en: '14-year clinical interview', dur: '12:30' }, { ko: '집에서 하는 방법', en: 'Home training guide', dur: '6:10' }, ]; const programs = [ { ko: '주의집중', en: 'Attention', descKo: 'ADHD · 집중력 신경훈련', descEn: 'ADHD · focus neuro-training', color: '#E8A317' }, { ko: '학습', en: 'Learning', descKo: '난독·작업기억 회복 코칭', descEn: 'Reading & working-memory coaching', color: '#6B9B5C' }, { ko: '최고수행', en: 'Peak Performance', descKo: '학업·운동 멘탈 최적화', descEn: 'Academic & athletic mental optimization', color: '#4A90C2' }, ]; const daysKo = ['월', '화', '수', '목', '금']; const daysEn = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; const days = lang === 'en' ? daysEn : daysKo; const slots = ['09:30', '11:00', '14:00', '15:30', '17:00', '19:00']; // 4주 캘린더 — 평일만 (Mon-Fri × 4주 = 20일) const weekGrid = React.useMemo(() => { const today = new Date(); let start = new Date(today); // 다음 월요일 찾기 while (start.getDay() !== 1) start.setDate(start.getDate() + 1); const grid = []; for (let w = 0; w < 4; w++) { for (let d = 0; d < 5; d++) { const date = new Date(start); date.setDate(start.getDate() + w * 7 + d); grid.push(date); } } return grid; }, []); const selectedDate = weekGrid[day] || weekGrid[0]; const monthYear = (() => { const first = weekGrid[0]; const last = weekGrid[weekGrid.length - 1]; if (lang === 'en') { if (first.getMonth() === last.getMonth()) { return `${first.toLocaleString('en-US', { month: 'long' })} ${first.getFullYear()}`; } return `${first.toLocaleString('en-US', { month: 'short' })} – ${last.toLocaleString('en-US', { month: 'short' })} ${last.getFullYear()}`; } if (first.getMonth() === last.getMonth()) { return `${first.getFullYear()}년 ${first.getMonth() + 1}월`; } return `${first.getFullYear()}년 ${first.getMonth() + 1}–${last.getMonth() + 1}월`; })(); const pg = programs[program]; const pgName = lang === 'en' ? pg.en : pg.ko; const pgDesc = lang === 'en' ? pg.descEn : pg.descKo; const L = { eyebrowOffline: lang === 'en' ? 'In-person clinic' : '오프라인 클리닉', eyebrowOnline: lang === 'en' ? 'Online session' : '온라인 세션', eyebrowTool: lang === 'en' ? 'Mental health tool' : '멘탈헬스 툴', offline: lang === 'en' ? 'Offline' : '오프라인', online: lang === 'en' ? 'Online' : '온라인', tool: lang === 'en' ? 'Tools Purchase Questions' : '툴 구매 문의', toolDesc: lang === 'en' ? 'Add neurofeedback kit · Online Tool' : '뉴로피드백 키트 추가 · 온라인 툴', toolPrice: lang === 'en' ? '+$249' : '+₩320,000', location: 'BOSTON · MA', locationOnline: lang === 'en' ? 'REMOTE · ZOOM' : '원격 · ZOOM', locationTool: lang === 'en' ? 'SHIP WORLDWIDE' : '전세계 배송', title: lang === 'en' ? 'Book a session' : '세션 예약하기', titleTool: lang === 'en' ? 'Purchase tools' : '툴 구매하기', subtitle: '', subtitleTool: lang === 'en' ? 'Clinically vetted neurofeedback devices & kits' : '임상 검증된 뉴로피드백 기기·키트', nextWeek: lang === 'en' ? 'Next week' : '다음 주', weekTag: lang === 'en' ? 'Week 2 of Nov ›' : '11월 둘째 주 ›', available: lang === 'en' ? 'Available times' : '가능 시간', footnote: lang === 'en' ? 'Free 15-min consult · Free changes/cancellation up to 24h before' : '무료 15분 예약 · 변경/취소 24h 전까지 무료', footnoteTool: lang === 'en' ? 'Includes training · 30-day return · Clinician support' : '훈련 포함 · 30일 환불 · 임상가 지원', ctaSuffix: lang === 'en' ? 'Book' : '예약', watchVideos: lang === 'en' ? 'Watch intro videos' : '동영상 보기', minutes: lang === 'en' ? 'min' : '분', ctaTool: lang === 'en' ? 'Add to cart' : '장바구니', dateLabel: lang === 'en' ? '' : '일', }; return (
{onClose && ( )} {/* Header strip */}
{mode === 'online' ? L.eyebrowOnline : L.eyebrowOffline}
{mode === 'online' ? L.locationOnline : L.location}
{/* Mode toggle — Offline / Online */}
{[ { key: 'offline', label: L.offline, icon: 'building' }, { key: 'online', label: L.online, icon: 'monitor' }, ].map((m) => { const active = mode === m.key; return ( ); })}
{/* Tools Purchase 체크박스 — 추가 옵션 */}
{L.title}
{/* Program tabs */}
{programs.map((p2, i) => ( ))}
{/* Program description */}
{pgDesc}
{/* Date strip */}
{monthYear} {lang === 'en' ? 'Next 4 weeks' : '4주간'}
{/* Day-of-week labels */}
{days.map((d, i) => (
{d}
))}
{/* 4 주 × 5 평일 그리드 */}
{weekGrid.map((date, i) => { const isSelected = day === i; const isMonthBoundary = i > 0 && weekGrid[i - 1].getMonth() !== date.getMonth(); return ( ); })}
{/* Time slots */}
{L.available}
{slots.map((s, i) => { const disabled = i === 1; // 한 슬롯은 마감으로 표시 (현실감) return ( ); })}
{/* CTA */} {/* Footnote */}
{L.footnote}
{/* Video list — collapsible */}
{videoOpen && (
{videos.map((v, i) => ( { e.currentTarget.style.background = `${p.accent}10`; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', borderBottom: i < videos.length - 1 ? `1px solid ${INK}10` : 0, textDecoration: 'none', color: INK, cursor: 'pointer', transition: 'background 0.12s', }}> {/* Play icon */}
{/* Title */} {lang === 'en' ? v.en : v.ko} {/* Duration */} {v.dur} ))}
)}
); } // ───────────────────────────────────────────────────────────────────────────── // 가슴 명찰 — Decision · Training, 각각 독립 호버/클릭 function ChestBadge({ accent, onBook, lang = 'en' }) { const [hoverL, setHoverL] = React.useState(false); const [hoverR, setHoverR] = React.useState(false); const [pressL, setPressL] = React.useState(false); const [pressR, setPressR] = React.useState(false); const anyHover = hoverL || hoverR; return (
{/* Decision half */} {/* Training half */}
); } // ───────────────────────────────────────────────────────────────────────────── // 뉴로피드백 발판 — 심플한 명판 디스크 (NEUROFEEDBACK 글씨 새김) function NeuroFootplate({ accent }) { return ( {/* 그림자 */} {/* 실제 EEG 신호 — 부드러운 베지에 곡선 */} {/* 양끝 전극 dot */} {/* NEUROFEEDBACK 워드마크 — 작고 세련되게 */} NEUROFEEDBACK ); } // 작은 가슴 타겟 — Attention 캐릭터 전용 function TinyChestTarget({ accent }) { return ( {/* outer */} {/* ring 1 */} {/* ring 2 */} {/* center dot */} {/* tiny arrow */} ); } // ───────────────────────────────────────────────────────────────────────────── // N · 11 봇 시계 — Peak Performance 메타포 // 시침=상담가, 분침=고객. 11개 봇이 1~11시 위치, 12시는 PEAK 목표. // 실시간 시계 — 시침/분침이 현재 시각에 따라 움직임. function BotsPeakClock({ p, lang = 'ko' }) { const W = 280, H = 280; const cx = W / 2, cy = W / 2; const R = 100; const BOTS = window.BOTS || []; const angleOf = (h) => -Math.PI / 2 + (h / 12) * Math.PI * 2; // 실시간 const [now, setNow] = React.useState(() => new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); const hh = now.getHours() % 12; const mm = now.getMinutes(); const ss = now.getSeconds(); // 시침(상담가) — 시 + 분 보정 const counselorA = -Math.PI / 2 + ((hh + mm / 60) / 12) * Math.PI * 2; // 분침(고객) — 분 + 초 보정 const clientA = -Math.PI / 2 + ((mm + ss / 60) / 60) * Math.PI * 2; const minutes = Array.from({ length: 60 }, (_, i) => i); return (
{/* 바닥 SVG — 표적 + 화살 */} {/* 부드러운 외광 */} {/* 표적 링 — 4겹 동심원 (테두리 없이) */} {/* 중앙 불스아이 + DSM5-TR 워터마크 */} DSM5-TR {/* 12시 — PEAK 마커 (봇 아이콘과 동일한 크기/톤) */} {/* 봇 아이콘 레이어 — 1~11시 위치 */} {BOTS.map((bot, i) => { const h = i + 1; const a = angleOf(h); const cosA = Math.cos(a), sinA = Math.sin(a); const x = cx + cosA * R; const y = cy + sinA * R; const size = 42; // 라벨 위치 — 아이콘 바깥으로 const lr = R + 48; const lx = cx + cosA * lr; const ly = cy + sinA * lr; let align = 'center'; if (cosA > 0.35) align = 'left'; else if (cosA < -0.35) align = 'right'; const BotC = bot.C; return (
{BotC && }
{bot.sub}
 ); })} {/* 상단 SVG — 시계 바늘 + 중심핀 (봇 위에 떠 있어야 함) */} {/* 시침 — 상담가 (티어드롭 셔이프, 따뜻한 accent) */} {/* 분침 — 고객 (수 섥어 더 긴 티어드롭) */} {/* 중심 핀 */}
); } // ───────────────────────────────────────────────────────────────────────────── // B · Peak Performance — 시계 메타포 (참고용, 현재 미사용) // 시침=상담가, 분침=고객. 11개 핵심 영역이 1~11시 위치, 12시는 PEAK 목표. function PeakClock({ boxW, accent, lang = 'ko' }) { const W = boxW, H = 280; const cx = W / 2, cy = 132; const R = 72; const items = lang === 'en' ? [ 'Breath', 'Focus', 'Image', 'Recover', 'Belief', 'Routine', 'Sleep', 'Energy', 'Drive', 'Talk', 'Press' ] : [ '호흡', '집중', '시각화', '회복', '자신감', '루틴', '수면', '에너지', '동기', '토크', '압박' ]; // 시계 각도: 12시 = -π/2 (위), 시계방향 증가 const angleOf = (h) => -Math.PI / 2 + (h / 12) * Math.PI * 2; // 시침(상담가) — 11시 부근 const counselorA = angleOf(10.7); // 분침(고객) — 1시 부근 const clientA = angleOf(1.3); // 미세 분 단위 틱(60개) const minutes = Array.from({ length: 60 }, (_, i) => i); return (
{/* 후광 */} {/* 시계판 */} {/* 내부 점선 링 */} {/* 분 단위 미세 틱 */} {minutes.map(m => { const a = -Math.PI / 2 + (m / 60) * Math.PI * 2; const isHour = m % 5 === 0; const r1 = isHour ? R - 3 : R + 1; const r2 = R + 6; return ( ); })} {/* 11개 영역 — 1~11시 위치 */} {[1,2,3,4,5,6,7,8,9,10,11].map(h => { const a = angleOf(h); const cosA = Math.cos(a), sinA = Math.sin(a); const x = cx + cosA * R; const y = cy + sinA * R; // 라벨 위치 — 시계 바깥 const lr = R + 21; const lx = cx + cosA * lr; const ly = cy + sinA * lr; // 라벨 정렬 let anchor = 'middle'; if (cosA > 0.3) anchor = 'start'; else if (cosA < -0.3) anchor = 'end'; return ( {/* 숫자 원 */} {h} {/* 영역 라벨 */} {items[h - 1]} ); })} {/* 12시 — PEAK 마커 (별) */} {/* 빛 */} {[-1, 0, 1].map(k => ( ))} {/* 별 */} PEAK {/* 시침 — 상담가 (짧고 굵게, 11시 방향) */} {/* 상담가 머리 (안경 — 신뢰감) */} {/* 분침 — 고객 (길고 가늘게, 1시 방향) */} {/* 고객 머리 */} {/* 중심 핀 */} {/* 범례 — 하단 */} {/* 상담가 */} {lang === 'en' ? 'Therapist' : '상담가'} {lang === 'en' ? 'HOUR HAND' : '시침'} {/* 고객 */} {lang === 'en' ? 'Client' : '고객'} {lang === 'en' ? 'MIN HAND' : '분침'}
); } // ───────────────────────────────────────────────────────────────────────────── // B · 에피소드 카드 — 오프라인 캐릭터 + 관련 온라인 도구를 한 풍경에 통합 function EpisodeCard({ kind, onBook, lang = 'ko' }) { const config = { inattention: { label: { ko: '주의집중', en: 'Attention' }, en: 'Attention', desc: { ko: 'ADHD · 집중력 신경훈련', en: 'ADHD · Focus neuro-training' }, tag: { ko: '60분 · 1:1 임상', en: '60min · 1:1 clinical' }, accent: '#E8A317', bodyColor: '#a87a3a', expression: 'learning', tools: { talk: true, neuro: true, modality: true, boston: true }, }, learning: { label: { ko: '학습', en: 'Learning' }, en: 'Learning', desc: { ko: '난독·작업기억 회복 코칭', en: 'Dyslexia & working memory coaching' }, tag: { ko: '50분 · 1:1 임상', en: '50min · 1:1 clinical' }, accent: '#6B9B5C', bodyColor: '#a8c188', expression: 'learning', role: 'therapist', props: 'book', tools: { talk: true, neuro: true, modality: true, boston: true }, }, peak: { label: { ko: '최고수행', en: 'Peak Performance' }, en: 'Peak Performance', desc: { ko: '학업·운동 멘탈 최적화', en: 'Academic & athletic mental optimization' }, tag: { ko: '60분 · 1:1 임상', en: '60min · 1:1 clinical' }, accent: '#4A90C2', bodyColor: '#5c7587', expression: 'performance', armRaise: 'right', props: 'headphones', tools: { talk: true, neuro: true, modality: true, boston: true }, }, }; const c = config[kind]; const charW = 170; const boxW = charW + 60; const toolMeta = { talk: { ko: '상담봇', en: 'Talk', file: 'https://agedlearning.com', note: '대화' }, boston: { ko: '증상결정', en: 'Decide', file: 'https://agedlearning.com', note: '통합' }, neuro: { ko: '개별증상', en: 'Track', file: 'https://agedlearning.com/track', note: '트래킹' }, modality: { ko: '치료방법', en: 'Method', file: 'https://agedlearning.com', note: '매칭' }, }; const toolOrder = ['talk', 'boston', 'neuro', 'modality']; return (
{/* 헤더 — 프로그램 이름 (eyebrow 제거, 깔끔한 영어 톤) */}
{c.label[lang] || c.label.ko}
{c.desc[lang] || c.desc.ko}
{/* 캐릭터 + 발판 + props — scene visual */}
{/* 뉴로피드백 발판 — 캐릭터 발 밑 */} {/* 캐릭터 (발판 위에 올라서도록 약간 위로) */}
{/* 가슴 명찰 — Decision · Training (각각 독립 호버/클릭) */} {/* Attention 전용 — 작은 가슴 타겟 */} {kind === 'inattention' && } {c.props === 'thoughts' && ( ? ! )} {c.props === 'target' && ( {/* drop shadow */} {/* faint focus ring */} {/* bullseye outer */} {/* rings */} {/* center dot */} {/* arrow shaft */} {/* arrow fletching */} {/* arrow head */} )} {c.props === 'book' && ( )} {c.props === 'headphones' && ( <> )}
{/* 지원 온라인 도구 — 4개 칩, 관련 도구만 활성 */}
{lang === 'en' ? 'Tools used together' : '함께 쓰는 온라인'}
{toolOrder.map(key => { const active = c.tools[key]; const site = SITE_COLORS[key]; const t = toolMeta[key]; const Icon = () => { if (key === 'talk') return ( ); if (key === 'boston') return ( ); if (key === 'neuro') return ( ); if (key === 'modality') return ( ); return null; }; return ( { e.currentTarget.style.transform = 'translateY(-5px)'; const ring = e.currentTarget.querySelector('div'); if (ring) { ring.style.boxShadow = `0 7px 0 ${INK}55, 0 0 0 6px ${site.value}33, 0 10px 18px ${site.value}66`; } const lbl = e.currentTarget.querySelector('span'); if (lbl) { lbl.style.opacity = 1; lbl.style.fontWeight = 800; } }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; const ring = e.currentTarget.querySelector('div'); if (ring) { ring.style.boxShadow = `0 3px 0 ${INK}40, 0 0 0 3px ${site.value}1f`; } const lbl = e.currentTarget.querySelector('span'); if (lbl) { lbl.style.opacity = 0.85; lbl.style.fontWeight = 600; } }} onMouseDown={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; const ring = e.currentTarget.querySelector('div'); if (ring) ring.style.boxShadow = `0 1px 0 ${INK}55, 0 0 0 4px ${site.value}40`; }} style={{ textDecoration: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, cursor: 'pointer', opacity: 1, transition: 'transform 0.18s ease', }}>
{lang === 'en' ? t.en : t.ko} ); })}
{/* 예약 CTA — 작고 부담 없게 */}
); } // ───────────────────────────────────────────────────────────────────────────── // 작은 ONLINE 상품 카드 — 토픽별 캐릭터+미니 UI로 4개 시스템 차별화 function OnlineProductCard({ siteKey }) { const meta = { talk: { ko: '상담봇캐쳐', en: 'TalkCatcher', file: 'https://agedlearning.com', tagline: '11명의 봇 · 24/7 대화', expression: 'anxiety', bodyColor: '#a8bccd', lean: 'right', armRaise: null, }, boston: { ko: '증상판별캐쳐', en: 'BostonNeuroMind', file: 'https://agedlearning.com', tagline: '14년 통합 임상 매칭', expression: 'learning', bodyColor: '#e3c180', lean: 'center', role: 'therapist', }, neuro: { ko: '증상별캐쳐', en: 'NeuroCatchers', file: 'https://agedlearning.com/track', tagline: '매일 패턴 트래킹', expression: 'performance', bodyColor: '#e8a472', lean: 'left', }, modality: { ko: '훈련법캐쳐', en: 'ModalityCatcher', file: 'https://agedlearning.com', tagline: 'CBT·MBSR 맞춤 매칭', expression: 'happy', bodyColor: '#c0d3b3', lean: 'right', }, }[siteKey]; const site = SITE_COLORS[siteKey]; const charW = 96; // 토픽별 비주얼 props const TopicVisual = () => { if (siteKey === 'talk') { // 옆에 채팅 말풍선 return ( ); } if (siteKey === 'boston') { // 옆에 클립보드/레시피 return ( ); } if (siteKey === 'neuro') { // 옆에 차트 return ( ); } if (siteKey === 'modality') { // 옆에 매칭/방법 다이어그램 return ( A ? B C ); } return null; }; return ( e.currentTarget.style.transform = 'translateY(-3px)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'} > {/* 헤더: site color bar */}
{meta.en} →
{/* 캐릭터 + 토픽 비주얼 */}
{/* 풋터: ko 이름 + tagline */}
{meta.ko}
{meta.tagline}
 ); } // ───────────────────────────────────────────────────────────────────────────── // 예약 모달 — backdrop + OfflineBookingCard function BookingModal({ open, onClose, initialProgram, p, lang = 'ko' }) { if (!open) return null; return (
e.stopPropagation()}>
); } function SmallBoat({ label, color, width = 240 }) { const h = 90; return (
{/* 그림자 레이어 (버튼 그림자) */} {/* 메인 버튼 */} {/* 위쌄 하이라이트 */}
{label} →
); } // 5개 옵션 메달 (사주 · 관상 · 손금 · 타로 · MBTI) function Medal({ label, sub, color, symbol, size = 160, rotate = 0 }) { return (
{/* 메달 본체 */}
{/* 메달 안쪽 라인 */}
{symbol}
{/* 작은 리본 (상단) */}
{/* 라벨 */}
{label}
{sub}
); } function InsightFish({ fish, lang }) { const [hover, setHover] = React.useState(false); const [press, setPress] = React.useState(false); const scale = press ? 0.94 : (hover ? 1.18 : 1); return ( setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }} onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)} > {/* glow ring on hover */} {hover && ( )} {/* 몸 */} {/* 꼬리 */} {/* 눈 */} {hover && ( )} {/* 라벨 */} {fish.name[lang] || fish.name.ko} ); } // 큰 천둥 헤로 — 애니메이션 번개가 사이트 톱을 지배 function BigThunderHero() { return (
{/* 배경 플래시 후광 (펄스) */} {/* 구름 띠 (탑) */} {/* 메인 큰 번개 — 가운데 */} {/* 사이드 큰 번개 — 좌/우 */} {/* 더 멀리 작은 번개 */} {/* 스파크 도트 */}
); } // ThunderBaton — 지휘봉 모양, 대각선 배치 + strike 모션 function ThunderBaton() { const wandTint = '#bda77c'; // 소프트 웜레 taupe const wandLine = `${INK}55`; // 흐린 있크 아웃라인 return (
{/* Handle — 흐린 둘근 쪽 */} {/* Shaft — 귀엽고 둘근, 글씨 들어감 */} {/* Tip — 앞구의 공 */} {/* Neurofeedback — 봉 안에 */} Neurofeedback
); } // 뇌파 strike — 로고 코너에서 3 캐릭터를 향해 비스듬히 치는 EEG 신호 function NeuroFeedbackStrike() { const origin = { x: 132, y: 90 }; const targets = [ { x: 432, y: 380, color: '#E8A317', delay: 0.45 }, // Attention { x: 720, y: 380, color: '#6B9B5C', delay: 0.75 }, // Learning { x: 1008, y: 380, color: '#4A90C2', delay: 1.05 }, // Peak Performance ]; // EEG 같은 wavy path 생성 — 길이 length, x축 방향 const buildEegPath = (length) => { const seg = 14; const n = Math.floor(length / seg); let d = "M 0,0"; for (let i = 1; i <= n; i++) { const x = i * seg; const isSpike = (i % 5 === 0); const sign = (i % 2 === 0) ? 1 : -1; const amp = isSpike ? 9 : 3.5; const ctrlX = x - seg / 2; const ctrlY = sign * amp; d += ` Q ${ctrlX},${ctrlY} ${x},0`; } return d; }; const strikes = targets.map((t) => { const dx = t.x - origin.x; const dy = t.y - origin.y; const angle = Math.atan2(dy, dx) * 180 / Math.PI; const length = 230; // 짧게 고정 — 캐릭터까지 안 닿고 짤막한 strike return { ...t, length, angle, path: buildEegPath(length) }; }); return (
{/* 발생 origin 작은 펄스 */} {strikes.map((s, i) => ( {/* target tip */} ))}
); } function PoseBoston({ p, lang }) { const [bookingOpen, setBookingOpen] = React.useState(false); const [bookingProgram, setBookingProgram] = React.useState(0); const openBooking = (i) => { setBookingProgram(i); setBookingOpen(true); }; const insights = [ { name: { ko: '사주', en: 'Saju' }, color: '#E8A317', x: 110 }, { name: { ko: '관상', en: 'Face' }, color: '#6B9B5C', x: 320 }, { name: { ko: '손금', en: 'Palm' }, color: '#F47C3C', x: 530 }, { name: { ko: '타로', en: 'Tarot' }, color: '#4A90C2', x: 740 }, { name: { ko: '성격', en: 'Character' }, color: '#9B7CC2', x: 950 }, ]; return ( <> {/* (지휘봉 제거 — 로고에서 직접 천둥) */} {/* ─── 가운데 헤로 텍스트 — 카드 바로 위 ─── */}
{lang === 'en' ? 'Neurofeedback · Integrated Neuro Care' : '뉴로피드백 · 통합 신경 케어'}
{/* ─── 뇌파 천둥 strike — 로고에서 3 캐릭터로 비스듬히 ─── */} {/* ─── 3 EPISODE 카드 ─── */}
openBooking(0)} lang={lang} /> openBooking(1)} lang={lang} /> openBooking(2)} lang={lang} />
{/* ─── 통찰 5 strip (Saju · Face · Palm · Tarot · Character) ─── */}
{lang === 'en' ? 'Insight bonus' : '통찰 보너스 · Insight'}
{insights.map((f) => ( ))}
{/* 예약 모달 */} setBookingOpen(false)} initialProgram={bookingProgram} p={p} lang={lang} /> ); } // 5개 메달 코너 요소 (B 하단 우측에 작게 — 재미용 사이드 옵션) // 작은 물고기 SVG function Fish({ color, size = 56 }) { return ( {/* 몸 */} {/* 꼬리 */} {/* 눈 */} {/* 비늘 패턴 (작은 호 1개) */} {/* 입 (작은 점) */} ); } function FiveMedalsCorner({ p }) { const fish = [ { name: '도미', sub: 'Sea bream', color: '#f5b48a' }, { name: '광어', sub: 'Flounder', color: '#c8d9c0' }, { name: '연어', sub: 'Salmon', color: '#f59c7c' }, { name: '고등어', sub: 'Mackerel', color: '#7ba6c8' }, { name: '참치', sub: 'Tuna', color: '#b88abb' }, ]; return (
오늘의 물고기 · Today's Catch
{fish.map((f) => (
{f.name}
))}
); } // ═════════════════════════════════════════════════════════════════════════════ // N · 트래킹 — 큰 standing 두 캐릭터 + floating 작은 차트 카드 function SceneNeuroExtras({ p, lang = 'en' }) { return ( <> {/* 부드러운 atmospheric ring — 옅게, 대화 방해 안 됨 */} {/* 우측: 11 봇 시계 — Peak Performance 메타포 */} {/* 화살 애니메이션 — 로고 → 표적 (3단계 시퀀스) */}
{/* 화살대 */} {/* 화살촉 */} {/* 깃털 */} {/* 모션 라인 */}
); } function PoseNeuro({ p, lang = 'en' }) { const charW = 250; return ( <> {/* 작은 카우치 (중앙) */}
{/* 두 캐릭터 — 중앙 정렬, 위 표적 바라봄 */}
{/* 상담가 말풍선 */}
{/* 본체 + 오른쪽 하단 꼬리 (상담가 머리로) */}
{lang === 'ko' ? '지금 어떤 증상인지\n함께 알아볼까요?'.split('\n').map((t, i) => {i > 0 &&
}{t}) : (<>Let's find out what
symptoms you have.)}
{/* 고객 말풍선 */}
{/* 본체 + 왼쪽 하단 꼬리 (고객 머리로) */}
{lang === 'ko' ? '네, 정말 궁금해요!' : 'Yes, I’m really curious!'}
); } // 1인용 세라피 의자 (마주봄) // 1인용 안락 의자 — 비대칭 등받이 (한쪽만 높은 등받이 → 의자 방향성 분명) // facing='right' = 등받이 왼쪽, 오른쪽 열림 (캐릭터가 오른쪽 봄) // facing='left' = 좌우 반전 function TherapyChair({ facing = 'right', color, width = 320 }) { const flip = facing === 'left'; return ( {/* 그림자 */} {/* 본체 — 왼쪽 등받이 크게, 오른쪽은 낮은 팔걸이로 열려있음 */} {/* 좌석 라인 — 안락한 쿠션 구분 */} {/* 의자 다리 */} ); } // ═════════════════════════════════════════════════════════════════════════════ // M · 큰 sitting 두 캐릭터 + thought bubble (옆에 크게) // M · 9 치료기제 모달리티 그리드 (우측) // ═════════════════════════════════════════════════════════════════ // M · 상담사를 위한 modality 매칭 — 증상 선택 → 근거 기반 추천 3개 const MODALITY_MATRIX = { depression: [ { name: 'CBT', desc: '인지행동치료', color: '#5a8acc', match: 92, evidence: 3 }, { name: 'BA', desc: '행동활성화', color: '#9bb88a', match: 86, evidence: 3 }, { name: 'IPT', desc: '대인관계치료', color: '#bca6c8', match: 78, evidence: 3 }, ], anxiety: [ { name: 'CBT', desc: '인지행동치료', color: '#5a8acc', match: 94, evidence: 3 }, { name: 'Exposure', desc: '노출치료', color: '#f5a857', match: 88, evidence: 3 }, { name: 'MBSR', desc: '마음챙김', color: '#9bcfc4', match: 75, evidence: 2 }, ], sleep: [ { name: 'CBT-I', desc: '불면증 CBT', color: '#5a8acc', match: 95, evidence: 3 }, { name: 'Hygiene', desc: '수면 위생', color: '#a8c6db', match: 72, evidence: 2 }, { name: 'MBSR', desc: '마음챙김', color: '#9bcfc4', match: 68, evidence: 2 }, ], burnout: [ { name: 'ACT', desc: '수용전념치료', color: '#f5d878', match: 88, evidence: 2 }, { name: 'MBSR', desc: '마음챙김', color: '#9bcfc4', match: 82, evidence: 2 }, { name: 'BA', desc: '행동활성화', color: '#9bb88a', match: 70, evidence: 2 }, ], ptsd: [ { name: 'EMDR', desc: '안구운동', color: '#bca6c8', match: 91, evidence: 3 }, { name: 'PE', desc: '지속노출', color: '#f5a857', match: 89, evidence: 3 }, { name: 'CPT', desc: '인지처리', color: '#5a8acc', match: 85, evidence: 3 }, ], ocd: [ { name: 'ERP', desc: '노출반응방지', color: '#f5a857', match: 96, evidence: 3 }, { name: 'CBT', desc: '인지행동치료', color: '#5a8acc', match: 82, evidence: 3 }, { name: 'ACT', desc: '수용전념치료', color: '#f5d878', match: 68, evidence: 2 }, ], bipolar: [ { name: 'IPSRT', desc: '대인사회리듬', color: '#bca6c8', match: 84, evidence: 2 }, { name: 'CBT', desc: '인지행동치료', color: '#5a8acc', match: 80, evidence: 3 }, { name: 'PsyEd', desc: '심리교육', color: '#a8c6db', match: 76, evidence: 3 }, ], autism: [ { name: 'CBT-Adapt', desc: '맞춤 CBT', color: '#5a8acc', match: 84, evidence: 2 }, { name: 'Social', desc: '사회기술훈련', color: '#9bb88a', match: 82, evidence: 2 }, { name: 'OT', desc: '작업치료', color: '#f3c39a', match: 72, evidence: 2 }, ], adhd: [ { name: 'Behavior', desc: '행동치료', color: '#9bb88a', match: 88, evidence: 3 }, { name: 'CBT-A', desc: '성인 CBT', color: '#5a8acc', match: 82, evidence: 3 }, { name: 'Coaching', desc: '코칭', color: '#f5d878', match: 70, evidence: 2 }, ], learning: [ { name: 'Skills', desc: '기술훈련', color: '#9bb88a', match: 86, evidence: 2 }, { name: 'Tutoring', desc: '학습지도', color: '#a8c6db', match: 78, evidence: 2 }, { name: 'Coaching', desc: '코칭', color: '#f5d878', match: 70, evidence: 2 }, ], peak: [ { name: 'MBSR', desc: '마음챙김', color: '#9bcfc4', match: 86, evidence: 2 }, { name: 'ACT', desc: '수용전념치료', color: '#f5d878', match: 80, evidence: 2 }, { name: 'Sports', desc: '스포츠 심리', color: '#f5a857', match: 78, evidence: 2 }, ], }; function TherapistThoughts({ accent, lang = 'en' }) { // 오른쪽 패널 비움 — 새 아이디어 받기 전 깨끗한 캔버스 return null; } function ModalityGlyph({ abbr, c }) { const s = { fill: 'none', stroke: c, strokeWidth: 6, strokeLinecap: 'round', strokeLinejoin: 'round' }; const wrap = (kids) => ( {kids} ); if (abbr === 'CBT') return wrap(<> ); if (abbr === 'MBSR') return wrap(<> ); if (abbr === 'ACT') return wrap(<> ); if (abbr === 'EMDR') return wrap(<> ); if (abbr === 'DBT') return wrap(<> ); if (abbr === 'ERP') return wrap(<> ); if (abbr === 'IPT') return wrap(<> ); return wrap(<> ); } function ModalitySpark({ x, y, sz, d, color }) { return (
); } function PoseModality({ p, accent, lang = 'en' }) { const MODALITIES = [ { abbr: 'CBT', ko: '인지행동치료', en: 'Cognitive Behavioral', what: '생각의 습관을 알아차리고, 다시 씁니다.', whatEn: 'Notice thought habits, and rewrite them.', color: '#4f8fd6', best: '불안 · 우울', bestEn: 'Anxiety · Depression' }, { abbr: 'MBSR', ko: '마음챙김 스트레스 완화', en: 'Mindfulness-Based Reduction', what: '판단 없이, 지금 이 순간에 머무릅니다.', whatEn: 'Rest in the present, without judgment.', color: '#56c4b2', best: '번아웃 · 스트레스', bestEn: 'Burnout · Stress' }, { abbr: 'ACT', ko: '수용전념치료', en: 'Acceptance & Commitment', what: '받아들이고, 가치를 향해 나아갑니다.', whatEn: 'Accept what is, move toward what matters.', color: '#d99a2b', best: '번아웃 · 불안', bestEn: 'Burnout · Anxiety' }, { abbr: 'EMDR', ko: '안구운동 민감소실', en: 'Eye Movement Reprocessing', what: '기억의 무게를 천천히 덜어냅니다.', whatEn: 'Gently lift the weight of memory.', color: '#9b78c4', best: 'PTSD · 트라우마', bestEn: 'PTSD · Trauma' }, { abbr: 'DBT', ko: '변증법적 행동치료', en: 'Dialectical Behavior', what: '격한 감정의 파도를 균형 있게 다룹니다.', whatEn: 'Ride intense emotional waves, in balance.', color: '#86cd6d', best: '감정조절 · 충동', bestEn: 'Emotion · Impulse' }, { abbr: 'ERP', ko: '노출 및 반응방지', en: 'Exposure & Response Prevention', what: '두려움과 한 걸음씩 마주섭니다.', whatEn: 'Face the fear, one step at a time.', color: '#df8246', best: '강박 · 공포', bestEn: 'OCD · Phobia' }, { abbr: 'IPT', ko: '대인관계치료', en: 'Interpersonal Therapy', what: '관계의 매듭을 다시 잇습니다.', whatEn: 'Mend the knots in your relationships.', color: '#cf6f93', best: '우울 · 관계', bestEn: 'Depression · Relationships' }, { abbr: 'BA', ko: '행동활성화', en: 'Behavioral Activation', what: '작은 행동으로 다시 움직입니다.', whatEn: 'Get moving again, one small act.', color: '#93cf78', best: '우울 · 무기력', bestEn: 'Depression · Low energy' }, ]; const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); React.useEffect(() => { if (paused) return; const id = setInterval(() => setIdx((i) => (i + 1) % MODALITIES.length), 3800); return () => clearInterval(id); }, [paused]); const m = MODALITIES[idx]; const isKo = lang !== 'en'; const sparks = [ { x: 96, y: 150, s: 13, d: 0 }, { x: 300, y: 176, s: 10, d: 0.5 }, { x: 70, y: 320, s: 16, d: 0.9 }, { x: 322, y: 350, s: 12, d: 0.3 }, { x: 108, y: 470, s: 10, d: 1.1 }, { x: 296, y: 470, s: 14, d: 0.7 }, { x: 190, y: 96, s: 11, d: 1.3 }, ]; return ( <> {/* 공유 바닥 그림자 — 캐릭터+거울을 한 바닥에 */}
{/* 왼쪽 — 해리포터풍 마법사 (거울 곁에서 주문을 거는) */}
{/* 얼굴 좌표(0 0 240 380)에 맞춘 오버레이 */} {/* 마법 학원 목도리 — 골드+틸 */} {/* 마법사 모자 */} {/* 번개 흉터 */} {/* 동그란 안경 */} {/* 마법 지팡이 */} {/* 캐스팅 반짝임 — 지팡이 끝에서 거울로 */}
{/* 소망의 거울 — 슬림 선버스트 + 마법 돌기 */}
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ position: 'absolute', left: 432, top: 116, width: 408, height: 620, zIndex: 5, filter: 'drop-shadow(0 10px 0 rgba(31,29,26,0.09))' }}> {/* 가는 햇살 — 가시가 직접 들락날락(물결) */} {Array.from({ length: 24 }).map((_, i) => { const a = (i * 15) * Math.PI / 180; const long = i % 2 === 0; const r0 = 162; const rMin = long ? 214 : 188; const rMax = long ? 252 : 210; const hw = (long ? 1.7 : 1.1) * Math.PI / 180; const ca = Math.cos(a), sa = Math.sin(a); const xa = (204 + Math.cos(a - hw) * r0).toFixed(1), ya = (296 + Math.sin(a - hw) * r0).toFixed(1); const xb = (204 + Math.cos(a + hw) * r0).toFixed(1), yb = (296 + Math.sin(a + hw) * r0).toFixed(1); const tip = (r) => `${(204 + ca * r).toFixed(1)},${(296 + sa * r).toFixed(1)}`; const dMin = `M${xa},${ya} L${tip(rMin)} L${xb},${yb} Z`; const dMax = `M${xa},${ya} L${tip(rMax)} L${xb},${yb} Z`; return ; })} {/* 슬림 골드 링 + 비드 */} {Array.from({ length: 40 }).map((_, i) => { const a = (i * 9) * Math.PI / 180; return ; })} {/* 마법 돌기 — 들어갔다 나왔다 맥동 */} {Array.from({ length: 8 }).map((_, i) => { const a = (i * 45) * Math.PI / 180; const bx = (204 + Math.cos(a) * 166).toFixed(1), by = (296 + Math.sin(a) * 166).toFixed(1); const dx = (Math.cos(a) * 8).toFixed(1), dy = (Math.sin(a) * 8).toFixed(1); return ; })} {/* 안쪽 게일라인 */} {/* 유리 광택 + 스윕 */} {/* 아치 각인 */} {isKo ? '거울아, 거울아 — 나에게 맞는 길은?' : 'Mirror, mirror — which path is mine?'} {/* 거울 속 — 치료기법 reveal (한/영) — 단순화 */}
{m.abbr}
{isKo ? m.ko : m.en}
{isKo ? m.what : m.whatEn}
{/* 진행 룬 */}
{MODALITIES.map((mm, i) => { const on = i === idx; return (
); } // ═════════════════════════════════════════════════════════════════════════════ // Site Hero function SiteHero({ siteKey, config, pose, extras, hideCorner, onCta, authButtons, overlay, ctaColor, ctaSoft, onNavAction, lang: langProp, setLang: setLangProp }) { const [langState, setLangState] = React.useState(typeof window !== 'undefined' && window.bnmGetLang ? window.bnmGetLang() : 'en'); const lang = langProp != null ? langProp : langState; const setLang = setLangProp || setLangState; const site = SITE_COLORS[siteKey]; const p = { ...SITE_PALETTES[siteKey], id: siteKey }; const c = config[lang] || config; return (
{extras && extras(p, lang)}
); } const CONFIGS = { talk: { ko: { nav: ['서비스', '세라피스트', '봇', '리뷰'], navCta: '예약', copyPosition: 'left', eyebrow: 'T · 11개의 마음 동반자', headline: (<>11명의
마음 친구.), sub: '주제마다 한 명씩 — 불안, 수면, 번아웃, 학습까지. 11명의 봇이 당신과 한 팀입니다.', primaryCta: '대화 시작', secondaryCta: '봇 만나보기', }, en: { nav: ['Service', 'Therapists', 'Bots', 'Reviews'], navCta: 'Intake', copyPosition: 'left', eyebrow: 'T · 11 mind companions', headline: (<>11 bots,
one team.), sub: 'One bot per topic — anxiety, sleep, burnout, learning. 11 companions, always on your side.', primaryCta: 'Start a chat', secondaryCta: 'Meet the bots', }, }, boston: { ko: { nav: ['리서치', '프로그램', '임상의', '소개'], navCta: '예약', copyPosition: 'left', eyebrow: 'B · 전페포괄 임상', headline: (<>전체를 함께
가는 레시피.), sub: '단편이 아닌 통합. ADHD · Autism · Sleep · Bipolar — 모든 재료를 한 그릇에 담는 14년 임상 노하우로.', primaryCta: '예약', secondaryCta: '연구 결과 →', }, en: { nav: ['Research', 'Programs', 'Clinicians', 'About'], navCta: 'Intake', copyPosition: 'left', eyebrow: 'B · Whole-person clinical', headline: (<>The full recipe
for the mind.), sub: 'Not pieces — the whole. ADHD · Autism · Sleep · Bipolar, 14 years of clinical know-how in one place.', primaryCta: 'Intake', secondaryCta: 'See research →', }, }, neuro: { ko: { nav: ['작동 원리', '세라피스트용', '사용자용', '가격'], navCta: '예약', copyPosition: 'left', eyebrow: 'N · 증상포착 · 패턴 훈련', headline: (<>패턴을
먼저 봅니다.), sub: '매일의 신호를 측정하고, 점들을 연결하고, 함께 훈련합니다. 변화의 작은 흐름도 catch하게.', primaryCta: '훈련 시작', secondaryCta: '데이터 보기', }, en: { nav: ['How it works', 'For therapists', 'For you', 'Pricing'], navCta: 'Intake', copyPosition: 'left', eyebrow: 'N · Symptom & pattern training', headline: (<>See the pattern
before it grows.), sub: 'Measure daily signals, connect the dots, train together. Catch every small shift early.', primaryCta: 'Start training', secondaryCta: 'View data', }, }, modality: { ko: { nav: ['방법', '코치', '사례', '시작'], navCta: '예약', copyPosition: 'right', eyebrow: 'M · 치료기제 매칭', headline: (<>당신에게
맞는 방법.), sub: 'CBT · MBSR · ACT · EMDR — 데이터와 임상 경험으로 매칭. 추측이 아닌 근거로 시작합니다.', primaryCta: '맞춤 치료 찾기', secondaryCta: '사례 보기', }, en: { nav: ['Method', 'Coaches', 'Stories', 'Start'], navCta: 'Intake', copyPosition: 'right', eyebrow: 'M · Modality matching', headline: (<>The right path
for you.), sub: 'CBT · MBSR · ACT · EMDR — matched by data and clinical experience. Evidence, not guesswork.', primaryCta: 'Find your match', secondaryCta: 'See stories', }, }, }; function TalkBotRentalCard({ accent, lang = 'en' }) { // 3개 슬롯, 각 슬롯에 봇 idx + percent const [slots, setSlots] = React.useState([ { idx: 8, pct: 100 }, // ADHD 100% { idx: null, pct: 0 }, { idx: null, pct: 0 }, ]); const [openSlot, setOpenSlot] = React.useState(null); const BOTS = window.BOTS || []; const PERCENT_OPTIONS = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; // 카드 3장: 용량 캡 + 엔진 등급 묶음. cap=게이지 상한, tier=결제 등급(card.* 시드 연결). const PLAN_OPTIONS = [ { tier: 'light', cap: 100, price: '$9', ko: '라이트', en: 'Light', dko: '일상 대화', den: 'Everyday chat' }, { tier: 'standard', cap: 150, price: '$15', ko: '스탠다드', en: 'Standard', dko: '전문 상담 수준', den: 'Pro counseling', hot: true }, { tier: 'pro', cap: 200, price: '$25', ko: '프로', en: 'Pro', dko: '심층 전문 분석', den: 'Deep analysis' }, ]; const [planCap, setPlanCap] = React.useState(150); const [planTier, setPlanTier] = React.useState('standard'); const MAX_TOTAL = planCap; // 선택 플랜 캡 — 게이지·슬롯상한·enable 기준 const totalPct = slots.reduce((a, s) => a + (s.pct || 0), 0); const ready = totalPct >= MAX_TOTAL; // 선택 플랜 캡 도달 시 채팅 시작 가능 const usedIdxs = slots.map(s => s.idx).filter(x => x !== null); const primary = slots.find(s => s.idx !== null && s.pct > 0); const primaryBot = primary ? BOTS[primary.idx] : null; // 플랜 전환: 캡 낮추면 초과분을 슬롯 순서대로 깎아 캡에 맞춤(과배분 방지). const selectPlan = (cap) => { setPlanCap(cap); setSlots(prev => { let remaining = cap; return prev.map(s => { const p = Math.min(s.pct || 0, remaining); remaining -= p; return { ...s, pct: p }; }); }); }; const setSlotPct = (slotIdx, pct) => { setSlots(prev => { const cur = prev[slotIdx].pct; const next = cur === pct ? 0 : pct; const otherPct = totalPct - cur; if (otherPct + next > MAX_TOTAL) return prev; return prev.map((s, i) => i === slotIdx ? { ...s, pct: next } : s); }); }; const setSlotBot = (slotIdx, botIdx) => { setSlots(prev => prev.map((s, i) => i === slotIdx ? { ...s, idx: botIdx } : s)); setOpenSlot(null); }; const greetingByKey = { depression: { en: 'Hey, I\'m here whenever heaviness lingers.', ko: '무거운 마음이 머물 때 언제든 곁에 있을게요.' }, anxiety: { en: 'Take a slow breath — I\'ll breathe with you.', ko: '천천히 숨 한 번 — 같이 호흡할게요.' }, sleep: { en: 'Rough night? Tell me how you slept.', ko: '잠 못 이루셨나요? 어젯밤 어떠셨어요?' }, burnout: { en: 'Your tired is real. Let\'s slow down together.', ko: '당신의 피로는 진짜예요. 천천히 가요.' }, ptsd: { en: 'You are safe here. Pace is yours.', ko: '여기는 안전해요. 속도는 당신이 정해요.' }, ocd: { en: 'A thought is just a thought. Want to look at one?', ko: '생각은 그저 생각이에요. 같이 들여다볼까요?' }, bipolar: { en: 'How is your mood today, in your words?', ko: '오늘 기분은 당신의 말로 어떤가요?' }, autism: { en: 'No mask needed. Let\'s talk your way.', ko: '가면 벗어도 돼요. 당신의 방식으로 이야기해요.' }, adhd: { en: 'One small step at a time. What\'s on your mind?', ko: '한 번에 한 걸음씩. 어떤 생각이 떠올랐어요?' }, learning: { en: 'Curious about something? Let\'s explore.', ko: '궁금한 거 있어요? 함께 파헤쳐봐요.' }, peak: { en: 'Ready for your top form? Tell me your goal.', ko: '최고의 컨디션 가즈아. 목표가 뭐예요?' }, }; const greet = primaryBot && (greetingByKey[primaryBot.key] || {})[lang] || (lang === 'en' ? 'Hello! How are you today?' : '안녕! 오늘 어때요?'); // 3 프리셋 팩 — B.html의 3 프로그램 탭과 비슷한 위치/스타일 const findIdx = (key) => BOTS.findIndex(b => b.key === key); const PRESETS = [ { key: 'anxiety-pack', ko: '불안 패키지', en: 'Anxiety Pack', color: '#9bb88a', slots: [ { idx: findIdx('anxiety'), pct: 100 }, { idx: findIdx('sleep'), pct: 50 }, { idx: findIdx('burnout'), pct: 30 }, ], }, { key: 'focus-pack', ko: '집중 패키지', en: 'Focus Pack', color: '#f5a857', slots: [ { idx: findIdx('adhd'), pct: 100 }, { idx: findIdx('learning'), pct: 50 }, { idx: findIdx('peak'), pct: 50 }, ], }, { key: 'mood-pack', ko: '기분 패키지', en: 'Mood Pack', color: '#bca6c8', slots: [ { idx: findIdx('depression'), pct: 100 }, { idx: findIdx('bipolar'), pct: 50 }, { idx: findIdx('ptsd'), pct: 50 }, ], }, ]; const applyPreset = (preset) => { setSlots(preset.slots); setOpenSlot(null); }; return (
{/* 헤더 */}
{lang === 'en' ? 'Bot Rental' : '봇 렌탈'}

{lang === 'en' ? (<>3 bots · up to 200%) : (<>봇 3개 · 최대 200%)}

{lang === 'en' ? 'Each 10–100%. Monthly · 24/7 · web & mobile.' : '각 10–100% 강도. 월 단위 · 24/7 · 웹 & 모바일.'}

{/* 3 프리셋 팩 버튼 — B.html 프로그램 탭과 비슷한 위치 */}
{PRESETS.map(preset => ( ))}
{/* 3개 슬롯 — 가로 일렬 */}
{slots.map((slot, si) => { const bot = slot.idx !== null ? BOTS[slot.idx] : null; const BC = bot ? bot.C : null; const isOpen = openSlot === si; const slotColor = bot ? bot.color : INK; return (
{/* 봇 픽커 */} {/* % 리스트박스 (정밀 선택) */}
{/* 봇 드롭다운 (슬롯 별) */} {isOpen && (
{bot && ( )} {BOTS.map((b, i) => { const BC2 = b.C; const isCur = slot.idx === i; const usedByOther = usedIdxs.includes(i) && !isCur; return ( ); })}
)}
); })}
{/* 플랜 카드 3장 — 용량 캡 + 등급. 선택 시 selectPlan(cap)로 게이지 캡 변경 */}
{PLAN_OPTIONS.map(({ tier, cap, price, ko, en, dko, den, hot }) => { const sel = planTier === tier; return ( ); })}
{/* 합계 게이지 — 0→선택캡 채움, 선택캡 도달 시에만 채팅 시작 enable */}
{lang === 'en' ? 'Capacity' : '용량'} {totalPct}% / {MAX_TOTAL}%
{/* 채움 바 — 200%에서 가득 (50% 지점에 100% 눈금) */}
{MAX_TOTAL > 100 && (
)}
{/* 안내 — 선택캡 미만이면 봇 더 채우라고 */}
{ready ? (lang === 'en' ? '✓ Full capacity — ready to start' : `✓ ${MAX_TOTAL}% 가득 — 시작 준비 완료`) : (lang === 'en' ? `Add more bot capacity to reach ${MAX_TOTAL}% (${MAX_TOTAL - totalPct}% to go)` : `봇을 더 채워 ${MAX_TOTAL}%로 (${MAX_TOTAL - totalPct}% 남음)`)}
{/* 인사말 */} {primaryBot && totalPct > 0 && (
{primaryBot.sub} {lang === 'en' ? 'says' : '인사'}
"{greet}"
)} {/* Start chat CTA — 200% 가득일 때만 활성 */} {/* 가격 + 모바일 다운로드 */}
{lang === 'en' ? 'Light $9 · Standard $15 · Pro $25 / mo' : '라이트 $9 · 스탠다드 $15 · 프로 $25 / 월'}
{lang === 'en' ? 'Also on mobile (iOS / Android)' : '모바일 앱 (iOS / Android)'}
); } // ═════════════════════════════════════════════════════════════════ // TalkCatcher — 예약/가입/로그인 + 사용안내/메커니즘 모달 // 노랑 hex: 밑화면 기존 #f5a857 (ADHD/Focus). 새 색 ❌. // 인증: Supabase Auth (window.AdhdAuth, tc-auth.js). 결제/앱간연동은 scaffold. // ═════════════════════════════════════════════════════════════════ const TALK_YELLOW = '#f5a857'; const TALK_YELLOW_SOFT = '#fdf2e1'; function tcRead(key, fallback) { try { const v = JSON.parse(localStorage.getItem(key)); return v == null ? fallback : v; } catch (e) { return fallback; } } function tcWrite(key, val) { try { localStorage.setItem(key, JSON.stringify(val)); } catch (e) {} } // 관리자 데모 목록([6])용 최소 미러 — 비번 저장 ❌ (실제 인증은 Supabase) function tcMirrorAccount(name, email, extra) { email = (email || '').toLowerCase(); const accts = tcRead('tc_accounts', []).filter(a => a.email !== email); const prev = tcRead('tc_accounts', []).find(a => a.email === email) || {}; accts.push(Object.assign({ name: name || prev.name || '', email, createdAt: prev.createdAt || new Date().toISOString(), plan: 'trial' }, prev, extra || {}, { name: name || prev.name || '', email })); tcWrite('tc_accounts', accts); } function tcPwChecks(pw) { return { len: pw.length >= 8, num: /[0-9]/.test(pw), sym: /[^A-Za-z0-9]/.test(pw) }; } function tcPwOk(pw) { const c = tcPwChecks(pw); return c.len && c.num && c.sym; } const tcInput = { width: '100%', padding: '11px 13px', marginBottom: 8, border: `1.5px solid #e8d9b8`, background: '#fff', borderRadius: 10, fontFamily: FONT, fontSize: 13.5, color: INK, outline: 'none', boxSizing: 'border-box', }; const tcPrimaryBtn = { width: '100%', padding: '13px', background: TALK_YELLOW, color: '#1f1d1a', border: 0, borderRadius: 12, fontFamily: FONT, fontWeight: 800, fontSize: 14, cursor: 'pointer', boxShadow: `0 3px 0 ${INK}1a`, }; const tcGhostBtn = { width: '100%', padding: '11px', background: TALK_YELLOW_SOFT, color: '#b8801c', border: `1.5px solid ${TALK_YELLOW}`, borderRadius: 12, fontFamily: FONT, fontWeight: 700, fontSize: 13, cursor: 'pointer', }; const tcErr = (msg) => (
{msg}
); const tcFlag = (msg) => (
{msg}
); // 가입/로그인 버튼 (예약 옆) — 같은 노랑 톤, 예약만 채움 pill function TalkAuthButtons({ lang, user, verified, onSignup, onLogin, onLogout }) { const ko = lang === 'ko'; const base = { padding: '8px 14px', borderRadius: 999, fontFamily: FONT, fontSize: lang === 'ko' ? 11 : 12, fontWeight: 700, cursor: 'pointer', whiteSpace: 'nowrap', transition: 'all 0.16s ease', }; if (verified && user && user.email) { return ( ); } return ( <> ); } function AdhdAdminButtons({ lang, user, verified, onLogout }) { return ( { if (window.AdhdGate) window.AdhdGate.require(); }} onLogin={() => { if (window.AdhdGate) window.AdhdGate.require(); }} onLogout={onLogout} /> ); } function SuperButton({ lang }) { const onClick = () => { const pw = window.prompt(lang === 'ko' ? '슈퍼 관리자 비밀번호' : 'Super admin password'); if (pw === null) return; if (pw === 'bnm123#') { window.location.href = '/super.html'; } else { alert(lang === 'ko' ? '비밀번호가 틀렸습니다.' : 'Wrong password.'); } }; return ( ); } function TCModal({ title, eyebrow, onClose, children, maxWidth = 460 }) { return (
e.stopPropagation()} style={{ width: maxWidth, maxWidth: '100%', background: '#fffdf6', border: `2px solid ${INK}`, borderRadius: 22, padding: '24px 26px 26px', boxShadow: '0 24px 60px rgba(31,29,26,0.30)', position: 'relative' }}> {eyebrow &&
{eyebrow}
} {title &&

{title}

} {children}
); } // [3+5] 첫째 풀다운 — 사용 안내 (그림 포함) function TCGuideModal({ lang, onClose }) { const ko = lang === 'ko'; const BOTS = window.BOTS || []; const pics = ['adhd', 'anxiety', 'learning'].map(k => BOTS.find(b => b.key === k)).filter(Boolean); const steps = ko ? [['봇 고르기', '최대 3개까지 — 나에게 맞는 전문봇을 골라요.'], ['강도 채우기', '각 봇을 10~100%로, 합쳐서 200%까지 채워요.'], ['대화 시작', '200% 가득 차면 채팅이 열려요. 24/7 곁에 있어요.']] : [['Pick bots', 'Up to 3 — choose the specialists that fit you.'], ['Fill intensity', 'Each bot 10–100%, up to 200% combined.'], ['Start chatting', 'At full 200% the chat opens. Here 24/7.']]; return ( {/* 그림 — 봇 일러스트 3종 */}
{pics.map(b => { const C = b.C; return (
{C ? : null}
{b.sub}
); })}
{/* 스텝 */}
{steps.map(([t, d], i) => (
{i + 1}
{t}
{d}
))}
{/* 봇 최대 3개 */}
{ko ? '봇은 최대 3개까지 함께 둘 수 있어요.' : 'You can keep up to 3 bots together.'}
{/* 요금제 — 라이트/스탠다드/프로 3단계 (중간=하이라이트) */}
{ko ? '요금제' : 'Plans'}
{[['100%', '$9', ko ? '봇 강도 합 100%' : 'Bots total 100%'], ['150%', '$15', ko ? '봇 강도 합 150%' : 'Bots total 150%'], ['200%', '$25', ko ? '봇 강도 합 200% (가득)' : 'Bots total 200% (full)']].map(([cap, price, d], i) => (
{cap}
{price} {ko ? '/ 월' : '/ mo'}
{d}
))}
{/* 다른 쪽 정보 불러오기 */}
{ko ? '다른 쪽(증상판별·개별증상 캐쳐)의 정보를 불러오면, 전문봇이 역할에 더 맞게 도울 수 있어요.' : 'When you bring in info from the other catchers (Symptom / Track), each bot can play its specialist role more fully.'}
{/* 보안 문구 — 지정 표현 그대로, 절대표현 ❌ */}
🔒
{ko ? '여기 올린 자료는 본인 Google Drive 저장, 본인만 접근(회사도 못 봄).' : 'Anything you upload is stored in your own Google Drive — only you can open it (we can\'t see it either).'}
); } // [3+5] 둘째 풀다운 — 작동 메커니즘 function TCMechanismModal({ lang, onClose }) { const ko = lang === 'ko'; const rows = ko ? [['도메인 지식 금고', 'DSM-5-TR 기준 · 검증된 척도 · 인지왜곡 지도 · 기제 그래프 · 훈련 그리드를 도메인별로 보유.'], ['역할·말투 프로파일', '각 봇이 자기 영역의 어조·우선순위·금기를 담은 역할 정의를 따름.'], ['내 자료 검색(RAG)', '불러온 내 기록을 근거로 끌어와, 일반론이 아니라 내 맥락으로 응답.'], ['다중 알고리즘 파이프라인', '여러 알고리즘이 차례로 검토·교차확인해 한 봇의 응답을 만듦.']] : [['Domain knowledge vault', 'DSM-5-TR criteria, validated scales, distortion maps, mechanism graphs, training grids — per domain.'], ['Role & voice profile', 'Each bot follows a role definition with its tone, priorities, and boundaries.'], ['Retrieval over your data (RAG)', 'Pulls from the records you imported, so replies fit your context — not generic advice.'], ['Multi-algorithm pipeline', 'Several algorithms review and cross-check in turn to shape one bot\'s reply.']]; return (

{ko ? '각 봇이 "전문봇"이 되는 건 네 가지 조건이 맞물려서예요. 아래 네 가지가 모두 갖춰질 때 그 역할을 수행합니다.' : 'A bot becomes a "specialist" when four pieces fit together. It plays the role when all four below are in place.'}

{rows.map(([t, d], i) => (
✓
{t}
{d}
))}
{ko ? '→ 네 조건이 모두 충족되면, 봇이 그 역할을 갖춘 상태로 작동합니다.' : '→ With all four met, the bot operates as a role-ready specialist.'}
); } // [1] 가입 — 이름+이메일+비번×2(요건) → Supabase signUp → 이메일 검증 메일 function TCSignupModal({ lang, onClose, onLogin }) { const ko = lang === 'ko'; const [step, setStep] = React.useState('form'); // form | verify | done const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const [pw2, setPw2] = React.useState(''); const [err, setErr] = React.useState(''); const [busy, setBusy] = React.useState(false); const [msg, setMsg] = React.useState(''); const checks = tcPwChecks(pw); const submitForm = async () => { setErr(''); if (!name.trim()) return setErr(ko ? '이름을 입력해주세요.' : 'Name is required.'); if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) return setErr(ko ? '유효한 이메일을 입력해주세요.' : 'A valid email is required.'); if (!tcPwOk(pw)) return setErr(ko ? '비밀번호 요건을 충족해주세요.' : 'Password does not meet the requirements.'); if (pw !== pw2) return setErr(ko ? '비밀번호가 일치하지 않아요.' : 'Passwords do not match.'); if (!window.AdhdAuth || !window.AdhdAuth.configured()) { return setErr(ko ? 'Supabase 프로젝트 미설정 (tc-auth.js — 할비 확정 대기).' : 'Supabase project not configured (tc-auth.js).'); } setBusy(true); const { data, error } = await window.AdhdAuth.signUp({ name: name.trim(), email: email.trim().toLowerCase(), password: pw, lang, deployMode: 'consumer' }); setBusy(false); if (error) return setErr((error.message === 'NOT_CONFIGURED') ? (ko ? 'Supabase 프로젝트 미설정.' : 'Supabase not configured.') : error.message); tcMirrorAccount(name.trim(), email.trim().toLowerCase(), { plan: 'trial', verified: false }); // [6] 관리자 데모 미러 if (data && data.session) setStep('done'); // 이메일 확인 OFF → 즉시 로그인 else setStep('verify'); // 이메일 확인 ON → 검증 대기 }; const resend = async () => { setMsg(''); setErr(''); const { error } = await window.AdhdAuth.resendVerification(email.trim().toLowerCase()); if (error) setErr(error.message); else setMsg(ko ? '검증 메일을 다시 보냈어요.' : 'Verification email resent.'); }; const Check = ({ ok, label }) => ( {ok ? '✓' : '○'} {label} ); return ( {step === 'form' && ( <> setName(e.target.value)} /> setEmail(e.target.value)} /> setPw(e.target.value)} /> setPw2(e.target.value)} />
{pw2.length > 0 && 0} label={ko ? '일치' : 'match'} />}
{err && tcErr(err)}
{ko ? '이미 계정이 있나요? ' : 'Already have an account? '}
)} {step === 'verify' && ( <>

{ko ? `${email} 로 검증 메일을 보냈어요. 메일의 링크를 누르면 가입이 완료돼요. 검증 전엔 로그인·데이터 연동이 비활성입니다.` : `We sent a verification link to ${email}. Click it to finish signing up. Login and data link stay disabled until verified.`}

{err && tcErr(err)} {msg &&
{msg}
} )} {step === 'done' && ( <>

{ko ? `${name}님, 환영해요! 로그인된 상태예요.` : `Welcome, ${name}! You're logged in.`}

)} ); } // [1] 로그인 + 비밀번호 찾기 (Supabase Auth) function TCLoginModal({ lang, onClose, onSignup, user, onAuthChange, onDataLink }) { const ko = lang === 'ko'; const [mode, setMode] = React.useState(user && user.email ? 'account' : 'login'); // login | reset | account const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const [err, setErr] = React.useState(''); const [msg, setMsg] = React.useState(''); const [busy, setBusy] = React.useState(false); const cfg = !!(window.AdhdAuth && window.AdhdAuth.configured()); const doLogin = async () => { setErr(''); if (!cfg) return setErr(ko ? 'Supabase 프로젝트 미설정 (tc-auth.js — 할비 확정 대기).' : 'Supabase not configured (tc-auth.js).'); setBusy(true); const { data, error } = await window.AdhdAuth.signIn({ email: email.trim().toLowerCase(), password: pw }); setBusy(false); if (error) { const notConfirmed = /not confirmed|confirm/i.test(error.message || ''); return setErr(notConfirmed ? (ko ? '이메일 검증이 아직 안 됐어요. 메일의 링크를 먼저 눌러주세요.' : 'Email not verified yet — click the link in your email first.') : (ko ? '이메일 또는 비밀번호가 맞지 않아요.' : 'Email or password is incorrect.')); } if (data && data.user) tcMirrorAccount((data.user.user_metadata || {}).display_name, data.user.email, { verified: true }); if (onAuthChange) onAuthChange(); setMode('account'); }; const doReset = async () => { setErr(''); setMsg(''); if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) return setErr(ko ? '유효한 이메일을 입력해주세요.' : 'A valid email is required.'); if (!cfg) return setErr(ko ? 'Supabase 프로젝트 미설정.' : 'Supabase not configured.'); setBusy(true); const { error } = await window.AdhdAuth.resetPassword(email.trim().toLowerCase()); setBusy(false); if (error) return setErr(error.message); setMsg(ko ? '재설정 링크를 이메일로 보냈어요. 메일에서 링크를 누르면 새 비밀번호를 정할 수 있어요.' : 'Reset link sent. Open it from your email to set a new password.'); }; const logout = async () => { if (window.AdhdAuth) await window.AdhdAuth.signOut(); if (onAuthChange) onAuthChange(); setMode('login'); setEmail(''); setPw(''); }; const verified = window.AdhdAuth ? window.AdhdAuth.isVerified(user) : false; return ( {mode === 'login' && ( <> setEmail(e.target.value)} /> setPw(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') doLogin(); }} /> {err && tcErr(err)}
)} {mode === 'reset' && ( <>

{ko ? '가입한 이메일로 재설정 링크를 보내드려요.' : 'We\'ll send a reset link to your email.'}

setEmail(e.target.value)} /> {err && tcErr(err)} {msg &&
{msg}
} )} {mode === 'account' && user && ( <>
{(user.user_metadata || {}).display_name || user.email}
{user.email} {verified ? · {ko ? '검증됨' : 'verified'} : · {ko ? '미검증' : 'unverified'}}
)} ); } // [1] 비밀번호 재설정 완료 — 메일 링크(recovery)로 돌아왔을 때 새 비번 설정 function TCRecoveryModal({ lang, onClose, onAuthChange }) { const ko = lang === 'ko'; const [pw, setPw] = React.useState(''); const [pw2, setPw2] = React.useState(''); const [err, setErr] = React.useState(''); const [busy, setBusy] = React.useState(false); const [done, setDone] = React.useState(false); const checks = tcPwChecks(pw); const submit = async () => { setErr(''); if (!tcPwOk(pw)) return setErr(ko ? '비밀번호 요건을 충족해주세요.' : 'Password does not meet the requirements.'); if (pw !== pw2) return setErr(ko ? '비밀번호가 일치하지 않아요.' : 'Passwords do not match.'); setBusy(true); const { error } = await window.AdhdAuth.updatePassword(pw); setBusy(false); if (error) return setErr(error.message); if (onAuthChange) onAuthChange(); setDone(true); }; const Check = ({ ok, label }) => ({ok ? '✓' : '○'} {label}); return ( {done ? ( <>

{ko ? '비밀번호가 바뀌었어요. 로그인된 상태예요.' : 'Password updated. You\'re logged in.'}

) : ( <> setPw(e.target.value)} /> setPw2(e.target.value)} />
{err && tcErr(err)} )} ); } // [2] 앱간 데이터 링크 — 로그인+검증된 이메일로만. 이름/이메일 입력칸 ❌. // 동의 → 본인 Drive로 pull. symptom/track 소스 미연동 → scaffold(목록만)+flag. function TCDataLinkModal({ lang, onClose, user }) { const ko = lang === 'ko'; const verified = window.AdhdAuth ? window.AdhdAuth.isVerified(user) : false; const email = user && user.email ? user.email : ''; const [step, setStep] = React.useState('pick'); // pick | done const [consent, setConsent] = React.useState(false); const sources = ko ? [{ app: '증상판별캐쳐', items: ['ADHD 선별 결과 (ASRS)', '수면 패턴 요약', '기분 변동 기록'] }, { app: '개별증상캐쳐 (트랙)', items: ['최근 30일 집중도 추이', '수면 시간 로그', '감정 일기 태그'] }] : [{ app: 'SymptomCatcher', items: ['ADHD screen (ASRS)', 'Sleep pattern summary', 'Mood swing log'] }, { app: 'TrackCatcher', items: ['Focus trend (30 days)', 'Sleep-time log', 'Mood-journal tags'] }]; const allKeys = sources.flatMap((s, si) => s.items.map((_, ii) => si + ':' + ii)); const [picked, setPicked] = React.useState(() => new Set(allKeys)); const toggle = (k) => setPicked(prev => { const n = new Set(prev); n.has(k) ? n.delete(k) : n.add(k); return n; }); const pull = () => { const sel = sources.flatMap((s, si) => s.items.filter((_, ii) => picked.has(si + ':' + ii)).map(label => ({ app: s.app, label }))); tcWrite('tc_imported', { email: email.toLowerCase(), at: new Date().toISOString(), items: sel }); setStep('done'); }; // 신원 게이트 — 로그인·검증 안 됐으면 진입 차단 if (!verified) { return (

{ko ? '검증된 계정으로 로그인한 뒤에만 내 기록을 불러올 수 있어요.' : 'Sign in with a verified account to import your records.'}

 ); } return ( {step === 'pick' && ( <>
{ko ? '로그인 계정' : 'Account'}: {email} {ko ? '의 기록만 조회해요.' : ' — only this identity is queried.'}
{sources.map((s, si) => (
{s.app}
{s.items.map((it, ii) => { const k = si + ':' + ii; const on = picked.has(k); return ( ); })}
))} {/* 동의 */} {tcFlag(ko ? '⚠ scaffold: symptom/track 소스·Drive pull 미연동 — 위 목록은 예시. 신원 게이트(로그인+검증 이메일)는 실제 적용됨.' : '⚠ scaffold: symptom/track source & Drive pull not wired — list is a sample. Identity gate (verified login) is real.')} )} {step === 'done' && ( <>

{ko ? '선택한 기록을 가져오기로 표시했어요. (실제 Drive 저장은 소스/Drive 연동 후)' : 'Marked your selection for import. (Actual Drive save once source/Drive are wired.)'}

{tcFlag(ko ? '⚠ scaffold: 현재는 이 브라우저에 선택만 저장. Drive pull은 gapi(beta-v3 drive.js) 연동 필요.' : '⚠ scaffold: selection saved in this browser only. Drive pull needs gapi (beta-v3 drive.js).')} )} ); } // 고정 stage 하단 법적 바 (Stripe 요구 — legal 링크 + 회사정보). whiteSpace:nowrap + flexWrap = 세로 깨짐 방지. function TalkLegalFooter({ lang }) { const en = lang === 'en'; return (
{en ? 'TalkCatcher is an AI wellness tool, not medical care or diagnosis · Crisis? 988' : 'TalkCatcher는 AI 웰니스 도구이며 의료·진단·치료가 아니에요 · 위기? 988'} · {LEGAL_NAV.map((l, i) => ( {i > 0 && ·} {en ? l.en : l.ko} ))} · © 2026 Boston Neuromind LLC · 866 Washington St, Canton MA 02021
); } function TalkCatcherHero() { const [lang, setLang] = React.useState(typeof window !== 'undefined' && window.bnmGetLang ? window.bnmGetLang() : 'en'); const [modal, setModal] = React.useState(null); // guide | mechanism | signup | login | datalink | recovery | null const [user, setUser] = React.useState(null); // raw user (모달 표시용 - 미검증 포함) const [verified, setVerified] = React.useState(false); // 헤더 게이트 (peak isVerified 기준) const [role, setRole] = React.useState(null); // 임상가 역할 (owner/admin/clinician) const close = () => setModal(null); // peak init() 과 동일 순서를 한 곳에서: getUser -> isVerified 게이트 -> ensure -> role const refreshAuth = React.useCallback(async () => { if (!window.AdhdAuth) { setUser(null); setVerified(false); setRole(null); return; } let u = null; try { u = await window.AdhdAuth.getUser(); } catch (e) { u = null; } setUser(u); const ok = !!(u && window.AdhdAuth.isVerified && window.AdhdAuth.isVerified(u)); setVerified(ok); if (!ok) { setRole(null); return; } if (window.AdhdSession && window.AdhdSession.ensure) { try { await window.AdhdSession.ensure(); } catch (e) {} } const s = (window.AdhdSession && window.AdhdSession.current) ? window.AdhdSession.current() : null; setRole(s ? s.role : null); }, []); React.useEffect(() => { refreshAuth(); let off = null; if (window.AdhdAuth && window.AdhdAuth.onChange) off = window.AdhdAuth.onChange(() => { refreshAuth(); }); // 메일 링크(recovery)로 돌아온 경우 hash로도 감지 try { if (/type=recovery/.test(window.location.hash || '')) setModal('recovery'); } catch (e) {} return () => { if (typeof off === 'function') off(); }; }, [refreshAuth]); // peak 로그아웃과 동일: AdhdSession.logout + signOut + location.reload const handleLogout = React.useCallback(async () => { try { if (window.AdhdSession && window.AdhdSession.logout) await window.AdhdSession.logout(); } catch (e) {} try { if (window.AdhdAuth && window.AdhdAuth.client) { const c = window.AdhdAuth.client(); if (c) await c.auth.signOut(); } } catch (e) {} location.reload(); }, []); // 헤더 버튼 - 단일 상태(user/verified/role) 전달, 자체 구독 없음 const authButtons = ; const overlay = ( <> {modal === 'guide' && } {modal === 'mechanism' && } {modal === 'signup' && setModal('login')} />} {modal === 'login' && setModal('signup')} user={user} onAuthChange={refreshAuth} onDataLink={() => setModal('datalink')} />} {modal === 'datalink' && } {modal === 'recovery' && } ); return { window.location.href = '/Booking.html'; }} ctaColor={TALK_YELLOW} ctaSoft={true} authButtons={authButtons} overlay={overlay} onNavAction={(a) => setModal(a)} extras={(p, lang2) => } pose={({ p, accent }) => } />; } function BostonNeuroMindHero() { return } pose={({ p, lang }) => } />; } function NeuroCatchersHero() { return } pose={({ p, lang }) => } />; } function ModalityCatcherHero() { return } pose={({ p, lang }) => } />; } // ═════════════════════════════════════════════════════════════════ // TrackCatcher Globe — 큰 글로브 안에 symptom 이름 + 봇이 번갈아 들어가는 캐쳐 // 11개 봇이 차례로 글로브 안에 등장 → 11개 제품의 시각 시그니처 function TrackCatcherSession() { const [lang, setLang] = React.useState(typeof window !== 'undefined' && window.bnmGetLang ? window.bnmGetLang() : 'en'); const [idx, setIdx] = React.useState(0); const [autoPlay, setAutoPlay] = React.useState(true); const [tick, setTick] = React.useState(0); const BOTS = window.BOTS || []; React.useEffect(() => { if (!autoPlay || BOTS.length === 0) return; // 120초 한 바퀴 끝나면 다음 봇으로 const id = setInterval(() => setIdx(i => (i + 1) % BOTS.length), 120000); return () => clearInterval(id); }, [autoPlay, BOTS.length]); // 행성 공전 — 100ms마다 위치 갱신 (240초 한 바퀴, 매우 천천히) React.useEffect(() => { if (!autoPlay) return; const id = setInterval(() => setTick(t => t + 1), 100); return () => clearInterval(id); }, [autoPlay]); const bot = BOTS[idx] || {}; const accent = bot.color || '#5a8acc'; const site = SITE_COLORS.neuro; const p = { ...SITE_PALETTES.neuro, id: 'neuro', accent }; const BotC = bot.C; const c = CONFIGS.neuro[lang] || CONFIGS.neuro; const GW = 480; // globe diameter const CW = GW + 100, CH = GW + 140; const gcx = CW / 2, gcy = GW / 2 + 30, gr = GW / 2; const standId = `globeShadow-${idx}`; return (