/* linked.market — Home / Discovery v2 (mobile + desktop) */
(function () {
const { useState } = React;
const h = React.createElement;
const { CATEGORIES, VENDORS, PRODUCTS, byVendor, naira } = window.LM_DATA;
const { Icon, Avatar, Slot, ImageBlock, VendorStrip, VMark, Badge, ProductCard, StoreCard, catColor } = window;

const featured = ['nkem', 'asoebi', 'tola', 'emeka', 'kaduna'].map(k => VENDORS[k]);
const filterCat = (cat) => cat === 'all' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat);
const RATIOS = ['4/5', '1/1', '4/5', '3/4', '1/1', '4/5', '4/5', '3/4', '1/1', '4/5', '3/4', '4/5', '1/1', '4/5', '3/4', '4/5'];

function CatPills({ cat, setCat }) {
  return h('div', { className: 'hscroll', style: { gap: 8 } },
    CATEGORIES.map(c => h('button', { key: c.id, className: 'pill' + (cat === c.id ? ' on' : ''), onClick: () => setCat(c.id) },
      c.id !== 'all' && h('span', { className: 'cdot', style: { background: catColor(c.id) } }), c.label)));
}

/* hero featured drop */
function Hero({ onOpenStore, tall }) {
  const v = VENDORS.nkem;
  return h('div', { className: 'hero', style: { height: tall ? 440 : 380 } },
    h(Slot, { id: 'hero-featured', duo: v.cover, src: v.img, placeholder: 'Featured drop', style: { position: 'absolute', inset: 0 } }),
    h('div', { className: 'photo-scrim' }),
    h('div', { className: 'hero-overlay' },
      h('div', { className: 'hero-pill' }, h('span', { style: { width: 6, height: 6, borderRadius: 9, background: 'var(--accent)' } }), 'Featured drop'),
      h('div', { style: { flex: 1 } }),
      h('h1', { className: 't-display', style: { fontSize: tall ? 52 : 42, maxWidth: 440 } }, 'Quiet luxury,', h('br'), 'Lagos-made.'),
      h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginTop: 18 } },
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } },
          h(Avatar, { name: v.name, color: v.avatar, size: 40, ring: true }),
          h('div', { style: { lineHeight: 1.2 } },
            h('div', { style: { fontWeight: 700, fontSize: 15, display: 'flex', alignItems: 'center', gap: 5, fontFamily: 'var(--font-display)' } }, v.name, h(VMark)),
            h('div', { className: 't-mono', style: { fontSize: 12, opacity: .85 } }, '@' + v.handle))),
        h('button', { className: 'btn btn-primary btn-md', onClick: () => onOpenStore(v) }, 'Visit', h(Icon, { name: 'arrowUR' }))),
    ),
  );
}

