/* ============================================================================
   SWISS SCREENS — MOBILE APP (MONOFORM)
   Native app patterns — distinct from responsive web: status bar, large titles,
   segmented control, horizontal rails, bottom tab bar, sticky action bars.
   window.SwissApp = { Home, Shop, Product, Bag, You }  (390×844)
   ============================================================================ */
(function () {
  const S = window.SwissUI, e = S.e;
  const { StatusBar, AppBar, TabBar, Logo, Btn, Sizes, PRODUCTS, U, money } = S;

  const root = { height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', background: '#fff', color: 'var(--ink)' };
  const scroll = { flex: 1, overflow: 'hidden' };
  const hair = (st) => e('div', { className: 'hair', style: st });

  const Seg = ({ items, active = 0 }) =>
    e('div', { style: { display: 'flex', borderBottom: '1px solid var(--ink)' } },
      items.map((t, i) => e('div', { key: t, style: { flex: 1, textAlign: 'center', padding: '13px 0', fontSize: 12, fontWeight: 600, letterSpacing: '.04em', color: i === active ? 'var(--ink)' : 'var(--muted)', borderBottom: i === active ? '2px solid var(--accent)' : '2px solid transparent' } }, t)));

  const railCard = (p) => e('div', { key: p.id, style: { width: 150, flex: '0 0 150px' } },
    e('div', { style: { height: 188, overflow: 'hidden', background: 'var(--surface)' } }, e('img', { src: U(p.ph, 400), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.04)' } })),
    e('div', { style: { fontSize: 13, fontWeight: 600, marginTop: 8 } }, p.nm),
    e('div', { style: { fontSize: 12, color: 'var(--muted)', fontVariantNumeric: 'tabular-nums' } }, money(p.price)));

  const listRow = (p, i) => e('div', { key: i, style: { display: 'flex', gap: 12, alignItems: 'center', padding: '12px 18px', borderBottom: '1px solid var(--hair)' } },
    e('span', { style: { color: 'var(--accent)', fontSize: 12, fontWeight: 600, fontVariantNumeric: 'tabular-nums', width: 18 } }, p.id),
    e('div', { style: { width: 48, height: 60, overflow: 'hidden', background: 'var(--surface)' } }, e('img', { src: U(p.ph, 160), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1)' } })),
    e('div', { style: { flex: 1 } }, e('div', { style: { fontWeight: 600, fontSize: 14 } }, p.nm), e('div', { style: { fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.05em' } }, p.cat)),
    e('span', { style: { fontWeight: 600, fontSize: 14, fontVariantNumeric: 'tabular-nums' } }, money(p.price)));

  function Home() {
    return e('div', { style: root },
      e(StatusBar, null),
      e(AppBar, { title: 'MONOFORM.', right: 'Bag' }),
      e('div', { style: scroll },
        e('div', { style: { position: 'relative', height: 300, overflow: 'hidden', borderBottom: '1px solid var(--ink)' } },
          e('img', { src: U(PRODUCTS[0].ph, 800), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.05)' } }),
          e('div', { style: { position: 'absolute', left: 18, bottom: 18, color: '#fff', mixBlendMode: 'difference' } },
            e('div', { style: { fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase' } }, 'Autumn / Winter 2026'),
            e('div', { style: { fontSize: 34, fontWeight: 700, letterSpacing: '-.02em', lineHeight: .95, marginTop: 6 } }, 'The', e('br'), 'Edit'))),
        e('div', { style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '16px 18px 10px' } },
          e('span', { className: 'eyebrow' }, 'New in'), e('span', { className: 'eyebrow', style: { color: 'var(--muted)' } }, 'See all')),
        e('div', { style: { display: 'flex', gap: 14, padding: '0 18px 16px', overflow: 'hidden' } }, PRODUCTS.slice(0, 3).map(railCard)),
        e('div', { style: { padding: '6px 18px 8px', borderTop: '1px solid var(--ink)' } }, e('span', { className: 'eyebrow' }, 'The index')),
        PRODUCTS.slice(0, 3).map(listRow)),
      e(TabBar, { active: 'Shop' }));
  }

  function Shop() {
    return e('div', { style: root },
      e(StatusBar, null),
      e(AppBar, { title: 'Shop', right: 'Filter' }),
      e(Seg, { items: ['All', 'Day', 'Evening', 'Knit'], active: 0 }),
      e('div', { style: scroll },
        e('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 } },
          PRODUCTS.slice(0, 6).map((p, i) => e('div', { key: i, style: { borderRight: i % 2 === 0 ? '1px solid var(--hair)' : 'none', borderBottom: '1px solid var(--hair)' } },
            e('div', { style: { position: 'relative', height: 210, overflow: 'hidden', background: 'var(--surface)' } },
              p.flag ? e('span', { style: { position: 'absolute', top: 0, left: 0, zIndex: 2, background: p.flag === 'Sale' ? 'var(--ink)' : 'var(--accent)', color: '#fff', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', fontWeight: 600, padding: '5px 8px' } }, p.flag) : null,
              e('img', { src: U(p.ph, 400), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.04)' } })),
            e('div', { style: { padding: '10px 12px' } }, e('div', { style: { fontSize: 13, fontWeight: 600 } }, p.nm), e('div', { style: { fontSize: 12, color: 'var(--muted)', fontVariantNumeric: 'tabular-nums', marginTop: 2 } }, money(p.price))))))),
      e(TabBar, { active: 'Shop' }));
  }

  function Product() {
    const p = PRODUCTS[0];
    return e('div', { style: root },
      e(StatusBar, null),
      e(AppBar, { title: 'Silk Slip Dress', left: '←', right: '♥' }),
      e('div', { style: scroll },
        e('div', { style: { height: 380, overflow: 'hidden', background: 'var(--surface)', borderBottom: '1px solid var(--ink)' } }, e('img', { src: U(p.ph, 700), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.05)' } })),
        e('div', { style: { padding: '16px 18px' } },
          e('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' } },
            e('span', { style: { fontSize: 22, fontWeight: 700, letterSpacing: '-.01em' } }, p.nm),
            e('span', { style: { fontSize: 18, fontWeight: 700, color: 'var(--accent)', fontVariantNumeric: 'tabular-nums' } }, money(p.price))),
          e('div', { style: { fontSize: 12, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.06em', margin: '6px 0 16px' } }, p.cat + ' · ' + p.sub),
          e('span', { className: 'eyebrow', style: { display: 'block', marginBottom: 10 } }, 'Select size'),
          e(Sizes, { off: ['XS', 'XL'] }))),
      e('div', { style: { padding: '12px 18px', borderTop: '1px solid var(--ink)', display: 'flex', gap: 12 } },
        e(Btn, { style: { flex: 1, justifyContent: 'center' } }, 'Add to bag — ' + money(p.price))));
  }

  function Bag() {
    const lines = [PRODUCTS[0], PRODUCTS[3]];
    return e('div', { style: root },
      e(StatusBar, null),
      e(AppBar, { title: 'Bag', left: '←' }),
      e('div', { style: scroll },
        lines.map((p, i) => e('div', { key: i, style: { display: 'flex', gap: 12, padding: '14px 18px', borderBottom: '1px solid var(--hair)' } },
          e('div', { style: { width: 64, height: 80, overflow: 'hidden', background: 'var(--surface)' } }, e('img', { src: U(p.ph, 200), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1)' } })),
          e('div', { style: { flex: 1 } }, e('div', { style: { fontWeight: 600 } }, p.nm), e('div', { style: { fontSize: 12, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.05em', marginTop: 4 } }, p.sub + ' · M'), e('div', { className: 'stepper', style: { marginTop: 10 } }, e('button', null, '−'), e('span', { className: 'q' }, '1'), e('button', null, '+'))),
          e('span', { style: { fontWeight: 600, fontVariantNumeric: 'tabular-nums' } }, money(p.price)))),
        e('div', { style: { padding: '16px 18px' } },
          [['Subtotal', '£850'], ['Shipping', 'Free']].map(([k, v]) => e('div', { key: k, style: { display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 14 } }, e('span', { className: 'muted' }, k), e('span', { className: 'tnum' }, v))),
          e('div', { style: { display: 'flex', justifyContent: 'space-between', padding: '10px 0 0', fontSize: 18, fontWeight: 700 } }, e('span', null, 'Total'), e('span', { className: 'tnum', style: { color: 'var(--accent)' } }, '£850')))),
      e('div', { style: { padding: '12px 18px', borderTop: '1px solid var(--ink)' } }, e(Btn, { style: { width: '100%', justifyContent: 'center' } }, 'Checkout →')),
      e(TabBar, { active: 'Bag' }));
  }

  function You() {
    const rows = ['Orders', 'Wishlist', 'Addresses', 'Payment', 'Settings'];
    return e('div', { style: root },
      e(StatusBar, null),
      e(AppBar, { title: 'You' }),
      e('div', { style: scroll },
        e('div', { style: { padding: '18px', display: 'flex', alignItems: 'center', gap: 14, borderBottom: '1px solid var(--ink)' } },
          e('div', { style: { width: 52, height: 52, background: 'var(--ink)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700 } }, 'AM'),
          e('div', null, e('div', { style: { fontWeight: 600, fontSize: 16 } }, 'Anna Müller'), e('div', { style: { fontSize: 12, color: 'var(--muted)' } }, 'Member since 2026'))),
        rows.map((r, i) => e('div', { key: r, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 18px', borderBottom: '1px solid var(--hair)' } },
          e('span', { style: { display: 'flex', gap: 12 } }, e('span', { style: { color: 'var(--accent)', fontVariantNumeric: 'tabular-nums', fontSize: 12, fontWeight: 600 } }, '0' + (i + 1)), e('span', { style: { fontWeight: 500 } }, r)),
          e('span', { style: { color: 'var(--muted)' } }, '→'))),
        e('div', { style: { padding: '14px 18px' } }, e('span', { className: 'eyebrow' }, 'Recently saved')),
        e('div', { style: { display: 'flex', gap: 12, padding: '0 18px', overflow: 'hidden' } }, PRODUCTS.slice(1, 4).map(railCard))),
      e(TabBar, { active: 'You' }));
  }

  window.SwissApp = { Home, Shop, Product, Bag, You };
})();