// Wander — Onboarding (3-slide intro)

function Onboarding({ onDone, dense }) {
  const [step, setStep] = React.useState(0);
  const slides = [
    { art: <OnboardArt1/>, title: 'Tours that find you.', body: "Wander knows where you're standing. Walk anywhere and the right story plays at the right moment." },
    { art: <OnboardArt2/>, title: 'Free starts. Premium goes deep.', body: 'Free tours of every neighbourhood. Pro tours add hidden gems, video, AR overlays, and a dash of mischief.' },
    { art: <OnboardArt3/>, title: 'Singapore is the demo.', body: "We're live in 47 cities. Singapore's ready when you are — Marina Bay or a hawker centre, your call." },
  ];
  const s = slides[step];
  const last = step === slides.length - 1;

  return (
    <div style={{ height:'100%', background:'var(--w-cream)', display:'flex', flexDirection:'column', paddingTop:60, paddingBottom:40 }}>
      <div style={{ display:'flex', justifyContent:'flex-end', padding:'0 22px' }}>
        <button onClick={onDone} style={{ background:'none', border:'none', color:'var(--w-mute)', fontFamily:'inherit', fontSize:15, fontWeight:600, cursor:'pointer', padding:8 }}>Skip</button>
      </div>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', padding:'20px 32px' }}>
        <div key={step} style={{ animation:'wFadeUp .5s ease-out both' }}>{s.art}</div>
      </div>
      <div key={'c'+step} style={{ padding:'0 32px', animation:'wFadeUp .5s ease-out .1s both' }}>
        <h1 className="t-display" style={{ fontSize:38, lineHeight:1.15, margin:0, marginBottom:24, color:'var(--w-ink)' }}>{s.title}</h1>
        <p style={{ fontSize:16.5, lineHeight:1.45, color:'var(--w-slate)', marginTop:0, marginBottom:0 }}>{s.body}</p>
      </div>
      <div style={{ padding:'28px 22px 0', display:'flex', alignItems:'center', gap:12 }}>
        <div style={{ display:'flex', gap:6, flex:1 }}>
          {slides.map((_,i) => (
            <div key={i} style={{ height:6, borderRadius:3, width:i===step?24:6, background:i===step?'var(--w-ink)':'var(--w-line)', transition:'all .3s' }}/>
          ))}
        </div>
        <button className="w-btn" onClick={() => last ? onDone() : setStep(step+1)} style={{ height:56, paddingLeft:28, paddingRight:28 }}>
          {last ? 'Allow location' : 'Next'} <Icon.arrow size={18}/>
        </button>
      </div>
    </div>
  );
}

function OnboardArt1() {
  return (
    <div style={{ width:280, height:280, position:'relative' }}>
      {[0,1,2,3].map(i => (
        <div key={i} style={{ position:'absolute', inset:i*28+'px', borderRadius:'50%', border:`1.5px dashed rgba(255,201,60,${0.85-i*0.18})`, animation:`wPulse 3s ${i*0.4}s ease-in-out infinite` }}/>
      ))}
      <div style={{ position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)', width:84, height:84, borderRadius:28, background:'linear-gradient(135deg,#FFC93C,#F5A623)', boxShadow:'0 12px 28px rgba(255,201,60,0.55)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:44 }}>📍</div>
      {[{x:30,y:60,e:'🦁'},{x:220,y:50,e:'🌳'},{x:40,y:220,e:'🏮'},{x:230,y:230,e:'🪷'}].map((d,i) => (
        <div key={i} style={{ position:'absolute', left:d.x, top:d.y, width:44, height:44, borderRadius:14, background:'var(--w-paper)', boxShadow:'var(--sh-card)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:22, animation:`wFloat 3.5s ${i*0.3}s ease-in-out infinite` }}>{d.e}</div>
      ))}
    </div>
  );
}

function OnboardArt2() {
  return (
    <div style={{ width:280, height:280, position:'relative' }}>
      <div style={{ position:'absolute', left:12, top:40, width:150, height:200, background:'linear-gradient(140deg,#2DD4A7,#4FB7E8)', borderRadius:24, boxShadow:'0 14px 32px rgba(45,212,167,0.35)', transform:'rotate(-7deg)', padding:16, display:'flex', flexDirection:'column', justifyContent:'space-between', color:'#003D2C' }}>
        <span className="w-chip w-chip--free" style={{ alignSelf:'flex-start' }}>FREE</span>
        <div style={{ fontSize:64, lineHeight:1, alignSelf:'center', filter:'drop-shadow(0 4px 10px rgba(0,0,0,0.15))' }}>🌳</div>
        <div style={{ fontWeight:700, fontSize:14 }}>Gardens by the Bay</div>
      </div>
      <div style={{ position:'absolute', right:8, top:60, width:150, height:200, background:'linear-gradient(140deg,#1A1812,#4A4538)', borderRadius:24, boxShadow:'0 14px 32px rgba(26,24,18,0.4)', transform:'rotate(8deg)', padding:16, display:'flex', flexDirection:'column', justifyContent:'space-between', color:'var(--w-yellow)' }}>
        <span className="w-chip w-chip--pro" style={{ alignSelf:'flex-start', background:'var(--w-yellow)', color:'var(--w-yellow-ink)' }}>PRO · $6</span>
        <div style={{ fontSize:64, lineHeight:1, alignSelf:'center', filter:'drop-shadow(0 4px 10px rgba(0,0,0,0.3))' }}>🕌</div>
        <div style={{ fontWeight:700, fontSize:14 }}>Kampong Glam</div>
      </div>
    </div>
  );
}

function OnboardArt3() {
  return (
    <div style={{ width:280, height:280, position:'relative' }}>
      <div style={{ position:'absolute', inset:20, borderRadius:'50%', background:'radial-gradient(circle at 35% 30%,#B8DDEA 0%,#4FB7E8 80%)', boxShadow:'0 20px 40px rgba(79,183,232,0.35),inset 0 0 0 4px rgba(255,255,255,0.3)', overflow:'hidden' }}>
        <div style={{ position:'absolute', top:'30%', left:'20%', width:90, height:70, borderRadius:'60% 40% 50% 50%', background:'#F4ECD2' }}/>
        <div style={{ position:'absolute', top:'55%', left:'45%', width:60, height:50, borderRadius:'40% 60% 60% 40%', background:'#C8E0A8' }}/>
        <div style={{ position:'absolute', top:'20%', right:'15%', width:50, height:40, borderRadius:'60% 40% 70% 30%', background:'#F4ECD2' }}/>
      </div>
      <div style={{ position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-100%)', fontSize:48, filter:'drop-shadow(0 6px 12px rgba(0,0,0,0.25))', animation:'wFloat 2.5s ease-in-out infinite' }}>📍</div>
      <div style={{ position:'absolute', bottom:0, left:'50%', transform:'translateX(-50%)', background:'var(--w-ink)', color:'var(--w-yellow)', padding:'10px 18px', borderRadius:999, fontWeight:700, fontSize:14, boxShadow:'var(--sh-pop)' }}>Singapore · 47 cities</div>
    </div>
  );
}

Object.assign(window, { Onboarding });