/* ============================================================================
   SWISS SCREENS — E-COMMERCE (MONOFORM)
   5 parametric screens rendered at 3 breakpoints (d desktop / t tablet / p phone-web).
   Composes ONLY window.SwissUI components → same kit as components/Components.html.
   window.SwissEcom = { Landing, Shop, Product, Bag, Checkout }
   ============================================================================ */
(function () {
  const S = window.SwissUI, e = S.e;
  const { Announce, WebNav, Logo, Btn, ProductCard, TagChips, Sizes, Stepper, Price, Footer, PRODUCTS, U, money, Plate } = S;

  const root = { height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden', background: '#fff', color: 'var(--ink)' };
  const cols = (bp) => bp === 'd' ? 4 : bp === 't' ? 3 : 2;
  const M = (bp) => bp === 'p' ? 20 : bp === 't' ? 32 : 48;
  const H1 = (bp) => bp === 'd' ? 88 : bp === 't' ? 60 : 44;
  const hair = (st) => e('div', { className: 'hair', style: st });

  /* consistent page header (matches the Shop "Dresses" title placement) */
  const head = (bp, pad, title, meta, right) => e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `16px ${pad}px`, borderBottom: '1px solid var(--ink)' } },
    e('div', { style: { display: 'flex', alignItems: 'baseline', gap: 14 } },
      e('h2', { style: { fontSize: bp === 'p' ? 22 : 30, fontWeight: 700, letterSpacing: '-.02em', margin: 0 } }, title),
      meta ? e('span', { className: 'eyebrow', style: { color: 'var(--muted)' } }, meta) : null),
    right || null);

  const HeroText = (bp) => e('div', null,
    e('span', { className: 'eyebrow' }, 'Autumn / Winter 2026 ', e('span', { style: { color: 'var(--accent)' } }, '—'), ' Issue 01'),
    e('h1', { style: { fontSize: H1(bp), lineHeight: .92, letterSpacing: '-.03em', fontWeight: 700, margin: '22px 0' } },
      'The art of', e('br'), 'essential ', e('span', { style: { color: 'var(--accent)' } }, 'dressing.')),
    e('p', { style: { fontSize: bp === 'p' ? 14 : 16, color: '#444', maxWidth: 360, margin: '0 0 24px' } },
      'A wardrobe reduced to its essential forms — built to last decades, not seasons.'),
    e('div', { style: { display: 'flex', gap: 12 } }, e(Btn, null, 'Shop AW26'), e(Btn, { variant: 'ghost' }, 'Lookbook ↗')));

  /* Landing mirrors the MONOFORM homepage hero (full-frame, above-the-fold). */
  function Landing(bp) {
    const pad = M(bp);
    const isP = bp === 'p';
    const h1size = bp === 'd' ? 96 : bp === 't' ? 64 : 44;
    const nav = isP
      ? e(WebNav, { bp: 'p', pad, active: 'Home' })
      : e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `20px ${pad}px`, borderBottom: '1px solid var(--ink)' } },
          e('span', { style: { fontWeight: 700, fontSize: 19, letterSpacing: '.04em' } }, 'MONOFORM'),
          e('div', { style: { display: 'flex', gap: 26, fontSize: 13, letterSpacing: '.04em', fontWeight: 500 } },
            ['Collections', 'Editorial', 'Journal', 'Stockists'].map((x) => e('span', { key: x }, x))),
          e('div', { style: { display: 'flex', gap: 18, fontSize: 13 } }, e('span', null, 'Search'), e('span', null, 'Bag (0)')));
    const left = e('div', { style: { position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: `0 ${pad}px`, flex: 1, minWidth: 0 } },
      e('span', { className: 'eyebrow' }, 'Autumn / Winter 2026 ', e('span', { style: { color: 'var(--accent)' } }, '—'), ' Collection 01'),
      e('h1', { style: { fontSize: h1size, lineHeight: .9, letterSpacing: '-.035em', fontWeight: 700, textTransform: 'uppercase', margin: '26px 0' } }, 'The Art', e('br'), 'of Essential', e('br'), 'Dressing'),
      e('p', { style: { maxWidth: '38ch', color: '#3a3a38', fontSize: isP ? 14 : 17, lineHeight: 1.55, margin: '0 0 30px' } }, 'A wardrobe reduced to its essential forms — considered tailoring, honest material, and the quiet confidence of permanence over season.'),
      e('div', { style: { display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' } },
        e('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 13, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 600, paddingBottom: 8, borderBottom: '1px solid var(--ink)' } }, 'Discover the collection →'),
        e('span', { style: { fontSize: 12, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--muted)' } }, 'Est. 2026 · Milan')),
      isP ? null : e('div', { style: { position: 'absolute', left: pad, bottom: 22, display: 'flex', alignItems: 'center', gap: 12, fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--muted)' } }, e('span', { style: { width: 1, height: 40, background: 'var(--ink)', display: 'block' } }), 'Scroll'));
    const img = e('div', { style: { position: 'relative', overflow: 'hidden', background: 'var(--surface)' } },
      e('img', { src: U('1490481651871-ab68de25d43d', isP ? 700 : 1100), alt: '', style: { width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1) contrast(1.04)' } }),
      e('div', { style: { position: 'absolute', left: 20, bottom: 18, color: '#fff', mixBlendMode: 'difference', fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase' } }, 'Look 01 — The Silk Slip Dress'));
    return e('div', { style: root },
      nav,
      isP
        ? e('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } }, e('div', { style: { flex: 1, display: 'flex', padding: '18px 0' } }, left), e('div', { style: { height: 280, borderTop: '1px solid var(--ink)' } }, img))
        : e('div', { style: { flex: 1, display: 'grid', gridTemplateColumns: '1.18fr .82fr', minHeight: 0 } }, e('div', { style: { borderRight: '1px solid var(--ink)', display: 'flex' } }, left), img));
  }

  function Shop(bp) {
    const pad = M(bp);
    const n = bp === 'd' ? 8 : bp === 't' ? 6 : 4;
    const list = PRODUCTS.concat(PRODUCTS).slice(0, n);
    return e('div', { style: root },
      e(WebNav, { bp: bp === 'p' ? 'p' : 'd', pad, active: 'Home' }),
      e('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `16px ${pad}px`, borderBottom: '1px solid var(--ink)' } },
        e('div', { style: { display: 'flex', alignItems: 'baseline', gap: 14 } },
          e('h2', { style: { fontSize: bp === 'p' ? 22 : 30, fontWeight: 700, letterSpacing: '-.02em', margin: 0 } }, 'Dresses'),
          e('span', { className: 'eyebrow', style: { color: 'var(--muted)' } }, n + ' styles')),
        bp !== 'p' ? e('div', { style: { display: 'flex', gap: 14, alignItems: 'center' } },
          e(TagChips, { items: ['All', 'Day', 'Evening', 'Knitwear'], active: 0 }),
          e('span', { className: 'sel' }, 'Newest ', e('span', { className: 'chev' }, '▾'))) : e('span', { className: 'sel' }, 'Filter & Sort ', e('span', { className: 'chev' }, '▾'))),
      e('div', { style: { flex: 1, overflow: 'hidden', padding: `${bp === 'p' ? 16 : 28}px ${pad}px` } },
        e('div', { style: { display: 'grid', gridTemplateColumns: `repeat(${cols(bp)},1fr)`, gap: bp === 'p' ? 14 : 26 } },
          list.map((p, i) => e(ProductCard, { key: i, p, w: 500 })))),
      e('div', { style: { display: 'flex', justifyContent: 'center', padding: `0 0 ${bp === 'p' ? 18 : 30}px` } },
        e('div', { className: 'pager' }, e('span', { className: 'dis' }, '←'), e('span', { className: 'on' }, '1'), e('span', null, '2'), e('span', null, '3'), e('span', null, '→'))));
  }

  function Product(bp) {
    const pad = M(bp), p = PRODUCTS[0];
    const detail = e('div', { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: bp === 'p' ? `18px ${pad}px` : `0 ${pad}px`, gap: 0 } },
      e('div', { className: 'crumb', style: { marginBottom: 18 } }, e('span', null, 'Shop'), e('span', { className: 'sep' }, '/'), e('span', null, 'Dresses'), e('span', { className: 'sep' }, '/'), e('span', { className: 'here' }, 'Silk Slip Dress')),
      e('h1', { style: { fontSize: bp === 'p' ? 28 : 44, fontWeight: 700, letterSpacing: '-.02em', margin: 0 } }, p.nm),
      e('div', { style: { fontSize: 13, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.06em', margin: '8px 0 18px' } }, p.cat + ' · ' + p.sub),
      e('div', { style: { fontSize: 24, fontWeight: 700, color: 'var(--accent)', marginBottom: 22 } }, money(p.price)),
      e('div', { style: { marginBottom: 14 } }, e('span', { className: 'eyebrow', style: { display: 'block', marginBottom: 10 } }, 'Size'), e(Sizes, { off: ['XS', 'XL'] })),
      e('div', { style: { display: 'flex', gap: 12, marginBottom: 22 } }, e(Stepper, null), e(Btn, { style: { flex: 1, justifyContent: 'center' } }, 'Add to bag')),
      e('div', { className: 'acc' },
        e('div', { className: 'it' }, e('div', { className: 'hd' }, 'Composition & care ', e('span', { className: 'pm' }, '−')), e('div', { className: 'bd' }, '100% pressed virgin wool. Dry clean only. Made in Portugal.')),
        e('div', { className: 'it' }, e('div', { className: 'hd' }, 'Delivery & returns ', e('span', { className: 'pm' }, '+')))));
    return e('div', { style: root },
      e(WebNav, { bp: bp === 'p' ? 'p' : 'd', pad, active: 'Home' }),
      bp === 'p'
        ? e('div', { style: { flex: 1, overflow: 'hidden' } }, e('div', { style: { height: 360 } }, e(Plate, { id: p.ph, w: 700 })), detail)
        : e('div', { style: { display: 'grid', gridTemplateColumns: '1.1fr 1fr', flex: 1, minHeight: 0 } },
            e('div', { style: { borderRight: '1px solid var(--ink)', overflow: 'hidden' } }, e(Plate, { id: p.ph, w: 1000 })), detail));
  }

  function summary(bp) {
    return e('div', { style: { padding: bp === 'p' ? '18px 20px' : '0 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center', background: 'var(--paper)', height: '100%' } },
      e('span', { className: 'eyebrow', style: { marginBottom: 18, display: 'block' } }, 'Order summary'),
      [['Subtotal', '£770'], ['Shipping', 'Free'], ['Tax', '£154']].map(([k, v]) =>
        e('div', { key: k, style: { display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid var(--hair)', fontSize: 15 } }, e('span', { className: 'muted' }, k), e('span', { className: 'tnum' }, v))),
      e('div', { style: { display: 'flex', justifyContent: 'space-between', padding: '18px 0 22px', fontSize: 20, fontWeight: 700 } }, e('span', null, 'Total'), e('span', { className: 'tnum', style: { color: 'var(--accent)' } }, '£924')),
      e(Btn, { style: { width: '100%', justifyContent: 'center' } }, 'Proceed to checkout →'));
  }

  function Bag(bp) {
    const pad = M(bp);
    const lines = [PRODUCTS[0], PRODUCTS[3]];
    const list = e('div', { style: { padding: `8px ${pad}px` } },
      e('div', { style: { marginTop: 8 } },
        lines.map((p, i) => e('div', { key: i, className: 'cartline' },
          e('div', { className: 'th' }, e('img', { src: U(p.ph, 200), alt: '' })),
          e('div', { className: 'nm' }, p.nm, e('small', null, p.sub + ' · M · Qty 1')),
          e('div', { className: 'pr', style: { color: 'var(--ink)' } }, money(p.price))))));
    return e('div', { style: root },
      e(WebNav, { bp: bp === 'p' ? 'p' : 'd', pad, active: 'Home' }),
      head(bp, pad, 'Your bag', '2 items'),
      bp === 'p'
        ? e('div', { style: { flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' } }, list, e('div', { style: { flex: 1, borderTop: '1px solid var(--ink)', minHeight: 0 } }, summary(bp)))
        : e('div', { style: { display: 'grid', gridTemplateColumns: '1.5fr 1fr', flex: 1, minHeight: 0 } }, e('div', { style: { borderRight: '1px solid var(--ink)' } }, list), summary(bp)));
  }

  function Checkout(bp) {
    const pad = M(bp);
    const field = (ph) => e('div', { style: { borderBottom: '1px solid var(--ink)', marginBottom: 6 } }, e('input', { placeholder: ph, readOnly: true, style: { width: '100%', border: 0, background: 'transparent', padding: '12px 2px', fontFamily: 'inherit', fontSize: 14, outline: 'none', color: 'var(--ink)' } }));
    const form = e('div', { style: { padding: `16px ${pad}px` } },
      e('span', { className: 'eyebrow', style: { display: 'block', marginBottom: 12 } }, '01 — Contact'),
      field('name@studio.com'),
      e('span', { className: 'eyebrow', style: { display: 'block', margin: '18px 0 12px' } }, '02 — Shipping'),
      e('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } }, field('First name'), field('Last name')),
      field('Address'),
      e('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } }, field('City'), field('Postcode')),
      e('span', { className: 'eyebrow', style: { display: 'block', margin: '18px 0 12px' } }, '03 — Delivery'),
      e('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
        e('span', { className: 'opt' }, e('span', { className: 'rad on' }), ' Standard — Free (3–5 days)'),
        e('span', { className: 'opt' }, e('span', { className: 'rad' }), ' Express — £12 (next day)')));
    return e('div', { style: root },
      e(WebNav, { bp: bp === 'p' ? 'p' : 'd', pad, active: 'Home' }),
      head(bp, pad, 'Checkout', 'Step 1 of 2'),
      bp === 'p'
        ? e('div', { style: { flex: 1, overflow: 'hidden' } }, form, e('div', { style: { padding: `0 ${pad}px 16px` } }, e(Btn, { style: { width: '100%', justifyContent: 'center' } }, 'Pay £924')))
        : e('div', { style: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', flex: 1, minHeight: 0 } }, e('div', { style: { borderRight: '1px solid var(--ink)' } }, form), summary(bp)));
  }

  window.SwissEcom = { Landing, Shop, Product, Bag, Checkout };
})();