// MASCOT TAB REORG — faithful to CURRENT main (already 5 sub-tabs; Reports+Habits
// re-homed to Goals). As-is: compact MascotHero + 5 scrollable pills
// (Chat/News/Badges/Streaks/Learning) over an IndexedStack.
// To-be: slim identity strip + 3 even KoiFiSegmentControl segments (Coach/Progress/Learn).
const MX = () => window.KOI.light;
const MXS = "'Cormorant Garamond', serif", MXN = "'Inter', system-ui, sans-serif";
const MXGRAD = 'linear-gradient(135deg,#D8B098,#C9987E)';

// faithful global header (logo/eye/bell/gear come from nav shell)
const MXHeader = () => { const c = MX(); return (
  <div style={{ height: 52, display: 'flex', alignItems: 'center', padding: '0 16px', background: c.surfaceElevated, gap: 12 }}>
    <div style={{ padding: '5px 8px', background: 'rgba(230,227,223,0.5)', borderRadius: 6, display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 500, color: c.ts }}>Personal <Icon name="chevD" size={13} color={c.ts} /></div>
    <div style={{ flex: 1 }} /><Icon name="eye" size={21} color={c.n700} /><Icon name="bell" size={21} color={c.n700} /><Icon name="sliders" size={21} color={c.n700} />
  </div>
); };
const MXTab = ({ active = 4 }) => { const c = MX(); const tabs = [['Home', 'home'], ['Expenses', 'wallet'], ['Investments', 'trendingUp'], ['Goals', 'target'], ['Mascot', 'sparkle']]; return (
  <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 80, background: c.surfaceElevated, borderTop: `1px solid ${c.border}`, paddingBottom: 24 }}><div style={{ display: 'flex', position: 'relative', height: 56 }}><div style={{ position: 'absolute', top: 5, left: `calc(${active * 20}% + ${(20 - 7.12) / 2}%)`, width: '7.12%', height: 4, borderRadius: 99, background: 'linear-gradient(135deg,#D8B098,#C9987E,#B08A6E)' }} />{tabs.map(([l, ic], i) => <div key={l} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, paddingTop: 9, color: i === active ? c.koiGold : '#A8A49E' }}><Icon name={ic} size={22} strokeWidth={i === active ? 1.9 : 1.6} /><div style={{ fontSize: 10, fontWeight: 500 }}>{l}</div></div>)}</div></div>
); };
// shared coach-feed body (identical content both variants)
const CoachFeed = () => { const c = MX(); return (
  <div style={{ padding: '12px 16px 0' }}>
    <div style={{ padding: 16, borderRadius: 14, background: '#FFF7EE', border: '1px solid rgba(201,152,126,0.2)' }}><div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', color: c.koiGoldDark }}>DAILY WISDOM</div><div style={{ fontFamily: MXS, fontStyle: 'italic', fontSize: 17, color: c.n900, marginTop: 6, lineHeight: 1.35 }}>"Pay yourself first — automate savings on payday."</div></div>
    {['You stayed under Dining budget 3 weeks running. +20 XP', 'Net worth crossed ₴140k for the first time'].map((t, i) => <div key={i} style={{ display: 'flex', gap: 10, marginTop: 14 }}><div style={{ width: 32, height: 32, borderRadius: 99, background: '#F2EDE6', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flexShrink: 0, overflow: 'hidden' }}>{window.KOI_MASCOT_SRC ? <img src={window.KOI_MASCOT_SRC} alt="" style={{ width: '78%', height: '78%', objectFit: 'contain' }} /> : null}</div><div style={{ flex: 1, padding: '10px 14px', background: c.surfaceElevated, border: `1px solid ${c.border}`, borderRadius: 14, borderTopLeftRadius: 4, fontSize: 13.5, color: c.n700, lineHeight: 1.5 }}>{t}</div></div>)}
  </div>
); };

