// Wishlist — Pebble Refined: middle ground between editorial-mature and app-native-friendly.
// Soft sans body (DM Sans 500–700), italic Fraunces accents on key headers, less emoji,
// slightly tighter density, more whitespace. Same Clay & Sage palette.

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

const FONT = {
  sans: '"DM Sans", -apple-system, system-ui, sans-serif',
  serif: '"Fraunces", Georgia, serif',
};

const SHADOW = '0 2px 10px rgba(45,42,38,0.05), 0 1px 2px rgba(45,42,38,0.04)';
const RAD = 18;

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"/></>,
  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"/>,
  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"/></>,
  flash: <path d="m13 2-9 12h7l-1 8 9-12h-7z"/>,
  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"/></>,
  cake:  <><path d="M4 21h16v-7H4z"/><path d="M4 14V11a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v3"/><path d="M8 8V5M12 8V5M16 8V5"/></>,
  flower:<><circle cx="12" cy="12" r="2"/><path d="M12 2v8M12 14v8M2 12h8M14 12h8M5 5l5 5M14 14l5 5M19 5l-5 5M10 14l-5 5"/></>,
  house: <><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9v11h14V9"/><path d="M9 20v-6h6v6"/></>,
  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"/>,
  lock:  <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
};

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

// Eyebrow label (uppercase tracked) — used everywhere for category/meta
const Eyebrow = ({children, c=PAL.muted}) => (
  <div style={{fontSize: 10.5, letterSpacing: 1.4, textTransform:'uppercase', color: c, fontWeight: 600}}>{children}</div>
);

// Display title with optional italic serif accent word
const Display = ({children, size=24, accent}) => (
  <div style={{fontFamily: FONT.sans, fontSize: size, fontWeight: 600, color: PAL.ink, letterSpacing: -0.4, lineHeight: 1.15}}>
    {children}
    {accent && <> <span style={{fontFamily: FONT.serif, fontStyle:'italic', fontWeight: 400, color: PAL.clay}}>{accent}</span></>}
  </div>
);

// ---------- Tab bar (refined, less chunky) ----------
function TabBar({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={{
      borderTop: `1px solid ${PAL.line}`,
      background: PAL.paper,
      padding: '6px 14px 22px',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
    }}>
      {items.map(it => {
        if (it.big) {
          return (
            <div key={it.id} style={{
              width: 46, height: 46, borderRadius: 23, background: PAL.ink,
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow: '0 4px 12px rgba(31,28,24,0.25)',
              marginTop: -16,
            }}>
              <Icon d={it.icon} c={PAL.butter} s={20} sw={1.8}/>
            </div>
          );
        }
        const isActive = active === it.id;
        return (
          <div key={it.id} style={{display:'flex', flexDirection:'column', alignItems:'center', gap: 3, padding: '6px 4px', minWidth: 56}}>
            <Icon d={it.icon} c={isActive ? PAL.clay : PAL.muted} sw={isActive ? 2 : 1.6} s={19}/>
            <div style={{fontSize: 10, color: isActive ? PAL.ink : PAL.muted, fontWeight: 600, letterSpacing: 0.2}}>{it.label}</div>
          </div>
        );
      })}
    </div>
  );
}

