/* StorefrontBg — a static German shoe-shop storefront used as the live-site
   backdrop behind the preview widget in the playgrounds. Not a DS component
   (no .d.ts); exposed on window like the playground drivers. Visual language
   transcribed from the attached "[inspire master] previewbar" prototype (a
   German Schuh-Shop): red section headings #c44f4f, cool panels #eef3f7, teal
   CTAs #068099, muted divider #909498, Outfit throughout. Brand/product names
   are invented (no trademarked logo). Rendered pointer-events:none so the
   widget stays draggable over it. */
(function () {
  const RED = '#c44f4f', TEAL = '#068099', INK = '#262729', MUT = '#909498', COOL = '#eef3f7', LINE = '#e6eaee';
  const FONT = "var(--font-family-base, 'Outfit', sans-serif)";

  const Ic = {
    search: 'M11 4a7 7 0 105.2 11.7l3.5 3.6 1.4-1.4-3.6-3.5A7 7 0 0011 4zm0 2a5 5 0 110 10 5 5 0 010-10z',
    heart: 'M12 21s-7.5-4.6-10-9.3C.6 8.9 2 6 5 6c2 0 3.2 1.2 4 2.3C9.8 7.2 11 6 13 6c3 0 4.4 2.9 3 5.7C19.5 16.4 12 21 12 21z',
    cart: 'M7 4h-.7L6 2H2v2h2.3l1.5 9.3A2 2 0 007.8 15H18v-2H8.1l-.3-2H19a2 2 0 002-1.7L22 5H6.2M9 18a1.5 1.5 0 100 3 1.5 1.5 0 000-3m8 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3',
    user: 'M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z',
    burger: 'M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z',
    img: 'M4 5h16a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1zm1 2v7.6l3.5-3.5 3 3 4-4L19 15V7H5zm3 1.5A1.5 1.5 0 116.5 10 1.5 1.5 0 018 8.5z',
  };
  function Svg({ d, size = 22, color = INK, sw }) {
    return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: sw ? 'none' : color, stroke: sw ? color : 'none', strokeWidth: sw || 0, strokeLinecap: 'round', strokeLinejoin: 'round', style: { display: 'block', flexShrink: 0 } }, React.createElement('path', { d }));
  }
  const eur = (n) => n.toLocaleString('de-DE', { minimumFractionDigits: 2 }) + ' €';

  const PRODUCTS = [
    { brand: 'Aerostep', title: 'Damen Sneaker AirComfort Low', price: 89.95, uvp: 119.95, sale: '-25%' },
    { brand: 'Trailfox', title: 'Wander-Halbschuh GTX Herren', price: 129.95 },
    { brand: 'Comfortina', title: 'Ballerina Soft Leder', price: 59.95, uvp: 79.95, sale: '-25%' },
    { brand: 'Nordweg', title: 'Winterstiefel Warmline', price: 149.0 },
    { brand: 'Laufwerk', title: 'Running Pro Lightweight', price: 109.95 },
    { brand: 'Strandgut', title: 'Sommer-Sandale Riemchen', price: 44.95, uvp: 54.95, sale: '-18%' },
    { brand: 'Citywalk', title: 'Chelsea Boot Chelsea', price: 99.95 },
    { brand: 'Kinderfuß', title: 'Kinder Klett-Sneaker', price: 39.95 },
  ];

  function ImgBox({ h, sale }) {
    return React.createElement('div', { style: { position: 'relative', height: h, background: 'linear-gradient(135deg,#f3f5f8,#e7ebf0)', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
      sale && React.createElement('span', { style: { position: 'absolute', left: 8, top: 8, background: RED, color: '#fff', fontSize: 12, fontWeight: 600, padding: '2px 8px', borderRadius: 4 } }, sale),
      React.createElement(Svg, { d: Ic.img, size: 40, color: '#c4ccd6' })
    );
  }

  function Card({ p, variant }) {
    const mob = variant === 'mob';
    return React.createElement('div', { style: { border: '1px solid ' + LINE, borderRadius: 8, overflow: 'hidden', background: '#fff', display: 'flex', flexDirection: 'column' } },
      React.createElement(ImgBox, { h: mob ? 120 : 168, sale: p.sale }),
      React.createElement('div', { style: { padding: mob ? 10 : 12, display: 'flex', flexDirection: 'column', gap: mob ? 4 : 6, flexGrow: 1 } },
        React.createElement('span', { style: { fontSize: 12, color: MUT } }, p.brand),
        React.createElement('span', { style: { fontSize: mob ? 13 : 14, lineHeight: '19px', color: INK, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, p.title),
        React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 'auto' } },
          React.createElement('span', { style: { fontSize: mob ? 15 : 18, fontWeight: 700, color: TEAL } }, eur(p.price)),
          p.uvp && React.createElement('span', { style: { fontSize: 13, color: MUT, textDecoration: 'line-through' } }, eur(p.uvp))
        ),
        mob
          ? React.createElement('div', { style: { marginTop: 6, height: 36, background: TEAL, color: '#fff', borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, fontWeight: 600 } }, React.createElement(Svg, { d: Ic.cart, size: 16, color: '#fff' }), 'Kaufen')
          : React.createElement('div', { style: { marginTop: 6, height: 40, background: TEAL, color: '#fff', borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: 14, fontWeight: 600 } }, React.createElement(Svg, { d: Ic.cart, size: 18, color: '#fff' }), 'In den Warenkorb')
      )
    );
  }

  function Logo({ size }) {
    return React.createElement('div', { style: { fontFamily: FONT, fontWeight: 700, fontSize: size, letterSpacing: '.02em', color: RED, whiteSpace: 'nowrap' } }, 'LAUFWERK');
  }

  function Web() {
    return React.createElement(React.Fragment, null,
      React.createElement('div', { style: { height: 30, background: INK, color: '#fff', fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, flexShrink: 0 } },
        React.createElement('span', null, 'Kostenloser Versand ab 50 €'), React.createElement('span', { style: { opacity: .5 } }, '·'), React.createElement('span', null, 'Kauf auf Rechnung'), React.createElement('span', { style: { opacity: .5 } }, '·'), React.createElement('span', null, '30 Tage Rückgabe')
      ),
      React.createElement('div', { style: { height: 74, padding: '0 32px', display: 'flex', alignItems: 'center', gap: 28, background: '#fff', borderBottom: '1px solid ' + COOL, flexShrink: 0 } },
        React.createElement(Logo, { size: 26 }),
        React.createElement('div', { style: { flexGrow: 1, maxWidth: 560, height: 44, background: COOL, borderRadius: 999, display: 'flex', alignItems: 'center', gap: 10, padding: '0 18px', color: MUT, fontSize: 15 } }, React.createElement(Svg, { d: Ic.search, size: 20, color: MUT }), 'Wonach suchst du?'),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 22, color: INK } },
          React.createElement(Svg, { d: Ic.heart, size: 24, color: INK, sw: 1.7 }),
          React.createElement('div', { style: { position: 'relative' } }, React.createElement(Svg, { d: Ic.cart, size: 24, color: INK }), React.createElement('span', { style: { position: 'absolute', right: -6, top: -6, minWidth: 16, height: 16, padding: '0 4px', boxSizing: 'border-box', background: RED, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '2')),
          React.createElement(Svg, { d: Ic.user, size: 24, color: INK })
        )
      ),
      React.createElement('div', { style: { height: 48, padding: '0 32px', display: 'flex', alignItems: 'center', gap: 30, background: '#fff', borderBottom: '1px solid ' + COOL, fontSize: 15, color: INK, flexShrink: 0 } },
        ['Damen', 'Herren', 'Kinder', 'Sport', 'Marken'].map((c) => React.createElement('span', { key: c }, c)),
        React.createElement('span', { style: { color: RED, fontWeight: 600 } }, 'Sale %')
      ),
      React.createElement('div', { style: { padding: '22px 32px', flexGrow: 1, minHeight: 0 } },
        React.createElement('div', { style: { fontSize: 13, color: MUT, marginBottom: 14 } }, 'Startseite › Damen › Sneaker'),
        React.createElement('div', { style: { color: RED, fontSize: 30, lineHeight: '32px', marginBottom: 20 } }, 'Damen Sneaker'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 } }, PRODUCTS.map((p, i) => React.createElement(Card, { key: i, p, variant: 'web' })))
      )
    );
  }

  function Mob() {
    return React.createElement(React.Fragment, null,
      React.createElement('div', { style: { height: 24, background: INK, color: '#fff', fontSize: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, 'Versand ab 50 € frei · 30 Tage Rückgabe'),
      React.createElement('div', { style: { height: 56, padding: '0 16px', display: 'flex', alignItems: 'center', gap: 12, background: '#fff', borderBottom: '1px solid ' + COOL, flexShrink: 0 } },
        React.createElement(Svg, { d: Ic.burger, size: 24, color: INK }),
        React.createElement('div', { style: { flexGrow: 1, display: 'flex', justifyContent: 'center' } }, React.createElement(Logo, { size: 20 })),
        React.createElement('div', { style: { position: 'relative' } }, React.createElement(Svg, { d: Ic.cart, size: 24, color: INK }), React.createElement('span', { style: { position: 'absolute', right: -6, top: -6, minWidth: 16, height: 16, padding: '0 4px', boxSizing: 'border-box', background: RED, color: '#fff', borderRadius: 999, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, '2'))
      ),
      React.createElement('div', { style: { padding: '12px 16px', background: '#fff', borderBottom: '1px solid ' + COOL, flexShrink: 0 } },
        React.createElement('div', { style: { height: 40, background: COOL, borderRadius: 999, display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px', color: MUT, fontSize: 14 } }, React.createElement(Svg, { d: Ic.search, size: 18, color: MUT }), 'Wonach suchst du?')
      ),
      React.createElement('div', { style: { display: 'flex', gap: 8, padding: '12px 16px 4px', flexShrink: 0, overflow: 'hidden' } },
        ['Damen', 'Herren', 'Kinder'].map((c) => React.createElement('span', { key: c, style: { padding: '6px 14px', border: '1px solid ' + LINE, borderRadius: 999, fontSize: 13, color: INK, whiteSpace: 'nowrap' } }, c)),
        React.createElement('span', { style: { padding: '6px 14px', background: RED, color: '#fff', borderRadius: 999, fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap' } }, 'Sale %')
      ),
      React.createElement('div', { style: { padding: '10px 16px 16px', flexGrow: 1, minHeight: 0 } },
        React.createElement('div', { style: { color: RED, fontSize: 20, marginBottom: 12 } }, 'Damen Sneaker'),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } }, PRODUCTS.slice(0, 4).map((p, i) => React.createElement(Card, { key: i, p, variant: 'mob' })))
      )
    );
  }

  function StorefrontBg({ variant = 'web' }) {
    return React.createElement('div', {
      'aria-hidden': 'true',
      style: { position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', background: '#fff', color: INK, fontFamily: FONT, display: 'flex', flexDirection: 'column' },
    }, variant === 'mob' ? React.createElement(Mob) : React.createElement(Web));
  }

  window.StorefrontBg = StorefrontBg;
})();