/* linked.market — Activity, Profile, Auth, States, 404, Marketing landing */
(function () {
const { useState } = React;
const h = React.createElement;
const { VENDORS, PRODUCTS, naira, byVendor } = window.LM_DATA;
const { Icon, Avatar, Slot, ImageBlock, VMark, ProductCard, StoreCard } = window;

/* ===================== ACTIVITY ===================== */
const NOTES = [
  ['today', [
    ['package', 'var(--accent)', 'Nkem Atelier', ' restocked ', 'Silk slip dress, plum', '20m'],
    ['arrowUR', 'var(--success)', 'Price drop', ' on ', 'Wireless earbuds, matte — now ₦24,000', '1h'],
  ]],
  ['week', [
    ['user', 'var(--cat-beauty)', 'Glow by Tọlá', ' started selling on linked.market', '', '2d'],
    ['bookmark', 'var(--ink-3)', 'Reminder', ' — you marked ', '3 items from Aso Ẹbị Lagos', '3d'],
    ['package', 'var(--accent)', 'Emeka Electronics', ' added ', '4 new products', '4d'],
  ]],
];
function Activity(props) {
  const { device } = props;
  const desktop = device === 'desktop';
  return h('div', { className: 'screen-fade', style: { maxWidth: desktop ? 720 : 'none', margin: '0 auto' } },
    h('div', { className: device === 'desktop' ? '' : 'mtop', style: desktop ? { padding: '34px 40px 8px' } : null },
      h('h1', { className: 't-display', style: { fontSize: desktop ? 32 : 26 } }, 'Activity')),
    h('div', { style: { padding: desktop ? '12px 40px 40px' : '8px 18px 110px' } },
      NOTES.map(([grp, items]) => h('div', { key: grp, style: { marginBottom: 22 } },
        h('div', { className: 'eyebrow', style: { marginBottom: 8 } }, grp === 'today' ? 'Today' : 'Earlier this week'),
        h('div', { className: 'card', style: { padding: '4px 16px' } },
          items.map((n, i) => h('div', { key: i, className: 'vrow' },
            h('div', { style: { width: 38, height: 38, borderRadius: 11, background: 'var(--bg-sunk)', color: n[1], display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' } }, h(Icon, { name: n[0], style: { width: 18, height: 18 } })),
            h('div', { style: { flex: 1, fontSize: 14, lineHeight: 1.4 } }, h('b', { style: { fontWeight: 600 } }, n[2]), h('span', { style: { color: 'var(--ink-2)' } }, n[3]), h('b', { style: { fontWeight: 600 } }, n[4])),
            h('span', { style: { fontSize: 12, color: 'var(--ink-4)', flex: '0 0 auto' } }, n[5]))))))));
}

/* ===================== PROFILE ===================== */
function Profile(props) {
  const { device, markedCount, go } = props;
  const desktop = device === 'desktop';
  const saved = ['nkem', 'tola', 'asoebi'].map(k => VENDORS[k]);
  const stats = [['Marked', markedCount || 0], ['Saved stores', 3], ['Sent', 8]];
  return h('div', { className: 'screen-fade' },
    h('div', { style: { padding: desktop ? '40px 40px 0' : '52px 18px 0', maxWidth: desktop ? 900 : 'none', margin: '0 auto' } },
      h('div', { style: { display: 'flex', alignItems: 'center', gap: 16 } },
        h(Avatar, { name: 'Aisha O', color: 'var(--cat-beauty)', size: 72, ring: true, style: { fontSize: 26 } }),
        h('div', { style: { flex: 1 } },
          h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 25 } }, 'Aisha O.'),
          h('div', { style: { fontSize: 13.5, color: 'var(--ink-3)', marginTop: 4 } }, 'Lagos · on linked.market since 2025')),
        desktop && h('button', { className: 'btn btn-secondary btn-md' }, h(Icon, { name: 'gear' }), 'Settings')),
      h('div', { style: { display: 'flex', gap: 28, marginTop: 22, paddingBottom: 22, borderBottom: '1px solid var(--line)' } },
        stats.map(([l, n]) => h('div', { key: l }, h('div', { className: 'price', style: { fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-.02em' } }, n), h('div', { style: { fontSize: 12.5, color: 'var(--ink-3)', marginTop: 2 } }, l))))),
    h('div', { style: { padding: desktop ? '24px 40px 40px' : '20px 18px 110px', maxWidth: desktop ? 900 : 'none', margin: '0 auto' } },
      h('div', { className: 'sechead', style: { marginBottom: 14 } }, h('div', { className: 'h', style: { fontSize: 19 } }, 'Saved stores'), h('div', { className: 'more' }, 'All', h(Icon, { name: 'chevR' }))),
      h('div', { className: 'hscroll', style: { gap: 12 } }, saved.map(v => h(StoreCard, { key: v.handle, vendor: v, width: 256, onOpen: () => go && go('store') }))),
      h('div', { style: { marginTop: 26 } },
        [['bookmark', 'Marked items', () => go && go('marked')], ['bell', 'Activity', () => go && go('activity')], ['gear', 'Settings & privacy', null], ['shield', 'Help & safety', null]].map(([ic, l, fn], i) =>
          h('button', { key: i, onClick: fn, style: { width: '100%', display: 'flex', alignItems: 'center', gap: 13, padding: '15px 4px', borderBottom: '1px solid var(--line)', textAlign: 'left' } },
            h(Icon, { name: ic, style: { width: 20, height: 20, color: 'var(--ink-2)' } }), h('span', { style: { flex: 1, fontWeight: 500, fontSize: 14.5 } }, l), h(Icon, { name: 'chevR', style: { width: 16, height: 16, color: 'var(--ink-4)' } })))),
      h('button', { className: 'btn btn-ghost btn-md', style: { color: 'var(--error)', marginTop: 16 } }, 'Sign out')));
}

/* ===================== AUTH ===================== */
function Auth(props) {
  const { device, go } = props;
  const [stage, setStage] = useState('enter');
  const [code, setCode] = useState(['', '', '', '', '', '']);
  return h('div', { className: 'screen-fade', style: { minHeight: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: device === 'desktop' ? 40 : '20px', background: 'var(--bg)' } },
    h('div', { style: { width: '100%', maxWidth: 380 } },
      h('div', { className: 'mbrand', style: { fontSize: 26, justifyContent: 'center', marginBottom: 6 } }, 'linked', h('span', { className: 'dot' }), h('span', { className: 'muted' }, 'market')),
      stage === 'enter' ? h(React.Fragment, null,
        h('h1', { className: 't-display', style: { fontSize: 28, textAlign: 'center', marginTop: 18 } }, 'Sign in or join'),
        h('p', { style: { fontSize: 14.5, color: 'var(--ink-2)', textAlign: 'center', margin: '10px 0 26px', lineHeight: 1.5 } }, 'No passwords. We’ll send a one-time code to get you in.'),
        h('div', { className: 'inwrap', style: { marginBottom: 12 } }, h('span', { className: 'pre' }, '+234'), h('input', { className: 'input', style: { height: 52, paddingLeft: 56 }, placeholder: '801 234 5678', autoFocus: true })),
        h('button', { className: 'btn btn-primary btn-lg btn-block', onClick: () => setStage('otp') }, 'Send code'),
        h('div', { style: { display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0', color: 'var(--ink-4)', fontSize: 12 } }, h('div', { style: { flex: 1, height: 1, background: 'var(--line)' } }), 'OR', h('div', { style: { flex: 1, height: 1, background: 'var(--line)' } })),
        h('button', { className: 'btn btn-secondary btn-lg btn-block', onClick: () => setStage('otp') }, h(Icon, { name: 'chat' }), 'Continue with email'),
        h('p', { style: { fontSize: 11.5, color: 'var(--ink-3)', textAlign: 'center', marginTop: 20, lineHeight: 1.5 } }, 'By continuing you agree to our Terms & Privacy Policy.'))
      : h(React.Fragment, null,
        h('h1', { className: 't-display', style: { fontSize: 28, textAlign: 'center', marginTop: 18 } }, 'Enter your code'),
        h('p', { style: { fontSize: 14.5, color: 'var(--ink-2)', textAlign: 'center', margin: '10px 0 26px' } }, 'Sent to +234 801 234 5678'),
        h('div', { style: { display: 'flex', gap: 9, justifyContent: 'center', marginBottom: 24 } },
          code.map((c, i) => h('input', { key: i, value: c, maxLength: 1, inputMode: 'numeric',
            onChange: e => { const n = [...code]; n[i] = e.target.value.replace(/\D/g, ''); setCode(n); if (e.target.value && e.target.nextSibling) e.target.nextSibling.focus(); },
            style: { width: 48, height: 58, textAlign: 'center', fontSize: 24, fontWeight: 700, fontFamily: 'var(--font-display)', borderRadius: 'var(--r-md)', border: '1.5px solid ' + (c ? 'var(--ink)' : 'var(--line-strong)'), background: 'var(--bg-elev)', color: 'var(--ink)', outline: 'none' } }))),
        h('button', { className: 'btn btn-primary btn-lg btn-block', onClick: () => go('home') }, 'Verify & continue'),
        h('button', { className: 'btn btn-ghost btn-md btn-block', style: { marginTop: 8 }, onClick: () => setStage('enter') }, 'Resend code'))));
}

/* ===================== STATES showcase ===================== */
function States(props) {
  const { device } = props;
  const desktop = device === 'desktop';
  const card = (title, child) => h('div', null, h('div', { className: 'eyebrow', style: { marginBottom: 10 } }, title), h('div', { className: 'card', style: { padding: 18, overflow: 'hidden' } }, child));
  return h('div', { className: 'screen-fade', style: { padding: desktop ? 40 : 18, maxWidth: 900, margin: '0 auto' } },
    h('h1', { className: 't-display', style: { fontSize: desktop ? 32 : 25, marginBottom: 6 } }, 'System states'),
    h('p', { style: { fontSize: 14, color: 'var(--ink-3)', marginBottom: 24 } }, 'The patterns every surface falls back to on slow or broken connections.'),
    h('div', { style: { display: 'grid', gridTemplateColumns: desktop ? '1fr 1fr' : '1fr', gap: 18 } },
      card('Skeleton loading', h('div', { style: { display: 'flex', gap: 12 } },
        [0, 1].map(i => h('div', { key: i, style: { flex: 1 } },
          h('div', { className: 'sk', style: { width: '100%', aspectRatio: '4/5', borderRadius: 'var(--r-md)', marginBottom: 8 } }),
          h('div', { className: 'sk', style: { width: '70%', height: 12, marginBottom: 6 } }),
          h('div', { className: 'sk', style: { width: '40%', height: 12 } }))))),
      card('Connection lost', h('div', { style: { textAlign: 'center', padding: '14px 0' } },
        h('div', { style: { width: 56, height: 56, borderRadius: 16, background: 'var(--error-tint)', color: 'var(--error)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' } }, h(Icon, { name: 'bolt', style: { width: 26, height: 26 } })),
        h('div', { style: { fontWeight: 700, fontFamily: 'var(--font-display)', fontSize: 17 } }, 'You’re offline'),
        h('div', { style: { fontSize: 13, color: 'var(--ink-2)', margin: '6px 0 14px' } }, 'Check your connection and try again.'),
        h('button', { className: 'btn btn-secondary btn-sm' }, 'Retry'))),
      card('Empty bag', h('div', { style: { textAlign: 'center', padding: '14px 0' } },
        h('div', { style: { width: 56, height: 56, borderRadius: 16, background: 'var(--bg-sunk)', color: 'var(--ink-4)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' } }, h(Icon, { name: 'bookmark', style: { width: 24, height: 24 } })),
        h('div', { style: { fontWeight: 700, fontFamily: 'var(--font-display)', fontSize: 17 } }, 'Nothing marked yet'),
        h('div', { style: { fontSize: 13, color: 'var(--ink-2)', marginTop: 6 } }, 'Tap the marker on any product to collect it.'))),
      card('Upload failed', h('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
        h('div', { style: { width: 44, height: 44, borderRadius: 11, background: 'var(--error-tint)', color: 'var(--error)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' } }, h(Icon, { name: 'x', style: { width: 20, height: 20 } })),
        h('div', { style: { flex: 1 } }, h('div', { style: { fontWeight: 600, fontSize: 14 } }, 'Photo didn’t upload'), h('div', { style: { fontSize: 12.5, color: 'var(--ink-3)' } }, 'It may be too large. Try under 5MB.')),
        h('button', { className: 'btn btn-ghost btn-sm', style: { color: 'var(--accent)' } }, 'Retry')))));
}

/* ===================== 404 ===================== */
function NotFound(props) {
  const { go } = props;
  return h('div', { className: 'screen-fade', style: { minHeight: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 32, background: 'var(--bg)' } },
    h('div', { style: { fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 96, letterSpacing: '-.04em', lineHeight: 1, display: 'flex', alignItems: 'center' } }, '4', h('span', { style: { width: 18, height: 18, borderRadius: 99, background: 'var(--accent)', margin: '0 6px', alignSelf: 'flex-end', marginBottom: 18 } }), '4'),
    h('h1', { className: 't-head', style: { fontSize: 22, marginTop: 12 } }, 'This page wandered off'),
    h('p', { style: { fontSize: 14.5, color: 'var(--ink-2)', margin: '10px 0 22px', maxWidth: 300, lineHeight: 1.5 } }, 'The store or product you’re after may have moved or sold out. Let’s get you back to browsing.'),
    h('button', { className: 'btn btn-primary btn-lg', onClick: () => go('home') }, h(Icon, { name: 'home' }), 'Back to discover'));
}

/* ===================== MARKETING LANDING ===================== */
function Landing(props) {
  const { device, go } = props;
  const desktop = device === 'desktop';
  const props3 = [
    ['store', 'A storefront, not a CMS', 'Every vendor gets a beautiful page under a unique handle. No setup headaches.'],
    ['send', 'You keep the relationship', 'Buyers reach you on WhatsApp, Instagram or your site. We never take a cut.'],
    ['shield', 'Trust, made visible', 'Verified badges, response times and real photos do the convincing for you.'],
  ];
  const steps = [['Claim your handle', 'linked.market/yourstore in seconds.'], ['Add your products', 'Drop photos, set prices, publish.'], ['Share everywhere', 'One link for every channel you sell on.']];
  return h('div', { className: 'screen-fade' },
    h('div', { style: { maxWidth: 1100, margin: '0 auto', padding: desktop ? '0 40px' : '0 20px' } },
      // nav
      h('div', { style: { display: 'flex', alignItems: 'center', padding: '22px 0' } },
        h('div', { className: 'mbrand', style: { fontSize: 20 } }, 'linked', h('span', { className: 'dot' }), h('span', { className: 'muted' }, 'market')),
        h('div', { style: { flex: 1 } }),
        h('button', { className: 'btn btn-ghost btn-sm', onClick: () => go('auth') }, 'Sign in'),
        desktop && h('button', { className: 'btn btn-primary btn-sm', onClick: () => go('v-onboard') }, 'Start selling')),
      // hero
      h('div', { style: { textAlign: 'center', padding: desktop ? '48px 0 36px' : '28px 0 24px' } },
        h('div', { className: 'hero-pill', style: { margin: '0 auto 20px', background: 'var(--accent-tint)', border: '1px solid var(--accent-tint)', color: 'var(--accent-press)' } }, h('span', { style: { width: 6, height: 6, borderRadius: 9, background: 'var(--accent)' } }), '1,240 vendors live'),
        h('h1', { className: 't-display', style: { fontSize: desktop ? 64 : 38, maxWidth: 760, margin: '0 auto' } }, 'Your storefront, ', h('span', { style: { color: 'var(--accent)' } }, 'everywhere'), ' you sell.'),
        h('p', { style: { fontSize: desktop ? 18 : 15, color: 'var(--ink-2)', margin: '18px auto 0', maxWidth: 520, lineHeight: 1.55 } }, 'Stop reposting the same catalogue. Give buyers one beautiful link — and let linked.market do the discovery.'),
        h('div', { style: { display: 'flex', gap: 10, maxWidth: 440, margin: '26px auto 0', flexDirection: desktop ? 'row' : 'column' } },
          h('div', { className: 'inwrap', style: { flex: 1 } }, h('span', { className: 'pre', style: { fontFamily: 'var(--font-mono)', fontSize: 13 } }, 'linked.market/'), h('input', { className: 'input', style: { height: 52, paddingLeft: 124, fontFamily: 'var(--font-mono)' }, placeholder: 'yourstore' })),
          h('button', { className: 'btn btn-primary btn-lg', onClick: () => go('v-onboard') }, 'Claim handle'))),
      // hero image
      h(Slot, { id: 'mkt-hero', duo: window.LM_DATA.DUO.clay, src: VENDORS.asoebi.img, placeholder: 'Storefront', style: { width: '100%', height: desktop ? 360 : 200, borderRadius: 'var(--r-2xl)', marginTop: 12, boxShadow: 'var(--shadow-lg)' } }),
      // value props
      h('div', { style: { display: 'grid', gridTemplateColumns: desktop ? 'repeat(3,1fr)' : '1fr', gap: 18, margin: desktop ? '64px 0' : '40px 0' } },
        props3.map(([ic, t, d]) => h('div', { key: t, className: 'card', style: { padding: 24 } },
          h('div', { style: { width: 48, height: 48, borderRadius: 13, background: 'var(--accent-tint)', color: 'var(--accent-press)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 } }, h(Icon, { name: ic, style: { width: 23, height: 23 } })),
          h('div', { className: 't-head', style: { fontSize: 19, marginBottom: 8 } }, t),
          h('p', { style: { fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55 } }, d)))),
      // how it works
      h('div', { style: { textAlign: 'center', marginBottom: 26 } }, h('h2', { className: 't-display', style: { fontSize: desktop ? 40 : 28 } }, 'Live in three steps')),
      h('div', { style: { display: 'grid', gridTemplateColumns: desktop ? 'repeat(3,1fr)' : '1fr', gap: 18, marginBottom: desktop ? 64 : 44 } },
        steps.map(([t, d], i) => h('div', { key: i, style: { padding: 20, borderTop: '2px solid var(--accent)' } },
          h('div', { className: 'price', style: { fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)' } }, '0' + (i + 1)),
          h('div', { className: 't-head', style: { fontSize: 18, margin: '8px 0 6px' } }, t),
          h('p', { style: { fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 } }, d)))),
      // CTA
      h('div', { style: { background: 'var(--ink)', borderRadius: 'var(--r-2xl)', padding: desktop ? '56px 40px' : '36px 24px', textAlign: 'center', marginBottom: 40 } },
        h('h2', { className: 't-display', style: { fontSize: desktop ? 40 : 28, color: 'var(--bg-elev)' } }, 'Start selling today'),
        h('p', { style: { fontSize: 15, color: 'var(--ink-4)', margin: '12px auto 22px', maxWidth: 420, lineHeight: 1.5 } }, 'Free to start. Under 10 minutes to your first product.'),
        h('button', { className: 'btn btn-primary btn-lg', onClick: () => go('v-onboard') }, 'Create your store', h(Icon, { name: 'arrowUR' }))),
      h('div', { style: { padding: '0 0 40px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 12.5, color: 'var(--ink-3)' } },
        h('div', { className: 'mbrand', style: { fontSize: 15, color: 'var(--ink-3)' } }, 'linked', h('span', { className: 'dot' }), h('span', { className: 'muted' }, 'market')),
        h('div', null, '© 2026 · Lagos, Nigeria'))));
}

Object.assign(window, { BuyerActivity: Activity, BuyerProfile: Profile, AuthScreen: Auth, StatesScreen: States, NotFound: NotFound, Landing: Landing });
})();