// ── AS-IS: faithful to main — persistent MascotHero (identity carousel) +
//    4 FIXED segments (Coach / News / Progress / Learn). Coach = ChatView
//    empty state (sparkles avatar, greeting, suggested prompts) + input bar.
const MascotAsis = () => { const c = MX(); const segs = ['Coach', 'News', 'Progress', 'Learn']; const prompts = ["How's my spending this month?", 'Am I on track for my goals?', 'Can I afford a ₴20,000 trip?', 'How are my budgets doing?']; return (
  <div style={{ height: '100%', background: c.surface, position: 'relative', overflow: 'hidden', fontFamily: MXN }}>
    <StatusBar color={c.tp} /><MXHeader />
    {/* persistent MascotHero — soft-gold gradient, identity slide (avatar + name) + page dots */}
    <div style={{ margin: '8px 16px 4px', padding: '10px 16px', borderRadius: 20, background: 'linear-gradient(135deg,#EBC9A8,#C9987E)', boxShadow: '0 5px 14px rgba(201,152,126,0.26)' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, height: 76 }}>
        <div style={{ width: 76, height: 76, borderRadius: 99, background: 'rgba(255,255,255,0.22)', border: '3px solid rgba(255,255,255,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', flexShrink: 0 }}>{window.KOI_MASCOT_SRC ? <img src={window.KOI_MASCOT_SRC} alt="KoiFi" style={{ width: 62, height: 62, objectFit: 'contain' }} /> : '🐟'}</div>
        <div style={{ fontFamily: MXS, fontSize: 28, fontWeight: 400, color: '#fff' }}>KoiFi</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 8 }}>{[0, 1, 2].map(i => <div key={i} style={{ width: i === 0 ? 16 : 6, height: 6, borderRadius: 3, background: `rgba(255,255,255,${i === 0 ? 0.95 : 0.4})` }} />)}</div>
    </div>
    {/* 4 fixed even segments — Coach active */}
    <div style={{ margin: '8px 16px 4px', height: 36, padding: 3, background: c.n100, borderRadius: 99, display: 'flex' }}>{segs.map((s, i) => <div key={s} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 99, fontSize: 12.5, fontWeight: i === 0 ? 600 : 500, background: i === 0 ? '#fff' : 'transparent', color: i === 0 ? c.tp : c.ts, boxShadow: i === 0 ? '0 1px 3px rgba(80,60,40,0.08)' : 'none' }}>{s}</div>)}</div>
    {/* Coach = ChatView empty state */}
    <div style={{ position: 'absolute', top: 250, bottom: 132, left: 0, right: 0, overflowY: 'auto', padding: '16px 20px 0', textAlign: 'center' }}>
      <div style={{ width: 60, height: 60, borderRadius: 99, background: 'rgba(201,152,126,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '8px auto 0' }}><Icon name="sparkle" size={28} color={c.koiGoldDark} /></div>
      <div style={{ fontFamily: MXS, fontSize: 24, fontWeight: 400, color: c.tp, marginTop: 14 }}>Ask your coach anything</div>
      <div style={{ fontSize: 13.5, color: c.ts, marginTop: 6, lineHeight: 1.5 }}>I can explain your spending, check your goals, and help you plan.</div>
      <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {prompts.map(p => <div key={p} style={{ padding: '13px 14px', background: c.surfaceElevated, border: `1px solid ${c.border}`, borderRadius: 14, fontSize: 13.5, color: c.n900, textAlign: 'left' }}>{p}</div>)}
      </div>
    </div>
    {/* input bar */}
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 80, padding: '8px 12px', background: c.surface, borderTop: `1px solid ${c.border}`, display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ flex: 1, height: 40, borderRadius: 20, border: `1px solid ${c.border}`, background: c.surfaceElevated, display: 'flex', alignItems: 'center', padding: '0 14px', fontSize: 14, color: c.n400 }}>Message KoiFi…</div>
      <div style={{ width: 40, height: 40, borderRadius: 99, background: c.koiGold, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg></div>
    </div>
    <MXTab />
  </div>
); };

// ── TO-BE: slim identity + 3 even segments ──
const MascotTobe = () => { const c = MX(); return (
  <div style={{ height: '100%', background: c.surface, position: 'relative', overflow: 'hidden', fontFamily: MXN }}>
    <StatusBar color={c.tp} /><MXHeader />
    {/* slim identity strip (chevron opens the full evolution showcase) */}
    <div style={{ margin: '12px 16px 8px', padding: '10px 14px', borderRadius: 16, background: MXGRAD, boxShadow: '0 4px 12px rgba(201,152,126,0.24)', display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ width: 40, height: 40, borderRadius: 99, background: 'rgba(255,255,255,0.24)', border: '2px solid rgba(255,255,255,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, overflow: 'hidden' }}>{window.KOI_MASCOT_SRC ? <img src={window.KOI_MASCOT_SRC} alt="KoiFi" style={{ width: '84%', height: '84%', objectFit: 'contain' }} /> : '🐟'}</div>
      <div style={{ flex: 1 }}><div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}><div style={{ fontFamily: MXS, fontSize: 19, color: '#fff' }}>KoiFi</div><div style={{ fontSize: 11, color: 'rgba(255,255,255,0.85)', fontWeight: 500 }}>Fingerling · Lv 3</div></div><div style={{ height: 5, borderRadius: 99, background: 'rgba(255,255,255,0.3)', marginTop: 5, overflow: 'hidden' }}><div style={{ width: '62%', height: '100%', background: '#FFE49C' }} /></div></div>
      <Icon name="chevR" size={16} color="rgba(255,255,255,0.85)" />
    </div>
    {/* 3 even segments — the standard KoiFiSegmentControl */}
    <div style={{ margin: '4px 16px 0', height: 36, padding: 3, background: c.n100, borderRadius: 99, display: 'flex' }}>{['Coach', 'Progress', 'Learn'].map((s, i) => <div key={s} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 99, fontSize: 13, fontWeight: i === 0 ? 600 : 500, background: i === 0 ? '#fff' : 'transparent', color: i === 0 ? c.tp : c.ts, boxShadow: i === 0 ? '0 1px 3px rgba(80,60,40,0.08)' : 'none' }}>{s}</div>)}</div>
    <div style={{ position: 'absolute', top: 190, bottom: 80, left: 0, right: 0, overflowY: 'auto' }}>
      <CoachFeed />
      <div style={{ textAlign: 'center', fontSize: 11, color: c.n400, marginTop: 16, lineHeight: 1.5, padding: '0 24px' }}>Coach folds in News · Progress = Badges + Streaks + Evolution · Learn = lessons.<br/>Reports & Habits already live in Goals.</div>
    </div>
    <MXTab />
  </div>
); };

Object.assign(window, { MascotAsis, MascotTobe });