// landings.jsx — v8 · ??? ??, ??? ??? ??
//
// ??:
//   · ???? ?? (??, ?? ??)
//   · ?? = ??? ????? + ???? atmospheric blob/???
//   · ??? ?? ? ? ??? ? ?? floating ????
//   · ??? ???? ?? ??·thought bubble·??????

const { Person, PersonStanding, SITE_COLORS, SITE_PALETTES, INK } = window;
const FONT = '"Pretendard","Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif';

// -----------------------------------------------------------------------------
// SiteLink — plain link or dropdown when site.items exists
function SiteLink({ site, lang, accent, currentSite }) {
  const [hover, setHover] = React.useState(false);
  const isActive = site.key === currentSite;
  const hasDropdown = Array.isArray(site.items) && site.items.length > 0;
  return (
    <div style={{ position: 'relative', display: 'inline-block' }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
      <a href={site.file}
        style={{
          textDecoration: 'none',
          color: isActive ? accent : '#5a4a35',
          fontWeight: isActive ? 800 : 500,
          borderBottom: isActive ? `2px solid ${accent}` : '2px solid transparent',
          paddingBottom: 2,
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
        {lang === 'en' ? site.en : site.ko}
        {hasDropdown && (
          <span style={{
            fontSize: 7, opacity: 0.6,
            transform: hover ? 'rotate(180deg)' : 'rotate(0)',
            transition: 'transform 0.18s',
            display: 'inline-block',
          }}>?</span>
        )}
      </a>
      {hasDropdown && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 8px)', left: -8,
          minWidth: 240,
          background: '#ffffff',
          border: `1.5px solid ${INK}22`,
          borderRadius: 14,
          padding: '8px 6px',
          boxShadow: `0 12px 30px rgba(80,50,10,0.15), 0 4px 8px rgba(0,0,0,0.05)`,
          opacity: hover ? 1 : 0,
          visibility: hover ? 'visible' : 'hidden',
          transform: hover ? 'translateY(0)' : 'translateY(-6px)',
          transition: 'opacity 0.18s, transform 0.18s, visibility 0.18s',
          zIndex: 50,
          fontFamily: FONT,
        }}>
          {site.items.map((it, i) => (
            <a key={i} href={it.href}
              style={{
                display: 'block', padding: '9px 14px',
                textDecoration: 'none', color: '#3a2a18',
                fontSize: 13, fontWeight: 500, borderRadius: 9,
                transition: 'background 0.12s',
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = '#f5ede0'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              {lang === 'en' ? it.en : it.ko}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

// -----------------------------------------------------------------------------
// ?? UI
function Nav({ siteName, items, ctaLabel, accent, lang, setLang, currentSite }) {
  const sites = [
    { key: 'talk',     ko: '?????',   en: 'TalkCatcher',     file: 'https://talkcatcher.agedlearning.com/' },
    { key: 'boston',   ko: '??????', en: 'BostonNeuroMind', file: 'https://agedlearning.com/',
      items: [
        { ko: '????',              en: 'Symptom Screening',     href: 'https://agedlearning.com/symptom_catcher/triage.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: 'NeuroCatchers',   file: 'https://agedlearning.com/' },
    { key: 'modality', ko: '?????',   en: 'ModalityCatcher', file: 'https://modalitycatcher.agedlearning.com/' },
  ];
  return (
    <nav style={{
      position: 'absolute', top: 0, left: 0, right: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '24px 56px', zIndex: 10, fontFamily: FONT,
    }}>
      <a href="/" style={{
        display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none',
      }}>
        <img src="assets/logo.svg?v=8" alt="logo"
          style={{ height: 40, display: 'block', objectFit: 'contain' }} />
      </a>
      <div style={{
        display: 'flex', gap: 22, alignItems: 'center',
        fontSize: 13, fontWeight: 500, color: '#5a4a35',
      }}>
        {sites.map((s) => (
          <SiteLink key={s.key} site={s} lang={lang} accent={accent} currentSite={currentSite} />
        ))}
        {setLang && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 0,
            border: `1.5px solid ${INK}22`, borderRadius: 999,
            padding: 3, fontSize: 11, fontWeight: 700,
          }}>
            {['KO', 'EN'].map((L) => (
              <button key={L}
                onClick={() => setLang(L.toLowerCase())}
                style={{
                  padding: '4px 11px', borderRadius: 999, border: 0,
                  cursor: 'pointer',
                  background: lang === L.toLowerCase() ? INK : 'transparent',
                  color: lang === L.toLowerCase() ? '#fff' : '#5a4a35',
                  fontFamily: FONT, fontWeight: 700,
                }}>{L}</button>
            ))}
          </div>
        )}
        <a href="/admin.html" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 999, border: `1.5px solid ${INK}33`, fontSize: 12, fontWeight: 700, color: INK, cursor: 'pointer', }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: accent,
          }} />
          {lang === 'en' ? 'Admin' : '???'}</a>
        <button style={{
          padding: '10px 18px', borderRadius: 999,
          background: INK, color: '#fff',
          border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer',
        }}>{ctaLabel}</button>
      </div>
    </nav>
  );
}

function CornerCopy({ eyebrow, headline, sub, primaryCta, secondaryCta, accent, position = 'left' }) {
  const isRight = position === 'right';
  return (
    <div style={{
      position: 'absolute',
      ...(isRight ? { right: 56 } : { left: 56 }),
      top: 130, maxWidth: 460, zIndex: 5,
      fontFamily: FONT,
      textAlign: isRight ? 'right' : 'left',
    }}>
      <div style={{
        fontSize: 12, fontWeight: 700, color: accent,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        marginBottom: 24, display: 'flex', alignItems: 'center', gap: 10,
        justifyContent: isRight ? 'flex-end' : 'flex-start',
      }}>
        {!isRight && <span style={{ width: 24, height: 2, background: accent, borderRadius: 2 }} />}
        {eyebrow}
        {isRight && <span style={{ width: 24, height: 2, background: accent, borderRadius: 2 }} />}
      </div>
      <h1 style={{
        fontSize: 60, lineHeight: 1.08, fontWeight: 800,
        letterSpacing: '-0.03em', margin: 0, color: '#2a2018',
        textWrap: 'pretty',
      }}>{headline}</h1>
      <p style={{
        marginTop: 22, marginBottom: 32,
        fontSize: 16, lineHeight: 1.65, color: '#5a4a35',
        maxWidth: 420, textWrap: 'pretty',
        marginLeft: isRight ? 'auto' : 0,
      }}>{sub}</p>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center',
        justifyContent: isRight ? 'flex-end' : 'flex-start' }}>
        <button style={{
          padding: '14px 26px', borderRadius: 999,
          background: accent, color: '#fff', border: 0,
          fontSize: 14, fontWeight: 700, cursor: 'pointer',
          boxShadow: `0 8px 24px ${accent}40`,
        }}>{primaryCta} ?</button>
        <button style={{
          padding: '14px 22px', borderRadius: 999,
          background: 'rgba(255,255,255,0.55)',
          backdropFilter: 'blur(6px)', color: '#2a2018',
          border: `1.5px solid #2a201822`,
          fontSize: 14, fontWeight: 600, cursor: 'pointer',
        }}>{secondaryCta}</button>
      </div>
    </div>
  );
}

// -----------------------------------------------------------------------------
// ??? ?? — ???? ?. ??? ?? ??. ? ?? blob + ??? + ???? ?.
function WarmRoom({ site }) {
  const p = { ...SITE_PALETTES[site], id: site };
  return (
    <svg
      viewBox="0 0 1440 900"
      style={{ position: 'absolute', inset: 0, display: 'block', width: '100%', height: '100%' }}
      preserveAspectRatio="xMidYMid slice"
    >
      <defs>
        <linearGradient id={`wall-${site}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.wallTop} />
          <stop offset="55%" stopColor={p.wallMid} />
          <stop offset="100%" stopColor={p.wallBot} />
        </linearGradient>
        <linearGradient id={`floor-${site}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.floor} />
          <stop offset="100%" stopColor={p.floorDark} />
        </linearGradient>
        <radialGradient id={`spot-${site}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={p.glow} stopOpacity={0.7} />
          <stop offset="100%" stopColor={p.glow} stopOpacity={0} />
        </radialGradient>
      </defs>

      {/* ? */}
      <rect x={0} y={0} width={1440} height={720} fill={`url(#wall-${site})`} />
      {/* ?? */}
      <rect x={0} y={720} width={1440} height={180} fill={`url(#floor-${site})`} />
      <line x1={0} y1={720} x2={1440} y2={720} stroke={INK} strokeWidth={2.5} opacity={0.35} />

      {/* ???? spot light (??) — ??? ? */}
      <ellipse cx={300} cy={300} rx={360} ry={260} fill={`url(#spot-${site})`} />
      {/* ???? spot light (???) */}
      <ellipse cx={1200} cy={200} rx={300} ry={200} fill={`url(#spot-${site})`} opacity={0.7} />


    </svg>
  );
}

// -----------------------------------------------------------------------------
// 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: 'performance' },
];

function BotInArc({ x, y, bot, size = 86 }) {
  const C = bot.C;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: 'translate(-50%, -50%)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
      zIndex: 3, pointerEvents: 'none',
    }}>
      <C size={size} />
      <div style={{
        background: '#ffffff', color: INK,
        padding: '2px 8px', borderRadius: 999,
        fontSize: 10, fontWeight: 800, fontFamily: FONT,
        border: `1.5px solid ${INK}`,
        boxShadow: '0 2px 4px rgba(0,0,0,0.08)',
        whiteSpace: 'nowrap', letterSpacing: '-0.005em',
      }}>{bot.sub}</div>
    </div>
  );
}

function PoseTalk({ p, accent }) {
  // ??? ? ?? + 11 ? ?? ?? (? ?? ?? ???)
  const cx = 920, cy = 720, R = 380;
  return (
    <>
      {/* ? 11? ?? ?? */}
      {(window.BOTS || []).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 (
          <BotInArc key={bot.key}
            x={x} y={y}
            bot={bot}
            size={78}
          />
        );
      })}

      {/* ?? ?? (?? ? ? ?) */}
      <svg
        style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 2 }}
        viewBox="0 0 1440 900"
        preserveAspectRatio="xMidYMid slice"
      >
        {TALK_BOTS.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 (
            <line key={i}
              x1={cx} y1={cy - 30}
              x2={x} y2={y + 70}
              stroke={accent} strokeWidth={1.5}
              strokeDasharray="3 6" opacity={0.4}
            />
          );
        })}
      </svg>

      {/* ??? ? ?? */}
      <div style={{
        position: 'absolute', left: cx, top: cy - 30,
        transform: 'translate(-50%, -50%)',
        zIndex: 4,
      }}>
        <PersonStanding
          expression="learning"
          lean="center"
          width={210}
          bodyColor={p.fabricDeep}
          armRaise="right"
        />
        <div style={{
          position: 'absolute', top: -16, left: '50%',
          transform: 'translateX(-50%)',
          background: '#ffffff', color: INK,
          padding: '6px 16px', borderRadius: 999,
          fontSize: 14, fontWeight: 800,
          border: `2px solid ${INK}`, fontFamily: FONT,
          whiteSpace: 'nowrap',
          boxShadow: '0 6px 14px rgba(0,0,0,0.12)',
        }}>? · Me</div>
      </div>
    </>
  );
}

