/* IIFE */
(function(){
const { useState } = React;
const DS = window.OurlotDesignSystem_7a8a8b;
const { Icon, BusinessCard, Badge, Tag, Rating, CategoryChip, Button, IconButton, Input, Avatar } = DS;
const { categories, businesses } = window.OLT_DATA;

function StatusBar() {
  return <div style={{ height: 44, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 22px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, color: 'var(--text-strong)' }}><span>9:41</span><span style={{ display: 'flex', gap: 6 }}><Icon name="signal" size={16} /><Icon name="wifi" size={16} /><Icon name="battery-full" size={18} /></span></div>;
}

function TabBar({ tab, setTab }) {
  const items = [['home', 'Home', 'home'], ['explore', 'Explore', 'search'], ['saved', 'Saved', 'bookmark'], ['profile', 'You', 'user']];
  return (
    <nav style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 76, background: 'color-mix(in srgb, var(--surface-card) 92%, transparent)', backdropFilter: 'blur(10px)', borderTop: '1px solid var(--border-subtle)', display: 'flex', paddingBottom: 12 }}>
      {items.map(([id, label, icon]) => (
        <button key={id} onClick={() => setTab(id)} style={{ flex: 1, border: 0, background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, paddingTop: 10, color: tab === id ? 'var(--color-primary)' : 'var(--text-subtle)' }}>
          <Icon name={icon} size={22} strokeWidth={tab === id ? 2.4 : 2} />
          <span style={{ fontSize: 11, fontWeight: tab === id ? 700 : 500, fontFamily: 'var(--font-sans)' }}>{label}</span>
        </button>
      ))}
    </nav>
  );
}

function Home({ open, saved, toggleSave }) {
  return (
    <div style={{ padding: '4px 16px 90px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '6px 0 14px' }}>
        <div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>Good morning, Jordan</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-strong)' }}><Icon name="map-pin" size={16} color="var(--color-primary)" /> Shoreditch</div>
        </div>
        <Avatar name="Jordan Lee" size={40} />
      </div>
      <div onClick={() => open('search')} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-sm)', padding: '12px 16px', marginBottom: 20 }}>
        <Icon name="search" size={20} color="var(--text-subtle)" /><span style={{ color: 'var(--text-subtle)', fontSize: 15 }}>Find a plumber, café, dentist…</span>
      </div>
      <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: '0 -16px 22px', padding: '0 16px' }}>
        {categories.map(c => <div key={c.id} style={{ flex: '0 0 auto', textAlign: 'center', width: 72 }}><div style={{ width: 56, height: 56, borderRadius: 'var(--radius-lg)', background: 'var(--green-50)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 6px' }}><Icon name={c.icon} size={24} /></div><div style={{ fontSize: 11, color: 'var(--text-body)', fontWeight: 500 }}>{c.label}</div></div>)}
      </div>
      <h2 style={{ fontSize: 'var(--text-xl)', margin: '0 0 4px' }}>Picked for you</h2>
      <p style={{ color: 'var(--text-muted)', fontSize: 14, margin: '0 0 14px' }}>Because you love independent coffee</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {businesses.filter(b => b.reason).map(b => <BusinessCard key={b.id} {...cp(b)} saved={!!saved[b.id]} onSave={() => toggleSave(b.id)} onClick={() => open('detail', b)} />)}
      </div>
    </div>
  );
}

function Explore({ open, saved, toggleSave }) {
  return (
    <div style={{ padding: '4px 16px 90px' }}>
      <Input adornment={<Icon name="search" size={18} />} defaultValue="Coffee" style={{ margin: '6px 0 14px' }} />
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', margin: '0 -16px 16px', padding: '0 16px' }}>
        <CategoryChip icon="coffee" label="Cafés" selected />
        {categories.slice(0, 5).map(c => <CategoryChip key={c.id} icon={c.icon} label={c.label} />)}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {businesses.map(b => <BusinessCard key={b.id} layout="horizontal" {...cp(b)} saved={!!saved[b.id]} onSave={() => toggleSave(b.id)} onClick={() => open('detail', b)} />)}
      </div>
    </div>
  );
}

function Saved({ open, saved, toggleSave }) {
  const list = businesses.filter(b => saved[b.id]);
  return (
    <div style={{ padding: '4px 16px 90px' }}>
      <h1 style={{ fontSize: 'var(--text-2xl)', margin: '10px 0 4px' }}>Your saved spots</h1>
      <p style={{ color: 'var(--text-muted)', fontSize: 14, margin: '0 0 18px' }}>{list.length} places you can depend on</p>
      {list.length ? <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>{list.map(b => <BusinessCard key={b.id} layout="horizontal" {...cp(b)} saved onSave={() => toggleSave(b.id)} onClick={() => open('detail', b)} />)}</div>
        : <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-muted)' }}><Icon name="bookmark" size={36} /><p style={{ marginTop: 10 }}>No saved spots yet — tap the bookmark on any listing to keep it here.</p></div>}
    </div>
  );
}

