/* ============================================================================
* service-backdrops.jsx — 11 증상별 배경 (LIGHT · 권위/차분 · 구도 자체가 다름)
* window.ServiceBackdrop({ botKey, accent })
* 증상마다 그라디언트 방향 + 모티프 구도를 다르게 (아래빛/호흡원/분할/격자/능선…)
* ========================================================================== */
const IVORY = '#f6f1e9';
const SCENES = {
// 우울 — 아래에서 따뜻하게 차오르는 빛 + 잔잔한 수평
depression: {
bg: (a) => `linear-gradient(178deg, #f8f2ea 0%, ${a}10 56%, ${a}2c 100%)`,
motif: (a) => (
),
},
// 불안 — 중앙에서 퍼지는 호흡원
anxiety: {
bg: (a) => `radial-gradient(78% 80% at 60% 44%, ${a}24 0%, ${a}10 40%, ${IVORY} 100%)`,
motif: (a) => (
{[90, 180, 290, 410, 540].map((r, i) => )}
),
},
// 수면 — 서늘한 트와일라잇 + 초승달 + 별
sleep: {
bg: (a) => `linear-gradient(168deg, #eceaf3 0%, ${a}26 52%, #e8e6f1 100%)`,
motif: (a) => (
{[[470, 180], [560, 280], [380, 330], [640, 200], [520, 130]].map((p, i) => )}
),
},
// 번아웃 — 대각선 따뜻한 빛 → 식어가는 호
burnout: {
bg: (a) => `linear-gradient(132deg, #f8f1e7 0%, ${a}18 66%, ${a}30 100%)`,
motif: (a) => (
{[0, 1, 2, 3].map((i) => )}
),
},
// PTSD — 강한 수평선 + 층층이 쌓인 안정 띠
ptsd: {
bg: (a) => `linear-gradient(180deg, #eef2f1 0%, ${a}12 50%, ${a}22 100%)`,
motif: (a) => (
{[360, 410, 540, 600, 660].map((y, i) => )}
),
},
// OCD — 정돈된 전면 격자
ocd: {
bg: () => '#eff3f0',
motif: (a) => (
{[...Array(13)].map((_, i) => )}
{[...Array(8)].map((_, i) => )}
),
},
// 양극성 — 위/아래 분할 + 중앙 균형선
bipolar: {
bg: (a) => `linear-gradient(180deg, ${a}26 0%, #f4efe9 47%, #edeff2 53%, ${a}1e 100%)`,
motif: (a) => (
),
},
// 자폐 — 또렷한 동심원 + 정렬 점
autism: {
bg: (a) => `radial-gradient(74% 78% at 60% 44%, ${a}22 0%, ${a}0e 42%, #eef2f5 100%)`,
motif: (a) => (
{[80, 165, 260, 365].map((r, i) => )}
{[...Array(15)].map((_, k) => { const r = Math.floor(k / 5), c = k % 5; return ; })}
),
},
// ADHD — 한 점으로 모이는 사선 광선
adhd: {
bg: (a) => `radial-gradient(92% 92% at 58% 42%, ${a}22 0%, ${a}0e 46%, #f6efe7 100%)`,
motif: (a) => (
{[[120, 160], [300, 110], [1320, 180], [1280, 520], [180, 560], [1180, 660], [80, 380], [1360, 360]].map((p, i) => {
const dx = 880 - p[0], dy = 430 - p[1], L = Math.hypot(dx, dy), ux = dx / L, uy = dy / L;
return ;
})}
),
},
// 학습 — 점을 잇는 호기심의 길 + 별
learning: {
bg: (a) => `linear-gradient(112deg, #f8f3e6 0%, ${a}14 70%, ${a}22 100%)`,
motif: (a) => (
{[[220, 560], [380, 470], [540, 540], [700, 430], [880, 500], [1060, 380], [1240, 440]].map((p, i) => )}
),
},
// 피크 — 위에서 내리는 빛 + 능선
peak: {
bg: (a) => `linear-gradient(180deg, ${a}2c 0%, #f1f0ec 54%, #ecefe9 100%)`,
motif: (a) => (
),
},
};
function ServiceBackdrop({ botKey, accent }) {
const scene = SCENES[botKey] || SCENES.depression;
return (
);
}
Object.assign(window, { ServiceBackdrop });