// -----------------------------------------------------------------------------
// B · ?? (???) — ? standing ? ??? + ??? partial + ?? ??
function SceneBostonExtras({ p }) {
  return (
    <svg viewBox="0 0 1440 900"
      style={{ position: 'absolute', inset: 0, display: 'block', width: '100%', height: '100%', pointerEvents: 'none' }}
      preserveAspectRatio="xMidYMid slice"
    >
      {/* ??? ?? (???) — ??? ?? */}
      <defs>
        <radialGradient id="warm-sun-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={p.sun} stopOpacity={0.7} />
          <stop offset="60%" stopColor={p.sun} stopOpacity={0.3} />
          <stop offset="100%" stopColor={p.sun} stopOpacity={0} />
        </radialGradient>
      </defs>
      <g transform="translate(1140, 130)">
        <circle cx={110} cy={110} r={190} fill="url(#warm-sun-glow)" />
        <circle cx={110} cy={110} r={110} fill={p.sun} />
        <circle cx={110} cy={110} r={70} fill="#ffe19a" />
        <circle cx={110} cy={110} r={36} fill="#fff1c2" />
      </g>

      {/* ?? ??? ?? (???) — ?? ????? */}
      <g transform="translate(180, 130)">
        <line x1={60} y1={0} x2={60} y2={50} stroke={INK} strokeWidth={3} strokeLinecap="round" />
        <ellipse cx={60} cy={68} rx={62} ry={20}
          stroke={INK} strokeWidth={4} fill={p.rust} strokeLinejoin="round" />
        <path d="M20,72 Q12,110 28,140 M40,80 Q34,130 48,160 M60,82 Q60,140 60,170 M80,80 Q86,130 72,160 M100,72 Q108,110 92,140"
          stroke={INK} strokeWidth={3} fill="none" strokeLinecap="round" />
      </g>



      {/* ??? ? ?? ?? (?? ???) */}
      <g transform="translate(180, 480)" opacity={0.85}>
        <path d="M0,4 L36,4 L36,38 Q36,44 30,44 L6,44 Q0,44 0,38 Z"
          stroke={INK} strokeWidth={3} fill={p.cream} strokeLinejoin="round" />
        <path d="M36,12 Q50,12 50,24 Q50,32 36,32"
          stroke={INK} strokeWidth={3} fill="none" />
        <path d="M8,-8 Q12,-16 14,-6 M22,-8 Q26,-16 28,-6"
          stroke={INK} strokeWidth={2.5} fill="none" strokeLinecap="round" opacity={0.6} />
      </g>
    </svg>
  );
}

