// flows-onboarding.jsx — Onboarding & persona profile setup (Priya, first-timer)
const { WK, WPhone, WLine, WLines, WImg, WChip, WBtn, WIcon, WField,
  WDivider, WCard, WHead, WBody } = window;

const PRIYA = { name: 'Priya, 27', role: 'First-timer · solo' };

// progress dots
function Dots({ n, i }) {
  return (
    <div style={{ display: 'flex', gap: 5, justifyContent: 'center' }}>
      {Array.from({ length: n }).map((_, k) =>
        <div key={k} style={{ width: k === i ? 16 : 6, height: 6, borderRadius: 3,
          background: k === i ? WK.ink : WK.line }} />)}
    </div>
  );
}

// 01 — Welcome / value prop
function OnbWelcome() {
  return (
    <window.Annotated persona={PRIYA} flowStep="ONBOARDING"
      notes={[
        { n: 1, title: 'Plain-language promise', body: 'No raw scores up front — leads with what the app does for an anxious first-timer.' },
        { n: 2, title: 'Two doors', body: 'New users continue; returning users skip straight to sign-in.' },
      ]}>
      <WPhone>
        <WBody p={22} gap={0} style={{ justifyContent: 'space-between' }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 18, textAlign: 'center' }}>
            <div style={{ width: 60, height: 60, borderRadius: 16, background: WK.fill,
              border: `1.5px solid ${WK.line}`, display: 'flex', alignItems: 'center',
              justifyContent: 'center', fontFamily: WK.mono, fontSize: 9, color: WK.ink2 }}>LOGO</div>
            <div>
              <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: -0.6, lineHeight: 1.1 }}>
                Know before <window.WPin n={1} /> you go.
              </div>
              <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8,
                alignItems: 'center' }}>
                <WLine w="86%" h={7} /><WLine w="74%" h={7} /><WLine w="80%" h={7} />
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11, paddingBottom: 6 }}>
            <span style={{ alignSelf: 'center' }}><window.WPin n={2} /></span>
            <WBtn primary full>Get started</WBtn>
            <WBtn full>I already have an account</WBtn>
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// 02 — Who are you? (profile archetype)
function OnbProfile() {
  const opts = [
    { t: 'First-timer', d: 'New to the nomad life', on: true },
    { t: 'Experienced solo nomad', d: 'I move every few months' },
    { t: 'Traveling as a family', d: 'Kids / dependents with me' },
    { t: 'I have accessibility needs', d: 'Mobility, sensory, medical' },
  ];
  return (
    <window.Annotated persona={PRIYA} flowStep="ONBOARDING"
      notes={[
        { n: 1, title: 'One question sets the lens', body: 'The archetype reframes every score downstream — the core of "Inclusive by Default".' },
        { n: 2, title: 'Multi-select allowed', body: 'Priya is a first-timer AND solo female — not mutually exclusive.' },
      ]}>
      <WPhone>
        <WHead title="What brings you here?" sub="We'll tune SafePass to fit you" />
        <WBody gap={11}>
          <span style={{ position: 'absolute', right: 14, top: 52 }}><window.WPin n={1} /></span>
          {opts.map((o, i) => (
            <WCard key={o.t} pad={13} style={{ display: 'flex', alignItems: 'center', gap: 12,
              borderColor: o.on ? WK.ink : WK.line, borderWidth: o.on ? 2 : 1,
              background: o.on ? WK.fill3 : WK.screen }}>
              <WIcon s={26} r={7} c={o.on ? WK.ink : WK.ink3} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 700 }}>{o.t}</div>
                <div style={{ fontSize: 11, color: WK.ink2, marginTop: 1 }}>{o.d}</div>
              </div>
              <div style={{ width: 18, height: 18, borderRadius: '50%',
                border: `2px solid ${o.on ? WK.ink : WK.line}`,
                background: o.on ? WK.ink : 'transparent' }} />
              {i === 0 && <span style={{ position: 'absolute', right: 6 }}></span>}
            </WCard>
          ))}
          <div style={{ fontSize: 10.5, color: WK.ink2, display: 'flex', gap: 5, alignItems: 'center' }}>
            <window.WPin n={2} /> Pick all that apply.
          </div>
          <div style={{ flex: 1 }} />
          <Dots n={4} i={0} />
          <WBtn primary full>Continue</WBtn>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// 03 — Tune your safety lens (the filters that personalize data)
function OnbLens() {
  const rows = [
    { t: "Women's safety indicators", on: true },
    { t: 'Civil-unrest & protest alerts', on: true },
    { t: 'Healthcare access priority', on: true },
    { t: 'Accessibility infrastructure', on: false },
    { t: 'Child & family safety', on: false },
    { t: 'LGBTQ+ legal climate', on: false },
  ];
  return (
    <window.Annotated persona={PRIYA} flowStep="ONBOARDING"
      notes={[
        { n: 1, title: 'Lenses, not settings', body: 'Each toggle adds a data layer & reorders what surfaces on every destination.' },
        { n: 2, title: 'Reversible later', body: 'These live in Profile — nothing here is permanent, lowers commitment anxiety.' },
      ]}>
      <WPhone>
        <WHead title="Tune your safety lens" sub="Toggle the data that matters to you" />
        <WBody gap={10}>
          <span style={{ position: 'absolute', right: 14, top: 52 }}><window.WPin n={1} /></span>
          {rows.map((r) => (
            <div key={r.t} style={{ display: 'flex', alignItems: 'center', gap: 12,
              padding: '9px 0', borderBottom: `1px solid ${WK.line2}` }}>
              <WIcon s={22} r={6} />
              <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{r.t}</span>
              <div style={{ width: 36, height: 20, borderRadius: 12, padding: 2,
                background: r.on ? WK.ink : WK.fill, border: `1px solid ${r.on ? WK.ink : WK.line}`,
                display: 'flex', justifyContent: r.on ? 'flex-end' : 'flex-start' }}>
                <div style={{ width: 16, height: 16, borderRadius: '50%', background: '#fff' }} />
              </div>
            </div>
          ))}
          <div style={{ fontSize: 10.5, color: WK.ink2, display: 'flex', gap: 5, alignItems: 'center', marginTop: 2 }}>
            <window.WPin n={2} /> Change these any time in your profile.
          </div>
          <div style={{ flex: 1 }} />
          <Dots n={4} i={1} />
          <WBtn primary full>Continue</WBtn>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// 04 — Destinations of interest
function OnbDest() {
  const regions = ['Southeast Asia', 'Western Europe', 'Latin America', 'Eastern Europe',
    'East Asia', 'North Africa'];
  const cities = ['Bangkok', 'Lisbon', 'Mexico City', 'Chiang Mai', 'Bali'];
  return (
    <window.Annotated persona={PRIYA} flowStep="ONBOARDING"
      notes={[
        { n: 1, title: 'Seeds the dashboard', body: 'Picks here become the first watch-list cards on Home.' },
        { n: 2, title: 'Skippable', body: 'Priya can explore freely — never a hard gate before value.' },
      ]}>
      <WPhone>
        <WHead title="Anywhere on your radar?" sub="Optional — we'll start your watch list" />
        <WBody gap={14}>
          <window.WSearch placeholder="Search a city or country" />
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: WK.ink2, textTransform: 'uppercase',
              letterSpacing: 0.4, marginBottom: 8 }}>Regions</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
              {regions.map((r, i) => <WChip key={r} active={i < 2}>{r}</WChip>)}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: WK.ink2, textTransform: 'uppercase',
              letterSpacing: 0.4, marginBottom: 8, display: 'flex', gap: 6, alignItems: 'center' }}>
              Popular with first-timers <window.WPin n={1} /></div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
              {cities.map((c, i) => <WChip key={c} active={i === 0}>{c}</WChip>)}
            </div>
          </div>
          <div style={{ flex: 1 }} />
          <Dots n={4} i={2} />
          <div style={{ display: 'flex', gap: 10 }}>
            <div style={{ flex: 1 }}><WBtn full>Skip <window.WPin n={2} /></WBtn></div>
            <div style={{ flex: 1 }}><WBtn primary full>Continue</WBtn></div>
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// 05 — You're set (personalized summary + trust intro)
function OnbReady() {
  return (
    <window.Annotated persona={PRIYA} flowStep="ONBOARDING → HOME"
      notes={[
        { n: 1, title: 'Reflects choices back', body: 'Confirms the lens so Priya trusts that the app heard her.' },
        { n: 2, title: 'Sets the trust contract', body: 'Names the two data sources before she ever sees a score — principle #1.' },
      ]}>
      <WPhone>
        <WBody p={22} gap={16}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
            textAlign: 'center', marginTop: 8 }}>
            <div style={{ width: 48, height: 48, borderRadius: '50%', border: `2px solid ${WK.ink}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ width: 18, height: 10, borderLeft: `3px solid ${WK.ink}`,
                borderBottom: `3px solid ${WK.ink}`, transform: 'rotate(-45deg) translateY(-2px)' }} />
            </div>
            <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: -0.4 }}>You're all set, Priya</div>
          </div>
          <WCard pad={13}>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: WK.ink2, textTransform: 'uppercase',
              letterSpacing: 0.4, marginBottom: 9, display: 'flex', gap: 6, alignItems: 'center' }}>
              Your lens <window.WPin n={1} /></div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {["Women's safety", 'Healthcare', 'Civil-unrest alerts', 'First-timer mode'].map((t) =>
                <WChip key={t} active sm>{t}</WChip>)}
            </div>
          </WCard>
          <WCard pad={13} style={{ background: WK.fill3 }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <window.WPin n={2} />
              <div>
                <div style={{ fontSize: 12.5, fontWeight: 700, marginBottom: 4 }}>Every score is sourced</div>
                <div style={{ display: 'flex', gap: 6, marginBottom: 7 }}>
                  <window.WSource kind="news" /><window.WSource kind="nomad" />
                </div>
                <WLines n={2} last="80%" />
              </div>
            </div>
          </WCard>
          <div style={{ flex: 1 }} />
          <WBtn primary full>Show me my dashboard</WBtn>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

Object.assign(window, { OnbWelcome, OnbProfile, OnbLens, OnbDest, OnbReady });