// Direction A v2 — "Pavilion (refined)"
// Applies common iOS/UI best-practice improvements over v1:
//  · 44pt minimum hit targets on all interactive elements
//  · Tabular numerals everywhere money appears, aligned decimals
//  · Stronger type ramp (28/22/17/15/13/11); fewer competing weights
//  · Muted-text contrast lifted (#6E5F54 ≥ 4.5:1 on cream)
//  · Bill rows: Splitwise-style amount-primary, "you lent/owe" tertiary
//  · Detail: per-person Remind action + tap-to-settle row
//  · Add expense: live split preview, fixed CTA with running total
//  · Section actions inline (no FAB overlap); FAB only on the main list
//  · Active tab indicator + scrim under the tab bar for legibility
//  · Microcopy: confident, not cute. Empty/zero states surfaced.

const { Screen, Avatar, AvatarStack, gbp, Icons, BottomNavRaw, NAV_ITEMS } = window;
const FC = window.FC_DATA;

const A2 = {
  cream:    '#FAF1E8',
  card:     '#FFFFFF',
  ink:      '#241A14',
  inkDim:   '#6E5F54',
  inkMute:  '#94837A',
  terracotta: '#D55E3A',
  terraDeep:  '#B14926',
  terraSoft:  '#FBE2D6',
  mint:     '#D9EFDB',
  mintInk:  '#1E462A',
  amber:    '#F2C879',
  rose:     '#E8B8B8',
  roseInk:  '#9A3B3B',
  hairline: 'rgba(36,26,20,0.08)',
  hairline2:'rgba(36,26,20,0.05)',
};

const tnum = { fontVariantNumeric: 'tabular-nums', fontFeatureSettings: '"tnum","cv11"' };

const cabinetTitle = {
  fontFamily: "'Cabinet Grotesk','General Sans',system-ui",
  fontWeight: 800,
  letterSpacing: -1.0,
  color: A2.ink,
};

// ── Bottom tab bar with active-state pill, slightly larger hit areas.
function TabBar({ active }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      paddingBottom: 24, paddingTop: 10,
      background: 'linear-gradient(to bottom, rgba(250,241,232,0) 0%, rgba(250,241,232,0.95) 30%, ' + A2.cream + ' 55%)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-around', padding: '0 8px' }}>
        {NAV_ITEMS.map((it) => {
          const on = active === it.key;
          const Ico = Icons[it.key];
          return (
            <div key={it.key} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
              minWidth: 64, minHeight: 48, paddingTop: 4,
              color: on ? A2.terracotta : A2.inkDim,
            }}>
              <div style={{
                width: 52, height: 28, borderRadius: 14,
                background: on ? A2.terraSoft : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Ico size={22} c="currentColor" w={on ? 2 : 1.7} />
              </div>
              <div style={{ fontSize: 11, fontWeight: on ? 700 : 500, letterSpacing: 0.1 }}>{it.label}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Status / utility bits.
function Pill({ children, bg = A2.terraSoft, c = A2.terracotta, style = {} }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '4px 10px', borderRadius: 999,
      background: bg, color: c,
      fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase',
      ...style,
    }}>{children}</span>
  );
}

function CatTile({ emoji, bg, size = 44 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 14, background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.45, flexShrink: 0,
    }}>{emoji}</div>
  );
}

const catBg = {
  Rent:       '#E8DEF2',
  Groceries:  '#FBE2D6',
  Bills:      '#FFE9B8',
  'Going out':'#FFD8E0',
  Household:  '#D9F0DA',
};

