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

function Header({ onHome, query, setQuery, loc, setLoc, onSearch, compact }) {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 20, background: 'color-mix(in srgb, var(--surface-page) 88%, transparent)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 20, padding: '12px 24px' }}>
        <a onClick={onHome} style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.03em', color: 'var(--green-700)', cursor: 'pointer' }}>ourlot<span style={{ color: 'var(--apricot-500)' }}>.</span></a>
        {compact && (
          <div style={{ flex: 1, maxWidth: 560 }}>
            <SearchBar size="md" query={query} location={loc} onQueryChange={setQuery} onLocationChange={setLoc} onSearch={onSearch} />
          </div>
        )}
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
          <Button variant="ghost" size="sm" iconLeft={<Icon name="bookmark" size={16} />}>Saved</Button>
          <Button variant="secondary" size="sm">List your business</Button>
          <Avatar name="Jordan Lee" size={36} />
        </div>
      </div>
    </header>
  );
}

function Home({ go, query, setQuery, loc, setLoc, saved, toggleSave }) {
  const picked = businesses.filter(b => b.reason);
  const nearby = businesses.slice(0, 4);
  return (
    <div>
      <section style={{ background: 'var(--green-800)', color: 'var(--text-on-inverse)', padding: '72px 24px 88px' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <h1 style={{ color: '#fff', fontSize: 'var(--text-5xl)', margin: '0 0 12px' }}>Businesses you can depend on</h1>
          <p style={{ fontSize: 'var(--text-lg)', color: 'var(--green-100)', margin: '0 0 32px' }}>ourlot learns what you trust and quietly surfaces the local spots that fit — real reviews, verified details, no noise.</p>
          <SearchBar query={query} location={loc} onQueryChange={setQuery} onLocationChange={setLoc} onSearch={() => go('results')} />
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 20, flexWrap: 'wrap' }}>
            {['Coffee near me', 'Emergency plumber', 'Best barber', 'Family dentist'].map(t => (
              <button key={t} onClick={() => { setQuery(t); go('results'); }} style={{ border: '1px solid var(--green-600)', background: 'transparent', color: 'var(--green-100)', borderRadius: 'var(--radius-pill)', padding: '6px 14px', fontSize: 13, cursor: 'pointer', fontFamily: 'var(--font-sans)' }}>{t}</button>
            ))}
          </div>
        </div>
      </section>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px' }}>
        <section style={{ margin: '-40px 0 8px' }}>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '4px 2px 8px' }}>
            {categories.map(c => (
              <div key={c.id} onClick={() => go('results')} style={{ flex: '0 0 auto', cursor: 'pointer' }}>
                <div style={{ width: 128, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: '18px 12px', textAlign: 'center' }}>
                  <div style={{ width: 44, height: 44, margin: '0 auto 10px', borderRadius: 'var(--radius-pill)', background: 'var(--green-50)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={c.icon} size={22} /></div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>{c.label}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        <Rail title="Picked for you" subtitle="Because you love independent coffee & local shops" items={picked} go={go} saved={saved} toggleSave={toggleSave} />
        <Rail title="Near you, open now" subtitle="Within a short walk of Shoreditch" items={nearby} go={go} saved={saved} toggleSave={toggleSave} />
      </div>

      <section style={{ background: 'var(--green-700)', color: '#fff', marginTop: 48, padding: '56px 24px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', gap: 48, flexWrap: 'wrap' }}>
          {[['Real reviews, verified', 'Every listing is checked and reviews come from real locals — not bots.', 'badge-check'], ['Made for your area', 'Distances, hours and picks tuned to where you actually are.', 'map-pin'], ['Learns what you trust', 'The more you use ourlot, the better it fits you.', 'sparkles']].map(([t, d, i]) => (
            <div key={t} style={{ flex: '1 1 260px' }}>
              <div style={{ color: 'var(--apricot-300)', marginBottom: 10 }}><Icon name={i} size={26} /></div>
              <h3 style={{ color: '#fff', fontSize: 'var(--text-xl)', margin: '0 0 6px' }}>{t}</h3>
              <p style={{ color: 'var(--green-100)', margin: 0, fontSize: 15 }}>{d}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function Rail({ title, subtitle, items, go, saved, toggleSave }) {
  return (
    <section style={{ marginTop: 36 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <h2 style={{ fontSize: 'var(--text-2xl)', margin: 0 }}>{title}</h2>
          <p style={{ color: 'var(--text-muted)', margin: '2px 0 0', fontSize: 15 }}>{subtitle}</p>
        </div>
        <Button variant="ghost" size="sm" iconRight={<Icon name="chevron-right" size={16} />} onClick={() => go('results')}>See all</Button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {items.map(b => (
          <BusinessCard key={b.id} {...cardProps(b)} saved={!!saved[b.id]} onSave={() => toggleSave(b.id)} onClick={() => go('listing', b)} />
        ))}
      </div>
    </section>
  );
}

function cardProps(b) {
  return { 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 Results({ go, query, setQuery, loc, setLoc, saved, toggleSave }) {
  const [openNow, setOpenNow] = useState(false);
  const [verifiedOnly, setVerifiedOnly] = useState(false);
  const [sort, setSort] = useState('Best match');
  let list = businesses.filter(b => (!openNow || b.open) && (!verifiedOnly || b.verified));
  return (
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '24px' }}>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 18 }}>
        <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: 'grid', gridTemplateColumns: '1fr 380px', gap: 28 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ fontSize: 15, color: 'var(--text-muted)' }}><strong style={{ color: 'var(--text-strong)' }}>{list.length} places</strong> for “{query || 'coffee'}” near {loc || 'you'}</div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <Checkbox label="Open now" checked={openNow} onChange={e => setOpenNow(e.target.checked)} />
              <Checkbox label="Verified" checked={verifiedOnly} onChange={e => setVerifiedOnly(e.target.checked)} />
              <div style={{ width: 160 }}><DS.Select value={sort} onChange={e => setSort(e.target.value)} options={['Best match', 'Nearest', 'Top rated', 'Open now']} size="sm" /></div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {list.map(b => <BusinessCard key={b.id} layout="horizontal" {...cardProps(b)} saved={!!saved[b.id]} onSave={() => toggleSave(b.id)} onClick={() => go('listing', b)} />)}
          </div>
        </div>
        <div style={{ position: 'sticky', top: 84, height: 'calc(100vh - 108px)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--border-subtle)', background: 'var(--green-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <img src="https://api.mapbox.com/styles/v1/mapbox/light-v11/static/-0.075,51.53,13,0/380x600?access_token=pk" alt="" style={{ display: 'none' }} />
          <div style={{ textAlign: 'center', color: 'var(--green-700)' }}>
            <Icon name="map" size={40} />
            <div style={{ marginTop: 8, fontWeight: 600 }}>Map view</div>
            <div style={{ fontSize: 13, color: 'var(--green-800)', opacity: .7 }}>{list.length} results on the map</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Listing({ go, b, saved, toggleSave, openAuth }) {
  const [tab, setTab] = useState('overview');
  if (!b) return null;
  return (
    <div>
      <div style={{ position: 'relative', height: 320 }}>
        <img src={b.image.replace('w=600', 'w=1400')} alt={b.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,42,32,0) 40%, rgba(11,42,32,.72))' }} />
        <div style={{ position: 'absolute', top: 16, left: 24 }}><Button variant="secondary" size="sm" iconLeft={<Icon name="arrow-left" size={16} />} onClick={() => go('results')}>Back to results</Button></div>
        <div style={{ position: 'absolute', bottom: 22, left: 0, right: 0 }}>
          <div style={{ maxWidth: 1000, margin: '0 auto', padding: '0 24px', color: '#fff', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <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={{ color: '#fff', fontSize: 'var(--text-4xl)', margin: '0 0 6px' }}>{b.name}</h1>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center', color: 'var(--green-100)', fontSize: 15 }}>
                <Rating value={b.rating} count={b.reviews} size={16} /><span>· {b.category} · {b.price} · {b.distance}</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <IconButton icon={saved[b.id] ? 'bookmark-check' : 'bookmark'} label="Save" variant="outline" onClick={() => toggleSave(b.id)} />
              <Button variant="accent" iconLeft={<Icon name="navigation" size={16} />}>Get directions</Button>
            </div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1000, margin: '0 auto', padding: '24px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32 }}>
        <div>
          <Tabs value={tab} onChange={setTab} tabs={[{ value: 'overview', label: 'Overview' }, { value: 'reviews', label: 'Reviews', count: b.reviews }, { value: 'photos', label: 'Photos' }, { value: 'hours', label: 'Hours' }]} />
          <div style={{ paddingTop: 22 }}>
            {tab === 'overview' && <div>
              <p style={{ fontSize: 16, color: 'var(--text-body)', maxWidth: 620 }}>A dependable neighbourhood {b.category.toLowerCase()} on {b.address}. Locals rate it {b.rating} across {b.reviews} reviews — {b.hours.toLowerCase()}.</p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '12px 0 24px' }}>{b.tags.map(t => <Tag key={t}>{t}</Tag>)}</div>
              <h3 style={{ fontSize: 'var(--text-lg)' }}>What locals say</h3>
              {reviews.slice(0, 2).map(r => <ReviewRow key={r.id} r={r} />)}
            </div>}
            {tab === 'reviews' && <div>
              <Button variant="secondary" iconLeft={<Icon name="pencil" size={16} />} onClick={openAuth} style={{ marginBottom: 18 }}>Write a review</Button>
              {reviews.map(r => <ReviewRow key={r.id} r={r} />)}
            </div>}
            {tab === 'photos' && <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>{businesses.slice(0, 6).map(x => <img key={x.id} src={x.image} style={{ width: '100%', height: 130, objectFit: 'cover', borderRadius: 'var(--radius-md)' }} />)}</div>}
            {tab === 'hours' && <table style={{ borderCollapse: 'collapse', fontSize: 15 }}><tbody>{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((d, i) => <tr key={d}><td style={{ padding: '8px 40px 8px 0', color: 'var(--text-muted)' }}>{d}</td><td style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-strong)' }}>{i === 6 ? '9:00 – 16:00' : '7:00 – 18:00'}</td></tr>)}</tbody></table>}
          </div>
        </div>
        <aside>
          <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 18 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <InfoRow icon="map-pin" label={b.address} />
              <InfoRow icon="clock" label={b.hours} tone={b.open ? 'var(--color-success)' : 'var(--text-muted)'} />
              <InfoRow icon="phone" label="020 7946 0000" />
              <InfoRow icon="globe" label="Visit website" link />
            </div>
            <Button block style={{ marginTop: 16 }}>Call now</Button>
          </div>
        </aside>
      </div>
    </div>
  );
}

function InfoRow({ icon, label, tone, link }) {
  return <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 15, color: tone || 'var(--text-body)' }}><span style={{ color: 'var(--text-subtle)' }}><Icon name={icon} size={18} /></span><span style={{ color: link ? 'var(--text-link)' : undefined }}>{label}</span></div>;
}

function ReviewRow({ r }) {
  return (
    <div style={{ display: 'flex', gap: 12, padding: '16px 0', borderBottom: '1px solid var(--border-subtle)' }}>
      <Avatar name={r.name} size={40} />
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><strong style={{ color: 'var(--text-strong)' }}>{r.name}</strong><span style={{ fontSize: 13, color: 'var(--text-subtle)' }}>{r.when}</span></div>
        <div style={{ margin: '4px 0 6px' }}><Rating value={r.rating} size={13} showValue={false} /></div>
        <p style={{ margin: 0, fontSize: 15, color: 'var(--text-body)' }}>{r.body}</p>
        <button style={{ marginTop: 8, border: 0, background: 'transparent', color: 'var(--text-muted)', fontSize: 13, cursor: 'pointer', display: 'inline-flex', gap: 6, alignItems: 'center', fontFamily: 'var(--font-sans)' }}><Icon name="thumbs-up" size={14} /> Helpful ({r.helpful})</button>
      </div>
    </div>
  );
}

function ConsumerWebApp() {
  const [route, setRoute] = useState('home');
  const [current, setCurrent] = useState(null);
  const [query, setQuery] = useState('Coffee');
  const [loc, setLoc] = useState('Shoreditch');
  const [saved, setSaved] = useState({ 1: true });
  const [auth, setAuth] = useState(false);
  const go = (r, b) => { if (b) setCurrent(b); setRoute(r); window.scrollTo(0, 0); };
  const toggleSave = id => setSaved(s => ({ ...s, [id]: !s[id] }));
  return (
    <div>
      <Header onHome={() => go('home')} query={query} setQuery={setQuery} loc={loc} setLoc={setLoc} onSearch={() => go('results')} compact={route !== 'home'} />
      {route === 'home' && <Home go={go} query={query} setQuery={setQuery} loc={loc} setLoc={setLoc} saved={saved} toggleSave={toggleSave} />}
      {route === 'results' && <Results go={go} query={query} setQuery={setQuery} loc={loc} setLoc={setLoc} saved={saved} toggleSave={toggleSave} />}
      {route === 'listing' && <Listing go={go} b={current} saved={saved} toggleSave={toggleSave} openAuth={() => setAuth(true)} />}
      <Dialog open={auth} onClose={() => setAuth(false)} title="Sign in to write a review" description="Your reviews help neighbours find businesses they can depend on." footer={<><Button variant="ghost" onClick={() => setAuth(false)}>Not now</Button><Button onClick={() => setAuth(false)}>Continue</Button></>}>
        <Input label="Email" type="email" placeholder="you@example.com" />
      </Dialog>
      <footer style={{ background: 'var(--green-900)', color: 'var(--green-100)', padding: '40px 24px', marginTop: 0 }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#fff' }}>ourlot<span style={{ color: 'var(--apricot-400)' }}>.</span></div>
          <div style={{ fontSize: 14 }}>Businesses you can depend on · © 2026 ourlot</div>
        </div>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ConsumerWebApp />);

})();