// ROAMR — Onboarding flow. Four full-bleed photo screens, swipeable feel.

const { Photo: OB_Photo, Pill: OB_Pill, LOGOS: OB_LOGOS } = window;

function OnboardingScreen({ onDone, logoKey = 'blaze' }) {
  const T = window.TOKENS;
  const [step, setStep] = React.useState(0);
  const Logo = (OB_LOGOS[logoKey] || OB_LOGOS.blaze).render;
  const [interests, setInterests] = React.useState(['hike', 'gravel']);
  const [regions, setRegions] = React.useState(['peak', 'snowdonia']);
  const next = () => step < 3 ? setStep(step + 1) : onDone && onDone();
  const back = () => step > 0 ? setStep(step - 1) : null;

  const TOTAL = 4;

  // ── Screen content ──
  let body;
  if (step === 0) {
    body = (
      <div style={{ position: 'absolute', inset: 0 }}>
        <OB_Photo caption="welcome hero" tone={0} height="100%" />
        <div style={{ position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 35%, transparent 45%, rgba(0,0,0,0.85) 100%)' }} />
        <div style={{ position: 'absolute', top: 60, left: 24 }}>
          <Logo T={T} height={48} />
        </div>
        <div style={{ position: 'absolute', left: 24, right: 24, bottom: 140, color: '#fff' }}>
          <div style={{ fontFamily: T.fontM, fontSize: 10, letterSpacing: 1.8, color: T.signalGlow, marginBottom: 14 }}>● WELCOME TO ROAMR</div>
          <div style={{ fontFamily: T.fontD, fontSize: 38, fontWeight: 600, letterSpacing: -0.8, lineHeight: 1.05, marginBottom: 14 }}>
            Find adventures<br/>that fit your life.
          </div>
          <div style={{ fontFamily: T.fontB, fontSize: 15, lineHeight: 1.5, opacity: 0.92, maxWidth: 320 }}>
            One app for trails, byways and wild routes — plus the places, cafés and overnights that make a trip worth taking.
          </div>
        </div>
      </div>
    );
  } else if (step === 1) {
    const opts = [
      { k: 'hike', label: 'Walk & hike', tone: 1 },
      { k: 'gravel', label: 'Gravel & cycling', tone: 2 },
      { k: 'moto', label: 'Motorbike', tone: 0 },
      { k: '4x4', label: '4×4 & vanlife', tone: 3 },
      { k: 'mtb', label: 'Mountain bike', tone: 4 },
      { k: 'run', label: 'Trail running', tone: 1 },
      { k: 'dog', label: 'Dog walks', tone: 2 },
      { k: 'camp', label: 'Camping', tone: 0 },
    ];
    body = (
      <div style={{ padding: '80px 22px 140px', background: T.bg, minHeight: '100%' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 10 }}>STEP 2 OF 4</div>
        <div style={{ fontFamily: T.fontD, fontSize: 30, fontWeight: 600, color: T.textHi, letterSpacing: -0.6, lineHeight: 1.1, marginBottom: 10 }}>What do you love?</div>
        <div style={{ fontFamily: T.fontB, fontSize: 14, color: T.textLo, marginBottom: 22, lineHeight: 1.5 }}>
          Pick a few. We'll tune your feed, suggested trips and AI prompts. You can change this any time.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {opts.map(o => {
            const active = interests.includes(o.k);
            return (
              <button key={o.k} onClick={() => setInterests(
                active ? interests.filter(x => x !== o.k) : [...interests, o.k]
              )} style={{
                position: 'relative', height: 110, padding: 0, border: 'none',
                borderRadius: 14, overflow: 'hidden', cursor: 'pointer',
                boxShadow: active ? `0 0 0 2px ${T.signal}` : 'none',
              }}>
                <OB_Photo caption={o.k} tone={o.tone} height="100%" />
                <div style={{ position: 'absolute', inset: 0,
                  background: active
                    ? `linear-gradient(180deg, rgba(214,120,58,0.30), rgba(0,0,0,0.55))`
                    : 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7))' }} />
                <div style={{ position: 'absolute', left: 12, right: 12, bottom: 10, color: '#fff', textAlign: 'left' }}>
                  <div style={{ fontFamily: T.fontD, fontSize: 15, fontWeight: 600 }}>{o.label}</div>
                </div>
                {active && (
                  <div style={{
                    position: 'absolute', top: 10, right: 10, width: 24, height: 24, borderRadius: 12,
                    background: T.signal, color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: T.fontM, fontSize: 12, fontWeight: 700,
                  }}>✓</div>
                )}
              </button>
            );
          })}
        </div>
      </div>
    );
  } else if (step === 2) {
    const opts = [
      { k: 'peak', label: 'Peak District', tone: 1 },
      { k: 'lakes', label: 'Lake District', tone: 3 },
      { k: 'snowdonia', label: 'Snowdonia', tone: 0 },
      { k: 'yorkshire', label: 'Yorkshire Dales', tone: 2 },
      { k: 'scotland', label: 'Scottish Highlands', tone: 4 },
      { k: 'cornwall', label: 'Cornwall coast', tone: 1 },
      { k: 'brecon', label: 'Brecon Beacons', tone: 2 },
      { k: 'norfolk', label: 'East Anglia', tone: 0 },
    ];
    body = (
      <div style={{ padding: '80px 22px 140px', background: T.bg, minHeight: '100%' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 10 }}>STEP 3 OF 4</div>
        <div style={{ fontFamily: T.fontD, fontSize: 30, fontWeight: 600, color: T.textHi, letterSpacing: -0.6, lineHeight: 1.1, marginBottom: 10 }}>Where do you roam?</div>
        <div style={{ fontFamily: T.fontB, fontSize: 14, color: T.textLo, marginBottom: 22, lineHeight: 1.5 }}>
          We'll prioritise routes and places in your home regions. Add anywhere you might travel.
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {opts.map(o => {
            const active = regions.includes(o.k);
            return (
              <button key={o.k} onClick={() => setRegions(
                active ? regions.filter(x => x !== o.k) : [...regions, o.k]
              )} style={{
                padding: '10px 16px', borderRadius: 100, cursor: 'pointer',
                fontFamily: T.fontB, fontSize: 14, fontWeight: 500,
                background: active ? T.signal : T.card,
                color: active ? '#fff' : T.text,
                border: `1px solid ${active ? T.signal : T.border}`,
              }}>{active ? '✓ ' : '+ '}{o.label}</button>
            );
          })}
        </div>
        <div style={{
          marginTop: 24, padding: 16,
          background: T.card, border: `1px solid ${T.border}`, borderRadius: 14,
          fontFamily: T.fontB, fontSize: 13, color: T.textLo, lineHeight: 1.55,
        }}>
          <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.signal, letterSpacing: 1.4, marginBottom: 6 }}>● HOME REGION</div>
          We've used your location to pre-pick <b style={{ color: T.textHi, fontWeight: 600 }}>Peak District</b>. Tap any tile to add more.
        </div>
      </div>
    );
  } else {
    body = (
      <div style={{ padding: '80px 22px 140px', background: T.bg, minHeight: '100%' }}>
        <div style={{ fontFamily: T.fontM, fontSize: 10, color: T.signal, letterSpacing: 1.6, marginBottom: 10 }}>STEP 4 OF 4</div>
        <div style={{ fontFamily: T.fontD, fontSize: 30, fontWeight: 600, color: T.textHi, letterSpacing: -0.6, lineHeight: 1.1, marginBottom: 10 }}>A couple of permissions.</div>
        <div style={{ fontFamily: T.fontB, fontSize: 14, color: T.textLo, marginBottom: 28, lineHeight: 1.5 }}>
          You're in control — each can be toggled later. We'll never share your location.
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
          {[
            { kicker: 'PRECISE LOCATION', title: 'Find routes around you', body: 'So nearby trails, places and weather feel relevant from day one.', tone: 1 },
            { kicker: 'PUSH NOTIFICATIONS', title: 'Closures & TRO alerts', body: 'For saved routes only. Quiet by default — never marketing.', tone: 2 },
            { kicker: 'OFFLINE PACKS', title: 'Download maps for your home region', body: '~120 MB. Plan and ride with no signal needed.', tone: 0 },
          ].map((p, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              background: T.card, border: `1px solid ${T.border}`,
              borderRadius: 14, padding: 14,
            }}>
              <div style={{ width: 56, height: 56, borderRadius: 12, overflow: 'hidden', flexShrink: 0 }}>
                <OB_Photo caption={p.kicker.toLowerCase().split(' ')[0]} tone={p.tone} height={56} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: T.fontM, fontSize: 9, color: T.signal, letterSpacing: 1.4, marginBottom: 3 }}>{p.kicker}</div>
                <div style={{ fontFamily: T.fontD, fontSize: 15, fontWeight: 600, color: T.textHi, letterSpacing: -0.2, marginBottom: 3 }}>{p.title}</div>
                <div style={{ fontFamily: T.fontB, fontSize: 12, color: T.textLo, lineHeight: 1.4 }}>{p.body}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{
          padding: 14, background: T.cardElev, border: `1px solid ${T.border}`,
          borderRadius: 14, borderLeft: `3px solid ${T.signal}`,
          fontFamily: T.fontB, fontSize: 12, color: T.text, lineHeight: 1.55, fontStyle: 'italic',
        }}>
          ROAMR is a planning aid, not legal advice. Always verify local signs and authority notices before riding or accessing private land.
        </div>
      </div>
    );
  }

  // ── Bottom bar (steps + CTA) ──
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, overflowY: 'auto' }}>
        {body}
      </div>

      {/* Skip on welcome */}
      {step === 0 && (
        <button onClick={onDone} style={{
          position: 'absolute', top: 64, right: 22,
          background: 'transparent', border: 'none', color: '#fff',
          fontFamily: T.fontB, fontSize: 13, fontWeight: 500, cursor: 'pointer',
          padding: '6px 10px', opacity: 0.85,
        }}>Skip →</button>
      )}

      {/* Bottom bar */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '14px 20px 30px',
        background: step === 0 ? 'transparent' : T.bg,
        borderTop: step === 0 ? 'none' : `1px solid ${T.border}`,
      }}>
        {/* dots */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginBottom: 14 }}>
          {[0, 1, 2, 3].map(i => (
            <span key={i} style={{
              width: i === step ? 18 : 6, height: 6, borderRadius: 3,
              background: i === step ? T.signal : (step === 0 ? 'rgba(255,255,255,0.4)' : T.borderSoft),
              transition: 'width 0.18s',
            }} />
          ))}
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          {step > 0 && (
            <button onClick={back} style={{
              padding: '14px 20px', background: 'transparent',
              color: step === 0 ? '#fff' : T.text, border: `1px solid ${step === 0 ? 'rgba(255,255,255,0.3)' : T.borderSoft}`,
              borderRadius: 100, fontFamily: T.fontB, fontSize: 14, fontWeight: 500, cursor: 'pointer',
            }}>Back</button>
          )}
          <button onClick={next} style={{
            flex: 1, padding: '14px', background: T.signal, color: '#fff', border: 'none',
            borderRadius: 100, fontFamily: T.fontB, fontSize: 15, fontWeight: 600, cursor: 'pointer',
          }}>
            {step === 0 ? 'Get started' : step === 3 ? 'Enter ROAMR' : 'Continue'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingScreen });