// CoParent App — Screen Components v2

// ─── Icons ────────────────────────────────────────────────────────────────────
function IcHome({ active, color }) {
  return <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
    <path d="M3 12L12 4l9 8" stroke={color} strokeWidth={active?2.3:1.9} strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M5 10v9a1 1 0 001 1h4v-5h4v5h4a1 1 0 001-1v-9" stroke={color} strokeWidth={active?2.3:1.9} strokeLinecap="round" strokeLinejoin="round"/>
  </svg>;
}
function IcCalendar({ active, color }) {
  return <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
    <rect x="3" y="5" width="18" height="17" rx="3" stroke={color} strokeWidth={active?2.3:1.9}/>
    <path d="M3 10h18" stroke={color} strokeWidth={active?2.3:1.9}/>
    <path d="M8 3v4M16 3v4" stroke={color} strokeWidth={active?2.3:1.9} strokeLinecap="round"/>
    <circle cx="8" cy="15" r="1.3" fill={color}/><circle cx="12" cy="15" r="1.3" fill={color}/><circle cx="16" cy="15" r="1.3" fill={color}/>
  </svg>;
}
function IcWallet({ active, color }) {
  return <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
    <rect x="2" y="6" width="20" height="14" rx="3" stroke={color} strokeWidth={active?2.3:1.9}/>
    <path d="M2 10h20" stroke={color} strokeWidth={active?2.3:1.9}/>
    <circle cx="17" cy="15" r="1.5" fill={color}/>
  </svg>;
}
function IcMessage({ active, color }) {
  return <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke={color} strokeWidth={active?2.3:1.9} strokeLinejoin="round"/>
  </svg>;
}
function IcSettings({ active, color }) {
  return <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="3" stroke={color} strokeWidth={active?2.3:1.9}/>
    <path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke={color} strokeWidth={active?2.3:1.9} strokeLinecap="round"/>
  </svg>;
}
function IcArrowLeft({ color = '#fff' }) {
  return <svg width="11" height="20" viewBox="0 0 11 20" fill="none">
    <path d="M9 2L2 10l7 8" stroke={color} strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>;
}
function IcPlus({ color = '#fff', size = 22 }) {
  return <svg width={size} height={size} viewBox="0 0 22 22" fill="none">
    <path d="M11 4v14M4 11h14" stroke={color} strokeWidth="2.4" strokeLinecap="round"/>
  </svg>;
}
function IcChevron({ color = '#999', size = 16 }) {
  return <svg width={size * 0.6} height={size} viewBox="0 0 10 16" fill="none">
    <path d="M2 2l6 6-6 6" stroke={color} strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>;
}
function IcHandoff({ color }) {
  return <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M2 7h10M8 3l4 4-4 4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>;
}

// ─── Shared Components ────────────────────────────────────────────────────────
function Avatar({ initials, color, size = 40 }) {
  return <div style={{ width: size, height: size, borderRadius: size / 2, background: color,
    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    color: '#fff', fontWeight: 800, fontSize: size * 0.37, letterSpacing: 0.5 }}>{initials}</div>;
}
function Chip({ label, color, bg, small }) {
  return <span style={{ display: 'inline-flex', alignItems: 'center', padding: small ? '3px 9px' : '4px 11px',
    borderRadius: 20, background: bg, color: color, fontSize: small ? 12 : 13, fontWeight: 700 }}>{label}</span>;
}
function Card({ children, t, style = {}, onClick }) {
  return <div onClick={onClick} style={{ background: t.cardBg, borderRadius: 18,
    boxShadow: t.shadow, border: t.cardBorder || 'none',
    overflow: 'hidden', cursor: onClick ? 'pointer' : 'default', ...style }}>{children}</div>;
}
function SectionLabel({ label, t }) {
  return <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase',
    color: t.subtext, marginBottom: 12, paddingLeft: 2 }}>{label}</div>;
}

// ─── Tab Bar ─────────────────────────────────────────────────────────────────
function TabBar({ activeTab, onTabChange, t }) {
  const tabs = [
    { id: 'home', label: 'Home', Icon: IcHome },
    { id: 'calendar', label: 'Calendar', Icon: IcCalendar },
    { id: 'household', label: 'Household', Icon: IcHousehold },
    { id: 'expenses', label: 'Expenses', Icon: IcWallet },
    { id: 'messages', label: 'Messages', Icon: IcMessage, badge: 1 },
  ];
  return <div style={{ display: 'flex', background: t.tabBg, borderTop: `1px solid ${t.tabBorder}`,
    paddingTop: 10, paddingBottom: 6, flexShrink: 0 }}>
    {tabs.map(({ id, label, Icon, badge }) => {
      const isActive = activeTab === id;
      const color = isActive ? t.primary : t.subtext;
      return <div key={id} onClick={() => onTabChange(id)} style={{ flex: 1, display: 'flex',
        flexDirection: 'column', alignItems: 'center', gap: 4, cursor: 'pointer',
        WebkitTapHighlightColor: 'transparent', position: 'relative' }}>
        <div style={{ position: 'relative' }}>
          <Icon active={isActive} color={color} />
          {badge && !isActive && <div style={{ position: 'absolute', top: -2, right: -4,
            width: 9, height: 9, borderRadius: 5, background: '#E05A40',
            border: `2px solid ${t.tabBg}` }} />}
        </div>
        <span style={{ fontSize: 11, fontWeight: isActive ? 700 : 500, color, letterSpacing: 0.2 }}>{label}</span>
      </div>;
    })}
  </div>;
}

// ─── Home Screen ─────────────────────────────────────────────────────────────
function HomeScreen({ t, base, navigate }) {
  const d = COPARENT_DATA;
  const nextEvent = d.upcomingEvents[0];
  const netBalance = d.balance.owedToYou;
  const eventTypeColor = (type) => type === 'handoff' ? base.primary : type === 'medical' ? base.red : base.accent;

  return <div style={{ flex: 1, overflowY: 'auto', padding: '0 18px 20px', display: 'flex', flexDirection: 'column', gap: 22 }}>
    {/* Greeting */}
    <div style={{ paddingTop: 8 }}>
      <div style={{ fontSize: 26, fontWeight: 800, color: t.text, letterSpacing: -0.6 }}>Good morning, Alex 👋</div>
      <div style={{ fontSize: 15, color: t.subtext, marginTop: 3 }}>Friday, April 25</div>
    </div>

    {/* Next Handoff Feature Card */}
    <div style={{ background: `linear-gradient(135deg, ${base.primary} 0%, ${base.accent} 100%)`,
      borderRadius: 22, padding: '22px 22px 20px', color: '#fff' }}>
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase',
        opacity: 0.75, marginBottom: 10 }}>Next Handoff</div>
      <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.2, marginBottom: 6 }}>{nextEvent.title}</div>
      <div style={{ fontSize: 15, opacity: 0.88, marginBottom: 18 }}>{nextEvent.children} · {nextEvent.dateLabel} at {nextEvent.time}</div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
        background: 'rgba(255,255,255,0.2)', borderRadius: 12, padding: '8px 16px',
        fontSize: 14, fontWeight: 700, cursor: 'pointer' }}
        onClick={() => navigate('calendar')}>
        View in Calendar
      </div>
    </div>

    {/* Balance Card */}
    <Card t={t}>
      <div style={{ padding: '18px 20px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: t.subtext, letterSpacing: 0.3, marginBottom: 5 }}>BALANCE</div>
            <div style={{ fontSize: 30, fontWeight: 800, color: base.green, letterSpacing: -0.8 }}>+${netBalance.toFixed(2)}</div>
            <div style={{ fontSize: 14, color: t.subtext, marginTop: 3 }}>Jordan owes you</div>
          </div>
          <div onClick={() => navigate('expenses')} style={{ background: base.primaryLight, borderRadius: 12,
            padding: '10px 16px', fontSize: 14, fontWeight: 700, color: base.primary, cursor: 'pointer' }}>
            View All
          </div>
        </div>
        <div style={{ height: 1, background: t.divider, margin: '16px 0' }}/>
        <div style={{ display: 'flex', gap: 16 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: t.subtext, marginBottom: 3 }}>Pending</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: t.text }}>3 requests</div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, color: t.subtext, marginBottom: 3 }}>Settled this month</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: t.text }}>$127.50</div>
          </div>
        </div>
      </div>
    </Card>

    {/* Upcoming Events */}
    <div>
      <SectionLabel label="This Week" t={t} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {d.upcomingEvents.slice(0,3).map(ev => (
          <Card key={ev.id} t={t} style={{ padding: '14px 16px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 48, height: 48, borderRadius: 14, background: eventTypeColor(ev.type) + '1A',
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: eventTypeColor(ev.type), letterSpacing: 0.5 }}>{ev.weekday.toUpperCase()}</div>
                <div style={{ fontSize: 18, fontWeight: 800, color: eventTypeColor(ev.type), lineHeight: 1.1 }}>{ev.day}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text, marginBottom: 2 }}>{ev.title}</div>
                <div style={{ fontSize: 13, color: t.subtext }}>{ev.time} · {ev.children}</div>
              </div>
              {ev.type === 'handoff' && <Chip label="Handoff" color={base.primary} bg={base.primaryLight} small />}
            </div>
          </Card>
        ))}
      </div>
    </div>

    {/* Children */}
    <div>
      <SectionLabel label="Children" t={t} />
      <div style={{ display: 'flex', gap: 12 }}>
        {d.children.map(c => (
          <Card key={c.id} t={t} style={{ padding: '16px', flex: 1, textAlign: 'center' }}>
            <Avatar initials={c.initials} color={c.color} size={44} />
            <div style={{ marginTop: 10, fontSize: 15, fontWeight: 700, color: t.text }}>{c.name}</div>
            <div style={{ fontSize: 13, color: t.subtext }}>Age {c.age}</div>
          </Card>
        ))}
      </div>
    </div>
  </div>;
}