/* vendor spotlight band */
function Spotlight({ onOpenStore }) {
  const v = VENDORS.tola;
  return h('div', { className: 'card', style: { overflow: 'hidden', display: 'flex', boxShadow: 'var(--shadow-sm)' } },
    h(Slot, { id: 'spot-tola', duo: v.cover, src: v.img, placeholder: 'Vendor', style: { width: 132, flex: '0 0 auto' } }),
    h('div', { style: { padding: '15px 16px', flex: 1, minWidth: 0 } },
      h('div', { className: 'eyebrow', style: { color: 'var(--accent)' } }, 'Vendor of the week'),
      h('div', { className: 't-head', style: { fontSize: 20, marginTop: 7, display: 'flex', alignItems: 'center', gap: 6 } }, v.name, h(VMark)),
      h('p', { style: { fontSize: 13, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.45, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, v.bio),
      h('button', { className: 'btn btn-secondary btn-sm', style: { marginTop: 12 }, onClick: () => onOpenStore(v) }, 'Visit store')),
  );
}

/* ============================== MOBILE ============================== */
function HomeMobile(props) {
  const { marked, onMark, onOpen, onOpenStore, onOpenSearch } = props;
  const [cat, setCat] = useState('all');
  const list = filterCat(cat);

  return h('div', { className: 'screen-fade' },
    h('div', { className: 'mtop' },
      h('div', { className: 'mbrand' }, 'linked', h('span', { className: 'dot' }), h('span', { className: 'muted' }, 'market')),
      h('div', { style: { flex: 1 } }),
      h('div', { className: 'chip-loc' }, h(Icon, { name: 'pin' }), 'Lagos'),
      h('button', { className: 'icon-btn' }, h(Icon, { name: 'bell' }))),
    h('div', { style: { padding: '4px 18px 14px' } },
      h('h1', { className: 't-display', style: { fontSize: 34, maxWidth: 320 } }, 'Find your', ' ', h('span', { style: { color: 'var(--accent)' } }, 'next'), ' favourite vendor.'),
      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 14, fontSize: 13, color: 'var(--ink-2)', fontWeight: 500 } },
        h('span', { style: { width: 7, height: 7, borderRadius: 9, background: 'var(--success)' } }),
        h('span', { className: 'price' }, '1,240'), ' vendors live', h('span', { style: { color: 'var(--ink-4)' } }, '·'),
        h('span', { className: 'price' }, '18,400'), ' products')),
    h('div', { style: { padding: '0 18px 16px' } },
      h('div', { className: 'searchbar', onClick: onOpenSearch },
        h(Icon, { name: 'search' }),
        h('span', { className: 'ph' }, 'Search vendors, products…'),
        h('button', { className: 'filt' }, h(Icon, { name: 'sliders' })))),
    h('div', { style: { padding: '0 18px' } }, h(Hero, { onOpenStore })),
    h('div', { style: { padding: '20px 18px 6px' } }, h(CatPills, { cat, setCat })),
    cat === 'all' && h('div', { style: { padding: '14px 0 4px' } },
      h('div', { className: 'sechead', style: { padding: '0 18px 13px' } },
        h('div', { className: 'h', style: { fontSize: 19 } }, 'Stores to follow'),
        h('div', { className: 'more' }, 'All', h(Icon, { name: 'chevR' }))),
      h('div', { className: 'hscroll snap', style: { padding: '0 18px 4px' } },
        featured.map(v => h(StoreCard, { key: v.handle, vendor: v, width: 264, onOpen: onOpenStore })))),
    h('div', { style: { padding: '20px 18px 4px' } }, h(Spotlight, { onOpenStore })),
    h('div', { style: { padding: '24px 16px 8px' } },
      h('div', { className: 'sechead', style: { marginBottom: 16, padding: '0 2px' } },
        h('div', { className: 'h', style: { fontSize: 22 } }, cat === 'all' ? 'New & notable' : CATEGORIES.find(c => c.id === cat).label),
        h('div', { className: 'more' }, 'Latest', h(Icon, { name: 'chevR' }))),
      list[0] && h('div', { style: { marginBottom: 12 } },
        h(ProductCard, { p: list[0], marked: marked.has(list[0].id), onMark, onOpen, ratio: '16/11' })),
      h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
        list.slice(1).map(p => h(ProductCard, { key: p.id, p, marked: marked.has(p.id), onMark, onOpen, ratio: '4/5' })))),
    h('div', { style: { height: 96 } }),
  );
}

/* ============================== DESKTOP ============================== */
function HomeDesktop(props) {
  const { marked, onMark, onOpen, onOpenStore } = props;
  const [cat, setCat] = useState('all');
  const list = filterCat(cat);
  const pick = byVendor('asoebi')[0];

  return h('div', { className: 'screen-fade', style: { maxWidth: 1160, margin: '0 auto', padding: '34px 40px 64px' } },
    h('div', { style: { display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 22 } },
      h(Hero, { onOpenStore, tall: true }),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
        h('div', { className: 'eyebrow' }, 'Editor’s pick'),
        h(ProductCard, { p: pick, marked: marked.has(pick.id), onMark, onOpen, ratio: '1/1' }),
        h(Spotlight, { onOpenStore }))),
    h('div', { style: { display: 'flex', alignItems: 'center', gap: 16, margin: '30px 0 20px' } },
      h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 14, color: 'var(--ink-2)', flex: '0 0 auto', fontWeight: 500 } },
        h('span', { style: { width: 8, height: 8, borderRadius: 9, background: 'var(--success)' } }),
        h('span', { className: 'price', style: { fontWeight: 700, color: 'var(--ink)' } }, '1,240'), ' vendors live'),
      h('div', { style: { flex: 1, overflow: 'hidden' } }, h(CatPills, { cat, setCat }))),
    h('div', { className: 'sechead', style: { marginBottom: 20 } },
      h('div', { className: 'h', style: { fontSize: 26 } }, cat === 'all' ? 'New & notable' : CATEGORIES.find(c => c.id === cat).label),
      h('div', { className: 'more' }, 'Browse all', h(Icon, { name: 'chevR' }))),
    h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 } },
      list.map(p => h(ProductCard, { key: p.id, p, marked: marked.has(p.id), onMark, onOpen, ratio: '4/5' }))),
    h('div', { className: 'sechead', style: { margin: '48px 0 20px' } },
      h('div', { className: 'h', style: { fontSize: 26 } }, 'Stores to follow'),
      h('div', { className: 'more' }, 'All vendors', h(Icon, { name: 'chevR' }))),
    h('div', { className: 'hscroll', style: { gap: 20 } },
      featured.map(v => h(StoreCard, { key: v.handle, vendor: v, width: 284, onOpen: onOpenStore }))),
  );
}

window.HomeMobile = HomeMobile;
window.HomeDesktop = HomeDesktop;
})();