function SmallBoat({ label, color, width = 240 }) {
  const h = 90;
  return (
    <div style={{
      width, height: h, position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer',
    }}>
      <svg viewBox={`0 0 ${width} ${h}`} width={width} height={h}
        style={{ display: 'block', overflow: 'visible', position: 'absolute', inset: 0 }}>
        <ellipse cx={width/2} cy={h - 6} rx={width/2 - 12} ry={5} fill="rgba(31,29,26,0.15)" />
        {/* ??? ??? (?? ???) */}
        <path d={`M14,16 L${width-14},16 Q${width-30},${h-8} ${width-50},${h-4} L50,${h-4} Q30,${h-8} 14,16 Z`}
          fill="rgba(31,29,26,0.35)" />
        {/* ?? ?? */}
        <path d={`M10,8 L${width-10},8 Q${width-30},${h-12} ${width-50},${h-8} L50,${h-8} Q30,${h-12} 10,8 Z`}
          stroke={INK} strokeWidth={4.5} fill={color} strokeLinejoin="round" />
        {/* ?? ????? */}
        <path d={`M16,10 L${width-16},10`}
          stroke="rgba(255,255,255,0.45)" strokeWidth={3} strokeLinecap="round" />
      </svg>
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', alignItems: 'center', gap: 6,
        fontFamily: FONT,
        marginTop: -10,
      }}>
        <span style={{
          fontSize: 14, fontWeight: 800, color: '#ffffff',
          letterSpacing: '-0.005em',
          textShadow: '0 1px 1px rgba(0,0,0,0.18)',
        }}>{label}</span>
        <span style={{
          color: '#ffffff', opacity: 0.9, fontSize: 13, fontWeight: 800,
        }}>?</span>
      </div>
    </div>
  );
}