// ─── Calendar Screen ──────────────────────────────────────────────────────────
function CalendarScreen({ t, base }) {
  const [selectedDay, setSelectedDay] = React.useState(25);
  const custody = COPARENT_DATA.aprCustody;
  const events = COPARENT_DATA.upcomingEvents;
  const daysInMonth = 30;
  const startDay = 3; // April 1, 2026 = Wednesday

  // Detect handoff days (custody changes from prev day)
  const isHandoff = (day) => {
    if (day <= 1) return false;
    return custody[day] !== custody[day - 1];
  };

  const cells = [];
  for (let i = 0; i < startDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const custodyColor = (c) => c === 'A' ? base.accent : c === 'J' ? base.primary : null;
  const custodyLabel = (c) => c === 'A' ? 'Your day' : c === 'J' ? "Jordan's day" : '';

  const dayEvents = events.filter(e => e.day === selectedDay);
  const selCustody = custody[selectedDay];

  return <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
    {/* Month nav */}
    <div style={{ padding: '8px 18px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div style={{ fontSize: 22, fontWeight: 800, color: t.text }}>April 2026</div>
      <div style={{ display: 'flex', gap: 8 }}>
        {['‹','›'].map((ch, i) => (
          <div key={i} style={{ width: 36, height: 36, borderRadius: 11, background: t.bgSecondary,
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            fontSize: 20, fontWeight: 700, color: t.subtext, lineHeight: 1 }}>{ch}</div>
        ))}
      </div>
    </div>

    {/* Weekday headers */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', padding: '0 14px', marginBottom: 6 }}>
      {['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map((d,i) => (
        <div key={i} style={{ textAlign: 'center', fontSize: 12, fontWeight: 700, color: t.subtext, padding: '4px 0' }}>{d}</div>
      ))}
    </div>

    {/* Calendar Grid */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', padding: '0 10px', gap: '3px 2px', marginBottom: 14 }}>
      {cells.map((day, i) => {
        if (!day) return <div key={i} />;
        const cc = custody[day];
        const bg = custodyColor(cc);
        const isSelected = day === selectedDay;
        const isToday = day === 25;
        const hasEvent = events.some(e => e.day === day);
        const handoff = isHandoff(day);

        return <div key={i} onClick={() => setSelectedDay(day)} style={{ textAlign: 'center', padding: '2px', cursor: 'pointer' }}>
          <div style={{
            width: 44, height: 44, borderRadius: 13, margin: '0 auto',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            background: isSelected
              ? base.primary
              : bg
              ? bg + (isToday ? 'CC' : '40')
              : 'transparent',
            border: isToday && !isSelected ? `2.5px solid ${base.primary}` : 'none',
            position: 'relative',
            transition: 'background 0.15s',
          }}>
            <span style={{ fontSize: 16, fontWeight: isSelected || isToday ? 800 : 600,
              color: isSelected ? '#fff' : (bg && !isToday) ? (cc === 'A' ? base.accent : base.primary) : t.text,
              filter: (bg && !isSelected && !isToday) ? 'brightness(0.7)' : 'none',
              lineHeight: 1.1 }}>{day}</span>
            {/* Event dot */}
            {hasEvent && !isSelected && (
              <div style={{ width: 5, height: 5, borderRadius: 3, background: isSelected ? 'rgba(255,255,255,0.8)' : '#E05A40', marginTop: 1 }} />
            )}
            {/* Handoff arrow badge */}
            {handoff && !isSelected && (
              <div style={{ position: 'absolute', top: -4, right: -4, width: 16, height: 16,
                borderRadius: 8, background: t.bg, border: `1.5px solid ${t.divider}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
                  <path d="M1 4.5h7M5.5 2l2.5 2.5L5.5 7" stroke={base.amber} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            )}
          </div>
        </div>;
      })}
    </div>

    {/* Legend */}
    <div style={{ display: 'flex', gap: 18, padding: '0 18px 14px', flexWrap: 'wrap' }}>
      {[
        { color: base.accent, label: 'Your days' },
        { color: base.primary, label: "Jordan's days" },
        { color: base.amber, label: 'Handoff day', arrow: true },
        { color: '#E05A40', label: 'Event', dot: true },
      ].map(({ color, label, arrow, dot }) => (
        <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {arrow ? (
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M1 7h12M8 3l4 4-4 4" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          ) : dot ? (
            <div style={{ width: 8, height: 8, borderRadius: 4, background: color }} />
          ) : (
            <div style={{ width: 14, height: 14, borderRadius: 4, background: color + '55', border: `2px solid ${color}` }} />
          )}
          <span style={{ fontSize: 12, fontWeight: 600, color: t.subtext }}>{label}</span>
        </div>
      ))}
    </div>

    {/* Selected day detail */}
    <div style={{ flex: 1, borderTop: `1px solid ${t.divider}`, background: t.bgSecondary, padding: '16px 18px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>Apr {selectedDay}</div>
        {selCustody && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 12px',
            borderRadius: 20, background: custodyColor(selCustody) + '20' }}>
            <div style={{ width: 8, height: 8, borderRadius: 4, background: custodyColor(selCustody) }} />
            <span style={{ fontSize: 13, fontWeight: 700, color: custodyColor(selCustody) }}>{custodyLabel(selCustody)}</span>
          </div>
        )}
      </div>
      {dayEvents.length === 0 && (
        <div style={{ color: t.subtext, fontSize: 14, textAlign: 'center', paddingTop: 16 }}>No events this day</div>
      )}
      {dayEvents.map(ev => (
        <div key={ev.id} style={{ display: 'flex', gap: 12, marginBottom: 10, padding: '14px 16px',
          background: t.cardBg, borderRadius: 16, border: t.cardBorder || 'none', boxShadow: t.shadow }}>
          <div style={{ width: 4, borderRadius: 2, background: ev.type === 'handoff' ? base.primary : base.accent, flexShrink: 0, alignSelf: 'stretch' }} />
          <div>
            <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{ev.title}</div>
            <div style={{ fontSize: 13, color: t.subtext, marginTop: 3 }}>{ev.time} · {ev.children}</div>
            {ev.type === 'handoff' && (
              <div style={{ marginTop: 6 }}><Chip label={ev.direction} color={base.primary} bg={base.primaryLight} small /></div>
            )}
          </div>
        </div>
      ))}
    </div>
  </div>;
}

// ─── Expenses Screen ──────────────────────────────────────────────────────────
function ExpensesScreen({ t, base }) {
  const [adding, setAdding] = React.useState(false);
  const [added, setAdded] = React.useState(false);
  const d = COPARENT_DATA;
  if (adding) return <AddExpenseFlow t={t} base={base} onClose={() => { setAdding(false); setAdded(true); }} />;

  return <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', position: 'relative' }}>
    {/* Balance */}
    <div style={{ margin: '8px 18px 18px', background: `linear-gradient(135deg, ${base.green}, ${base.accent})`,
      borderRadius: 22, padding: '20px 22px', color: '#fff' }}>
      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', opacity: 0.8, marginBottom: 8 }}>Net Balance</div>
      <div style={{ fontSize: 34, fontWeight: 800, letterSpacing: -1 }}>+${d.balance.owedToYou.toFixed(2)}</div>
      <div style={{ fontSize: 14, opacity: 0.85, marginTop: 3 }}>Jordan owes you</div>
    </div>
    {/* Summary */}
    <div style={{ display: 'flex', gap: 12, padding: '0 18px', marginBottom: 18 }}>
      {[{ label: "You're owed", amt: '$210.00', color: base.green }, { label: 'You owe', amt: '$32.50', color: base.red }].map(({ label, amt, color }) => (
        <div key={label} style={{ flex: 1, background: t.cardBg, borderRadius: 16, padding: '14px 16px',
          border: t.cardBorder || 'none', boxShadow: t.shadow }}>
          <div style={{ fontSize: 12, color: t.subtext, marginBottom: 5 }}>{label}</div>
          <div style={{ fontSize: 20, fontWeight: 800, color }}>{amt}</div>
        </div>
      ))}
    </div>
    {/* List */}
    <div style={{ padding: '0 18px', flex: 1 }}>
      <SectionLabel label="Recent Expenses" t={t} />
      {added && <div style={{ marginBottom: 12, padding: '12px 16px', background: base.greenBg,
        borderRadius: 14, fontSize: 14, fontWeight: 700, color: base.green }}>✓ Expense submitted to Jordan</div>}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {d.expenses.map(ex => (
          <Card key={ex.id} t={t} style={{ padding: '16px 18px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
              <div style={{ flex: 1, minWidth: 0, marginRight: 10 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text, marginBottom: 3 }}>{ex.desc}</div>
                <div style={{ fontSize: 13, color: t.subtext }}>{ex.date} · {ex.children}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 18, fontWeight: 800, color: t.text }}>${ex.amount.toFixed(2)}</div>
                <div style={{ fontSize: 12, color: t.subtext }}>50/50 split</div>
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              {ex.status === 'pending'
                ? <Chip label="Pending" color={base.amber} bg={base.amberBg} small />
                : <Chip label="Settled" color={base.green} bg={base.greenBg} small />}
              <span style={{ fontSize: 13, fontWeight: 700, color: ex.paidBy === 'you' ? base.green : base.amber }}>
                {ex.paidBy === 'you' ? 'You paid' : 'Jordan paid'}
              </span>
            </div>
          </Card>
        ))}
      </div>
    </div>
    {/* FAB */}
    <div onClick={() => setAdding(true)} style={{ position: 'absolute', bottom: 16, right: 18,
      width: 56, height: 56, borderRadius: 28,
      background: `linear-gradient(135deg, ${base.primary}, ${base.accent})`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: `0 6px 20px ${base.primary}66`, cursor: 'pointer', zIndex: 10 }}>
      <IcPlus size={24} />
    </div>
  </div>;
}

// ─── Add Expense Flow ─────────────────────────────────────────────────────────
function AddExpenseFlow({ t, base, onClose }) {
  const [step, setStep] = React.useState(0);
  const [amount, setAmount] = React.useState('');
  const [desc, setDesc] = React.useState('');
  return <div style={{ flex: 1, display: 'flex', flexDirection: 'column', background: t.bg }}>
    <div style={{ padding: '12px 18px 14px', display: 'flex', alignItems: 'center', gap: 14,
      borderBottom: `1px solid ${t.divider}` }}>
      <div onClick={step === 0 ? onClose : () => setStep(s => s - 1)} style={{ width: 36, height: 36, borderRadius: 12,
        background: t.bgSecondary, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
        <IcArrowLeft color={t.text} />
      </div>
      <div style={{ fontSize: 17, fontWeight: 800, color: t.text }}>Add Expense</div>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 5 }}>
        {[0,1,2].map(i => <div key={i} style={{ width: 22, height: 5, borderRadius: 3,
          background: i <= step ? base.primary : t.divider, transition: 'background 0.2s' }} />)}
      </div>
    </div>
    <div style={{ flex: 1, padding: '28px 22px', display: 'flex', flexDirection: 'column', gap: 18 }}>
      {step === 0 && <>
        <div style={{ fontSize: 20, fontWeight: 800, color: t.text }}>How much?</div>
        <div style={{ background: t.bgSecondary, borderRadius: 18, padding: '22px',
          display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 36, fontWeight: 800, color: t.subtext }}>$</span>
          <input value={amount} onChange={e => setAmount(e.target.value)} placeholder="0.00" type="number"
            style={{ flex: 1, fontSize: 44, fontWeight: 800, background: 'none', border: 'none',
            outline: 'none', color: t.text, width: '100%', fontFamily: 'inherit' }} />
        </div>
        <div style={{ fontSize: 14, color: t.subtext, textAlign: 'center' }}>
          Split 50/50 with Jordan · Your share: <b style={{ color: t.text }}>${((parseFloat(amount)||0)/2).toFixed(2)}</b>
        </div>
      </>}
      {step === 1 && <>
        <div style={{ fontSize: 20, fontWeight: 800, color: t.text }}>What's it for?</div>
        <input value={desc} onChange={e => setDesc(e.target.value)} placeholder="e.g. Soccer cleats"
          style={{ background: t.bgSecondary, border: `2px solid ${desc ? base.primary : 'transparent'}`,
          borderRadius: 16, padding: '16px 18px', fontSize: 16, color: t.text, outline: 'none', fontFamily: 'inherit' }} />
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          {['Medical','Education','Sports','Activities','Clothing','Other'].map(cat => (
            <div key={cat} onClick={() => setDesc(cat)} style={{ padding: '10px 16px', borderRadius: 22,
              background: desc === cat ? base.primaryLight : t.bgSecondary,
              color: desc === cat ? base.primary : t.subtext,
              fontSize: 14, fontWeight: 700, cursor: 'pointer',
              border: desc === cat ? `2px solid ${base.primary}` : '2px solid transparent' }}>{cat}</div>
          ))}
        </div>
      </>}
      {step === 2 && <>
        <div style={{ fontSize: 20, fontWeight: 800, color: t.text }}>Review & Submit</div>
        <div style={{ background: t.bgSecondary, borderRadius: 18, padding: '20px' }}>
          {[
            ['Amount', `$${parseFloat(amount||0).toFixed(2)}`],
            ['Description', desc || '—'],
            ['Jordan owes', `$${((parseFloat(amount||0))/2).toFixed(2)}`],
          ].map(([k, v], i, arr) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0',
              borderBottom: i < arr.length - 1 ? `1px solid ${t.divider}` : 'none' }}>
              <span style={{ color: t.subtext, fontSize: 15 }}>{k}</span>
              <span style={{ color: i === 2 ? base.green : t.text, fontWeight: 700, fontSize: 15 }}>{v}</span>
            </div>
          ))}
        </div>
      </>}
    </div>
    <div style={{ padding: '0 22px 18px' }}>
      <div onClick={() => step < 2 ? setStep(s => s + 1) : onClose()}
        style={{ background: `linear-gradient(135deg, ${base.primary}, ${base.accent})`,
        borderRadius: 16, padding: '18px', textAlign: 'center', color: '#fff',
        fontWeight: 800, fontSize: 17, cursor: 'pointer' }}>
        {step < 2 ? 'Continue' : 'Submit to Jordan'}
      </div>
    </div>
  </div>;
}

// ─── Messages Screen ──────────────────────────────────────────────────────────
function MessagesScreen({ t, base }) {
  const [activeThread, setActiveThread] = React.useState(null);
  const messages = COPARENT_DATA.messages;
  if (activeThread) {
    const thread = messages.find(m => m.id === activeThread);
    return <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 14,
        borderBottom: `1px solid ${t.divider}` }}>
        <div onClick={() => setActiveThread(null)} style={{ width: 36, height: 36, borderRadius: 12,
          background: t.bgSecondary, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <IcArrowLeft color={t.text} />
        </div>
        <div style={{ fontSize: 16, fontWeight: 800, color: t.text, flex: 1 }}>{thread.title}</div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {thread.thread.map((msg, i) => (
          <div key={i} style={{ maxWidth: '82%', alignSelf: msg.from === 'system' ? 'center' : msg.from === 'you' ? 'flex-end' : 'flex-start' }}>
            {msg.from === 'system'
              ? <div style={{ background: t.bgSecondary, borderRadius: 12, padding: '10px 14px',
                  fontSize: 13, color: t.subtext, textAlign: 'center' }}>{msg.text}</div>
              : <div style={{ background: msg.from === 'you' ? base.primary : t.cardBg,
                  borderRadius: 16, padding: '12px 16px', boxShadow: t.shadow, border: t.cardBorder || 'none' }}>
                  <div style={{ fontSize: 14, color: msg.from === 'you' ? '#fff' : t.text }}>{msg.text}</div>
                  {msg.time && <div style={{ fontSize: 12, marginTop: 5, color: msg.from === 'you' ? 'rgba(255,255,255,0.6)' : t.subtext }}>{msg.time}</div>}
                </div>}
          </div>
        ))}
      </div>
      <div style={{ padding: '12px 18px', display: 'flex', gap: 12, borderTop: `1px solid ${t.divider}` }}>
        <div style={{ flex: 1, background: t.bgSecondary, borderRadius: 14, padding: '12px 16px',
          fontSize: 15, color: t.subtext }}>Add a note…</div>
        <div style={{ width: 44, height: 44, borderRadius: 14, background: base.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
          <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
            <path d="M2 8l12-6-6 12-2-4-4-2z" stroke="#fff" strokeWidth="1.8" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </div>;
  }
  return <div style={{ flex: 1, overflowY: 'auto', padding: '8px 18px 20px' }}>
    <div style={{ fontSize: 14, color: t.subtext, marginBottom: 16, lineHeight: 1.6 }}>
      Messages are tied to events and expenses — keeping things structured.
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {messages.map(msg => {
        const typeColor = msg.type === 'schedule' ? base.amber : msg.type === 'expense' ? base.accent : base.primary;
        const typeBg = msg.type === 'schedule' ? base.amberBg : msg.type === 'expense' ? base.accentLight : base.primaryLight;
        return <Card key={msg.id} t={t} onClick={() => setActiveThread(msg.id)} style={{ padding: '16px 18px' }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{ width: 44, height: 44, borderRadius: 14, background: typeBg,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              {msg.type === 'schedule' && <IcCalendar active color={typeColor} />}
              {msg.type === 'expense' && <IcWallet active color={typeColor} />}
              {msg.type === 'reminder' && <IcHome active color={typeColor} />}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{msg.title}</div>
                <div style={{ fontSize: 12, color: t.subtext, flexShrink: 0, marginLeft: 10 }}>{msg.time}</div>
              </div>
              <div style={{ fontSize: 14, color: t.subtext, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{msg.preview}</div>
            </div>
            {msg.unread && <div style={{ width: 9, height: 9, borderRadius: 5, background: base.primary, marginTop: 5, flexShrink: 0 }} />}
          </div>
        </Card>;
      })}
    </div>
  </div>;
}

// ─── Settings Screen ──────────────────────────────────────────────────────────
function SettingsScreen({ t, base, darkMode, toggleDark }) {
  const d = COPARENT_DATA;
  const Row = ({ label, value, toggle, onToggle, color }) => (
    <div style={{ display: 'flex', alignItems: 'center', padding: '15px 18px',
      borderBottom: `1px solid ${t.divider}`, cursor: 'pointer' }}>
      <div style={{ flex: 1, fontSize: 16, color: color || t.text }}>{label}</div>
      {value && <div style={{ fontSize: 15, color: t.subtext, marginRight: 10 }}>{value}</div>}
      {toggle !== undefined
        ? <div onClick={onToggle} style={{ width: 52, height: 30, borderRadius: 15,
            background: toggle ? base.primary : t.divider, position: 'relative',
            cursor: 'pointer', transition: 'background 0.2s', flexShrink: 0 }}>
            <div style={{ position: 'absolute', top: 3, left: toggle ? 25 : 3,
              width: 24, height: 24, borderRadius: 12, background: '#fff',
              transition: 'left 0.2s', boxShadow: '0 1px 5px rgba(0,0,0,0.2)' }} />
          </div>
        : !onToggle && <IcChevron color={t.subtext} size={16} />}
    </div>
  );
  return <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0 20px' }}>
    {/* Profile */}
    <div style={{ margin: '0 18px 20px', padding: '18px', background: t.cardBg,
      borderRadius: 22, border: t.cardBorder || 'none', boxShadow: t.shadow }}>
      <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 16 }}>
        <Avatar initials="A" color={base.accent} size={56} />
        <div>
          <div style={{ fontSize: 20, fontWeight: 800, color: t.text }}>Alex</div>
          <div style={{ fontSize: 14, color: t.subtext }}>alex@email.com</div>
        </div>
      </div>
      <div style={{ height: 1, background: t.divider, marginBottom: 14 }} />
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <Avatar initials="J" color={base.primary} size={36} />
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>Co-parenting with Jordan</div>
          <div style={{ fontSize: 13, color: t.subtext }}>Connected · Since Jan 2024</div>
        </div>
      </div>
    </div>
    {/* Children */}
    <div style={{ margin: '0 18px 20px' }}>
      <SectionLabel label="Children" t={t} />
      <div style={{ background: t.cardBg, borderRadius: 18, overflow: 'hidden',
        border: t.cardBorder || 'none', boxShadow: t.shadow }}>
        {d.children.map((c, i) => (
          <div key={c.id} style={{ display: 'flex', alignItems: 'center', padding: '14px 18px',
            borderBottom: i < d.children.length - 1 ? `1px solid ${t.divider}` : 'none', cursor: 'pointer' }}>
            <Avatar initials={c.initials} color={c.color} size={36} />
            <div style={{ marginLeft: 14, flex: 1 }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: t.text }}>{c.name}</div>
              <div style={{ fontSize: 13, color: t.subtext }}>Age {c.age}</div>
            </div>
            <IcChevron color={t.subtext} size={16} />
          </div>
        ))}
      </div>
    </div>
    {/* Preferences */}
    <div style={{ margin: '0 18px 20px' }}>
      <SectionLabel label="Preferences" t={t} />
      <div style={{ background: t.cardBg, borderRadius: 18, overflow: 'hidden',
        border: t.cardBorder || 'none', boxShadow: t.shadow }}>
        <Row label="Dark Mode" toggle={darkMode} onToggle={toggleDark} />
        <Row label="Notifications" value="On" />
        <Row label="Custody Schedule" value="2-2-3" />
      </div>
    </div>
    {/* Account */}
    <div style={{ margin: '0 18px' }}>
      <SectionLabel label="Account" t={t} />
      <div style={{ background: t.cardBg, borderRadius: 18, overflow: 'hidden',
        border: t.cardBorder || 'none', boxShadow: t.shadow }}>
        <Row label="Subscription" value="Pro" />
        <Row label="Privacy & Security" />
        <Row label="Sign Out" color={base.red} />
      </div>
    </div>
  </div>;
}

// ─── Onboarding ───────────────────────────────────────────────────────────────
function OnboardingScreen({ base, onComplete }) {
  const [step, setStep] = React.useState(0);
  const steps = [
    { emoji: '🤝', title: 'Welcome to CoParent', sub: 'A calm, structured space for coordinating with your co-parent.', cta: 'Get Started' },
    { emoji: '👨‍👧‍👦', title: 'Who are your children?', sub: 'Add each child to keep schedules and expenses organized.', cta: 'Next' },
    { emoji: '📬', title: 'Connect your co-parent', sub: "We'll send Jordan an invite to join your shared workspace.", cta: 'Send Invite' },
  ];
  const cur = steps[step];
  return <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '28px 26px', background: '#FFFFFF' }}>
    <div style={{ height: 5, background: '#E5EEF2', borderRadius: 3, marginBottom: 36 }}>
      <div style={{ height: 5, width: `${((step+1)/steps.length)*100}%`, background: base.primary,
        borderRadius: 3, transition: 'width 0.4s ease' }} />
    </div>
    <div style={{ height: 170, background: `linear-gradient(135deg, ${base.primaryLight}, ${base.accentLight})`,
      borderRadius: 28, marginBottom: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 60 }}>{cur.emoji}</div>
    <div style={{ fontSize: 26, fontWeight: 800, color: '#1A2530', letterSpacing: -0.5, marginBottom: 12, lineHeight: 1.2 }}>{cur.title}</div>
    <div style={{ fontSize: 16, color: '#6B8090', lineHeight: 1.65, marginBottom: 30 }}>{cur.sub}</div>
    {step === 1 && <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 20 }}>
      {[{ name: 'Emma', age: 8, color: base.accent }, { name: 'Liam', age: 5, color: base.primary }].map(c => (
        <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px',
          background: '#F5F8FA', borderRadius: 16 }}>
          <Avatar initials={c.name[0]} color={c.color} size={40} />
          <div style={{ fontSize: 16, fontWeight: 700, color: '#1A2530' }}>{c.name}, age {c.age}</div>
        </div>
      ))}
    </div>}
    {step === 2 && <div style={{ padding: '14px 18px', background: '#F5F8FA', borderRadius: 16, marginBottom: 20 }}>
      <div style={{ fontSize: 13, color: '#6B8090', marginBottom: 5 }}>Co-parent email</div>
      <div style={{ fontSize: 16, color: '#1A2530', fontWeight: 700 }}>jordan@email.com</div>
    </div>}
    <div style={{ marginTop: 'auto' }}>
      <div onClick={() => step < steps.length - 1 ? setStep(s => s + 1) : onComplete()}
        style={{ background: `linear-gradient(135deg, ${base.primary}, ${base.accent})`,
        borderRadius: 16, padding: '18px', textAlign: 'center', color: '#fff',
        fontWeight: 800, fontSize: 17, cursor: 'pointer' }}>{cur.cta}</div>
      {step > 0 && <div onClick={() => setStep(s => s - 1)} style={{ padding: '16px', textAlign: 'center',
        color: '#6B8090', fontSize: 15, cursor: 'pointer' }}>Back</div>}
    </div>
  </div>;
}

// ─── App Shell ────────────────────────────────────────────────────────────────
function CoParentApp({ themeId = 'classic', startTab = 'home', startOnboarding = false, defaultDark = false, homeStyle = 'classic', householdStyle = 'binder', startStack = null }) {
  const [tab, setTab] = React.useState(startTab);
  const [stack, setStack] = React.useState(startStack); // { kind: 'vault'|'child'|'notifications'|'pickup'|'schedule', data?: any }
  const [dark, setDark] = React.useState(defaultDark);
  const [onboarding, setOnboarding] = React.useState(startOnboarding);

  const base = COPARENT_THEMES[themeId];
  const t = dark ? { ...base, ...base.dark } : base;

  const homeVariants = {
    'one-thing': HomeOneThing, 'quiet-list': HomeQuietList, 'breathing': HomeBreathing, 'classic': HomeScreen,
    'pre-pair': HomePrePair, 'their-day': HomeTheirDay, 'handoff-active': HomeHandoffActive,
  };
  const HomeVariant = homeVariants[homeStyle] || HomeScreen;
  const householdVariants = {
    'binder': HouseholdBinderScreen,
    'index': HouseholdIndexScreen,
    'dossier': HouseholdDossierScreen,
  };
  const HouseholdVariant = householdVariants[householdStyle] || HouseholdBinderScreen;
  const screens = {
    home: (props) => <HomeVariant {...props} openStack={setStack} />,
    calendar: (props) => <CalmCalendarScreen {...props} openStack={setStack} />,
    household: (props) => <HouseholdVariant {...props} openStack={setStack} />,
    expenses: (props) => <CalmExpensesScreen {...props} openStack={setStack} />,
    messages: (props) => <CalmMessagesScreen {...props} openStack={setStack} />,
    settings: (props) => <CalmSettingsScreen {...props} openStack={setStack} />,
  };
  const ActiveScreen = screens[tab];

  // Immersive theme: header area uses gradient on non-home screens
  const isGradientHeader = themeId === 'immersive' && tab !== 'home';
  const headerTextColor = isGradientHeader ? '#ffffff' : t.text;

  if (onboarding) return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column',
      background: '#FFFFFF', fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif" }}>
      <div style={{ height: 59 }} />
      <OnboardingScreen base={base} onComplete={() => setOnboarding(false)} />
    </div>
  );

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column',
      background: t.bg, fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
      transition: 'background 0.3s' }}>
      <div style={{ height: 59 }} />

      {/* Calm screens render their own header */}

      {/* Screen content */}
      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', position: 'relative' }}>
        {stack ? (
          <div style={{ position: 'absolute', inset: 0, background: t.bg, display: 'flex', flexDirection: 'column', zIndex: 30 }}>
            {stack.kind === 'vault' && <VaultScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'child' && <ChildProfileScreen t={t} base={base} child={stack.data} onBack={() => setStack(null)} />}
            {stack.kind === 'notifications' && <NotificationsScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'pickup' && <PickupScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'schedule' && <ScheduleEditorScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'addExpense' && <AddExpenseScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'newMessage' && <NewMessageScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'addEvent' && <AddEventScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'search' && <SearchScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'records' && <RecordsScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'holidays' && <HolidaysScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'profile' && <ProfileScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'pair' && <PairCoparentScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'journal' && <JournalScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'health' && <HealthLogScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'travel' && <TravelScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'tone' && <ToneCheckScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'reimburse' && <ReimbursementScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'rules' && <HouseRulesScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'onboarding' && <CalmOnboardingScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'lock' && <AppLockScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'signin' && <SignInScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'quickAdd' && <QuickAddScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'dispute' && <DisputeScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'attorney' && <AttorneyShareScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'subscription' && <SubscriptionScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'help' && <HelpScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'caregiver' && <CaregiverPassScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'providers' && <ProvidersScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'swapInbox' && <SwapInboxScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'emergency' && <EmergencyCardScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'school' && <SchoolFeedScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'wishlist' && <WishlistScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'delete' && <DeleteAccountScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'locale' && <LocaleScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'uncouple' && <UncoupleScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'settle' && <SettleBalanceScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'activity' && <ActivityLogScreen t={t} base={base} onBack={() => setStack(null)} />}
            {stack.kind === 'coparent' && <CoParentProfileScreen t={t} base={base} onBack={() => setStack(null)} />}
          </div>
        ) : (
          <ActiveScreen t={t} base={base} darkMode={dark} toggleDark={() => setDark(d => !d)} navigate={setTab} />
        )}
      </div>

      {/* Tab bar (hidden when in stack) */}
      {!stack && <TabBar activeTab={tab} onTabChange={setTab} t={t} />}
    </div>
  );
}

Object.assign(window, { CoParentApp });