function Profile() {
  return (
    <div style={{ padding: '4px 16px 90px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '14px 0 22px' }}>
        <Avatar name="Jordan Lee" size={60} />
        <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--text-strong)' }}>Jordan Lee</div><div style={{ color: 'var(--text-muted)', fontSize: 14 }}>12 reviews · 8 saved</div></div>
      </div>
      {[['bell', 'Notifications'], ['map-pin', 'Your area'], ['sparkles', 'Personalisation'], ['badge-check', 'Verified reviews'], ['settings', 'Settings'], ['circle-help', 'Help & support']].map(([i, l]) => (
        <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '15px 4px', borderBottom: '1px solid var(--border-subtle)', fontSize: 16, color: 'var(--text-body)' }}><span style={{ color: 'var(--text-muted)' }}><Icon name={i} size={20} /></span>{l}<span style={{ marginLeft: 'auto', color: 'var(--text-subtle)' }}><Icon name="chevron-right" size={18} /></span></div>
      ))}
    </div>
  );
}

function Detail({ back, b, saved, toggleSave }) {
  return (
    <div style={{ paddingBottom: 90 }}>
      <div style={{ position: 'relative', height: 240 }}>
        <img src={b.image} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,rgba(11,42,32,.3),rgba(11,42,32,0) 30%)' }} />
        <div style={{ position: 'absolute', top: 12, left: 12, right: 12, display: 'flex', justifyContent: 'space-between' }}>
          <IconButton icon="arrow-left" label="Back" onClick={back} style={{ background: 'rgba(255,255,255,.9)' }} />
          <IconButton icon={saved[b.id] ? 'bookmark-check' : 'bookmark'} label="Save" onClick={() => toggleSave(b.id)} style={{ background: 'rgba(255,255,255,.9)', color: saved[b.id] ? 'var(--color-accent)' : undefined }} />
        </div>
      </div>
      <div style={{ padding: 16 }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>{b.verified && <Badge tone="primary" icon={<Icon name="badge-check" size={13} />}>Verified</Badge>}<Badge tone={b.open ? 'success' : 'neutral'} dot={b.open}>{b.open ? 'Open now' : 'Closed'}</Badge></div>
        <h1 style={{ fontSize: 'var(--text-2xl)', margin: '0 0 6px' }}>{b.name}</h1>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', color: 'var(--text-muted)', fontSize: 14, marginBottom: 10 }}><Rating value={b.rating} count={b.reviews} size={15} /> · {b.category} · {b.price}</div>
        <p style={{ fontSize: 15, color: 'var(--text-body)' }}>A dependable neighbourhood {b.category.toLowerCase()} on {b.address}. {b.hours}.</p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '10px 0 18px' }}>{b.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
        <div style={{ display: 'flex', gap: 10 }}><Button block iconLeft={<Icon name="navigation" size={16} />}>Directions</Button><Button variant="secondary" block iconLeft={<Icon name="phone" size={16} />}>Call</Button></div>
      </div>
    </div>
  );
}

const cp = b => ({ name: b.name, category: b.category, priceLevel: b.price, distance: b.distance, image: b.image, rating: b.rating, reviewCount: b.reviews, verified: b.verified, open: b.open, reason: b.reason });

function MobileAppKit() {
  const [tab, setTab] = useState('home');
  const [detail, setDetail] = useState(null);
  const [saved, setSaved] = useState({ 1: true, 5: true });
  const toggleSave = id => setSaved(s => ({ ...s, [id]: !s[id] }));
  const open = (t, b) => { if (t === 'detail') { setDetail(b); } else setTab(t); };
  return (
    <div style={{ width: 390, height: 800, background: 'var(--surface-page)', borderRadius: 44, overflow: 'hidden', position: 'relative', boxShadow: 'var(--shadow-xl)', border: '10px solid #14120c', margin: '0 auto', display: 'flex', flexDirection: 'column' }}>
      <StatusBar />
      <div style={{ flex: 1, overflowY: 'auto' }}>
        {detail ? <Detail back={() => setDetail(null)} b={detail} saved={saved} toggleSave={toggleSave} />
          : tab === 'home' ? <Home open={open} saved={saved} toggleSave={toggleSave} />
            : tab === 'explore' ? <Explore open={open} saved={saved} toggleSave={toggleSave} />
              : tab === 'saved' ? <Saved open={open} saved={saved} toggleSave={toggleSave} />
                : <Profile />}
      </div>
      {!detail && <TabBar tab={tab} setTab={setTab} />}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<MobileAppKit />);

})();