// 5? ?? ?? (?? · ?? · ?? · ?? · MBTI)
function Medal({ label, sub, color, symbol, size = 160, rotate = 0 }) {
  return (
    <div style={{
      width: size,
      transform: `rotate(${rotate}deg)`,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
    }}>
      {/* ?? ?? */}
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: color,
        border: `5px solid ${INK}`,
        boxShadow: `0 12px 28px rgba(0,0,0,0.18), inset 0 -8px 0 rgba(0,0,0,0.08)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        {/* ?? ?? ?? */}
        <div style={{
          width: size - 28, height: size - 28, borderRadius: '50%',
          border: `2px dashed ${INK}55`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{
            fontSize: size * 0.4, fontWeight: 800, color: INK,
            fontFamily: 'system-ui, "Apple SD Gothic Neo", serif',
            lineHeight: 1,
          }}>{symbol}</span>
        </div>
        {/* ?? ?? (??) */}
        <div style={{
          position: 'absolute', top: -16, left: '50%',
          transform: 'translateX(-50%)',
          width: 30, height: 22,
          background: INK,
          clipPath: 'polygon(0 0, 100% 0, 80% 100%, 50% 70%, 20% 100%)',
        }} />
      </div>
      {/* ?? */}
      <div style={{ textAlign: 'center', fontFamily: FONT }}>
        <div style={{ fontSize: 15, fontWeight: 800, color: INK, letterSpacing: '-0.01em' }}>{label}</div>
        <div style={{ fontSize: 11, color: '#5a4a35', marginTop: 2, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{sub}</div>
      </div>
    </div>
  );
}

function PoseBoston({ p, lang }) {
  const charW = 180;
  const stops = [
    { label: '?????',   color: SITE_COLORS.talk.value,     exp: 'depression',  body: 'fabricSoft' },
    { label: '??????', color: SITE_COLORS.boston.value,   exp: 'learning',    body: 'fabricDeep' },
    { label: '?????',   color: SITE_COLORS.neuro.value,    exp: 'performance', body: 'rust' },
    { label: '?????', color: SITE_COLORS.modality.value, exp: 'happy',       body: 'leaf' },
  ];

  return (
    <>
      {/* 4 ??? + ?? (??) */}
      <div style={{
        position: 'absolute', bottom: 170, left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex', gap: 24, zIndex: 4, alignItems: 'flex-end',
      }}>
        {stops.map((s, i) => (
          <a key={s.label}
            href={['https://agedlearning.com/', 'https://agedlearning.com/', 'https://agedlearning.com/', 'https://agedlearning.com/'][i]}
            target="_blank" rel="noopener"
            style={{ textDecoration: 'none', display: 'flex',
              flexDirection: 'column', alignItems: 'center', gap: 0 }}>
            <div style={{ width: charW, height: 290, overflow: 'visible',
              display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
              <PersonStanding
                expression={s.exp}
                lean={i < 2 ? 'right' : 'left'}
                width={charW}
                bodyColor={p[s.body]}
              />
            </div>
            <SmallBoat label={s.label} color={s.color} width={250} />
          </a>
        ))}
      </div>

      {/* 5 ??? — ?? ???? ??? (?? row + wave) */}
      <div style={{
        position: 'absolute', bottom: 30, left: '50%',
        transform: 'translateX(-50%)',
        width: 1100, zIndex: 2,
      }}>
        <svg viewBox="0 0 1100 90" width="100%" style={{ display: 'block', overflow: 'visible' }}>
          <path d="M0,72 Q70,64 140,72 T280,72 T420,72 T560,72 T700,72 T840,72 T980,72 T1100,72"
            stroke="#7aaad0" strokeWidth={2.5} fill="none" strokeLinecap="round" opacity={0.4} />
          <path d="M0,82 Q70,76 140,82 T280,82 T420,82 T560,82 T700,82 T840,82 T980,82 T1100,82"
            stroke="#7aaad0" strokeWidth={1.8} fill="none" strokeLinecap="round" opacity={0.25} />
          <a href="https://agedlearning.com/discover/saju/">
            <g transform="translate(140, 44)" style={{ cursor: 'pointer' }}>
              <path d="M-30,0 Q-26,-16 0,-16 Q24,-16 30,0 Q24,16 0,16 Q-26,16 -30,0 Z"
                stroke={INK} strokeWidth={2.5} fill="#E8A317" strokeLinejoin="round" />
              <path d="M30,0 L46,-12 L40,0 L46,12 Z" stroke={INK} strokeWidth={2.5} fill="#E8A317" strokeLinejoin="round" />
              <path d="M-8,-16 L-4,-22 L4,-22 L8,-16 Z" stroke={INK} strokeWidth={2} fill="#E8A317" strokeLinejoin="round" />
              <circle cx={14} cy={-4} r={2.2} fill={INK} />
              <text x={0} y={-26} fontFamily={FONT} fontSize={11} fontWeight={800} fill={INK} textAnchor="middle">{lang === 'en' ? 'Saju' : '??'}</text>
            </g></a>
          <a href="https://agedlearning.com/discover/face/">
            <g transform="translate(350, 50)" style={{ cursor: 'pointer' }}>
              <path d="M-34,0 Q-28,-10 0,-10 Q28,-10 34,0 Q28,10 0,10 Q-28,10 -34,0 Z"
                stroke={INK} strokeWidth={2.5} fill="#6B9B5C" strokeLinejoin="round" />
              <path d="M34,0 L48,-8 L44,0 L48,8 Z" stroke={INK} strokeWidth={2.5} fill="#6B9B5C" strokeLinejoin="round" />
              <circle cx={12} cy={-2} r={1.8} fill={INK} />
              <circle cx={20} cy={-3} r={1.8} fill={INK} />
              <text x={0} y={-20} fontFamily={FONT} fontSize={11} fontWeight={800} fill={INK} textAnchor="middle">{lang === 'en' ? 'Face' : '??'}</text>
            </g></a>
          <a href="https://agedlearning.com/discover/palm/">
            <g transform="translate(560, 44)" style={{ cursor: 'pointer' }}>
              <path d="M-28,0 Q-24,-13 0,-13 Q22,-13 28,0 Q22,13 0,13 Q-24,13 -28,0 Z"
                stroke={INK} strokeWidth={2.5} fill="#F47C3C" strokeLinejoin="round" />
              <path d="M28,0 L42,-11 L38,0 L42,11 Z" stroke={INK} strokeWidth={2.5} fill="#F47C3C" strokeLinejoin="round" />
              <path d="M-18,-6 Q-10,-8 0,-6" stroke="#ffffff" strokeWidth={2} fill="none" opacity={0.7} />
              <path d="M-18,0 Q-10,-2 0,0" stroke="#ffffff" strokeWidth={2} fill="none" opacity={0.5} />
              <circle cx={12} cy={-3} r={2.2} fill={INK} />
              <text x={0} y={-22} fontFamily={FONT} fontSize={11} fontWeight={800} fill={INK} textAnchor="middle">{lang === 'en' ? 'Palm' : '??'}</text>
            </g></a>
          <a href="https://agedlearning.com/discover/tarot/">
            <g transform="translate(770, 44)" style={{ cursor: 'pointer' }}>
              <path d="M-28,0 Q-24,-13 0,-13 Q22,-13 28,0 Q22,13 0,13 Q-24,13 -28,0 Z"
                stroke={INK} strokeWidth={2.5} fill="#4A90C2" strokeLinejoin="round" />
              <path d="M28,0 L42,-11 L38,0 L42,11 Z" stroke={INK} strokeWidth={2.5} fill="#4A90C2" strokeLinejoin="round" />
              <path d="M-10,-12 Q-8,-6 -10,0" stroke={INK} strokeWidth={1.5} fill="none" opacity={0.5} />
              <path d="M-2,-12 Q0,-6 -2,0" stroke={INK} strokeWidth={1.5} fill="none" opacity={0.5} />
              <path d="M6,-12 Q8,-6 6,0" stroke={INK} strokeWidth={1.5} fill="none" opacity={0.5} />
              <circle cx={14} cy={-3} r={2.2} fill={INK} />
              <text x={0} y={-22} fontFamily={FONT} fontSize={11} fontWeight={800} fill={INK} textAnchor="middle">{lang === 'en' ? 'Tarot' : '??'}</text>
            </g></a>
          <a href="https://agedlearning.com/discover/mbti/">
            <g transform="translate(970, 44)" style={{ cursor: 'pointer' }}>
              <path d="M-34,0 Q-30,-15 0,-15 Q26,-15 32,0 Q26,15 0,15 Q-30,15 -34,0 Z"
                stroke={INK} strokeWidth={2.5} fill="#9B7CC2" strokeLinejoin="round" />
              <path d="M32,0 L52,-16 L46,-3 L54,0 L46,3 L52,16 Z" stroke={INK} strokeWidth={2.5} fill="#9B7CC2" strokeLinejoin="round" />
              <path d="M-10,-15 L-4,-22 L4,-22 L10,-15 Z" stroke={INK} strokeWidth={2} fill="#9B7CC2" strokeLinejoin="round" />
              <circle cx={16} cy={-4} r={2.4} fill={INK} />
              <text x={0} y={-26} fontFamily={FONT} fontSize={11} fontWeight={800} fill={INK} textAnchor="middle">{lang === 'en' ? 'Personality' : '??'}</text>
            </g></a>
        </svg>
      </div>

    </>
  );
}

// 5? ?? ?? ?? (B ?? ??? ?? — ??? ??? ??)
// ?? ??? SVG
function Fish({ color, size = 56 }) {
  return (
    <svg viewBox="0 0 80 50" width={size} height={size * 50/80} style={{ display: 'block' }}>
      {/* ? */}
      <path d="M10,25 Q14,8 38,8 Q60,8 66,25 Q60,42 38,42 Q14,42 10,25 Z"
        stroke={INK} strokeWidth={2.5} fill={color} strokeLinejoin="round" />
      {/* ?? */}
      <path d="M66,25 L78,12 L74,25 L78,38 Z"
        stroke={INK} strokeWidth={2.5} fill={color} strokeLinejoin="round" />
      {/* ? */}
      <circle cx={48} cy={22} r={2.5} fill={INK} />
      {/* ?? ?? (?? ? 1?) */}
      <path d="M26,25 Q34,22 42,25" stroke={INK} strokeWidth={1.2} fill="none" opacity={0.4} />
      {/* ? (?? ?) */}
      <circle cx={16} cy={26} r={1.2} fill={INK} />
    </svg>
  );
}

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 (
    <div style={{
      position: 'absolute', right: 32, bottom: 30, zIndex: 6,
      background: '#ffffff', border: `2px solid ${INK}`, borderRadius: 18,
      padding: '12px 14px 14px',
      boxShadow: '0 10px 28px rgba(0,0,0,0.10)',
      fontFamily: FONT,
      transform: 'rotate(-2deg)',
    }}>
      <div style={{
        fontSize: 9, fontWeight: 800, color: p.accent,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        marginBottom: 10,
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <span>??? ??? · Today's Catch</span>
        <span style={{ flex: 1, height: 1, background: `${INK}22` }} />
      </div>
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
        {fish.map((f) => (
          <div key={f.name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
            <Fish color={f.color} size={50} />
            <div style={{ fontSize: 10, fontWeight: 700, color: INK, letterSpacing: '-0.005em' }}>{f.name}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// -----------------------------------------------------------------------------
// N · ??? — ? standing ? ??? + floating ?? ?? ??
function SceneNeuroExtras({ p }) {
  return (
    <>
      {/* ???? atmospheric ring — ??, ?? ?? ? ? */}
      <svg viewBox="0 0 1440 900"
        style={{ position: 'absolute', inset: 0, display: 'block', width: '100%', height: '100%', pointerEvents: 'none' }}
        preserveAspectRatio="xMidYMid slice"
      >
        <g transform="translate(720, 530)" opacity={0.35}>
          <circle cx={0} cy={0} r={300} stroke={p.accent} strokeWidth={2.5} fill="none" strokeDasharray="3 12" opacity={0.4} />
          <circle cx={0} cy={0} r={210} stroke={p.accent} strokeWidth={2} fill="none" strokeDasharray="2 10" opacity={0.35} />
        </g>
      </svg>
      {/* Floating ?? 1: mood mini line (???) */}
      <div style={{
        position: 'absolute', left: 56, top: 200,
        width: 200, padding: '12px 14px',
        background: '#ffffff', border: `2px solid ${INK}`, borderRadius: 18,
        boxShadow: '0 10px 30px rgba(0,0,0,0.08)',
        fontFamily: FONT, zIndex: 3,
        transform: 'rotate(-3deg)',
      }}>
        <div style={{ fontSize: 10, fontWeight: 800, color: INK, opacity: 0.7,
          letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Mood · 7 days</div>
        <svg width="100%" height={56} viewBox="0 0 200 56" style={{ display: 'block' }}>
          <path d="M5,42 L25,32 L50,46 L75,28 L100,32 L130,18 L155,22 L180,8 L196,12"
            stroke={p.accent} strokeWidth={3} fill="none" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx={196} cy={12} r={4} fill={p.accent} stroke={INK} strokeWidth={1.5} />
        </svg>
        <div style={{ fontSize: 11, fontWeight: 700, color: p.accent, marginTop: 4 }}>? ?? ??</div>
      </div>

      {/* ??: 11 ?? ?? ??? — ?? ???? ?? */}
      <div style={{
        position: 'absolute', right: 32, top: 130, bottom: 60, zIndex: 3,
        width: 280, fontFamily: FONT,
        display: 'flex', flexDirection: 'column', gap: 8,
        justifyContent: 'flex-start',
      }}>
        <div style={{
          fontSize: 10, fontWeight: 800, color: p.accent,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          marginBottom: 4, marginLeft: 6,
        }}>11 Bots</div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 8,
        }}>
          {(window.BOTS || []).map((bot, i) => {
            const active = bot.key === 'depression' || bot.key === 'anxiety';
            const pct = active
              ? (bot.key === 'depression' ? 87 : 72)
              : Math.round(6 + ((i * 37) % 22));
            return (
              <div key={bot.key} style={{
                background: active ? `${bot.color}28` : '#ffffff',
                border: `1.5px solid ${active ? bot.color : INK + '18'}`,
                borderLeft: `4px solid ${bot.color}`,
                borderRadius: 10,
                padding: '8px 10px',
                boxShadow: active
                  ? `0 4px 10px ${bot.color}3a`
                  : '0 1px 3px rgba(0,0,0,0.04)',
                display: 'flex', flexDirection: 'column', gap: 4,
                minHeight: 52,
              }}>
                <div style={{
                  fontSize: 11, fontWeight: 700, color: INK,
                  letterSpacing: '-0.01em',
                }}>{bot.sub}</div>
                <div style={{
                  height: 3, background: '#f0ede5',
                  borderRadius: 999, overflow: 'hidden',
                }}>
                  <div style={{
                    width: `${pct}%`, height: '100%',
                    background: bot.color,
                  }} />
                </div>
              </div>
            );
          })}
        </div>
        <div style={{
          marginTop: 4, padding: '8px 10px',
          background: '#ffffff', borderRadius: 10,
          border: `1px dashed ${INK}33`,
          fontSize: 10, color: '#666', textAlign: 'center',
        }}>
          ?? ? <b style={{ color: p.accent }}>2?</b> ?? ??
        </div>
      </div>

    </>
  );
}

function PoseNeuro({ p }) {
  const charW = 250;
  return (
    <>
      {/* ?? ??? (??) — ? ???? ?? ??? ?? ?? ??? ? */}
      <div style={{ position: 'absolute', bottom: 50, left: 90,
        width: 580, zIndex: 1 }}>
        <svg viewBox="0 0 580 200" width="100%" style={{ display: 'block' }}>
          <ellipse cx={290} cy={194} rx={270} ry={6} fill="rgba(31,29,26,0.18)" />
          <path d="M30,190 L30,70 Q30,28 80,28 L500,28 Q550,28 550,70 L550,190 Z"
            stroke={INK} strokeWidth={5} fill={p.fabric} strokeLinejoin="round" />
          <line x1={290} y1={50} x2={290} y2={170}
            stroke={INK} strokeWidth={2.5} strokeDasharray="4 6" opacity={0.4} />
        </svg>
      </div>

      {/* ? ??? ?? ??? — ? ? ??(???) ? */}
      <div style={{ position: 'absolute', bottom: 90, left: 110, zIndex: 4 }}>
        <Person expression="performance" lean="right" width={charW}
          bodyColor={p.fabricDeep} initial="N" initialColor={p.accent}
          role="therapist" seated />
      </div>
      <div style={{ position: 'absolute', bottom: 90, left: 380, zIndex: 4 }}>
        <Person expression="learning" lean="right" width={charW}
          bodyColor={p.cream} seated />
      </div>

      {/* ???? ??? (??? ????) */}
      <div style={{ position: 'absolute', left: 670, top: 480, zIndex: 5,
        fontFamily: FONT, color: p.accent,
        fontSize: 40, fontWeight: 800,
        transform: 'rotate(-8deg)' }}>?</div>
    </>
  );
}

// 1?? ??? ?? (???)
// 1?? ?? ?? — ??? ??? (??? ?? ??? ? ?? ??? ??)
// facing='right' = ??? ??, ??? ?? (???? ??? ?)
// facing='left' = ?? ??
function TherapyChair({ facing = 'right', color, width = 320 }) {
  const flip = facing === 'left';
  return (
    <svg viewBox="0 0 300 280" width={width} style={{ display: 'block',
      transform: flip ? 'scaleX(-1)' : 'none' }}
      preserveAspectRatio="xMidYMid meet">
      {/* ??? */}
      <ellipse cx={150} cy={268} rx={130} ry={7} fill="rgba(31,29,26,0.18)" />
      {/* ?? — ?? ??? ??, ???? ?? ???? ???? */}
      <path
        d="M30,260 L30,80 Q30,30 80,30 L160,30 Q200,30 200,100 Q220,160 270,170 Q286,176 286,200 L286,260 Z"
        stroke={INK} strokeWidth={5} fill={color} strokeLinejoin="round"
      />
      {/* ?? ?? — ??? ?? ?? */}
      <line x1={50} y1={190} x2={272} y2={190}
        stroke={INK} strokeWidth={3} opacity={0.45} strokeDasharray="4 6" />
      {/* ?? ?? */}
      <line x1={50} y1={260} x2={50} y2={274} stroke={INK} strokeWidth={4} strokeLinecap="round" />
      <line x1={270} y1={260} x2={270} y2={274} stroke={INK} strokeWidth={4} strokeLinecap="round" />
    </svg>
  );
}

// -----------------------------------------------------------------------------
// M · ? sitting ? ??? + thought bubble (?? ??)
// M · 9 ???? ???? ??? (??)
function TherapistThoughts({ accent }) {
  const MODALITIES = [
    { name: 'CBT-I',   desc: '????',   color: '#5a8acc', match: 87, primary: true },
    { name: 'MBSR',    desc: '????',   color: '#9bcfc4', match: 72 },
    { name: 'ACT',     desc: '????',   color: '#f5d878', match: 65 },
    { name: 'EMDR',    desc: '????',   color: '#bca6c8', match: 54 },
    { name: 'DBT',     desc: '???',     color: '#9bb88a', match: 48 },
    { name: 'IFS',     desc: '????',   color: '#f5a857', match: 42 },
    { name: 'Schema',  desc: '???',     color: '#5e7a92', match: 38 },
    { name: 'Somatic', desc: '????',   color: '#f3c39a', match: 32 },
    { name: 'PDT',     desc: '????',   color: '#a8c6db', match: 26 },
  ];
  return (
    <div style={{
      position: 'absolute', right: 32, top: 130, bottom: 80, zIndex: 5,
      width: 300, fontFamily: FONT,
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{
        fontSize: 10, fontWeight: 800, color: accent,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        marginLeft: 6,
      }}>9 Modalities · ????</div>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8,
        flex: 1,
      }}>
        {MODALITIES.map((m) => (
          <div key={m.name} style={{
            background: m.primary ? `${m.color}28` : '#ffffff',
            border: `1.5px solid ${m.primary ? m.color : INK + '18'}`,
            borderLeft: `4px solid ${m.color}`,
            borderRadius: 10,
            padding: '7px 9px',
            boxShadow: m.primary ? `0 4px 10px ${m.color}33` : '0 1px 3px rgba(0,0,0,0.05)',
            display: 'flex', flexDirection: 'column', gap: 3,
            minHeight: 56,
          }}>
            <div style={{
              fontSize: 12, fontWeight: 800, color: INK,
              letterSpacing: '-0.01em',
            }}>{m.name}</div>
            <div style={{
              fontSize: 9, color: '#666', fontWeight: 500,
            }}>{m.desc}</div>
            <div style={{
              height: 3, background: '#f0ede5',
              borderRadius: 999, overflow: 'hidden', marginTop: 'auto',
            }}>
              <div style={{
                width: `${m.match}%`, height: '100%', background: m.color,
              }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PoseModality({ p }) {
  // ? ?? ??? ??? ?? + ???
  const charW = 280;
  const chairW = 320;
  return (
    <>
      {/* ?? ?? */}
      <div style={{ position: 'absolute', bottom: 40, left: 140, zIndex: 1 }}>
        <TherapyChair facing="right" color={p.fabric} width={chairW} />
      </div>
      {/* ?? ?? */}
      <div style={{ position: 'absolute', bottom: 40, left: 540, zIndex: 1 }}>
        <TherapyChair facing="left" color={p.fabricSoft} width={chairW} />
      </div>
      {/* ?? ??? M */}
      <div style={{
        position: 'absolute', bottom: 80, left: 160, zIndex: 3,
      }}>
        <Person expression="depression" lean="right" width={charW}
          bodyColor={p.fabricDeep} initial="M" initialColor={p.accent}
          role="therapist" seated />
      </div>
      {/* ?? ??? (?????) */}
      <div style={{
        position: 'absolute', bottom: 80, left: 560, zIndex: 3,
      }}>
        <Person expression="ptsd" lean="left" width={charW}
          bodyColor={p.cream} seated />
      </div>
      {/* ???: M ?? */}
      <div style={{
        position: 'absolute', left: 90, top: 240, zIndex: 6,
        background: '#ffffff', border: `2px solid ${INK}`,
        padding: '14px 18px', borderRadius: 22, borderBottomRightRadius: 6,
        fontSize: 15, fontWeight: 500, color: INK, fontFamily: FONT,
        boxShadow: '0 6px 18px rgba(0,0,0,0.10)', maxWidth: 280,
        lineHeight: 1.55,
      }}>
        <b style={{ color: p.accent }}>CBT-I</b>? ?? ? ??<br />? ???. ?? ?????
      </div>
      {/* ???: ????? */}
      <div style={{
        position: 'absolute', right: 280, top: 320, zIndex: 6,
        background: `${p.accent}1a`, border: `2px solid ${p.accent}`,
        padding: '14px 18px', borderRadius: 22, borderBottomLeftRadius: 6,
        fontSize: 15, fontWeight: 500, color: INK, fontFamily: FONT,
        boxShadow: '0 6px 18px rgba(0,0,0,0.10)', maxWidth: 220,
        lineHeight: 1.55,
      }}>
        ??? ???<br />????
      </div>
    </>
  );
}

// -----------------------------------------------------------------------------
// Site Hero
function SiteHero({ siteKey, config, pose, extras }) {
  const [lang, setLang] = React.useState('ko');
  const site = SITE_COLORS[siteKey];
  const p = { ...SITE_PALETTES[siteKey], id: siteKey };
  const c = config[lang] || config;
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', background: p.wallTop }}>
      <WarmRoom site={siteKey} />
      {extras && extras(p, lang)}
      <Nav siteName={site.name} items={c.nav} ctaLabel={c.navCta} accent={site.value}
        lang={lang} setLang={setLang} currentSite={siteKey} />
      {pose({ p, accent: site.value, lang })}
    </div>
  );
}

const CONFIGS = {
  talk: {
    ko: {
      nav: ['???', '?????', '?', '??'],
      navCta: '????',
      copyPosition: 'left',
      eyebrow: 'T · 11?? ?? ???',
      headline: (<><span style={{ color: SITE_COLORS.talk.value }}>11</span>??<br />?? ??.</>),
      sub: '???? ? ?? — ??, ??, ???, ????. 11?? ?? ??? ? ????.',
      primaryCta: '?? ??',
      secondaryCta: '? ????',
    },
    en: {
      nav: ['Service', 'Therapists', 'Bots', 'Reviews'],
      navCta: 'Get started',
      copyPosition: 'left',
      eyebrow: 'T · 11 mind companions',
      headline: (<><span style={{ color: SITE_COLORS.talk.value }}>11</span> bots,<br />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: (<>??? ??<br />?? <span style={{ color: SITE_COLORS.boston.value }}>???</span>.</>),
      sub: '??? ?? ??. ADHD · Autism · Sleep · Bipolar — ?? ??? ? ??? ?? 14? ?? ????.',
      primaryCta: '?? ??',
      secondaryCta: '?? ?? ?',
    },
    en: {
      nav: ['Research', 'Programs', 'Clinicians', 'About'],
      navCta: 'Book intake',
      copyPosition: 'left',
      eyebrow: 'B · Whole-person clinical',
      headline: (<>The full <span style={{ color: SITE_COLORS.boston.value }}>recipe</span><br />for the mind.</>),
      sub: 'Not pieces — the whole. ADHD · Autism · Sleep · Bipolar, 14 years of clinical know-how in one place.',
      primaryCta: 'Book intake',
      secondaryCta: 'See research ?',
    },
  },
  neuro: {
    ko: {
      nav: ['?? ??', '??????', '????', '??'],
      navCta: '?? ??',
      copyPosition: 'left',
      eyebrow: 'N · ???? · ?? ??',
      headline: (<>???<br /><span style={{ color: SITE_COLORS.neuro.value }}>?? ???</span>.</>),
      sub: '??? ??? ????, ??? ????, ?? ?????. ??? ?? ??? catch??.',
      primaryCta: '?? ??',
      secondaryCta: '??? ??',
    },
    en: {
      nav: ['How it works', 'For therapists', 'For you', 'Pricing'],
      navCta: 'Try free',
      copyPosition: 'left',
      eyebrow: 'N · Symptom & pattern training',
      headline: (<>See the <span style={{ color: SITE_COLORS.neuro.value }}>pattern</span><br />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: (<><span style={{ color: SITE_COLORS.modality.value }}>??</span>??<br />?? ??.</>),
      sub: 'CBT · MBSR · ACT · EMDR — ???? ?? ???? ??. ??? ?? ??? ?????.',
      primaryCta: '?? ?? ??',
      secondaryCta: '?? ??',
    },
    en: {
      nav: ['Method', 'Coaches', 'Stories', 'Start'],
      navCta: 'Get started',
      copyPosition: 'right',
      eyebrow: 'M · Modality matching',
      headline: (<>The right path<br />for <span style={{ color: SITE_COLORS.modality.value }}>you</span>.</>),
      sub: 'CBT · MBSR · ACT · EMDR — matched by data and clinical experience. Evidence, not guesswork.',
      primaryCta: 'Find your match',
      secondaryCta: 'See stories',
    },
  },
};

function TalkCatcherHero() {
  return <SiteHero siteKey="talk" config={CONFIGS.talk}
    pose={({ p, accent }) => <PoseTalk p={p} accent={accent} />} />;
}
function BostonNeuroMindHero() {
  return <SiteHero siteKey="boston" config={CONFIGS.boston}
    extras={(p) => <SceneBostonExtras p={p} />}
    pose={({ p, lang }) => <PoseBoston p={p} lang={lang} />} />;
}
function NeuroCatchersHero() {
  return <SiteHero siteKey="neuro" config={CONFIGS.neuro}
    extras={(p) => <SceneNeuroExtras p={p} />}
    pose={({ p }) => <PoseNeuro p={p} />} />;
}
function ModalityCatcherHero() {
  return <SiteHero siteKey="modality" config={CONFIGS.modality}
    extras={(p) => <TherapistThoughts accent={p.accent} />}
    pose={({ p }) => <PoseModality p={p} />} />;
}

Object.assign(window, {
  TalkCatcherHero, BostonNeuroMindHero, NeuroCatchersHero, ModalityCatcherHero,
});