// ---------- 1. Onboarding ----------
function Onboarding() {
  return (
    <div style={{...baseScreen, background: `linear-gradient(180deg, ${PAL.blush} 0%, ${PAL.bg} 55%)`}}>
      <div style={{padding: '28px 26px 0', display:'flex', alignItems:'center', gap: 8}}>
        <div style={{width: 22, height: 22, borderRadius: 11, background: PAL.clay, display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Icon d={ICONS.heart} fill="#fff" c="#fff" sw={0} s={11}/>
        </div>
        <div style={{fontSize: 13, fontWeight: 700, letterSpacing: -0.2, color: PAL.ink}}>Wishlist</div>
      </div>

      <div style={{flex: 1, padding: '24px 26px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
        <div style={{position:'relative', height: 230, marginBottom: 28}}>
          <div style={{position:'absolute', top: 24, left: 14, padding: 12, width: 132, background: PAL.paper, borderRadius: 14, transform:'rotate(-5deg)', boxShadow: SHADOW}}>
            <div style={{height: 92, borderRadius: 8, background: PAL.mint, marginBottom: 8}}/>
            <Eyebrow>Grimm&rsquo;s</Eyebrow>
            <div style={{fontSize: 12, fontWeight: 600, color: PAL.ink, marginTop: 2}}>Stacking rainbow</div>
          </div>
          <div style={{position:'absolute', top: 8, right: 16, padding: 12, width: 124, background: PAL.paper, borderRadius: 14, transform:'rotate(5deg)', boxShadow: SHADOW}}>
            <div style={{height: 80, borderRadius: 8, background: PAL.butter, marginBottom: 8}}/>
            <Eyebrow>Smithey</Eyebrow>
            <div style={{fontSize: 12, fontWeight: 600, color: PAL.ink, marginTop: 2}}>Cast iron pan</div>
          </div>
          <div style={{position:'absolute', bottom: 6, left: 92, width: 56, height: 56, borderRadius: 28, background: PAL.clay, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: '0 6px 14px rgba(201,122,110,0.45)'}}>
            <Icon d={ICONS.heart} c="#fff" s={24} fill="#fff"/>
          </div>
        </div>

        <Eyebrow c={PAL.clayDk}>For you, for them</Eyebrow>
        <div style={{fontFamily: FONT.sans, fontSize: 36, fontWeight: 600, lineHeight: 1.05, color: PAL.ink, letterSpacing: -1, marginTop: 6}}>
          Got it.<br/>
          <span style={{fontFamily: FONT.serif, fontStyle:'italic', fontWeight: 400, color: PAL.clay}}>One less to remember.</span>
        </div>
        <div style={{fontSize: 14.5, color: PAL.inkSoft, marginTop: 14, lineHeight: 1.45, maxWidth: 290}}>
          Save anything from anywhere — and we&rsquo;ll keep it organized for every birthday, holiday, and &ldquo;one day.&rdquo;
        </div>
      </div>

      <div style={{padding: '0 22px 26px'}}>
        <div style={{padding: '14px', borderRadius: 14, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 600, fontSize: 15}}>Get started</div>
        <div style={{textAlign:'center', marginTop: 14, fontSize: 13, color: PAL.inkSoft, fontWeight: 500}}>I already have an account</div>
      </div>
    </div>
  );
}

// ---------- 2. Home ----------
function Home() {
  const lists = [
    {name: "Mira's First Birthday", icon: ICONS.cake, count: 14, claimed: 5, days: '14 days', date: 'May 12', tone: PAL.blush, accent: PAL.clay},
    {name: "Mother's Day", icon: ICONS.flower, count: 6, claimed: 0, days: '12 days', date: 'May 10', tone: PAL.butter, accent: PAL.clayDk},
    {name: 'Our New Place', icon: ICONS.house, count: 23, claimed: 11, days: null, date: 'Anytime', tone: PAL.mint, accent: PAL.sageDk},
    {name: 'Things I Love', icon: ICONS.spark, count: 41, claimed: 0, days: null, date: 'Anytime', tone: PAL.bg2, accent: PAL.inkSoft},
  ];
  return (
    <div style={baseScreen}>
      <div style={{padding: '18px 22px 12px', display:'flex', alignItems:'flex-start', justifyContent:'space-between'}}>
        <div>
          <Eyebrow>Tuesday · April 28</Eyebrow>
          <Display size={28} accent="Sarah">Hi,</Display>
        </div>
        <div style={{width: 40, height: 40, borderRadius: 20, background: `linear-gradient(135deg, ${PAL.blush}, ${PAL.clay})`, color:'#fff', fontWeight: 700, fontSize: 15, display:'flex', alignItems:'center', justifyContent:'center', fontFamily: FONT.serif, fontStyle:'italic'}}>S</div>
      </div>

      {/* Quick capture bar — refined, smaller */}
      <div style={{margin: '4px 18px 14px', padding: '11px 12px 11px 14px', background: PAL.ink, borderRadius: 14, display:'flex', alignItems:'center', gap: 10}}>
        <Icon d={ICONS.scan} c={PAL.butter} s={17} sw={1.8}/>
        <div style={{flex: 1, color: 'rgba(255,255,255,0.85)', fontSize: 13.5, fontWeight: 500}}>Saw something good?</div>
        <div style={{padding: '6px 10px', borderRadius: 9, background: 'rgba(255,255,255,0.12)', color: '#fff', fontWeight: 600, fontSize: 12}}>Scan</div>
        <div style={{padding: '6px 10px', borderRadius: 9, background: 'rgba(255,255,255,0.12)', color: '#fff', fontWeight: 600, fontSize: 12}}>Paste</div>
      </div>

      {/* Pinned countdown */}
      <div style={{margin: '0 18px 16px', padding: '14px', background: PAL.paper, borderRadius: RAD, display:'flex', alignItems:'center', gap: 12, boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}>
        <div style={{width: 48, height: 48, borderRadius: 12, background: PAL.blush, display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Icon d={ICONS.cake} c={PAL.clayDk} s={22}/>
        </div>
        <div style={{flex: 1}}>
          <Eyebrow c={PAL.clayDk}>14 days · May 12</Eyebrow>
          <div style={{fontSize: 15, fontWeight: 600, color: PAL.ink, marginTop: 1}}>Mira&rsquo;s First Birthday</div>
        </div>
        <div style={{padding: '5px 9px', borderRadius: 8, background: PAL.bg2, fontSize: 11, fontWeight: 600, color: PAL.inkSoft}}>5/14</div>
      </div>

      <div style={{padding: '0 22px 8px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{fontFamily: FONT.serif, fontSize: 20, fontStyle:'italic', fontWeight: 500, color: PAL.ink}}>My lists</div>
        <div style={{fontSize: 13, color: PAL.clay, fontWeight: 600, display:'flex', alignItems:'center', gap: 4}}>
          <Icon d={ICONS.plus} c={PAL.clay} s={14} sw={2}/> New
        </div>
      </div>

      <div style={{flex: 1, padding: '4px 18px', overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10}}>
          {lists.map((l) => (
            <div key={l.name} style={{padding: '13px 13px 12px', background: PAL.paper, borderRadius: 16, boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <div style={{width: 34, height: 34, borderRadius: 10, background: l.tone, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <Icon d={l.icon} c={l.accent} s={17} sw={1.7}/>
                </div>
                {l.days && <div style={{fontSize: 10, fontWeight: 600, color: l.accent, padding:'3px 7px', background: l.tone, borderRadius: 6}}>{l.days}</div>}
              </div>
              <div style={{fontSize: 13.5, fontWeight: 600, color: PAL.ink, marginTop: 12, lineHeight: 1.2, letterSpacing: -0.2}}>{l.name}</div>
              <div style={{display:'flex', alignItems:'center', gap: 6, marginTop: 6}}>
                <div style={{flex: 1, height: 3, 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: 600}}>{l.claimed}/{l.count}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

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

// ---------- 3. List Detail ----------
function 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', 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={baseScreen}>
      <div style={{padding: '12px 18px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{width: 36, height: 36, borderRadius: 18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}><Icon d={ICONS.back}/></div>
        <div style={{display:'flex', gap: 8}}>
          <div style={{width: 36, height: 36, borderRadius: 18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}><Icon d={ICONS.share} s={15}/></div>
          <div style={{width: 36, height: 36, borderRadius: 18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}><Icon d={ICONS.more}/></div>
        </div>
      </div>

      <div style={{padding: '6px 22px 14px'}}>
        <Eyebrow c={PAL.clayDk}>14 days away · May 12</Eyebrow>
        <Display size={26} accent="Birthday">Mira&rsquo;s First</Display>

        <div style={{display:'flex', alignItems:'center', gap: 10, marginTop: 14}}>
          <div style={{flex: 1, padding: '10px 12px', background: PAL.paper, borderRadius: 12, border: `1px solid ${PAL.line}`}}>
            <Eyebrow>Items</Eyebrow>
            <div style={{fontSize: 18, color: PAL.ink, fontWeight: 600, marginTop: 1}}>14</div>
          </div>
          <div style={{flex: 1, padding: '10px 12px', background: PAL.paper, borderRadius: 12, border: `1px solid ${PAL.line}`}}>
            <Eyebrow>Claimed</Eyebrow>
            <div style={{fontSize: 18, color: PAL.sageDk, fontWeight: 600, marginTop: 1}}>5</div>
          </div>
          <div style={{flex: 1.2, padding: '10px 12px', background: PAL.clay, borderRadius: 12}}>
            <div style={{fontSize: 10.5, color: 'rgba(255,255,255,0.75)', fontWeight: 600, letterSpacing: 1, textTransform:'uppercase'}}>Share</div>
            <div style={{fontSize: 13, color: '#fff', fontWeight: 600, 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: '10px 12px', background: PAL.paper, borderRadius: 14, marginBottom: 8, border: `1px solid ${PAL.line}`}}>
            <div style={{width: 56, height: 56, borderRadius: 11, background: it.tone, flexShrink: 0, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
              <div style={{width: 32, height: 32, borderRadius: 5, background: 'rgba(255,255,255,0.55)'}}/>
              {it.claimed && <div style={{position:'absolute', top: -4, right: -4, width: 20, height: 20, borderRadius: 10, background: PAL.sageDk, display:'flex', alignItems:'center', justifyContent:'center', border: `2px solid ${PAL.bg}`}}><Icon d={ICONS.check} c="#fff" s={11} sw={2.5}/></div>}
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <Eyebrow>{it.brand}</Eyebrow>
              <div style={{fontSize: 14, color: PAL.ink, fontWeight: 600, marginTop: 1}}>{it.name}</div>
              <div style={{display:'flex', alignItems:'center', gap: 8, marginTop: 3}}>
                <div style={{fontSize: 13.5, color: PAL.ink, fontWeight: 600}}>{it.price}</div>
                {it.claimed && <Eyebrow c={PAL.sageDk}>Claimed</Eyebrow>}
              </div>
            </div>
          </div>
        ))}
      </div>
      <TabBar active="home"/>
    </div>
  );
}

// ---------- 4. Item Detail ----------
function ItemDetail() {
  return (
    <div style={baseScreen}>
      <div style={{padding: '12px 18px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{width: 36, height: 36, borderRadius: 18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}><Icon d={ICONS.back}/></div>
        <div style={{width: 36, height: 36, borderRadius: 18, background: PAL.paper, display:'flex', alignItems:'center', justifyContent:'center', boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}><Icon d={ICONS.share} s={15}/></div>
      </div>

      <div style={{margin: '0 18px 14px', height: 230, borderRadius: 20, background: PAL.butter, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
        <div style={{width: 130, height: 130, borderRadius: 14, background: 'rgba(255,255,255,0.55)'}}/>
        <div style={{position:'absolute', top: 12, left: 12, padding: '5px 10px', background: PAL.paper, borderRadius: 10, fontSize: 10.5, fontWeight: 600, color: PAL.sageDk, display:'flex', alignItems:'center', gap: 5, letterSpacing: 0.4}}>
          <div style={{width: 6, height: 6, borderRadius: 3, background: PAL.sageDk}}/> AVAILABLE
        </div>
      </div>

      <div style={{padding: '0 22px', flex: 1}}>
        <Eyebrow>Lily &amp; River</Eyebrow>
        <div style={{fontFamily: FONT.sans, fontSize: 22, fontWeight: 600, color: PAL.ink, letterSpacing: -0.5, lineHeight: 1.2, marginTop: 4}}>
          Wooden Pikler <span style={{fontFamily: FONT.serif, fontStyle:'italic', fontWeight: 400, color: PAL.clay}}>climbing triangle</span>
        </div>
        <div style={{display:'flex', alignItems:'baseline', gap: 8, marginTop: 10}}>
          <div style={{fontSize: 24, fontWeight: 600, 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: 12, background: PAL.mint, border: `1px solid ${PAL.line}`}}>
            <Eyebrow c={PAL.sageDk}>Best price</Eyebrow>
            <div style={{fontSize: 13, fontWeight: 600, color: PAL.ink, marginTop: 2}}>Lily &amp; River</div>
          </div>
          <div style={{padding: '10px 12px', borderRadius: 12, background: PAL.bg2, border: `1px solid ${PAL.line}`}}>
            <Eyebrow>On list</Eyebrow>
            <div style={{fontSize: 13, fontWeight: 600, color: PAL.ink, marginTop: 2}}>Mira&rsquo;s Birthday</div>
          </div>
        </div>

        <div style={{marginTop: 14, fontSize: 13.5, color: PAL.inkSoft, lineHeight: 1.5}}>
          A heirloom-grade climbing toy in oiled birch. Folds flat for storage.
        </div>
      </div>

      <div style={{padding: '12px 18px 22px', display:'flex', gap: 10}}>
        <div style={{flex: 1, padding: '13px', borderRadius: 14, background: PAL.clay, textAlign:'center', color:'#fff', fontWeight: 600, fontSize: 14.5, boxShadow: '0 4px 12px rgba(201,122,110,0.35)'}}>Buy now · $148</div>
        <div style={{padding: '13px 16px', borderRadius: 14, background: PAL.paper, fontWeight: 600, fontSize: 13.5, display:'flex', alignItems:'center', gap: 6, boxShadow: SHADOW, border: `1px solid ${PAL.line}`}}>
          <Icon d={ICONS.gift} s={15}/> Group
        </div>
      </div>
    </div>
  );
}

// ---------- 5. Scanner (magic moment) ----------
function Scanner() {
  return (
    <div style={{...baseScreen, 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: '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.14)', backdropFilter:'blur(12px)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.back} c="#fff"/></div>
        <div style={{padding: '7px 14px', borderRadius: 18, background: 'rgba(255,255,255,0.14)', backdropFilter:'blur(12px)', fontSize: 11.5, fontWeight: 600, letterSpacing: 0.4}}>Point at a barcode</div>
        <div style={{width: 36, height: 36, borderRadius: 18, background: 'rgba(255,255,255,0.14)', backdropFilter:'blur(12px)', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={ICONS.flash} c="#fff" s={15}/></div>
      </div>

      <div style={{flex: 1, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', zIndex: 2}}>
        <div style={{width: 240, height: 240, position:'relative'}}>
          {[{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: 26, height: 26,
              top: c.t, left: c.l, right: c.r, bottom: c.b,
              borderTop: c.br[0]==='t' ? `2.5px solid ${PAL.butter}` : 'none',
              borderBottom: c.br[0]==='b' ? `2.5px solid ${PAL.butter}` : 'none',
              borderLeft: c.br[1]==='l' ? `2.5px solid ${PAL.butter}` : 'none',
              borderRight: c.br[1]==='r' ? `2.5px 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,
            }}/>
          ))}
          <div style={{position:'absolute', left: 8, right: 8, top: '50%', height: 1.5, background: `linear-gradient(90deg, transparent, ${PAL.butter}, transparent)`, boxShadow: `0 0 12px ${PAL.butter}`}}/>
          <div style={{position:'absolute', top: -54, left: 30, right: 30, padding: '10px 12px', borderRadius: 14, background: '#fff', display:'flex', alignItems:'center', gap: 10, boxShadow: '0 12px 30px rgba(0,0,0,0.35)'}}>
            <div style={{width: 36, height: 36, borderRadius: 8, background: PAL.butter}}/>
            <div style={{flex: 1, minWidth: 0}}>
              <Eyebrow c={PAL.muted}>Found</Eyebrow>
              <div style={{fontSize: 13.5, color: PAL.ink, fontWeight: 600, lineHeight: 1.1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', marginTop: 1}}>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>

      <div style={{padding: '0 22px 14px', textAlign:'center', position:'relative', zIndex: 2}}>
        <div style={{fontFamily: FONT.sans, fontSize: 20, fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.4}}>
          Got it. <span style={{fontFamily: FONT.serif, fontStyle:'italic', fontWeight: 400, color: PAL.butter}}>One less to remember.</span>
        </div>
      </div>

      <div style={{background: PAL.paper, borderTopLeftRadius: 22, borderTopRightRadius: 22, padding: '14px 20px 22px', position:'relative', zIndex: 2, color: PAL.ink}}>
        <div style={{width: 36, height: 4, borderRadius: 2, background: PAL.line, margin: '0 auto 12px'}}/>
        <Eyebrow>Save to</Eyebrow>
        <div style={{display:'flex', gap: 8, marginTop: 10, flexWrap:'wrap'}}>
          <div style={{padding: '8px 12px', borderRadius: 12, background: PAL.clay, color:'#fff', fontSize: 12.5, fontWeight: 600, display:'flex', alignItems:'center', gap: 6}}>
            <Icon d={ICONS.check} c="#fff" s={11} sw={2.5}/> Mira&rsquo;s Birthday
          </div>
          <div style={{padding: '8px 12px', borderRadius: 12, background: PAL.bg2, color: PAL.ink, fontSize: 12.5, fontWeight: 600}}>Things I Love</div>
          <div style={{padding: '8px 12px', borderRadius: 12, background: PAL.bg2, color: PAL.inkSoft, fontSize: 12.5, fontWeight: 600}}>+ New list</div>
        </div>
        <div style={{marginTop: 12, padding: '13px', borderRadius: 14, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 600, fontSize: 14.5}}>Save it</div>
      </div>
    </div>
  );
}

// ---------- 6. Claim moment ----------
function ClaimMoment() {
  return (
    <div style={{...baseScreen, background: `linear-gradient(180deg, ${PAL.blush} 0%, ${PAL.butter} 100%)`}}>
      {[
        {l:'12%',t:'14%',c:PAL.clay,s:5},
        {l:'82%',t:'12%',c:PAL.sageDk,s:4},
        {l:'22%',t:'34%',c:PAL.butter,s:4},
        {l:'72%',t:'48%',c:PAL.clay,s:6},
        {l:'10%',t:'58%',c:PAL.sage,s:5},
        {l:'86%',t:'68%',c:PAL.clay,s:4},
        {l:'40%',t:'8%',c:PAL.sageDk,s:3},
        {l:'58%',t:'26%',c:PAL.clayDk,s:4},
      ].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: 88, height: 88, borderRadius: 44, background: '#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow: '0 12px 28px rgba(201,122,110,0.35)', marginBottom: 22}}>
          <Icon d={ICONS.heart} c={PAL.clay} fill={PAL.clay} s={42} sw={0}/>
        </div>
        <Eyebrow c={PAL.clayDk}>Mira&rsquo;s First Birthday</Eyebrow>
        <div style={{fontFamily: FONT.sans, fontSize: 30, fontWeight: 600, lineHeight: 1.05, color: PAL.ink, letterSpacing: -1, marginTop: 8}}>
          Someone has<br/>
          <span style={{fontFamily: FONT.serif, fontStyle:'italic', fontWeight: 400, 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 this list just got claimed. We&rsquo;re keeping the surprise — you&rsquo;ll find out at the party.
        </div>
      </div>
      <div style={{padding: '0 22px 30px'}}>
        <div style={{padding: '14px', borderRadius: 14, background: PAL.ink, color:'#fff', textAlign:'center', fontWeight: 600, fontSize: 14.5}}>Got it. One less to remember.</div>
      </div>
    </div>
  );
}

// ---------- 7. Activity ----------
function 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={baseScreen}>
      <div style={{padding: '18px 22px 12px'}}>
        <Eyebrow>This week</Eyebrow>
        <Display size={26} accent="happening">What&rsquo;s</Display>
      </div>
      <div style={{flex: 1, padding: '4px 18px', overflow:'hidden'}}>
        {items.map((it, i) => (
          <div key={i} style={{display:'flex', gap: 12, padding: '12px', background: PAL.paper, borderRadius: 14, marginBottom: 8, border: `1px solid ${PAL.line}`, alignItems:'flex-start', position: 'relative'}}>
            {it.isNew && <div style={{position:'absolute', top: 12, right: 12, width: 7, height: 7, borderRadius: 4, background: PAL.clay}}/>}
            <div style={{width: 38, height: 38, borderRadius: 11, 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={17}/>}
              {it.kind === 'added' && <Icon d={ICONS.plus} c={it.accent} sw={2} s={17}/>}
              {it.kind === 'shared' && <Icon d={ICONS.share} c={it.accent} s={15}/>}
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontSize: 14, fontWeight: 600, color: PAL.ink, lineHeight: 1.3}}>{it.text}</div>
              <div style={{fontSize: 11.5, color: PAL.muted, marginTop: 3}}>{it.meta} · {it.time}</div>
            </div>
          </div>
        ))}
      </div>
      <TabBar active="activity"/>
    </div>
  );
}

// ---------- 8. Discover ----------
function Discover() {
  return (
    <div style={baseScreen}>
      <div style={{padding: '18px 22px 8px'}}>
        <Eyebrow>Curated for you</Eyebrow>
        <Display size={26} accent="ideas">Find</Display>
      </div>
      <div style={{padding: '6px 18px 12px'}}>
        <div style={{padding: '11px 13px', background: PAL.paper, borderRadius: 14, display:'flex', alignItems:'center', gap: 10, border: `1px solid ${PAL.line}`}}>
          <Icon d={ICONS.search} c={PAL.muted} s={17}/>
          <div style={{color: PAL.muted, fontSize: 13.5}}>Try &ldquo;new baby&rdquo; or &ldquo;under $50&rdquo;</div>
        </div>
      </div>

      <div style={{padding: '0 18px 10px', display:'flex', gap: 8}}>
        {[{i: ICONS.cake, t:'Birthdays'}, {i: ICONS.flower, t:'Mom'}, {i: ICONS.house, t:'Home'}, {i: ICONS.gift, t:'Baby'}].map((c, i) => (
          <div key={c.t} style={{padding: '7px 12px', borderRadius: 12, background: i===0 ? PAL.ink : PAL.paper, color: i===0 ? '#fff' : PAL.ink, fontSize: 12.5, fontWeight: 600, display:'flex', alignItems:'center', gap: 5, border: i===0 ? 'none' : `1px solid ${PAL.line}`}}>
            <Icon d={c.i} c={i===0 ? '#fff' : PAL.inkSoft} s={13} sw={1.7}/> {c.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 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: 14, background: PAL.paper, overflow:'hidden', border: `1px solid ${PAL.line}`}}>
              <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 11px 11px'}}>
                <Eyebrow>{p.brand}</Eyebrow>
                <div style={{fontSize: 13, fontWeight: 600, color: PAL.ink, lineHeight: 1.15, marginTop: 2}}>{p.title}</div>
                <div style={{fontSize: 12.5, fontWeight: 600, color: PAL.ink, marginTop: 4}}>{p.price}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <TabBar active="discover"/>
    </div>
  );
}

// ---------- 9. Shared list (buyer view) ----------
function Shared() {
  return (
    <div style={baseScreen}>
      <div style={{padding: '20px 22px 18px', background: `linear-gradient(160deg, ${PAL.blush}, ${PAL.butter})`, borderBottomLeftRadius: 22, borderBottomRightRadius: 22}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{display:'flex', alignItems:'center', gap: 8}}>
            <div style={{width: 30, height: 30, borderRadius: 15, background: PAL.clay, color: '#fff', fontFamily: FONT.serif, fontStyle:'italic', fontSize: 13, fontWeight: 500, display:'flex', alignItems:'center', justifyContent:'center'}}>S</div>
            <div style={{fontSize: 12.5, color: PAL.inkSoft, fontWeight: 500}}>From <b style={{color: PAL.ink}}>Sarah</b></div>
          </div>
          <div style={{padding: '4px 9px', borderRadius: 10, background: 'rgba(255,255,255,0.55)', fontSize: 10, fontWeight: 700, color: PAL.clayDk, letterSpacing: 0.6, display:'flex', alignItems:'center', gap: 4}}>
            <Icon d={ICONS.lock} c={PAL.clayDk} s={10} sw={2}/> PRIVATE
          </div>
        </div>
        <div style={{fontFamily: FONT.sans, fontSize: 26, fontWeight: 600, color: PAL.ink, marginTop: 18, letterSpacing: -0.5, lineHeight: 1.1}}>
          Mira is turning <span style={{fontFamily: FONT.serif, fontStyle:'italic', fontWeight: 400, color: PAL.clay}}>one</span>
        </div>
        <div style={{display:'flex', gap: 16, marginTop: 14}}>
          {[{n:14, l:'days'}, {n:9, l:'left'}, {n:5, l:'claimed'}].map((s, i, a) => (
            <React.Fragment key={s.l}>
              <div>
                <div style={{fontSize: 20, fontWeight: 600, color: PAL.ink, letterSpacing: -0.3}}>{s.n}</div>
                <Eyebrow>{s.l}</Eyebrow>
              </div>
              {i < a.length - 1 && <div style={{width: 1, background: 'rgba(0,0,0,0.1)'}}/>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div style={{flex: 1, padding: '12px 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 baby towel', brand: 'Coyuchi', price: '$68', tone: PAL.bg2, claimed: true},
        ].map((it, i) => (
          <div key={i} style={{display:'flex', gap: 11, padding: '11px', background: PAL.paper, borderRadius: 14, marginBottom: 8, border: `1px solid ${PAL.line}`, opacity: it.claimed ? 0.55 : 1}}>
            <div style={{width: 54, height: 54, borderRadius: 11, background: it.tone, flexShrink: 0, display:'flex', alignItems:'center', justifyContent:'center'}}>
              <div style={{width: 30, height: 30, borderRadius: 5, background: 'rgba(255,255,255,0.55)'}}/>
            </div>
            <div style={{flex: 1, minWidth: 0}}>
              <Eyebrow>{it.brand}</Eyebrow>
              <div style={{fontSize: 13.5, fontWeight: 600, color: PAL.ink, marginTop: 1}}>{it.name}</div>
              <div style={{fontSize: 12.5, fontWeight: 600, color: PAL.ink, marginTop: 3}}>{it.price}</div>
            </div>
            <div style={{display:'flex', alignItems:'center'}}>
              {it.claimed ? (
                <div style={{padding: '6px 10px', borderRadius: 10, background: PAL.bg2, fontSize: 10.5, fontWeight: 600, color: PAL.muted, letterSpacing: 0.4}}>TAKEN</div>
              ) : (
                <div style={{padding: '7px 12px', borderRadius: 10, background: PAL.ink, color:'#fff', fontSize: 12, fontWeight: 600}}>I&rsquo;ll get it</div>
              )}
            </div>
          </div>
        ))}
      </div>
      <div style={{padding: '8px 18px 22px', textAlign:'center', fontSize: 11, color: PAL.muted, fontWeight: 500, fontFamily: FONT.serif, fontStyle:'italic'}}>
        Sarah won&rsquo;t see who claims what — surprise stays a surprise
      </div>
    </div>
  );
}

// ---------- 10. Profile ----------
function Profile() {
  return (
    <div style={baseScreen}>
      <div style={{padding: '20px 22px 12px', textAlign:'center'}}>
        <div style={{width: 80, height: 80, borderRadius: 40, background: `linear-gradient(135deg, ${PAL.blush}, ${PAL.clay})`, margin: '4px auto 12px', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontFamily: FONT.serif, fontStyle:'italic', fontSize: 30, fontWeight: 500}}>S</div>
        <div style={{fontFamily: FONT.sans, fontSize: 20, fontWeight: 600, color: PAL.ink, letterSpacing: -0.3}}>Sarah Brennan</div>
        <div style={{fontSize: 12.5, 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: '12px', background: PAL.paper, borderRadius: 14, textAlign:'center', border: `1px solid ${PAL.line}`}}>
            <div style={{fontFamily: FONT.serif, fontStyle:'italic', fontSize: 22, fontWeight: 500, color: s.c}}>{s.n}</div>
            <Eyebrow>{s.l}</Eyebrow>
          </div>
        ))}
      </div>
      <div style={{flex: 1, padding: '0 18px'}}>
        <div style={{background: PAL.paper, borderRadius: 14, border: `1px solid ${PAL.line}`}}>
          {[{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: '13px 16px', borderBottom: i < a.length - 1 ? `1px solid ${PAL.line}` : 'none'}}>
              <div style={{width: 32, height: 32, borderRadius: 10, background: PAL.bg2, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon d={r.i} c={PAL.clay} s={16}/></div>
              <div style={{flex: 1, fontSize: 13.5, fontWeight: 600, color: PAL.ink}}>{r.t}</div>
              <Icon d="m9 6 6 6-6 6" c={PAL.muted} s={14}/>
            </div>
          ))}
        </div>
      </div>
      <TabBar active="me"/>
    </div>
  );
}

Object.assign(window, {
  P_Home: Home, P_ListDetail: ListDetail, P_ItemDetail: ItemDetail,
  P_Scanner: Scanner, P_ClaimMoment: ClaimMoment, P_Activity: Activity,
  P_Discover: Discover, P_Shared: Shared, P_Profile: Profile, P_Onboarding: Onboarding,
  P_PAL: PAL, P_FONT: FONT,
});