// Wishlist redesign — both directions share Clay & Sage palette.
// A = Hearth (editorial serif). B = Pebble (rounded soft sans).

const PAL = {
  // Clay & Sage palette
  bg:      '#F4EFE8',  // warm cream
  bg2:     '#EBE3D7',
  paper:   '#FFFBF4',
  ink:     '#2D2A26',
  inkSoft: '#5C544A',
  muted:   '#A8A095',
  line:    '#E1D8C9',
  clay:    '#C97A6E',  // primary terracotta
  clayDk:  '#A85A4F',
  sage:    '#A8B591',
  sageDk:  '#7A8B6B',
  butter:  '#F2D399',
  blush:   '#F0CFC4',
  mint:    '#D6E2D0',
  forest:  '#3F4A38',
  charcoal:'#1F1C18',
};

// Common iconography — minimal stroke icons
const Icon = ({d, s=20, c=PAL.ink, sw=1.6, fill='none'}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={fill} stroke={fill==='none'?c:'none'} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {typeof d === 'string' ? <path d={d}/> : d}
  </svg>
);

const ICONS = {
  scan:  <><rect x="3" y="3" width="6" height="6" rx="1.5"/><rect x="15" y="3" width="6" height="6" rx="1.5"/><rect x="3" y="15" width="6" height="6" rx="1.5"/><path d="M15 15h6M18 15v6M15 21h3"/></>,
  plus:  <path d="M12 5v14M5 12h14"/>,
  bell:  <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
  heart: <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>,
  search:<><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
  home:  <><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9v11h14V9"/></>,
  list:  <><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></>,
  user:  <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
  back:  <path d="m15 18-6-6 6-6"/>,
  more:  <><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></>,
  share: <><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m16 6-4-4-4 4"/><path d="M12 2v13"/></>,
  check: <path d="m5 12 5 5 9-12"/>,
  cart:  <><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M3 4h2l2.7 11.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 7H6"/></>,
  gift:  <><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M5 12v9h14v-9M12 8v13"/><path d="M12 8a3 3 0 1 1 0-6 3 3 0 1 1 0 6 3 3 0 1 1 0-6"/></>,
  cam:   <><path d="M3 7h4l2-3h6l2 3h4v12H3z"/><circle cx="12" cy="13" r="4"/></>,
  flash: <path d="m13 2-9 12h7l-1 8 9-12h-7z"/>,
  link:  <><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></>,
  spark: <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>,
  cal:   <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></>,
  tag:   <><path d="M20.6 13.4 12 22l-9-9V3h10z"/><circle cx="7.5" cy="7.5" r="1.5"/></>,
  edit:  <><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></>,
};

// =========================================================================
// DIRECTION A — HEARTH (editorial serif)
// =========================================================================

const A = {
  font: '"Fraunces", "Cormorant Garamond", Georgia, serif',
  sans: '"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
  rad: 18,
  shadow: '0 2px 14px rgba(45,42,38,0.06), 0 1px 3px rgba(45,42,38,0.04)',
};

const aBase = {
  fontFamily: A.sans,
  background: PAL.bg,
  color: PAL.ink,
  width: '100%',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  position: 'relative',
};

function ATopBar({title, leading, trailing, sub}) {
  return (
    <div style={{padding: '14px 20px 8px', display:'flex', alignItems:'center', gap: 12}}>
      {leading || <div style={{width: 36}}/>}
      <div style={{flex: 1, textAlign: 'center'}}>
        {sub && <div style={{fontSize: 11, letterSpacing: 1.6, textTransform:'uppercase', color: PAL.muted, fontFamily: A.sans, fontWeight: 600}}>{sub}</div>}
        <div style={{fontFamily: A.font, fontSize: 19, fontWeight: 500, fontStyle: 'italic', color: PAL.ink}}>{title}</div>
      </div>
      {trailing || <div style={{width: 36}}/>}
    </div>
  );
}

function ATabBar({active='home'}) {
  const items = [
    {id:'home', icon: ICONS.home, label:'Lists'},
    {id:'discover', icon: ICONS.search, label:'Discover'},
    {id:'scan', icon: ICONS.scan, label:'Scan', big: true},
    {id:'activity', icon: ICONS.bell, label:'Activity'},
    {id:'me', icon: ICONS.user, label:'Me'},
  ];
  return (
    <div style={{
      borderTop: `1px solid ${PAL.line}`,
      background: PAL.paper,
      padding: '8px 14px 22px',
      display: 'flex',
      justifyContent: 'space-around',
      alignItems: 'flex-end',
    }}>
      {items.map(it => {
        if (it.big) {
          return (
            <div key={it.id} style={{display:'flex', flexDirection:'column', alignItems:'center', gap: 2, marginTop: -22}}>
              <div style={{
                width: 54, height: 54, borderRadius: 27, background: PAL.clay,
                display:'flex', alignItems:'center', justifyContent:'center',
                boxShadow: '0 8px 18px rgba(201,122,110,0.4), inset 0 -2px 4px rgba(0,0,0,0.1)',
                border: `3px solid ${PAL.paper}`,
              }}>
                <Icon d={it.icon} c="#fff" s={24} sw={2}/>
              </div>
              <div style={{fontSize: 10, color: PAL.muted, fontFamily: A.sans, fontWeight: 600, letterSpacing: 0.3}}>Scan</div>
            </div>
          );
        }
        const isActive = active === it.id;
        return (
          <div key={it.id} style={{display:'flex', flexDirection:'column', alignItems:'center', gap: 4, padding: '4px 8px'}}>
            <Icon d={it.icon} c={isActive ? PAL.clay : PAL.muted} sw={isActive ? 2 : 1.6}/>
            <div style={{fontSize: 10, color: isActive ? PAL.clay : PAL.muted, fontFamily: A.sans, fontWeight: 600, letterSpacing: 0.3}}>{it.label}</div>
          </div>
        );
      })}
    </div>
  );
}

