/* IIFE */
(function(){
const DS = window.OurlotDesignSystem_7a8a8b;
const { Button, Icon, Badge, Rating, Avatar, SearchBar } = DS;

function Nav() {
  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: 1160, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 28, padding: '14px 24px' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-.03em', color: 'var(--green-700)' }}>ourlot<span style={{ color: 'var(--apricot-500)' }}>.</span></span>
        <nav style={{ display: 'flex', gap: 22, marginLeft: 12 }}>{['How it works', 'Categories', 'For business'].map(l => <a key={l} style={{ color: 'var(--text-body)', fontSize: 15, fontWeight: 500, cursor: 'pointer' }}>{l}</a>)}</nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}><Button variant="ghost" size="sm">Sign in</Button><Button size="sm">Get the app</Button></div>
      </div>
    </header>
  );
}

function Section({ children, style }) { return <section style={{ padding: '80px 24px', ...style }}><div style={{ maxWidth: 1160, margin: '0 auto' }}>{children}</div></section>; }

function MarketingSiteApp() {
  return (
    <div>
      <Nav />
      {/* Hero */}
      <section style={{ background: 'var(--green-800)', color: '#fff', padding: '96px 24px 110px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <Badge tone="accent" style={{ marginBottom: 20 }}>Now in 40+ neighbourhoods</Badge>
          <h1 style={{ color: '#fff', fontSize: 'var(--text-6xl)', lineHeight: 1.02, margin: '0 0 18px' }}>Local businesses you can depend on</h1>
          <p style={{ fontSize: 'var(--text-xl)', color: 'var(--green-100)', margin: '0 auto 36px', maxWidth: 640 }}>ourlot hyper-personalises itself around you — surfacing the trusted local spots that actually fit, with real reviews and verified details.</p>
          <div style={{ maxWidth: 720, margin: '0 auto' }}><SearchBar /></div>
        </div>
      </section>
      {/* trust strip */}
      <div style={{ background: 'var(--green-900)', color: 'var(--green-100)', padding: '18px 24px' }}>
        <div style={{ maxWidth: 1160, margin: '0 auto', display: 'flex', gap: 40, justifyContent: 'center', flexWrap: 'wrap', fontSize: 14 }}>
          {[['users', 'Trusted by 1.2M locals'], ['badge-check', '340k verified businesses'], ['star', '4.9 average app rating']].map(([i, t]) => <span key={t} style={{ display: 'flex', gap: 8, alignItems: 'center' }}><Icon name={i} size={16} color="var(--apricot-300)" />{t}</span>)}
        </div>
      </div>
      {/* how it works */}
      <Section>
        <div style={{ textAlign: 'center', marginBottom: 48 }}><h2 style={{ fontSize: 'var(--text-3xl)', margin: '0 0 10px' }}>Dependable, and made for you</h2><p style={{ color: 'var(--text-muted)', fontSize: 17, maxWidth: 560, margin: '0 auto' }}>Three quiet ways ourlot earns your trust.</p></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {[['sparkles', 'Learns what you trust', 'Save a few spots and ourlot starts picking places that match your taste and your area.'], ['badge-check', 'Real, verified listings', 'Details are checked in the last 30 days. Reviews come from real neighbours, not bots.'], ['map-pin', 'Rooted in your area', 'Distances, hours and picks tuned to exactly where you are — down to the street.']].map(([i, t, d]) => (
            <div key={t} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', padding: 28 }}>
              <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--green-50)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name={i} size={26} /></div>
              <h3 style={{ fontSize: 'var(--text-xl)', margin: '0 0 8px' }}>{t}</h3><p style={{ color: 'var(--text-muted)', margin: 0, fontSize: 15 }}>{d}</p>
            </div>
          ))}
        </div>
      </Section>
      {/* categories band */}
      <Section style={{ background: 'var(--stone-100)', paddingTop: 64, paddingBottom: 64 }}>
        <h2 style={{ fontSize: 'var(--text-2xl)', textAlign: 'center', margin: '0 0 28px' }}>Find your people, whatever you need</h2>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          {[['utensils', 'Food & drink'], ['coffee', 'Cafés'], ['wrench', 'Home services'], ['stethoscope', 'Health'], ['scissors', 'Beauty'], ['shopping-bag', 'Shops'], ['car', 'Auto'], ['paw-print', 'Pets'], ['dumbbell', 'Fitness'], ['baby', 'Family']].map(([i, l]) => (
            <div key={l} style={{ display: 'flex', gap: 8, alignItems: 'center', background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: '10px 18px', fontSize: 15, fontWeight: 500, color: 'var(--text-body)' }}><Icon name={i} size={18} color="var(--green-600)" />{l}</div>
          ))}
        </div>
      </Section>
      {/* testimonial */}
      <Section>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 16 }}><Rating value={5} showValue={false} size={22} /></div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-2xl)', lineHeight: 1.3, color: 'var(--text-strong)', margin: '0 0 22px' }}>“It's the first directory that actually feels like it knows my neighbourhood. Every recommendation has been spot on.”</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', alignItems: 'center' }}><Avatar name="Sofia Reyes" size={44} /><div style={{ textAlign: 'left' }}><div style={{ fontWeight: 700, color: 'var(--text-strong)' }}>Sofia Reyes</div><div style={{ fontSize: 14, color: 'var(--text-muted)' }}>Hackney, London</div></div></div>
        </div>
      </Section>
      {/* business CTA */}
      <section style={{ background: 'var(--green-700)', color: '#fff', padding: '72px 24px' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ color: '#fff', fontSize: 'var(--text-3xl)', margin: '0 0 12px' }}>Run a business locals can depend on?</h2>
          <p style={{ color: 'var(--green-100)', fontSize: 17, margin: '0 0 28px' }}>Claim your free listing and reach the neighbours already looking for you.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}><Button variant="accent" size="lg">List your business</Button><Button variant="secondary" size="lg">Learn more</Button></div>
        </div>
      </section>
      <footer style={{ background: 'var(--green-900)', color: 'var(--green-100)', padding: '52px 24px' }}>
        <div style={{ maxWidth: 1160, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 32 }}>
          <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: '#fff', marginBottom: 10 }}>ourlot<span style={{ color: 'var(--apricot-400)' }}>.</span></div><p style={{ fontSize: 14, maxWidth: 260 }}>Businesses you can depend on. Made for your area.</p></div>
          {[['Product', ['App', 'Categories', 'How it works']], ['Business', ['List your business', 'Pricing', 'Success stories']], ['Company', ['About', 'Careers', 'Contact']]].map(([h, ls]) => (
            <div key={h}><div style={{ color: '#fff', fontWeight: 700, fontSize: 14, marginBottom: 12 }}>{h}</div>{ls.map(l => <div key={l} style={{ fontSize: 14, marginBottom: 8, cursor: 'pointer' }}>{l}</div>)}</div>
          ))}
        </div>
        <div style={{ maxWidth: 1160, margin: '32px auto 0', paddingTop: 20, borderTop: '1px solid var(--green-800)', fontSize: 13 }}>© 2026 ourlot</div>
      </footer>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<MarketingSiteApp />);

})();