function SectionHead({ title, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
      <div style={{ fontSize: 17, fontWeight: 700, color: A2.ink, letterSpacing: -0.3 }}>{title}</div>
      {right}
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// HOME
// ───────────────────────────────────────────────────────────
function Home() {
  return (
    <Screen bg={A2.cream}>
      {/* greeting + avatar group */}
      <div style={{ padding: '12px 24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 12.5, color: A2.inkDim, fontWeight: 600, letterSpacing: 0.3 }}>Tuesday, 5 Nov</div>
          <div style={{ ...cabinetTitle, fontSize: 30, marginTop: 2, letterSpacing: -0.8 }}>The Pavilion</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <AvatarStack whos={['maia','jordan','ellie']} size={30} ring={A2.cream} />
        </div>
      </div>

      {/* hero balance — taller, bigger Settle CTA */}
      <div style={{ margin: '16px 20px 0' }}>
        <div style={{
          background: A2.mint, borderRadius: 26, padding: '20px 22px 20px',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', right: -56, top: -60, width: 200, height: 200,
            borderRadius: 999, background: 'rgba(255,255,255,0.35)',
          }} />
          <div style={{ fontSize: 11.5, fontWeight: 700, color: A2.mintInk, letterSpacing: 1.2, textTransform: 'uppercase', opacity: 0.65 }}>The flat owes you</div>
          <div style={{ ...cabinetTitle, ...tnum, fontSize: 56, color: A2.mintInk, lineHeight: 1, marginTop: 4 }}>
            £217<span style={{ fontSize: 26, opacity: 0.45 }}>.30</span>
          </div>
          <div style={{ fontSize: 13.5, color: A2.mintInk, opacity: 0.75, marginTop: 6 }}>
            3 flatmates · settled to the penny
          </div>

          {/* Person breakdown — each row is its own tappable area */}
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {['maia','jordan','ellie'].map((w) => (
              <div key={w} style={{
                display: 'flex', alignItems: 'center', gap: 10, minHeight: 44,
                background: 'rgba(255,255,255,0.55)', borderRadius: 14,
                padding: '6px 12px 6px 6px',
              }}>
                <Avatar who={w} size={32} />
                <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: A2.mintInk }}>
                  {FC.mates[w].name} owes you
                </div>
                <div style={{ ...tnum, fontSize: 15, fontWeight: 700, color: A2.mintInk }}>+£{FC.balances[w].toFixed(2)}</div>
              </div>
            ))}
          </div>

          <button style={{
            marginTop: 14, width: '100%', minHeight: 48, borderRadius: 16, border: 'none',
            background: A2.mintInk, color: '#fff', fontFamily: 'inherit',
            fontSize: 15, fontWeight: 700, letterSpacing: 0.1,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>Settle up<Icons.arrow size={16} c="#fff" /></button>
        </div>
      </div>

      {/* Needs a nudge */}
      <div style={{ padding: '20px 24px 0' }}>
        <SectionHead title="Needs a nudge" right={<Pill bg={A2.rose} c={A2.roseInk}>1 late</Pill>} />
        <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <NudgeRow
            emoji="🧽" bg="#FFD8D8"
            title="Clean the kitchen"
            sub="Yours yesterday · 1 day late"
            badgeBg={A2.rose} badgeC={A2.roseInk} badge="Late"
          />
          <NudgeRow
            emoji="🗑️" bg="#FFE9B8"
            title="Bins out — recycling"
            sub="Jordan's turn · 9:00 PM"
            who="jordan"
          />
        </div>
      </div>

      {/* Lately at the flat */}
      <div style={{ padding: '22px 24px 130px' }}>
        <SectionHead title="Lately at the flat" right={
          <div style={{ fontSize: 13, fontWeight: 600, color: A2.terracotta }}>See all</div>
        } />
        <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <ActivityRow who="maia"   action="added" what="BT broadband" amount="£32.00" when="2h ago" />
          <ActivityRow who="jordan" action="paid"  what="Pub night"     amount="£48.00" when="Yesterday" />
          <ActivityRow who="ellie"  action="ticked off" what="Bin bags" when="Yesterday" />
        </div>
      </div>

      <TabBar active="home" />
    </Screen>
  );
}

function NudgeRow({ emoji, bg, title, sub, badge, badgeBg, badgeC, who }) {
  return (
    <div style={{
      background: A2.card, borderRadius: 18, padding: '12px 14px', minHeight: 64,
      display: 'flex', alignItems: 'center', gap: 12,
      border: '1px solid ' + A2.hairline,
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 14, background: bg,
        display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20,
      }}>{emoji}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 15.5, fontWeight: 600, color: A2.ink, letterSpacing: -0.2 }}>{title}</div>
        <div style={{ fontSize: 13, color: A2.inkDim, marginTop: 2 }}>{sub}</div>
      </div>
      {badge ? <Pill bg={badgeBg} c={badgeC}>{badge}</Pill> : who ? <Avatar who={who} size={30} /> : null}
    </div>
  );
}

function ActivityRow({ who, action, what, amount, when }) {
  const m = FC.mates[who];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Avatar who={who} size={36} />
      <div style={{ flex: 1, lineHeight: 1.35 }}>
        <div style={{ fontSize: 14, color: A2.ink }}>
          <span style={{ fontWeight: 700 }}>{m.name}</span>
          <span style={{ color: A2.inkDim }}> {action} </span>
          <span style={{ fontWeight: 600 }}>{what}</span>
          {amount && <span style={{ color: A2.inkDim, ...tnum }}> · {amount}</span>}
        </div>
        <div style={{ fontSize: 12, color: A2.inkMute, marginTop: 2 }}>{when}</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// SPLIT
// ───────────────────────────────────────────────────────────
function Split() {
  return (
    <Screen bg={A2.cream}>
      <div style={{ padding: '12px 24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ ...cabinetTitle, fontSize: 34, letterSpacing: -1 }}>Split</div>
        <div style={{ display: 'flex', gap: 8 }}>
          <IconBtn><Icons.reminders size={20} c={A2.ink} /></IconBtn>
          <IconBtn><Icons.more size={20} c={A2.ink} /></IconBtn>
        </div>
      </div>

      {/* hero — same component logic as Home but more compact + persistent Settle */}
      <div style={{ margin: '14px 20px 0' }}>
        <div style={{
          background: A2.mint, borderRadius: 24, padding: '18px 20px 18px',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: A2.mintInk, letterSpacing: 1.2, textTransform: 'uppercase', opacity: 0.65 }}>You're owed</div>
              <div style={{ ...cabinetTitle, ...tnum, fontSize: 50, color: A2.mintInk, lineHeight: 1, marginTop: 4 }}>
                £217<span style={{ fontSize: 24, opacity: 0.45 }}>.30</span>
              </div>
            </div>
            <button style={{
              minHeight: 44, padding: '0 18px', borderRadius: 22, border: 'none',
              background: A2.mintInk, color: '#fff', fontFamily: 'inherit',
              fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4,
            }}>Settle <Icons.arrow size={14} c="#fff" /></button>
          </div>

          <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
            {[['maia',104.50],['jordan',67.20],['ellie',45.60]].map(([w,n]) => (
              <div key={w} style={{
                flex: 1, display: 'flex', alignItems: 'center', gap: 8,
                background: 'rgba(255,255,255,0.55)', borderRadius: 14,
                padding: '8px 10px', minHeight: 44,
              }}>
                <Avatar who={w} size={26} />
                <div style={{ lineHeight: 1.2 }}>
                  <div style={{ fontSize: 11, color: A2.mintInk, opacity: 0.65, fontWeight: 600 }}>{FC.mates[w].name}</div>
                  <div style={{ ...tnum, fontSize: 13.5, color: A2.mintInk, fontWeight: 700 }}>+£{n.toFixed(2)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* segmented time filter — best practice: visible scope control */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{
          display: 'flex', padding: 4, background: A2.card, borderRadius: 14,
          border: '1px solid ' + A2.hairline,
        }}>
          {['This month','Last month','All time'].map((l, i) => (
            <div key={l} style={{
              flex: 1, textAlign: 'center', padding: '8px 0', borderRadius: 10,
              background: i === 0 ? A2.terraSoft : 'transparent',
              color: i === 0 ? A2.terraDeep : A2.inkDim,
              fontSize: 13, fontWeight: 700,
            }}>{l}</div>
          ))}
        </div>
      </div>

      {/* section head */}
      <div style={{ padding: '16px 24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 17, fontWeight: 700, color: A2.ink, letterSpacing: -0.3 }}>6 bills · £2,040 total</div>
        <div style={{ fontSize: 13, fontWeight: 600, color: A2.inkDim }}>Newest</div>
      </div>

      {/* bills list */}
      <div style={{ padding: '10px 20px 130px' }}>
        <div style={{ background: A2.card, borderRadius: 22, overflow: 'hidden', border: '1px solid ' + A2.hairline }}>
          {FC.bills.slice(0, 5).map((b, i) => (
            <BillRow key={b.id} bill={b} last={i === 4} />
          ))}
        </div>
      </div>

      {/* FAB — raised above tab bar */}
      <button style={{
        position: 'absolute', right: 20, bottom: 104, zIndex: 20,
        width: 56, height: 56, borderRadius: 28, background: A2.terracotta, border: 'none',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 22px rgba(213,94,58,0.48), 0 2px 6px rgba(213,94,58,0.25)',
      }}>
        <Icons.plus size={26} c="#fff" w={2.4} />
      </button>

      <TabBar active="split" />
    </Screen>
  );
}

function IconBtn({ children }) {
  return (
    <div style={{
      width: 40, height: 40, borderRadius: 20, background: A2.card,
      border: '1px solid ' + A2.hairline,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>{children}</div>
  );
}

function BillRow({ bill, last }) {
  const me = bill.paidBy === FC.you;
  const yourShare = bill.splits[FC.you];
  const yourNet = me ? bill.amount - yourShare : -yourShare;
  const positive = yourNet >= 0;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 14px', minHeight: 64,
      borderBottom: last ? 'none' : '1px solid ' + A2.hairline2,
    }}>
      <CatTile emoji={bill.emoji} bg={catBg[bill.category] || A2.terraSoft} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 15.5, fontWeight: 600, color: A2.ink, letterSpacing: -0.1 }}>{bill.title}</div>
        <div style={{ fontSize: 13, color: A2.inkDim, marginTop: 2, ...tnum }}>
          {me ? 'You' : FC.mates[bill.paidBy].name} paid £{bill.amount.toFixed(2)} · {bill.date}
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ ...tnum, fontSize: 16, fontWeight: 700, color: positive ? '#2A6E3D' : A2.terraDeep, letterSpacing: -0.2 }}>
          {positive ? '+' : '−'}£{Math.abs(yourNet).toFixed(2)}
        </div>
        <div style={{ fontSize: 11, fontWeight: 600, color: A2.inkMute, letterSpacing: 0.2, marginTop: 1 }}>
          {positive ? 'you lent' : 'you owe'}
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// BILL DETAIL
// ───────────────────────────────────────────────────────────
function Detail() {
  return (
    <Screen bg={A2.cream}>
      <div style={{ padding: '6px 16px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <IconBtn><Icons.back size={18} c={A2.ink} /></IconBtn>
        <div style={{ fontSize: 14, fontWeight: 600, color: A2.inkDim }}>Bill · 1 Nov</div>
        <IconBtn><Icons.more size={20} c={A2.ink} /></IconBtn>
      </div>

      {/* hero */}
      <div style={{ padding: '20px 24px 0', textAlign: 'center' }}>
        <div style={{
          margin: '0 auto', width: 64, height: 64, borderRadius: 20, background: catBg.Rent,
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 30,
        }}>🏠</div>
        <div style={{ fontSize: 17, fontWeight: 600, color: A2.inkDim, marginTop: 12 }}>Rent · November</div>
        <div style={{ ...cabinetTitle, ...tnum, fontSize: 52, marginTop: 2, color: A2.ink, letterSpacing: -1.4 }}>
          £1,820<span style={{ fontSize: 26, opacity: 0.4 }}>.00</span>
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 10,
          padding: '6px 14px 6px 6px', borderRadius: 99,
          background: A2.card, border: '1px solid ' + A2.hairline,
        }}>
          <Avatar who="sam" size={26} />
          <div style={{ fontSize: 13, fontWeight: 600, color: A2.ink }}>You paid · split 4 ways</div>
        </div>
      </div>

      {/* shares — each row has its own action */}
      <div style={{ margin: '20px 20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8, padding: '0 4px' }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: A2.inkDim, letterSpacing: 0.6, textTransform: 'uppercase' }}>Who owes what</div>
          <div style={{ fontSize: 12, fontWeight: 600, color: A2.inkMute }}>£455 each</div>
        </div>
        <div style={{ background: A2.card, borderRadius: 22, border: '1px solid ' + A2.hairline, overflow: 'hidden' }}>
          {['sam','maia','jordan','ellie'].map((w, i, arr) => {
            const m = FC.mates[w];
            const isYou = w === FC.you;
            return (
              <div key={w} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '11px 14px', minHeight: 60,
                borderBottom: i === arr.length - 1 ? 'none' : '1px solid ' + A2.hairline2,
              }}>
                <Avatar who={w} size={36} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: A2.ink }}>{isYou ? 'You' : m.name}</div>
                  <div style={{ ...tnum, fontSize: 13, color: A2.inkDim, marginTop: 1 }}>
                    {isYou ? 'Paid £1,820 · owed £1,365 back' : 'Owes £455.00'}
                  </div>
                </div>
                {isYou ? (
                  <Pill bg={A2.mint} c={A2.mintInk}>Paid</Pill>
                ) : (
                  <button style={{
                    minHeight: 36, padding: '0 12px', borderRadius: 12,
                    background: A2.terraSoft, color: A2.terraDeep, border: 'none',
                    fontFamily: 'inherit', fontSize: 13, fontWeight: 700,
                  }}>Remind</button>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* meta */}
      <div style={{ margin: '16px 20px 0', display: 'flex', gap: 10 }}>
        <MetaTile label="Repeats"  value="Monthly · 1st" emoji="🔁" />
        <MetaTile label="Added by" value="You · 28 Oct" emoji="✏️" />
      </div>

      {/* footer actions */}
      <div style={{ position: 'absolute', left: 20, right: 20, bottom: 36, display: 'flex', gap: 10 }}>
        <button style={{
          flex: 1, minHeight: 52, borderRadius: 18, border: '1px solid ' + A2.hairline,
          background: A2.card, color: A2.ink, fontFamily: 'inherit', fontSize: 15, fontWeight: 600,
        }}>Edit</button>
        <button style={{
          flex: 1.8, minHeight: 52, borderRadius: 18, border: 'none',
          background: A2.terracotta, color: '#fff', fontFamily: 'inherit', fontSize: 15, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          boxShadow: '0 6px 16px rgba(213,94,58,0.35)',
        }}>Remind all 3 <Icons.arrow size={16} c="#fff" /></button>
      </div>
    </Screen>
  );
}

function MetaTile({ label, value, emoji }) {
  return (
    <div style={{
      flex: 1, background: A2.card, borderRadius: 18, padding: '12px 14px',
      border: '1px solid ' + A2.hairline, minHeight: 60,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{ fontSize: 22 }}>{emoji}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: A2.inkMute, letterSpacing: 0.5, textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontSize: 13.5, fontWeight: 600, color: A2.ink, marginTop: 1 }}>{value}</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// ADD EXPENSE
// ───────────────────────────────────────────────────────────
function Add() {
  return (
    <Screen bg={A2.cream}>
      <div style={{ padding: '6px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', minHeight: 44 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: A2.inkDim }}>Cancel</div>
        <div style={{ fontSize: 16, fontWeight: 700, color: A2.ink }}>New bill</div>
        <div style={{ fontSize: 15, fontWeight: 700, color: A2.inkMute }}>Save</div>
      </div>

      {/* amount input — proper money input pattern */}
      <div style={{ padding: '22px 24px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: A2.inkDim, letterSpacing: 1, textTransform: 'uppercase' }}>How much?</div>
        <div style={{ ...cabinetTitle, ...tnum, fontSize: 64, marginTop: 6, lineHeight: 1, letterSpacing: -2 }}>
          <span style={{ color: A2.inkMute }}>£</span>67.40
          <span style={{
            display: 'inline-block', width: 3, height: 48, background: A2.terracotta,
            marginLeft: 4, verticalAlign: 'middle', borderRadius: 2,
          }} />
        </div>
        {/* title row */}
        <div style={{
          margin: '14px auto 0', display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 14px', borderRadius: 14, background: A2.card,
          border: '1px solid ' + A2.hairline, maxWidth: 320,
        }}>
          <span style={{ fontSize: 18 }}>🛒</span>
          <input
            readOnly
            defaultValue="Tesco shop"
            style={{
              flex: 1, background: 'transparent', border: 'none',
              fontFamily: 'inherit', fontSize: 15, fontWeight: 600, color: A2.ink,
              padding: 0, outline: 'none', minWidth: 0,
            }}
          />
        </div>
      </div>

      {/* category strip */}
      <div style={{ padding: '18px 0 0' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: A2.inkDim, letterSpacing: 0.6, textTransform: 'uppercase', padding: '0 24px 8px' }}>Category</div>
        <div style={{ display: 'flex', gap: 8, padding: '0 24px', overflow: 'hidden' }}>
          {[
            ['Groceries', '🛒', true],
            ['Bills', '💡', false],
            ['Rent', '🏠', false],
            ['Going out', '🍻', false],
            ['Other', '✨', false],
          ].map(([n, e, on]) => (
            <div key={n} style={{
              minHeight: 38, padding: '0 12px', borderRadius: 14,
              background: on ? A2.terracotta : A2.card,
              color: on ? '#fff' : A2.ink,
              border: on ? 'none' : '1px solid ' + A2.hairline,
              fontSize: 13, fontWeight: 600,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span>{e}</span>{n}
            </div>
          ))}
        </div>
      </div>

      {/* paid by + split type — combined card */}
      <div style={{ margin: '18px 20px 0', background: A2.card, borderRadius: 22, border: '1px solid ' + A2.hairline, overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', minHeight: 60, borderBottom: '1px solid ' + A2.hairline2 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: A2.inkDim, letterSpacing: 0.5, textTransform: 'uppercase', width: 64 }}>Paid by</div>
          <Avatar who="sam" size={30} />
          <div style={{ flex: 1, fontSize: 15, fontWeight: 600, color: A2.ink }}>You</div>
          <Icons.arrow size={16} c={A2.inkMute} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', minHeight: 60 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: A2.inkDim, letterSpacing: 0.5, textTransform: 'uppercase', width: 64 }}>Split</div>
          <div style={{ display: 'flex', padding: 3, background: A2.cream, borderRadius: 12, flex: 1 }}>
            {['Equally','Exact','Percent'].map((l, i) => (
              <div key={l} style={{
                flex: 1, textAlign: 'center', padding: '6px 0', borderRadius: 9,
                background: i === 0 ? A2.terracotta : 'transparent',
                color: i === 0 ? '#fff' : A2.inkDim,
                fontSize: 13, fontWeight: 700,
              }}>{l}</div>
            ))}
          </div>
        </div>
      </div>

      {/* split rows */}
      <div style={{ margin: '12px 20px 0', background: A2.card, borderRadius: 22, border: '1px solid ' + A2.hairline, overflow: 'hidden' }}>
        {['sam','maia','jordan','ellie'].map((w, i, arr) => (
          <div key={w} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 14px', minHeight: 52,
            borderBottom: i === arr.length - 1 ? 'none' : '1px solid ' + A2.hairline2,
          }}>
            <div style={{
              width: 24, height: 24, borderRadius: 7, background: A2.terracotta,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><Icons.check size={14} c="#fff" /></div>
            <Avatar who={w} size={30} />
            <div style={{ flex: 1, fontSize: 14.5, fontWeight: 600, color: A2.ink }}>
              {w === FC.you ? 'You' : FC.mates[w].name}
            </div>
            <div style={{ ...tnum, fontSize: 14, color: A2.inkDim }}>£16.85</div>
          </div>
        ))}
      </div>

      {/* sticky CTA with running total */}
      <div style={{ position: 'absolute', left: 20, right: 20, bottom: 30 }}>
        <button style={{
          width: '100%', minHeight: 56, borderRadius: 18, border: 'none',
          background: A2.terracotta, color: '#fff', fontFamily: 'inherit',
          fontSize: 16, fontWeight: 700, letterSpacing: 0.1,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 20px',
          boxShadow: '0 8px 22px rgba(213,94,58,0.4)',
        }}>
          <span>Add bill</span>
          <span style={{ ...tnum, opacity: 0.85 }}>£16.85 each · £67.40 total</span>
        </button>
      </div>
    </Screen>
  );
}

window.DirA2 = { Home, Split, Detail, Add };