// --- A1. Home / My Lists ---
function A_Home() {
  const lists = [
    {name: "Mira's First Birthday", type: 'Birthday', count: 14, claimed: 5, date: 'May 12', tone: PAL.blush},
    {name: 'Mother\u2019s Day', type: 'Holiday', count: 6, claimed: 0, date: 'May 10', tone: PAL.butter},
    {name: 'Our New Place', type: 'Housewarming', count: 23, claimed: 11, date: '—', tone: PAL.mint},
    {name: 'Things I Love', type: 'Anytime', count: 41, claimed: 0, date: '—', tone: PAL.bg2},
  ];
  return (
    <div style={aBase}>
      {/* Greeting */}
      <div style={{padding: '20px 22px 8px'}}>
        <div style={{fontSize: 12, letterSpacing: 2, textTransform:'uppercase', color: PAL.muted, fontWeight: 600}}>Tuesday · April 28</div>
        <div style={{fontFamily: A.font, fontSize: 32, lineHeight: 1.1, fontWeight: 400, color: PAL.ink, marginTop: 6}}>
          Hi <span style={{fontStyle:'italic', color: PAL.clay}}>Sarah</span>,<br/>
          <span style={{color: PAL.inkSoft}}>here\u2019s your stash.</span>
        </div>
      </div>

      {/* Countdown card */}
      <div style={{margin: '14px 18px 10px', background: PAL.charcoal, borderRadius: 22, padding: '16px 18px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', right: -20, top: -20, width: 110, height: 110, borderRadius: '50%', background: PAL.clay, opacity: 0.5}}/>
        <div style={{position: 'relative'}}>
          <div style={{fontSize: 11, letterSpacing: 1.6, textTransform:'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 600}}>Coming up</div>
          <div style={{fontFamily: A.font, fontSize: 22, color: '#fff', fontStyle:'italic', marginTop: 4}}>Mira\u2019s First Birthday</div>
          <div style={{display:'flex', alignItems:'baseline', gap: 8, marginTop: 6}}>
            <div style={{fontFamily: A.font, fontSize: 44, color: PAL.butter, fontWeight: 500, lineHeight: 1}}>14</div>
            <div style={{color: 'rgba(255,255,255,0.7)', fontSize: 13}}>days · 5 of 14 claimed</div>
          </div>
        </div>
      </div>

      {/* Filter chips */}
      <div style={{padding: '6px 18px', display:'flex', gap: 8, overflow:'hidden'}}>
        {['All', 'Birthday', 'Holiday', 'Wedding', 'Baby'].map((t,i) => (
          <div key={t} style={{
            padding: '7px 14px', borderRadius: 20,
            background: i===0 ? PAL.ink : 'transparent',
            color: i===0 ? PAL.paper : PAL.inkSoft,
            border: i===0 ? 'none' : `1px solid ${PAL.line}`,
            fontSize: 13, fontWeight: 500,
            fontFamily: A.sans,
          }}>{t}</div>
        ))}
      </div>

      {/* Lists */}
      <div style={{flex: 1, padding: '14px 18px 16px', overflow: 'hidden', display:'flex', flexDirection:'column', gap: 12}}>
        {lists.map((l, i) => (
          <div key={l.name} style={{
            background: PAL.paper, borderRadius: A.rad, padding: '16px 18px',
            boxShadow: A.shadow, position:'relative', overflow:'hidden',
          }}>
            <div style={{position:'absolute', right: -10, top: -10, width: 70, height: 70, borderRadius: 35, background: l.tone, opacity: 0.7}}/>
            <div style={{position: 'relative'}}>
              <div style={{fontSize: 11, letterSpacing: 1.4, textTransform:'uppercase', color: PAL.muted, fontWeight: 600}}>{l.type}{l.date !== '—' && ` · ${l.date}`}</div>
              <div style={{fontFamily: A.font, fontSize: 20, color: PAL.ink, marginTop: 2, fontWeight: 500}}>{l.name}</div>
              <div style={{display:'flex', alignItems:'center', gap: 8, marginTop: 8}}>
                <div style={{flex: 1, height: 4, background: PAL.bg2, borderRadius: 4, overflow:'hidden'}}>
                  <div style={{width: `${(l.claimed/Math.max(l.count,1))*100}%`, height: '100%', background: PAL.clay}}/>
                </div>
                <div style={{fontSize: 12, color: PAL.inkSoft, fontWeight: 500}}>{l.claimed}/{l.count}</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <ATabBar active="home"/>
    </div>
  );
}

// --- A2. List Detail ---
function A_ListDetail() {
  const items = [
    {name: 'Wooden Pikler triangle', brand: 'Lily & River', price: '$148', tone: PAL.butter, claimed: false},
    {name: 'Organic muslin bundle', brand: 'aden + anais', price: '$42', tone: PAL.blush, claimed: true},
    {name: 'Stacking rainbow toy', brand: 'Grimm\u2019s', price: '$58', tone: PAL.mint, claimed: false},
    {name: 'Hooded baby towel', brand: 'Coyuchi', price: '$68', tone: PAL.bg2, claimed: false},
  ];
  return (
    <div style={aBase}>
      <ATopBar
        sub="May 12, 2026"
        title="Mira\u2019s First Birthday"
        leading={<div style={{width: 36, height: 36, borderRadius: 18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: A.shadow}}><Icon d={ICONS.back}/></div>}
        trailing={<div style={{width: 36, height: 36, borderRadius: 18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: A.shadow}}><Icon d={ICONS.more}/></div>}
      />

      {/* Hero */}
      <div style={{margin: '4px 18px 14px', background: `linear-gradient(135deg, ${PAL.blush}, ${PAL.butter})`, borderRadius: 22, padding: '20px 20px 18px'}}>
        <div style={{display:'flex', alignItems:'center', gap: 8}}>
          <div style={{padding: '4px 10px', borderRadius: 12, background: 'rgba(255,255,255,0.6)', fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform:'uppercase', color: PAL.clayDk}}>14 days away</div>
        </div>
        <div style={{fontFamily: A.font, fontSize: 26, color: PAL.ink, marginTop: 10, fontStyle:'italic', fontWeight: 500, lineHeight: 1.15}}>
          14 things, 5 already loved
        </div>
        <div style={{display:'flex', gap: 8, marginTop: 14}}>
          <div style={{flex: 1, padding: '11px 14px', background: PAL.ink, color: PAL.paper, borderRadius: 14, textAlign:'center', fontWeight: 600, fontSize: 13}}>
            Share list
          </div>
          <div style={{padding: '11px 14px', background: PAL.paper, borderRadius: 14, display:'flex', alignItems:'center', gap: 6, fontWeight: 600, fontSize: 13}}>
            <Icon d={ICONS.edit} s={14}/> Edit
          </div>
        </div>
      </div>

      {/* Items */}
      <div style={{flex: 1, padding: '0 18px', overflow:'hidden'}}>
        {items.map((it, i) => (
          <div key={i} style={{
            display:'flex', gap: 14, padding: '12px 0',
            borderBottom: i < items.length - 1 ? `1px solid ${PAL.line}` : 'none',
          }}>
            <div style={{width: 64, height: 64, borderRadius: 14, background: it.tone, position:'relative', flexShrink: 0, display:'flex', alignItems:'center', justifyContent:'center'}}>
              <div style={{width: 36, height: 36, borderRadius: 6, background: 'rgba(255,255,255,0.5)'}}/>
              {it.claimed && <div style={{position:'absolute', top: -4, right: -4, width: 22, height: 22, borderRadius: 11, background: PAL.sageDk, display:'flex', alignItems:'center', justifyContent:'center', border: `2px solid ${PAL.bg}`}}><Icon d={ICONS.check} c="#fff" s={12} sw={2.5}/></div>}
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 11, letterSpacing: 1.2, textTransform:'uppercase', color: PAL.muted, fontWeight: 600}}>{it.brand}</div>
              <div style={{fontFamily: A.font, fontSize: 16, color: PAL.ink, fontWeight: 500, marginTop: 1, lineHeight: 1.2}}>{it.name}</div>
              <div style={{display:'flex', alignItems:'center', gap: 8, marginTop: 4}}>
                <div style={{fontSize: 14, color: PAL.ink, fontWeight: 600}}>{it.price}</div>
                {it.claimed && <div style={{fontSize: 11, color: PAL.sageDk, fontWeight: 600, textTransform:'uppercase', letterSpacing: 0.6}}>· Claimed</div>}
              </div>
            </div>
          </div>
        ))}
      </div>

      <ATabBar active="home"/>
    </div>
  );
}

// --- A3. Item Detail ---
function A_ItemDetail() {
  return (
    <div style={aBase}>
      <ATopBar title="" leading={<div style={{width:36, height:36, borderRadius:18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: A.shadow}}><Icon d={ICONS.back}/></div>} trailing={<div style={{width:36, height:36, borderRadius:18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: A.shadow}}><Icon d={ICONS.share} s={16}/></div>}/>
      {/* Hero image */}
      <div style={{margin: '0 18px 14px', height: 240, borderRadius: 24, background: PAL.butter, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
        <div style={{width: 130, height: 130, borderRadius: 16, background: 'rgba(255,255,255,0.55)'}}/>
        <div style={{position:'absolute', bottom: 12, right: 12, padding: '6px 12px', background: PAL.paper, borderRadius: 14, fontSize: 11, fontWeight: 700, letterSpacing: 1.2, color: PAL.inkSoft, textTransform:'uppercase'}}>Available</div>
      </div>

      <div style={{padding: '0 22px', flex: 1}}>
        <div style={{fontSize: 11, letterSpacing: 1.4, textTransform:'uppercase', color: PAL.muted, fontWeight: 600}}>Lily & River</div>
        <div style={{fontFamily: A.font, fontSize: 26, color: PAL.ink, fontWeight: 500, lineHeight: 1.2, marginTop: 4}}>
          Wooden Pikler<br/><span style={{fontStyle:'italic', color: PAL.clay}}>Climbing Triangle</span>
        </div>
        <div style={{display:'flex', alignItems:'baseline', gap: 8, marginTop: 10}}>
          <div style={{fontFamily: A.font, fontSize: 28, color: PAL.ink, fontWeight: 500}}>$148</div>
          <div style={{fontSize: 12, color: PAL.muted, textDecoration:'line-through'}}>$179 elsewhere</div>
        </div>

        {/* Best price strip */}
        <div style={{marginTop: 14, padding: '12px 14px', borderRadius: 14, background: PAL.mint, display:'flex', alignItems:'center', gap: 10}}>
          <div style={{width: 28, height: 28, borderRadius: 14, background: PAL.sageDk, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.tag} c="#fff" s={14}/></div>
          <div style={{flex: 1}}>
            <div style={{fontSize: 12, fontWeight: 600, color: PAL.ink}}>Best price at Lily & River</div>
            <div style={{fontSize: 11, color: PAL.inkSoft}}>$31 cheaper than Amazon</div>
          </div>
        </div>

        <div style={{marginTop: 16, fontSize: 14, color: PAL.inkSoft, lineHeight: 1.5}}>
          A heirloom-grade climbing triangle. On <b style={{color: PAL.ink}}>Mira\u2019s First Birthday</b>.
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{padding: '14px 18px 22px', background: PAL.paper, borderTop: `1px solid ${PAL.line}`, display:'flex', gap: 10}}>
        <div style={{flex: 1, padding: '14px', borderRadius: 16, background: PAL.clay, textAlign:'center', color: '#fff', fontWeight: 600, fontSize: 14, boxShadow: '0 4px 14px rgba(201,122,110,0.4)'}}>
          Buy it · $148
        </div>
        <div style={{padding: '14px 16px', borderRadius: 16, background: PAL.bg2, fontWeight: 600, fontSize: 14, display:'flex', alignItems:'center', gap: 6}}>
          <Icon d={ICONS.gift} s={16}/> Group
        </div>
      </div>
    </div>
  );
}

// --- A4. Scanner (the magic moment) ---
function A_Scanner() {
  return (
    <div style={{...aBase, background: PAL.charcoal, color: '#fff'}}>
      {/* Mock viewfinder */}
      <div style={{position:'absolute', inset: 0, background: `radial-gradient(circle at 50% 38%, ${PAL.inkSoft} 0%, ${PAL.charcoal} 70%)`}}/>

      {/* Top */}
      <div style={{padding: '14px 18px', display:'flex', alignItems:'center', justifyContent:'space-between', position:'relative', zIndex: 2}}>
        <div style={{width: 36, height: 36, borderRadius: 18, background: 'rgba(255,255,255,0.16)', backdropFilter:'blur(20px)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.back} c="#fff"/></div>
        <div style={{padding: '6px 14px', borderRadius: 16, background: 'rgba(255,255,255,0.16)', backdropFilter:'blur(20px)', fontSize: 11, letterSpacing: 1.4, textTransform:'uppercase', fontWeight: 600}}>Point at a barcode</div>
        <div style={{width: 36, height: 36, borderRadius: 18, background: 'rgba(255,255,255,0.16)', backdropFilter:'blur(20px)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.flash} c="#fff" s={16}/></div>
      </div>

      {/* Reticle */}
      <div style={{flex: 1, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', zIndex: 2}}>
        <div style={{width: 240, height: 240, position:'relative'}}>
          {/* corner brackets */}
          {[{t:0,l:0,br:'tl'}, {t:0,r:0,br:'tr'}, {b:0,l:0,br:'bl'}, {b:0,r:0,br:'br'}].map((c,i)=>(
            <div key={i} style={{
              position:'absolute', width: 28, height: 28,
              top: c.t, left: c.l, right: c.r, bottom: c.b,
              borderTop: c.br[0]==='t' ? `3px solid ${PAL.butter}` : 'none',
              borderBottom: c.br[0]==='b' ? `3px solid ${PAL.butter}` : 'none',
              borderLeft: c.br[1]==='l' ? `3px solid ${PAL.butter}` : 'none',
              borderRight: c.br[1]==='r' ? `3px solid ${PAL.butter}` : 'none',
              borderTopLeftRadius: c.br==='tl' ? 8 : 0,
              borderTopRightRadius: c.br==='tr' ? 8 : 0,
              borderBottomLeftRadius: c.br==='bl' ? 8 : 0,
              borderBottomRightRadius: c.br==='br' ? 8 : 0,
            }}/>
          ))}
          {/* Animated scan line */}
          <div style={{position:'absolute', left: 8, right: 8, top: '50%', height: 2, background: `linear-gradient(90deg, transparent, ${PAL.butter}, transparent)`, boxShadow: `0 0 12px ${PAL.butter}`}}/>
          {/* Found chip floating up */}
          <div style={{position:'absolute', top: -56, left: 50, right: 50, padding: '10px 12px', borderRadius: 16, background: 'rgba(255,255,255,0.96)', display:'flex', alignItems:'center', gap: 10, boxShadow: '0 12px 30px rgba(0,0,0,0.4)'}}>
            <div style={{width: 36, height: 36, borderRadius: 8, background: PAL.butter}}/>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 11, color: PAL.muted, fontWeight: 600, letterSpacing: 1, textTransform:'uppercase'}}>Found</div>
              <div style={{fontFamily: A.font, fontSize: 14, color: PAL.ink, fontWeight: 500, lineHeight: 1.1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>Pikler triangle</div>
            </div>
            <div style={{width: 22, height: 22, borderRadius: 11, background: PAL.sageDk, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.check} c="#fff" s={12} sw={2.5}/></div>
          </div>
        </div>
      </div>

      {/* Hint */}
      <div style={{padding: '0 22px 16px', textAlign:'center', position:'relative', zIndex: 2}}>
        <div style={{fontFamily: A.font, fontSize: 22, fontStyle: 'italic', fontWeight: 500, lineHeight: 1.2}}>
          Scan it. Stash it.<br/>One less thing to remember.
        </div>
      </div>

      {/* Bottom action sheet — list picker */}
      <div style={{background: PAL.paper, borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: '14px 18px 22px', position:'relative', zIndex: 2}}>
        <div style={{width: 36, height: 4, borderRadius: 2, background: PAL.line, margin: '0 auto 12px'}}/>
        <div style={{fontSize: 11, letterSpacing: 1.4, textTransform:'uppercase', color: PAL.muted, fontWeight: 600}}>Add to</div>
        <div style={{display:'flex', gap: 8, marginTop: 8, flexWrap:'wrap'}}>
          <div style={{padding: '8px 14px', borderRadius: 14, background: PAL.clay, color:'#fff', fontSize: 13, fontWeight: 600, display:'flex', alignItems:'center', gap: 6}}><Icon d={ICONS.check} c="#fff" s={12} sw={2.5}/> Mira\u2019s Birthday</div>
          <div style={{padding: '8px 14px', borderRadius: 14, background: PAL.bg2, color: PAL.ink, fontSize: 13, fontWeight: 500}}>Things I Love</div>
          <div style={{padding: '8px 14px', borderRadius: 14, background: PAL.bg2, color: PAL.ink, fontSize: 13, fontWeight: 500}}>+ New list</div>
        </div>
        <div style={{marginTop: 14, padding: '14px', borderRadius: 16, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 600, fontSize: 14}}>
          Stash it
        </div>
      </div>
    </div>
  );
}

// --- A5. Activity feed ---
function A_Activity() {
  const items = [
    {kind: 'claimed', text: 'Someone claimed an item on Mira\u2019s First Birthday', meta: 'Surprise stays a surprise', time: 'just now', tone: PAL.blush},
    {kind: 'added', text: 'You added Wooden Pikler triangle', meta: 'Mira\u2019s First Birthday', time: '12m ago', tone: PAL.butter},
    {kind: 'shared', text: 'You shared Mother\u2019s Day', meta: '4 friends saw it', time: '2h ago', tone: PAL.mint},
    {kind: 'added', text: 'Mom added Linen apron', meta: 'Mother\u2019s Day', time: '3h ago', tone: PAL.bg2},
  ];
  return (
    <div style={aBase}>
      <ATopBar title="Activity" sub="This week"/>
      <div style={{padding: '8px 18px 16px', flex: 1, overflow:'hidden'}}>
        {items.map((it, i) => (
          <div key={i} style={{display:'flex', gap: 14, padding: '14px 0', borderBottom: i < items.length - 1 ? `1px solid ${PAL.line}` : 'none', alignItems:'flex-start'}}>
            <div style={{width: 40, height: 40, borderRadius: 20, background: it.tone, display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0}}>
              {it.kind === 'claimed' && <Icon d={ICONS.heart} fill={PAL.clay} c={PAL.clay} s={18} sw={0}/>}
              {it.kind === 'added' && <Icon d={ICONS.plus} c={PAL.ink} sw={2}/>}
              {it.kind === 'shared' && <Icon d={ICONS.share} c={PAL.sageDk} s={16}/>}
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontFamily: A.font, fontSize: 16, color: PAL.ink, fontWeight: 500, lineHeight: 1.25}}>{it.text}</div>
              <div style={{fontSize: 12, color: PAL.muted, marginTop: 3}}>{it.meta} · {it.time}</div>
            </div>
            {it.kind === 'claimed' && (
              <div style={{padding: '3px 8px', borderRadius: 8, background: PAL.clay, color:'#fff', fontSize: 10, fontWeight: 700, letterSpacing: 0.8, textTransform:'uppercase'}}>New</div>
            )}
          </div>
        ))}
      </div>
      <ATabBar active="activity"/>
    </div>
  );
}

// --- A6. Discover ---
function A_Discover() {
  return (
    <div style={aBase}>
      <ATopBar title="Discover"/>
      <div style={{padding: '0 18px 12px'}}>
        <div style={{padding: '12px 14px', background: PAL.paper, borderRadius: 14, display:'flex', alignItems:'center', gap: 10, boxShadow: A.shadow}}>
          <Icon d={ICONS.search} c={PAL.muted}/>
          <div style={{color: PAL.muted, fontSize: 14, fontFamily: A.sans}}>Search products, brands\u2026</div>
        </div>
      </div>

      {/* Editorial card */}
      <div style={{margin: '0 18px 14px', borderRadius: 22, overflow:'hidden', background: PAL.forest, color: '#fff', padding: '20px 18px 18px', position:'relative'}}>
        <div style={{position:'absolute', right: -12, bottom: -12, width: 130, height: 130, borderRadius: '50%', background: PAL.sage, opacity: 0.4}}/>
        <div style={{position:'relative'}}>
          <div style={{fontSize: 11, letterSpacing: 1.6, textTransform:'uppercase', color: 'rgba(255,255,255,0.7)', fontWeight: 600}}>Edit · Mother\u2019s Day</div>
          <div style={{fontFamily: A.font, fontSize: 26, fontStyle:'italic', marginTop: 6, lineHeight: 1.15}}>
            Slow morning<br/>essentials.
          </div>
          <div style={{fontSize: 13, color: 'rgba(255,255,255,0.75)', marginTop: 8, maxWidth: 220}}>12 things she\u2019ll actually use, hand-picked.</div>
        </div>
      </div>

      {/* Pinterest-y grid */}
      <div style={{flex: 1, padding: '0 18px', overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10}}>
          {[
            {h: 130, tone: PAL.butter, title:'Linen apron', brand: 'Hedley & Bennett', price:'$48'},
            {h: 160, tone: PAL.blush, title:'Pottery mug', brand: 'East Fork', price:'$38'},
            {h: 110, tone: PAL.mint, title:'Cast iron pan', brand: 'Smithey', price:'$210'},
            {h: 140, tone: PAL.bg2, title:'Wool throw', brand: 'Coyuchi', price:'$168'},
          ].map((p, i) => (
            <div key={i} style={{borderRadius: 16, background: PAL.paper, overflow:'hidden', boxShadow: A.shadow}}>
              <div style={{height: p.h, background: p.tone, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <div style={{width: '50%', height: '60%', borderRadius: 8, background: 'rgba(255,255,255,0.55)'}}/>
              </div>
              <div style={{padding: '8px 10px 10px'}}>
                <div style={{fontSize: 10, letterSpacing: 1, color: PAL.muted, fontWeight: 600, textTransform:'uppercase'}}>{p.brand}</div>
                <div style={{fontFamily: A.font, fontSize: 14, color: PAL.ink, fontWeight: 500, lineHeight: 1.15, marginTop: 2}}>{p.title}</div>
                <div style={{fontSize: 12, color: PAL.ink, fontWeight: 600, marginTop: 3}}>{p.price}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <ATabBar active="discover"/>
    </div>
  );
}

// --- A7. Shared list (buyer view, no account) ---
function A_Shared() {
  return (
    <div style={aBase}>
      {/* Hero header */}
      <div style={{padding: '20px 22px 18px', background: `linear-gradient(160deg, ${PAL.blush}, ${PAL.butter})`, borderBottomLeftRadius: 26, borderBottomRightRadius: 26}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{display:'flex', alignItems:'center', gap: 8}}>
            <div style={{width: 32, height: 32, borderRadius: 16, background: PAL.clay, color: '#fff', fontFamily: A.font, fontSize: 14, fontStyle:'italic', display:'flex', alignItems:'center', justifyContent:'center'}}>S</div>
            <div style={{fontSize: 12, color: PAL.inkSoft}}>From <b style={{color: PAL.ink}}>Sarah</b></div>
          </div>
          <div style={{padding: '4px 10px', borderRadius: 12, background: 'rgba(255,255,255,0.55)', fontSize: 10, fontWeight: 700, color: PAL.clayDk, letterSpacing: 1.2, textTransform:'uppercase'}}>Private</div>
        </div>
        <div style={{fontFamily: A.font, fontSize: 30, color: PAL.ink, marginTop: 18, fontStyle:'italic', lineHeight: 1.1, fontWeight: 500}}>
          Mira is turning<br/>one!
        </div>
        <div style={{fontSize: 13, color: PAL.inkSoft, marginTop: 8}}>14 days · 9 items left to claim</div>
      </div>

      {/* Items */}
      <div style={{flex: 1, padding: '12px 18px', overflow:'hidden'}}>
        {[
          {name: 'Wooden Pikler triangle', brand: 'Lily & River', price: '$148', tone: PAL.butter, claimed: false},
          {name: 'Stacking rainbow', brand: 'Grimm\u2019s', price: '$58', tone: PAL.mint, claimed: false},
          {name: 'Hooded baby towel', brand: 'Coyuchi', price: '$68', tone: PAL.bg2, claimed: true},
        ].map((it, i) => (
          <div key={i} style={{display:'flex', gap: 12, padding: '12px', background: PAL.paper, borderRadius: 16, marginBottom: 10, boxShadow: A.shadow, opacity: it.claimed ? 0.55 : 1}}>
            <div style={{width: 56, height: 56, borderRadius: 12, background: it.tone, flexShrink: 0, display:'flex', alignItems:'center', justifyContent:'center'}}>
              <div style={{width: 32, height: 32, borderRadius: 6, background: 'rgba(255,255,255,0.55)'}}/>
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 11, letterSpacing: 1.2, textTransform:'uppercase', color: PAL.muted, fontWeight: 600}}>{it.brand}</div>
              <div style={{fontFamily: A.font, fontSize: 15, color: PAL.ink, fontWeight: 500}}>{it.name}</div>
              <div style={{fontSize: 13, color: PAL.ink, fontWeight: 600, marginTop: 2}}>{it.price}</div>
            </div>
            <div style={{display:'flex', alignItems:'center'}}>
              {it.claimed ? (
                <div style={{padding: '6px 10px', borderRadius: 10, background: PAL.bg2, fontSize: 11, fontWeight: 700, color: PAL.muted, textTransform:'uppercase', letterSpacing: 0.8}}>Taken</div>
              ) : (
                <div style={{padding: '8px 12px', borderRadius: 10, background: PAL.ink, color:'#fff', fontSize: 12, fontWeight: 600}}>I\u2019ll get it</div>
              )}
            </div>
          </div>
        ))}
      </div>
      <div style={{padding: '10px 18px 22px', textAlign:'center', fontSize: 11, color: PAL.muted, fontFamily: A.sans}}>
        Sarah won\u2019t see who claims what \u00b7 surprise stays a surprise
      </div>
    </div>
  );
}

// --- A8. Profile ---
function A_Profile() {
  return (
    <div style={aBase}>
      <ATopBar title="Me"/>
      <div style={{padding: '0 22px 18px', textAlign:'center'}}>
        <div style={{width: 84, height: 84, borderRadius: 42, background: `linear-gradient(135deg, ${PAL.blush}, ${PAL.clay})`, margin: '8px auto 12px', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontFamily: A.font, fontSize: 32, fontStyle:'italic', fontWeight: 500}}>S</div>
        <div style={{fontFamily: A.font, fontSize: 22, color: PAL.ink, fontWeight: 500}}>Sarah Brennan</div>
        <div style={{fontSize: 13, color: PAL.muted}}>sarah@email.com</div>
      </div>
      <div style={{display:'flex', gap: 8, padding: '0 18px 14px'}}>
        {[{n: 4, l:'Lists'},{n: 78, l:'Items'},{n: 12, l:'Claimed'}].map(s=>(
          <div key={s.l} style={{flex: 1, padding: '12px', background: PAL.paper, borderRadius: 14, textAlign:'center', boxShadow: A.shadow}}>
            <div style={{fontFamily: A.font, fontSize: 22, color: PAL.ink, fontWeight: 500}}>{s.n}</div>
            <div style={{fontSize: 11, color: PAL.muted, fontWeight: 600, letterSpacing: 1, textTransform:'uppercase', marginTop: 2}}>{s.l}</div>
          </div>
        ))}
      </div>
      <div style={{flex: 1, padding: '0 18px'}}>
        <div style={{background: PAL.paper, borderRadius: 16, boxShadow: A.shadow}}>
          {[{i: ICONS.bell, t:'Notifications'}, {i: ICONS.cal, t:'Occasion calendar'}, {i: ICONS.share, t:'Sharing & privacy'}, {i: ICONS.tag, t:'Affiliate links'}].map((r, i, a)=>(
            <div key={r.t} style={{display:'flex', alignItems:'center', gap: 14, padding: '14px 16px', borderBottom: i < a.length - 1 ? `1px solid ${PAL.line}` : 'none'}}>
              <Icon d={r.i} c={PAL.clay}/>
              <div style={{flex: 1, fontSize: 14, fontWeight: 500, color: PAL.ink, fontFamily: A.sans}}>{r.t}</div>
              <Icon d="m9 6 6 6-6 6" c={PAL.muted} s={16}/>
            </div>
          ))}
        </div>
      </div>
      <ATabBar active="me"/>
    </div>
  );
}

// --- A9. Onboarding ---
function A_Onboarding() {
  return (
    <div style={{...aBase, background: `linear-gradient(180deg, ${PAL.blush} 0%, ${PAL.bg} 60%)`}}>
      <div style={{padding: '34px 28px 0'}}>
        <div style={{fontSize: 11, letterSpacing: 2, textTransform:'uppercase', color: PAL.clayDk, fontWeight: 700}}>Wishlist</div>
      </div>
      <div style={{flex: 1, padding: '20px 28px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
        {/* Visual */}
        <div style={{position:'relative', height: 220, marginBottom: 20}}>
          <div style={{position:'absolute', top: 10, left: 30, width: 110, height: 140, borderRadius: 14, background: PAL.butter, transform:'rotate(-6deg)', boxShadow: A.shadow}}/>
          <div style={{position:'absolute', top: 0, left: 110, width: 110, height: 150, borderRadius: 14, background: PAL.paper, transform:'rotate(4deg)', boxShadow: A.shadow, padding: 12}}>
            <div style={{height: 86, borderRadius: 8, background: PAL.mint, marginBottom: 6}}/>
            <div style={{fontSize: 9, color: PAL.muted, fontWeight: 600, letterSpacing: 0.6}}>GRIMM\u2019S</div>
            <div style={{fontFamily: A.font, fontSize: 11, color: PAL.ink, fontWeight: 500, lineHeight: 1.1}}>Stacking rainbow</div>
          </div>
          <div style={{position:'absolute', bottom: 0, right: 16, width: 60, height: 60, borderRadius: 30, background: PAL.clay, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: '0 6px 16px rgba(201,122,110,0.5)'}}>
            <Icon d={ICONS.heart} c="#fff" s={24} fill="#fff"/>
          </div>
        </div>
        <div style={{fontFamily: A.font, fontSize: 36, lineHeight: 1.05, color: PAL.ink, fontWeight: 400}}>
          Save the things<br/><span style={{fontStyle:'italic', color: PAL.clay}}>you love.</span>
        </div>
        <div style={{fontSize: 15, color: PAL.inkSoft, marginTop: 12, lineHeight: 1.4, maxWidth: 280}}>
          One less browser tab. One less screenshot. We\u2019ll keep track of every gift idea — for you, and for them.
        </div>
      </div>
      <div style={{padding: '0 22px 26px'}}>
        <div style={{padding: '15px', borderRadius: 16, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 600, fontSize: 15, fontFamily: A.sans}}>Get started</div>
        <div style={{textAlign:'center', marginTop: 12, fontSize: 13, color: PAL.inkSoft}}>I already have an account</div>
      </div>
    </div>
  );
}

// --- A10. Claim moment (the magic) ---
function A_ClaimMoment() {
  return (
    <div style={{...aBase, background: `linear-gradient(180deg, ${PAL.blush} 0%, ${PAL.butter} 100%)`}}>
      {/* Confetti dots */}
      {[
        {l:'10%',t:'18%',c:PAL.clay,s:6},
        {l:'82%',t:'14%',c:PAL.sageDk,s:5},
        {l:'20%',t:'38%',c:PAL.butter,s:4},
        {l:'70%',t:'52%',c:PAL.clay,s:7},
        {l:'12%',t:'62%',c:PAL.sage,s:5},
        {l:'88%',t:'72%',c:PAL.clay,s:4},
        {l:'42%',t:'12%',c:PAL.sageDk,s:3},
      ].map((d, i) => <div key={i} style={{position:'absolute', left: d.l, top: d.t, width: d.s*2, height: d.s*2, borderRadius: d.s, background: d.c}}/>)}

      <div style={{flex: 1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding: '0 28px', textAlign:'center'}}>
        <div style={{width: 88, height: 88, borderRadius: 44, background: '#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow: '0 12px 30px rgba(201,122,110,0.35)', marginBottom: 22}}>
          <Icon d={ICONS.heart} c={PAL.clay} fill={PAL.clay} s={42} sw={0}/>
        </div>
        <div style={{fontFamily: A.font, fontSize: 32, lineHeight: 1.05, fontWeight: 400, color: PAL.ink}}>
          Someone has<br/><span style={{fontStyle:'italic', color: PAL.clay}}>her in mind.</span>
        </div>
        <div style={{fontSize: 14, color: PAL.inkSoft, marginTop: 14, lineHeight: 1.5, maxWidth: 280}}>
          A gift on <b>Mira\u2019s First Birthday</b> just got claimed. We won\u2019t tell you which one — surprise stays a surprise.
        </div>
      </div>
      <div style={{padding: '0 22px 30px'}}>
        <div style={{padding: '15px', borderRadius: 16, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 600, fontSize: 15, fontFamily: A.sans}}>Got it. One less to remember.</div>
      </div>
    </div>
  );
}

// =========================================================================
// DIRECTION B — PEBBLE (rounded soft sans, more app-y)
// =========================================================================

const B = {
  font: '"DM Sans", "Inter", -apple-system, system-ui, sans-serif',
  display: '"DM Sans", -apple-system, system-ui, sans-serif',
  rad: 24,
  shadow: '0 4px 16px rgba(45,42,38,0.08)',
};

const bBase = {
  fontFamily: B.font,
  background: PAL.bg,
  color: PAL.ink,
  width: '100%',
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  position: 'relative',
};

function BTabBar({active='home'}) {
  const items = [
    {id:'home', icon: ICONS.home, label:'Lists'},
    {id:'discover', icon: ICONS.search, label:'Find'},
    {id:'scan', icon: ICONS.scan, label:'', big: true},
    {id:'activity', icon: ICONS.bell, label:'Activity'},
    {id:'me', icon: ICONS.user, label:'Me'},
  ];
  return (
    <div style={{
      margin: '8px 14px 14px', padding: '10px 8px',
      background: PAL.ink, borderRadius: 30,
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      boxShadow: '0 8px 24px rgba(31,28,24,0.25)',
    }}>
      {items.map(it => {
        if (it.big) {
          return (
            <div key={it.id} style={{
              width: 50, height: 50, borderRadius: 25, background: PAL.clay,
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow: '0 4px 14px rgba(201,122,110,0.6)',
            }}>
              <Icon d={it.icon} c="#fff" s={22} sw={2}/>
            </div>
          );
        }
        const isActive = active === it.id;
        return (
          <div key={it.id} style={{display:'flex', flexDirection:'column', alignItems:'center', gap: 2, padding: '6px 10px', borderRadius: 16, background: isActive ? 'rgba(255,255,255,0.12)' : 'transparent'}}>
            <Icon d={it.icon} c={isActive ? PAL.butter : 'rgba(255,255,255,0.65)'} sw={isActive ? 2 : 1.6} s={20}/>
            <div style={{fontSize: 10, color: isActive ? PAL.butter : 'rgba(255,255,255,0.65)', fontWeight: 600}}>{it.label}</div>
          </div>
        );
      })}
    </div>
  );
}

// --- B1. Home ---
function B_Home() {
  const lists = [
    {name: "Mira's First Birthday", emoji:'🎈', count: 14, claimed: 5, days: '14d', tone: PAL.blush, accent: PAL.clay},
    {name: "Mother's Day", emoji:'🌷', count: 6, claimed: 0, days: '12d', tone: PAL.butter, accent: PAL.clayDk},
    {name: 'Our New Place', emoji:'🏡', count: 23, claimed: 11, days: '—', tone: PAL.mint, accent: PAL.sageDk},
    {name: 'Things I Love', emoji:'✨', count: 41, claimed: 0, days: '—', tone: PAL.bg2, accent: PAL.inkSoft},
  ];
  return (
    <div style={bBase}>
      <div style={{padding: '20px 22px 12px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div>
          <div style={{fontSize: 13, color: PAL.muted, fontWeight: 500}}>Tuesday</div>
          <div style={{fontSize: 26, color: PAL.ink, fontWeight: 700, letterSpacing: -0.5, marginTop: 2}}>Hey, Sarah 👋</div>
        </div>
        <div style={{width: 44, height: 44, borderRadius: 22, background: `linear-gradient(135deg, ${PAL.blush}, ${PAL.clay})`, color:'#fff', fontWeight: 700, fontSize: 16, display:'flex', alignItems:'center', justifyContent:'center'}}>S</div>
      </div>

      {/* Big primary CTA bar */}
      <div style={{margin: '0 18px 12px', padding: '14px 16px', background: PAL.ink, borderRadius: 20, display:'flex', alignItems:'center', gap: 12}}>
        <div style={{width: 40, height: 40, borderRadius: 20, background: PAL.clay, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.scan} c="#fff" s={20}/></div>
        <div style={{flex: 1, color: '#fff'}}>
          <div style={{fontSize: 15, fontWeight: 700}}>Saw something good?</div>
          <div style={{fontSize: 12, color: 'rgba(255,255,255,0.65)'}}>Scan, paste, or share to save</div>
        </div>
        <div style={{padding: '8px 14px', borderRadius: 14, background: PAL.butter, color: PAL.ink, fontWeight: 700, fontSize: 13}}>Scan</div>
      </div>

      {/* Pinned countdown */}
      <div style={{margin: '0 18px 12px', padding: '12px 14px', background: PAL.paper, borderRadius: 18, display:'flex', alignItems:'center', gap: 12, boxShadow: B.shadow}}>
        <div style={{width: 48, height: 48, borderRadius: 14, background: PAL.blush, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 24}}>🎈</div>
        <div style={{flex: 1}}>
          <div style={{fontSize: 11, fontWeight: 700, letterSpacing: 0.8, color: PAL.clayDk, textTransform:'uppercase'}}>14 DAYS · MAY 12</div>
          <div style={{fontSize: 16, fontWeight: 700, color: PAL.ink}}>Mira\u2019s First Birthday</div>
        </div>
        <div style={{width: 36, height: 36, borderRadius: 18, background: PAL.bg2, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d="m9 6 6 6-6 6" c={PAL.ink} s={14}/></div>
      </div>

      <div style={{padding: '4px 22px 6px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{fontSize: 18, fontWeight: 700, color: PAL.ink}}>My lists</div>
        <div style={{fontSize: 13, color: PAL.clay, fontWeight: 600}}>+ New</div>
      </div>

      {/* Lists grid 2-col */}
      <div style={{flex: 1, padding: '4px 18px', overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10}}>
          {lists.map((l, i) => (
            <div key={l.name} style={{padding: '14px 14px 12px', background: PAL.paper, borderRadius: 20, boxShadow: B.shadow, position:'relative'}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <div style={{width: 38, height: 38, borderRadius: 12, background: l.tone, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18}}>{l.emoji}</div>
                {l.days !== '—' && <div style={{fontSize: 10, fontWeight: 700, color: l.accent, padding:'3px 7px', background: l.tone, borderRadius: 6}}>{l.days}</div>}
              </div>
              <div style={{fontSize: 14, fontWeight: 700, color: PAL.ink, marginTop: 10, lineHeight: 1.2}}>{l.name}</div>
              <div style={{display:'flex', alignItems:'center', gap: 6, marginTop: 6}}>
                <div style={{flex: 1, height: 4, background: PAL.bg2, borderRadius: 2, overflow:'hidden'}}>
                  <div style={{width: `${(l.claimed/Math.max(l.count,1))*100}%`, height: '100%', background: l.accent}}/>
                </div>
                <div style={{fontSize: 10, color: PAL.muted, fontWeight: 700}}>{l.claimed}/{l.count}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <BTabBar active="home"/>
    </div>
  );
}

// --- B2. List Detail ---
function B_ListDetail() {
  const items = [
    {name: 'Pikler triangle', brand: 'Lily & River', price: '$148', tone: PAL.butter, claimed: false},
    {name: 'Muslin bundle', brand: 'aden + anais', price: '$42', tone: PAL.blush, claimed: true},
    {name: 'Stacking rainbow', brand: 'Grimm\u2019s', price: '$58', tone: PAL.mint, claimed: false},
  ];
  return (
    <div style={bBase}>
      <div style={{padding: '14px 18px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{width: 40, height: 40, borderRadius: 20, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: B.shadow}}><Icon d={ICONS.back}/></div>
        <div style={{display:'flex', gap: 8}}>
          <div style={{width: 40, height: 40, borderRadius: 20, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: B.shadow}}><Icon d={ICONS.share} s={16}/></div>
          <div style={{width: 40, height: 40, borderRadius: 20, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: B.shadow}}><Icon d={ICONS.more}/></div>
        </div>
      </div>

      <div style={{padding: '8px 22px 16px'}}>
        <div style={{display:'flex', alignItems:'center', gap: 8}}>
          <div style={{width: 44, height: 44, borderRadius: 14, background: PAL.blush, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 22}}>🎈</div>
          <div>
            <div style={{fontSize: 11, fontWeight: 700, letterSpacing: 0.8, color: PAL.clayDk, textTransform:'uppercase'}}>14 DAYS AWAY</div>
            <div style={{fontSize: 22, fontWeight: 700, color: PAL.ink, letterSpacing: -0.4}}>Mira\u2019s First Birthday</div>
          </div>
        </div>
        <div style={{display:'flex', alignItems:'center', gap: 10, marginTop: 14}}>
          <div style={{flex: 1, padding: '12px 14px', background: PAL.paper, borderRadius: 14, boxShadow: B.shadow}}>
            <div style={{fontSize: 11, color: PAL.muted, fontWeight: 600}}>Items</div>
            <div style={{fontSize: 20, color: PAL.ink, fontWeight: 700}}>14</div>
          </div>
          <div style={{flex: 1, padding: '12px 14px', background: PAL.paper, borderRadius: 14, boxShadow: B.shadow}}>
            <div style={{fontSize: 11, color: PAL.muted, fontWeight: 600}}>Claimed</div>
            <div style={{fontSize: 20, color: PAL.sageDk, fontWeight: 700}}>5</div>
          </div>
          <div style={{flex: 1, padding: '12px 14px', background: PAL.clay, borderRadius: 14}}>
            <div style={{fontSize: 11, color: 'rgba(255,255,255,0.7)', fontWeight: 600}}>Share</div>
            <div style={{fontSize: 14, color: '#fff', fontWeight: 700, marginTop: 2}}>Send link</div>
          </div>
        </div>
      </div>

      <div style={{flex: 1, padding: '0 18px', overflow:'hidden'}}>
        {items.map((it, i) => (
          <div key={i} style={{display:'flex', gap: 12, padding: '12px', background: PAL.paper, borderRadius: 18, marginBottom: 10, boxShadow: B.shadow}}>
            <div style={{width: 64, height: 64, borderRadius: 14, background: it.tone, flexShrink: 0, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
              <div style={{width: 36, height: 36, borderRadius: 6, background: 'rgba(255,255,255,0.5)'}}/>
              {it.claimed && <div style={{position:'absolute', top: -4, right: -4, width: 22, height: 22, borderRadius: 11, background: PAL.sageDk, display:'flex', alignItems:'center', justifyContent:'center', border: `2px solid ${PAL.bg}`}}><Icon d={ICONS.check} c="#fff" s={12} sw={2.5}/></div>}
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 11, color: PAL.muted, fontWeight: 700, letterSpacing: 0.4}}>{it.brand}</div>
              <div style={{fontSize: 15, color: PAL.ink, fontWeight: 700, marginTop: 1}}>{it.name}</div>
              <div style={{display:'flex', alignItems:'center', gap: 8, marginTop: 4}}>
                <div style={{fontSize: 14, color: PAL.ink, fontWeight: 700}}>{it.price}</div>
                {it.claimed && <div style={{padding:'2px 6px', borderRadius: 6, background: PAL.mint, fontSize: 10, fontWeight: 700, color: PAL.sageDk}}>CLAIMED</div>}
              </div>
            </div>
          </div>
        ))}
      </div>
      <BTabBar active="home"/>
    </div>
  );
}

// --- B3. Item Detail ---
function B_ItemDetail() {
  return (
    <div style={bBase}>
      <div style={{padding: '14px 18px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{width: 40, height: 40, borderRadius: 20, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: B.shadow}}><Icon d={ICONS.back}/></div>
        <div style={{width: 40, height: 40, borderRadius: 20, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: B.shadow}}><Icon d={ICONS.share} s={16}/></div>
      </div>

      <div style={{margin: '0 18px 14px', height: 240, borderRadius: 26, background: PAL.butter, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
        <div style={{width: 140, height: 140, borderRadius: 16, background: 'rgba(255,255,255,0.55)'}}/>
        <div style={{position:'absolute', top: 14, left: 14, padding: '6px 12px', background: PAL.paper, borderRadius: 16, fontSize: 11, fontWeight: 700, color: PAL.sageDk, display:'flex', alignItems:'center', gap: 4}}>
          <div style={{width: 6, height: 6, borderRadius: 3, background: PAL.sageDk}}/> Available
        </div>
      </div>

      <div style={{padding: '0 22px', flex: 1}}>
        <div style={{fontSize: 11, fontWeight: 700, color: PAL.muted, letterSpacing: 0.6}}>LILY & RIVER</div>
        <div style={{fontSize: 24, fontWeight: 700, color: PAL.ink, letterSpacing: -0.5, lineHeight: 1.2, marginTop: 4}}>
          Wooden Pikler Climbing Triangle
        </div>
        <div style={{display:'flex', alignItems:'baseline', gap: 8, marginTop: 8}}>
          <div style={{fontSize: 26, fontWeight: 700, color: PAL.ink, letterSpacing: -0.5}}>$148</div>
          <div style={{fontSize: 12, color: PAL.muted, textDecoration:'line-through'}}>$179 elsewhere</div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8, marginTop: 14}}>
          <div style={{padding: '10px 12px', borderRadius: 14, background: PAL.mint}}>
            <div style={{fontSize: 10, fontWeight: 700, color: PAL.sageDk, letterSpacing: 0.6}}>BEST PRICE</div>
            <div style={{fontSize: 14, fontWeight: 700, color: PAL.ink, marginTop: 2}}>Lily & River</div>
          </div>
          <div style={{padding: '10px 12px', borderRadius: 14, background: PAL.bg2}}>
            <div style={{fontSize: 10, fontWeight: 700, color: PAL.muted, letterSpacing: 0.6}}>ON LIST</div>
            <div style={{fontSize: 14, fontWeight: 700, color: PAL.ink, marginTop: 2}}>Mira\u2019s Birthday</div>
          </div>
        </div>
      </div>

      <div style={{padding: '14px 18px 22px', display:'flex', gap: 10}}>
        <div style={{flex: 1, padding: '15px', borderRadius: 18, background: PAL.clay, textAlign:'center', color:'#fff', fontWeight: 700, fontSize: 15, boxShadow: '0 4px 14px rgba(201,122,110,0.4)'}}>Buy now</div>
        <div style={{padding: '15px 18px', borderRadius: 18, background: PAL.paper, fontWeight: 700, fontSize: 14, display:'flex', alignItems:'center', gap: 6, boxShadow: B.shadow}}>
          <Icon d={ICONS.gift} s={16}/> Group
        </div>
      </div>
    </div>
  );
}

// --- B4. Scanner ---
function B_Scanner() {
  return (
    <div style={{...bBase, background: PAL.charcoal, color: '#fff'}}>
      <div style={{position:'absolute', inset: 0, background: `radial-gradient(circle at 50% 38%, ${PAL.inkSoft} 0%, ${PAL.charcoal} 70%)`}}/>

      <div style={{padding: '16px 18px', display:'flex', alignItems:'center', justifyContent:'space-between', position:'relative', zIndex: 2}}>
        <div style={{width: 40, height: 40, borderRadius: 20, background: 'rgba(255,255,255,0.16)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.back} c="#fff"/></div>
        <div style={{padding: '8px 16px', borderRadius: 20, background: 'rgba(255,255,255,0.16)', fontSize: 13, fontWeight: 700}}>📷 Scan a tag</div>
        <div style={{width: 40, height: 40, borderRadius: 20, background: 'rgba(255,255,255,0.16)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.flash} c="#fff" s={16}/></div>
      </div>

      <div style={{flex: 1, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', zIndex: 2}}>
        <div style={{width: 250, height: 250, borderRadius: 32, border: `3px dashed rgba(242,211,153,0.7)`, position:'relative', background: 'rgba(242,211,153,0.04)'}}>
          <div style={{position:'absolute', left: 8, right: 8, top: '50%', height: 2, background: `linear-gradient(90deg, transparent, ${PAL.butter}, transparent)`, boxShadow: `0 0 12px ${PAL.butter}`}}/>
          <div style={{position:'absolute', top: -56, left: 30, right: 30, padding: '12px 14px', borderRadius: 18, background: '#fff', display:'flex', alignItems:'center', gap: 10, boxShadow: '0 12px 30px rgba(0,0,0,0.4)'}}>
            <div style={{width: 38, height: 38, borderRadius: 10, background: PAL.butter}}/>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 11, color: PAL.muted, fontWeight: 700}}>GOT IT</div>
              <div style={{fontSize: 14, color: PAL.ink, fontWeight: 700, lineHeight: 1.1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>Pikler triangle</div>
            </div>
            <div style={{width: 26, height: 26, borderRadius: 13, background: PAL.sageDk, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.check} c="#fff" s={14} sw={2.5}/></div>
          </div>
        </div>
      </div>

      <div style={{padding: '0 22px 14px', textAlign:'center', position:'relative', zIndex: 2}}>
        <div style={{fontSize: 22, fontWeight: 700, lineHeight: 1.15, letterSpacing: -0.5}}>Got it. <span style={{color: PAL.butter}}>One less to remember.</span></div>
      </div>

      <div style={{background: PAL.paper, borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '16px 20px 20px', position:'relative', zIndex: 2, color: PAL.ink}}>
        <div style={{width: 36, height: 4, borderRadius: 2, background: PAL.line, margin: '0 auto 14px'}}/>
        <div style={{fontSize: 12, fontWeight: 700, color: PAL.muted, letterSpacing: 0.6}}>SAVE TO</div>
        <div style={{display:'flex', gap: 8, marginTop: 10, flexWrap:'wrap'}}>
          <div style={{padding: '10px 14px', borderRadius: 16, background: PAL.clay, color:'#fff', fontSize: 13, fontWeight: 700, display:'flex', alignItems:'center', gap: 6}}>
            🎈 Mira\u2019s Birthday <Icon d={ICONS.check} c="#fff" s={12} sw={2.5}/>
          </div>
          <div style={{padding: '10px 14px', borderRadius: 16, background: PAL.bg2, color: PAL.ink, fontSize: 13, fontWeight: 700}}>✨ Things I Love</div>
          <div style={{padding: '10px 14px', borderRadius: 16, background: PAL.bg2, color: PAL.ink, fontSize: 13, fontWeight: 700}}>+ New</div>
        </div>
        <div style={{marginTop: 12, padding: '15px', borderRadius: 18, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 700, fontSize: 15}}>Save it</div>
      </div>
    </div>
  );
}

// --- B5. Activity ---
function B_Activity() {
  const items = [
    {kind: 'claimed', text: 'Someone has Mira in mind', meta: 'Mira\u2019s First Birthday', time: 'just now', tone: PAL.blush, accent: PAL.clay, isNew: true},
    {kind: 'added', text: 'You added Pikler triangle', meta: 'Mira\u2019s First Birthday', time: '12m ago', tone: PAL.butter, accent: PAL.clayDk},
    {kind: 'shared', text: 'You sent Mother\u2019s Day to 4 people', meta: 'Shared link', time: '2h ago', tone: PAL.mint, accent: PAL.sageDk},
    {kind: 'added', text: 'Mom added Linen apron', meta: 'Mother\u2019s Day', time: '3h ago', tone: PAL.bg2, accent: PAL.inkSoft},
  ];
  return (
    <div style={bBase}>
      <div style={{padding: '20px 22px 14px'}}>
        <div style={{fontSize: 26, fontWeight: 700, color: PAL.ink, letterSpacing: -0.5}}>Activity</div>
        <div style={{fontSize: 13, color: PAL.muted}}>This week</div>
      </div>
      <div style={{flex: 1, padding: '0 18px', overflow:'hidden'}}>
        {items.map((it, i) => (
          <div key={i} style={{display:'flex', gap: 12, padding: '14px', background: PAL.paper, borderRadius: 18, marginBottom: 10, boxShadow: B.shadow, alignItems:'flex-start', position: 'relative'}}>
            {it.isNew && <div style={{position:'absolute', top: 14, right: 14, width: 8, height: 8, borderRadius: 4, background: PAL.clay}}/>}
            <div style={{width: 44, height: 44, borderRadius: 14, background: it.tone, display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0}}>
              {it.kind === 'claimed' && <Icon d={ICONS.heart} fill={it.accent} c={it.accent} sw={0} s={20}/>}
              {it.kind === 'added' && <Icon d={ICONS.plus} c={it.accent} sw={2.5}/>}
              {it.kind === 'shared' && <Icon d={ICONS.share} c={it.accent} s={18}/>}
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 15, fontWeight: 700, color: PAL.ink, lineHeight: 1.25}}>{it.text}</div>
              <div style={{fontSize: 12, color: PAL.muted, marginTop: 3}}>{it.meta} · {it.time}</div>
            </div>
          </div>
        ))}
      </div>
      <BTabBar active="activity"/>
    </div>
  );
}

// --- B6. Discover ---
function B_Discover() {
  return (
    <div style={bBase}>
      <div style={{padding: '20px 22px 10px'}}>
        <div style={{fontSize: 26, fontWeight: 700, color: PAL.ink, letterSpacing: -0.5}}>Find ideas</div>
      </div>
      <div style={{padding: '4px 18px 12px'}}>
        <div style={{padding: '12px 14px', background: PAL.paper, borderRadius: 18, display:'flex', alignItems:'center', gap: 10, boxShadow: B.shadow}}>
          <Icon d={ICONS.search} c={PAL.muted}/>
          <div style={{color: PAL.muted, fontSize: 14}}>Try \u201cnew baby\u201d or \u201cunder $50\u201d</div>
        </div>
      </div>

      <div style={{padding: '0 18px 10px', display:'flex', gap: 8}}>
        {['🎂 Birthdays', '🌷 Mom', '🏡 Home', '👶 Baby'].map((t, i) => (
          <div key={t} style={{padding: '8px 14px', borderRadius: 16, background: i===0 ? PAL.ink : PAL.paper, color: i===0 ? '#fff' : PAL.ink, fontSize: 13, fontWeight: 700, boxShadow: i===0 ? 'none' : B.shadow}}>{t}</div>
        ))}
      </div>

      <div style={{flex: 1, padding: '4px 18px', overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10}}>
          {[
            {h: 130, tone: PAL.butter, title:'Linen apron', brand: 'Hedley & Bennett', price:'$48'},
            {h: 160, tone: PAL.blush, title:'Pottery mug', brand: 'East Fork', price:'$38'},
            {h: 110, tone: PAL.mint, title:'Cast iron', brand: 'Smithey', price:'$210'},
            {h: 140, tone: PAL.bg2, title:'Wool throw', brand: 'Coyuchi', price:'$168'},
          ].map((p, i) => (
            <div key={i} style={{borderRadius: 18, background: PAL.paper, overflow:'hidden', boxShadow: B.shadow}}>
              <div style={{height: p.h, background: p.tone, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <div style={{width: '50%', height: '60%', borderRadius: 8, background: 'rgba(255,255,255,0.55)'}}/>
              </div>
              <div style={{padding: '8px 12px 12px'}}>
                <div style={{fontSize: 10, fontWeight: 700, color: PAL.muted}}>{p.brand}</div>
                <div style={{fontSize: 14, fontWeight: 700, color: PAL.ink, lineHeight: 1.15, marginTop: 2}}>{p.title}</div>
                <div style={{fontSize: 13, fontWeight: 700, color: PAL.ink, marginTop: 4}}>{p.price}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <BTabBar active="discover"/>
    </div>
  );
}

// --- B7. Shared list ---
function B_Shared() {
  return (
    <div style={bBase}>
      <div style={{padding: '22px 22px 18px', background: `linear-gradient(160deg, ${PAL.blush}, ${PAL.butter})`, borderBottomLeftRadius: 28, borderBottomRightRadius: 28}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{display:'flex', alignItems:'center', gap: 8}}>
            <div style={{width: 32, height: 32, borderRadius: 16, background: PAL.clay, color: '#fff', fontSize: 13, fontWeight: 700, display:'flex', alignItems:'center', justifyContent:'center'}}>S</div>
            <div style={{fontSize: 13, color: PAL.inkSoft, fontWeight: 600}}>From Sarah</div>
          </div>
          <div style={{padding: '4px 10px', borderRadius: 12, background: 'rgba(255,255,255,0.6)', fontSize: 10, fontWeight: 700, color: PAL.clayDk}}>🔒 PRIVATE</div>
        </div>
        <div style={{fontSize: 26, fontWeight: 700, color: PAL.ink, marginTop: 18, letterSpacing: -0.5, lineHeight: 1.1}}>
          🎈 Mira\u2019s 1st Birthday
        </div>
        <div style={{display:'flex', gap: 16, marginTop: 14}}>
          <div><div style={{fontSize: 22, fontWeight: 700, color: PAL.ink}}>14</div><div style={{fontSize: 11, color: PAL.inkSoft, fontWeight: 600}}>days</div></div>
          <div style={{width: 1, background: 'rgba(0,0,0,0.1)'}}/>
          <div><div style={{fontSize: 22, fontWeight: 700, color: PAL.ink}}>9</div><div style={{fontSize: 11, color: PAL.inkSoft, fontWeight: 600}}>left</div></div>
          <div style={{width: 1, background: 'rgba(0,0,0,0.1)'}}/>
          <div><div style={{fontSize: 22, fontWeight: 700, color: PAL.ink}}>5</div><div style={{fontSize: 11, color: PAL.inkSoft, fontWeight: 600}}>claimed</div></div>
        </div>
      </div>

      <div style={{flex: 1, padding: '14px 18px', overflow:'hidden'}}>
        {[
          {name: 'Pikler triangle', brand: 'Lily & River', price: '$148', tone: PAL.butter, claimed: false},
          {name: 'Stacking rainbow', brand: 'Grimm\u2019s', price: '$58', tone: PAL.mint, claimed: false},
          {name: 'Hooded towel', brand: 'Coyuchi', price: '$68', tone: PAL.bg2, claimed: true},
        ].map((it, i) => (
          <div key={i} style={{display:'flex', gap: 12, padding: '12px', background: PAL.paper, borderRadius: 18, marginBottom: 10, boxShadow: B.shadow, opacity: it.claimed ? 0.5 : 1}}>
            <div style={{width: 56, height: 56, borderRadius: 14, background: it.tone, flexShrink: 0, display:'flex', alignItems:'center', justifyContent:'center'}}>
              <div style={{width: 32, height: 32, borderRadius: 6, background: 'rgba(255,255,255,0.55)'}}/>
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 11, fontWeight: 700, color: PAL.muted}}>{it.brand}</div>
              <div style={{fontSize: 14, fontWeight: 700, color: PAL.ink}}>{it.name}</div>
              <div style={{fontSize: 13, fontWeight: 700, color: PAL.ink, marginTop: 2}}>{it.price}</div>
            </div>
            <div style={{display:'flex', alignItems:'center'}}>
              {it.claimed ? (
                <div style={{padding: '8px 12px', borderRadius: 12, background: PAL.bg2, fontSize: 11, fontWeight: 700, color: PAL.muted}}>TAKEN</div>
              ) : (
                <div style={{padding: '8px 14px', borderRadius: 12, background: PAL.clay, color:'#fff', fontSize: 12, fontWeight: 700}}>I\u2019ll get it</div>
              )}
            </div>
          </div>
        ))}
      </div>
      <div style={{padding: '8px 18px 22px', textAlign:'center', fontSize: 11, color: PAL.muted, fontWeight: 600}}>
        🤫 Sarah won\u2019t see who claims what
      </div>
    </div>
  );
}

// --- B8. Profile ---
function B_Profile() {
  return (
    <div style={bBase}>
      <div style={{padding: '22px 22px 12px', textAlign:'center'}}>
        <div style={{width: 88, height: 88, borderRadius: 44, background: `linear-gradient(135deg, ${PAL.blush}, ${PAL.clay})`, margin: '4px auto 12px', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontSize: 32, fontWeight: 700}}>S</div>
        <div style={{fontSize: 22, fontWeight: 700, color: PAL.ink, letterSpacing: -0.4}}>Sarah Brennan</div>
        <div style={{fontSize: 13, color: PAL.muted}}>sarah@email.com</div>
      </div>
      <div style={{display:'flex', gap: 8, padding: '8px 18px 14px'}}>
        {[{n: 4, l:'Lists', c: PAL.clay},{n: 78, l:'Items', c: PAL.sageDk},{n: 12, l:'Claimed', c: PAL.clayDk}].map(s=>(
          <div key={s.l} style={{flex: 1, padding: '14px', background: PAL.paper, borderRadius: 18, textAlign:'center', boxShadow: B.shadow}}>
            <div style={{fontSize: 24, fontWeight: 700, color: s.c}}>{s.n}</div>
            <div style={{fontSize: 11, color: PAL.muted, fontWeight: 700, marginTop: 2}}>{s.l}</div>
          </div>
        ))}
      </div>
      <div style={{flex: 1, padding: '0 18px'}}>
        <div style={{background: PAL.paper, borderRadius: 20, boxShadow: B.shadow}}>
          {[{i: ICONS.bell, t:'Notifications'}, {i: ICONS.cal, t:'Occasion calendar'}, {i: ICONS.share, t:'Sharing & privacy'}, {i: ICONS.tag, t:'Affiliate links'}].map((r, i, a)=>(
            <div key={r.t} style={{display:'flex', alignItems:'center', gap: 14, padding: '15px 18px', borderBottom: i < a.length - 1 ? `1px solid ${PAL.line}` : 'none'}}>
              <div style={{width: 36, height: 36, borderRadius: 12, background: PAL.bg2, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={r.i} c={PAL.clay}/></div>
              <div style={{flex: 1, fontSize: 14, fontWeight: 700, color: PAL.ink}}>{r.t}</div>
              <Icon d="m9 6 6 6-6 6" c={PAL.muted} s={16}/>
            </div>
          ))}
        </div>
      </div>
      <BTabBar active="me"/>
    </div>
  );
}

// --- B9. Onboarding ---
function B_Onboarding() {
  return (
    <div style={{...bBase, background: `linear-gradient(180deg, ${PAL.butter} 0%, ${PAL.blush} 100%)`}}>
      <div style={{padding: '34px 28px 0', display:'flex', alignItems:'center', gap: 8}}>
        <div style={{width: 28, height: 28, borderRadius: 14, background: PAL.clay, display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Icon d={ICONS.heart} fill="#fff" c="#fff" sw={0} s={14}/>
        </div>
        <div style={{fontSize: 14, fontWeight: 800, letterSpacing: -0.3, color: PAL.ink}}>wishlist</div>
      </div>
      <div style={{flex: 1, padding: '20px 28px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
        <div style={{position:'relative', height: 220, marginBottom: 22}}>
          <div style={{position:'absolute', top: 30, left: 22, padding: 12, width: 130, background: '#fff', borderRadius: 18, transform:'rotate(-5deg)', boxShadow: B.shadow}}>
            <div style={{height: 86, borderRadius: 10, background: PAL.mint, marginBottom: 8}}/>
            <div style={{fontSize: 10, fontWeight: 700, color: PAL.muted}}>GRIMM\u2019S</div>
            <div style={{fontSize: 12, fontWeight: 700, color: PAL.ink}}>Stacking rainbow</div>
          </div>
          <div style={{position:'absolute', top: 14, right: 28, padding: 12, width: 120, background: '#fff', borderRadius: 18, transform:'rotate(6deg)', boxShadow: B.shadow}}>
            <div style={{height: 76, borderRadius: 10, background: PAL.butter, marginBottom: 8}}/>
            <div style={{fontSize: 10, fontWeight: 700, color: PAL.muted}}>SMITHEY</div>
            <div style={{fontSize: 12, fontWeight: 700, color: PAL.ink}}>Cast iron pan</div>
          </div>
          <div style={{position:'absolute', bottom: 0, left: 90, width: 64, height: 64, borderRadius: 32, background: PAL.clay, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: '0 6px 16px rgba(201,122,110,0.5)'}}>
            <Icon d={ICONS.heart} c="#fff" s={28} fill="#fff"/>
          </div>
        </div>
        <div style={{fontSize: 38, fontWeight: 800, lineHeight: 1.05, color: PAL.ink, letterSpacing: -1.2}}>
          Got it. <span style={{color: PAL.clay}}>One less to remember.</span>
        </div>
        <div style={{fontSize: 15, color: PAL.inkSoft, marginTop: 14, lineHeight: 1.4, maxWidth: 290, fontWeight: 500}}>
          Save anything from anywhere. We\u2019ll keep it organized for every birthday, holiday, and \u201cone day.\u201d
        </div>
      </div>
      <div style={{padding: '0 22px 26px'}}>
        <div style={{padding: '16px', borderRadius: 20, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 700, fontSize: 15}}>Get started</div>
        <div style={{textAlign:'center', marginTop: 14, fontSize: 13, color: PAL.inkSoft, fontWeight: 600}}>I already have an account</div>
      </div>
    </div>
  );
}

// --- B10. Claim moment ---
function B_ClaimMoment() {
  return (
    <div style={{...bBase, background: `linear-gradient(180deg, ${PAL.butter} 0%, ${PAL.blush} 100%)`}}>
      {[
        {l:'12%',t:'14%',c:PAL.clay,s:7},
        {l:'80%',t:'10%',c:PAL.sageDk,s:5},
        {l:'22%',t:'34%',c:PAL.butter,s:5},
        {l:'72%',t:'48%',c:PAL.clay,s:8},
        {l:'10%',t:'58%',c:PAL.sage,s:6},
        {l:'86%',t:'68%',c:PAL.clay,s:5},
        {l:'40%',t:'8%',c:PAL.sageDk,s:4},
        {l:'58%',t:'26%',c:PAL.clayDk,s:5},
      ].map((d, i) => <div key={i} style={{position:'absolute', left: d.l, top: d.t, width: d.s*2, height: d.s*2, borderRadius: d.s, background: d.c, opacity: 0.85}}/>)}

      <div style={{flex: 1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding: '0 28px', textAlign:'center'}}>
        <div style={{width: 96, height: 96, borderRadius: 48, background: '#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow: '0 12px 30px rgba(201,122,110,0.4)', marginBottom: 24, position:'relative'}}>
          <Icon d={ICONS.heart} c={PAL.clay} fill={PAL.clay} s={48} sw={0}/>
          <div style={{position:'absolute', top: -6, right: -6, padding: '4px 8px', background: PAL.ink, color: '#fff', fontSize: 16, borderRadius: 12, fontWeight: 700}}>+1</div>
        </div>
        <div style={{fontSize: 30, fontWeight: 800, lineHeight: 1.05, color: PAL.ink, letterSpacing: -1}}>
          Someone has<br/><span style={{color: PAL.clay}}>Mira in mind 🎁</span>
        </div>
        <div style={{fontSize: 14, color: PAL.inkSoft, marginTop: 14, lineHeight: 1.5, maxWidth: 290, fontWeight: 500}}>
          A gift on Mira\u2019s First Birthday just got claimed. We\u2019re keeping the surprise — you\u2019ll find out at the party.
        </div>
      </div>
      <div style={{padding: '0 22px 30px'}}>
        <div style={{padding: '16px', borderRadius: 20, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 700, fontSize: 15}}>Got it. One less to remember.</div>
      </div>
    </div>
  );
}

// =========================================================================
// Export to window
// =========================================================================
Object.assign(window, {
  A_Home, A_ListDetail, A_ItemDetail, A_Scanner, A_Activity, A_Discover, A_Shared, A_Profile, A_Onboarding, A_ClaimMoment,
  B_Home, B_ListDetail, B_ItemDetail, B_Scanner, B_Activity, B_Discover, B_Shared, B_Profile, B_Onboarding, B_ClaimMoment,
  WL_PAL: PAL, WL_A: A, WL_B: B,
});