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

function Progress({ step, total }) {
  return <div style={{ display: 'flex', gap: 6, marginBottom: 28 }}>{Array.from({ length: total }).map((_, i) => <div key={i} style={{ flex: 1, height: 5, borderRadius: 'var(--radius-pill)', background: i <= step ? 'var(--color-primary)' : 'var(--stone-200)', transition: 'background var(--dur-base)' }} />)}</div>;
}

function Shell({ children }) {
  return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, background: 'var(--surface-page)' }}>
    <div style={{ width: '100%', maxWidth: 520, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-2xl)', boxShadow: 'var(--shadow-lg)', padding: 36 }}>{children}</div>
  </div>;
}

function OnboardingApp() {
  const [step, setStep] = useState(0);
  const [loc, setLoc] = useState('');
  const [picks, setPicks] = useState({ cafe: true, food: true });
  const [saved, setSaved] = useState({});
  const total = 4;
  const toggle = (id) => setPicks(p => ({ ...p, [id]: !p[id] }));
  const next = () => setStep(s => Math.min(s + 1, total));
  const back = () => setStep(s => Math.max(s - 1, 0));
  const brand = <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, letterSpacing: '-.03em', color: 'var(--green-700)', textAlign: 'center', marginBottom: 22 }}>ourlot<span style={{ color: 'var(--apricot-500)' }}>.</span></div>;

  if (step === total) return (
    <Shell>
      {brand}
      <div style={{ textAlign: 'center', padding: '10px 0' }}>
        <div style={{ width: 72, height: 72, borderRadius: 'var(--radius-pill)', background: 'var(--green-50)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}><Icon name="check" size={36} /></div>
        <h1 style={{ fontSize: 'var(--text-3xl)', margin: '0 0 10px' }}>You're all set, Jordan</h1>
        <p style={{ color: 'var(--text-muted)', fontSize: 16, margin: '0 0 26px' }}>ourlot is now tuned to {loc || 'your area'}. The more you use it, the better your picks get.</p>
        <Button block size="lg" onClick={() => setStep(0)}>Start exploring</Button>
      </div>
    </Shell>
  );

  return (
    <Shell>
      {brand}
      <Progress step={step} total={total} />
      {step === 0 && <div>
        <h1 style={{ fontSize: 'var(--text-2xl)', margin: '0 0 8px' }}>Welcome to ourlot</h1>
        <p style={{ color: 'var(--text-muted)', fontSize: 16, margin: '0 0 24px' }}>A directory that quietly personalises itself around you, to bring you local businesses you can depend on. Let's set it up — takes under a minute.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 26 }}>
          {[['sparkles', 'Tell us what you love'], ['map-pin', 'Set your area'], ['bookmark', 'Save a few spots to start']].map(([i, t]) => <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 15, color: 'var(--text-body)' }}><span style={{ width: 36, height: 36, borderRadius: 'var(--radius-md)', background: 'var(--green-50)', color: 'var(--green-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={i} size={18} /></span>{t}</div>)}
        </div>
        <Button block size="lg" onClick={next}>Get started</Button>
      </div>}

      {step === 1 && <div>
        <h1 style={{ fontSize: 'var(--text-2xl)', margin: '0 0 8px' }}>Where are you based?</h1>
        <p style={{ color: 'var(--text-muted)', fontSize: 16, margin: '0 0 20px' }}>We'll tune distances, hours and picks to your area.</p>
        <Input adornment={<Icon name="map-pin" size={18} />} placeholder="Postcode or neighbourhood" value={loc} onChange={e => setLoc(e.target.value)} size="lg" />
        <button onClick={() => setLoc('Shoreditch, London')} style={{ display: 'flex', gap: 8, alignItems: 'center', marginTop: 14, border: 0, background: 'transparent', color: 'var(--text-link)', fontSize: 14, cursor: 'pointer', fontFamily: 'var(--font-sans)', fontWeight: 600 }}><Icon name="navigation" size={15} /> Use my current location</button>
        <Row back={back} next={next} disabled={!loc} />
      </div>}

      {step === 2 && <div>
        <h1 style={{ fontSize: 'var(--text-2xl)', margin: '0 0 8px' }}>What do you love?</h1>
        <p style={{ color: 'var(--text-muted)', fontSize: 16, margin: '0 0 20px' }}>Pick a few — this seeds your "picked for you".</p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>{categories.map(c => <CategoryChip key={c.id} icon={c.icon} label={c.label} selected={!!picks[c.id]} onClick={() => toggle(c.id)} />)}</div>
        <Row back={back} next={next} disabled={Object.values(picks).filter(Boolean).length === 0} />
      </div>}

      {step === 3 && <div>
        <h1 style={{ fontSize: 'var(--text-2xl)', margin: '0 0 8px' }}>Save a few to start</h1>
        <p style={{ color: 'var(--text-muted)', fontSize: 16, margin: '0 0 18px' }}>Based on what you love near {loc || 'you'}. Tap the bookmark on any you'd trust.</p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {businesses.slice(0, 4).map(b => <BusinessCard key={b.id} name={b.name} category={b.category} priceLevel={b.price} distance={b.distance} image={b.image} rating={b.rating} reviewCount={b.reviews} verified={b.verified} saved={!!saved[b.id]} onSave={() => setSaved(s => ({ ...s, [b.id]: !s[b.id] }))} />)}
        </div>
        <Row back={back} next={next} nextLabel={`Finish${Object.values(saved).filter(Boolean).length ? ` (${Object.values(saved).filter(Boolean).length} saved)` : ''}`} />
      </div>}
    </Shell>
  );
}

function Row({ back, next, disabled, nextLabel = 'Continue' }) {
  return <div style={{ display: 'flex', gap: 12, marginTop: 28 }}><Button variant="ghost" onClick={back}>Back</Button><Button block onClick={next} disabled={disabled}>{nextLabel}</Button></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<OnboardingApp />);

})();