// flows-modes.jsx — Family mode (Okafors) + Accessibility mode (Taryn)
const { WK, WPhone, WLine, WLines, WImg, WChip, WBtn, WIcon, WIconCircle,
  WSearch, WDivider, WCard, WSource, WRing, WMeter, WMap, WHeatLegend, WHead, WBody } = window;

const OKAFOR = { name: 'The Okafors', role: 'Family of 4 · kids 5 & 8' };
const TARYN = { name: 'Taryn, 41', role: 'Ambulatory wheelchair user' };

// mode banner
function ModeBanner({ label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '8px 16px',
      background: WK.fill, borderBottom: `1px solid ${WK.line2}`, flexShrink: 0 }}>
      <WIcon s={18} r={5} />
      <span style={{ fontSize: 11.5, fontWeight: 800, flex: 1 }}>{label}</span>
      <div style={{ width: 34, height: 19, borderRadius: 11, background: WK.ink, padding: 2,
        display: 'flex', justifyContent: 'flex-end' }}>
        <div style={{ width: 15, height: 15, borderRadius: '50%', background: '#fff' }} />
      </div>
    </div>
  );
}

// ── FAMILY MODE ─────────────────────────────────────────────────
function FamilyMode() {
  return (
    <window.Annotated persona={OKAFOR} flowStep="FAMILY MODE"
      notes={[
        { n: 1, title: 'A lens, not a separate app', body: 'One toggle re-frames the whole destination through a family-specific filter.' },
        { n: 2, title: 'Family-only sub-scores', body: 'Child safety, school access, pediatric care, family-community density — data no competitor consolidates.' },
        { n: 3, title: 'Pediatric care surfaced', body: 'Healthcare narrowed to children\u2019s facilities, with provenance.' },
        { n: 4, title: 'Find their people', body: 'Neighborhoods with other nomadic / expat families.' },
        { n: 5, title: 'Share with extended family', body: 'A curated report relatives can follow — a real family use case.' },
      ]}>
      <WPhone tab="map">
        <ModeBanner label="Family mode" />
        <div style={{ position: 'relative', flexShrink: 0 }}>
          <span style={{ position: 'absolute', top: -22, right: 14, zIndex: 2 }}><window.WPin n={1} /></span>
        </div>
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <WRing size={56} score="8.2" label="FAMILY" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 18, fontWeight: 800 }}>Porto</div>
                <div style={{ fontSize: 11, color: WK.ink2, marginBottom: 6 }}>Portugal · for families</div>
                <div style={{ display: 'flex', gap: 5 }}><WSource kind="news" /><WSource kind="nomad" /></div>
              </div>
            </div>
            <WCard pad={12} style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={2} /></span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                <WMeter label="Child safety" fill={0.84} tag="8.4" />
                <WMeter label="School access" fill={0.79} tag="7.9" />
                <WMeter label="Family community" fill={0.72} tag="7.2" />
              </div>
            </WCard>
            <WCard pad={11} style={{ display: 'flex', gap: 11, position: 'relative', alignItems: 'center' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={3} /></span>
              <WIconCircle s={38} label="PED" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700 }}>Pediatric healthcare</div>
                <div style={{ fontSize: 10.5, color: WK.ink2, marginTop: 1 }}>4 facilities · 2 English-speaking</div>
              </div>
              <div style={{ width: 12, height: 12, borderTop: `2px solid ${WK.ink}`,
                borderRight: `2px solid ${WK.ink}`, transform: 'rotate(45deg)' }} />
            </WCard>
            <WCard pad={11} style={{ display: 'flex', gap: 11, position: 'relative', alignItems: 'center' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={4} /></span>
              <WIconCircle s={38} label="HOOD" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700 }}>Family-friendly areas</div>
                <div style={{ fontSize: 10.5, color: WK.ink2, marginTop: 1 }}>Foz · Boavista · 31 nomad families</div>
              </div>
              <div style={{ width: 12, height: 12, borderTop: `2px solid ${WK.ink}`,
                borderRight: `2px solid ${WK.ink}`, transform: 'rotate(45deg)' }} />
            </WCard>
          </div>
        </WBody>
        <div style={{ flexShrink: 0, borderTop: `1px solid ${WK.line2}`, padding: '9px 14px',
          background: WK.screen, position: 'relative' }}>
          <span style={{ position: 'absolute', top: -10, right: 14 }}><window.WPin n={5} /></span>
          <WBtn primary full sm>Share family report</WBtn>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

// ── ACCESSIBILITY MODE ──────────────────────────────────────────
function AccessibilityMode() {
  return (
    <window.Annotated persona={TARYN} flowStep="ACCESSIBILITY MODE"
      notes={[
        { n: 1, title: 'Accessibility heat layer', body: 'A dedicated map layer for streets, transit, co-work & healthcare — not buried in a venue checkbox.' },
        { n: 2, title: 'Full vs partial, made explicit', body: 'Distinguishes full ambulatory access from partial — the distinction that strands people.' },
        { n: 3, title: 'Nomad-verified, by wheelchair users', body: 'Condition reports from people with the same needs — not tourism-board copy.' },
        { n: 4, title: 'Flag outdated reports', body: 'Taryn can correct stale info; the data chain self-heals (ground-truth-first).' },
      ]}>
      <WPhone tab="map">
        <ModeBanner label="Accessibility mode" />
        <div style={{ position: 'relative', flexShrink: 0 }}>
          <WMap h={120} label="ACCESSIBILITY LAYER" pin={{ top: 56, left: 140 }} blobs={[
            { top: 18, left: 24, w: 70, h: 44, risk: 1 },
            { top: 50, left: 120, w: 80, h: 50, risk: 3 },
            { top: 24, left: 210, w: 50, h: 40, risk: 2 },
          ]} />
          <span style={{ position: 'absolute', top: 6, right: 10 }}><window.WPin n={1} /></span>
        </div>
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <WRing size={52} score="6.7" label="ACCESS" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 17, fontWeight: 800 }}>Barcelona</div>
                <div style={{ fontSize: 11, color: WK.ink2 }}>Wheelchair accessibility</div>
              </div>
            </div>
            <WCard pad={12} style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={2} /></span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                <WMeter label="Streets" fill={0.7} tag="Full" />
                <WMeter label="Metro / transit" fill={0.45} tag="Part" />
                <WMeter label="Co-working" fill={0.62} tag="Full" />
                <WMeter label="Healthcare" fill={0.8} tag="Full" />
              </div>
            </WCard>
            <div style={{ fontSize: 12, fontWeight: 800, display: 'flex', alignItems: 'center', gap: 6 }}>
              Condition reports <window.WPin n={3} /></div>
            <WCard pad={11} style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={4} /></span>
              <div style={{ display: 'flex', gap: 6, marginBottom: 6, alignItems: 'center' }}>
                <WSource kind="nomad" />
                <WChip sm>Full ambulatory</WChip>
                <span style={{ fontFamily: WK.mono, fontSize: 8, color: WK.ink3, marginLeft: 'auto' }}>FLAG ⚑</span>
              </div>
              <WLines n={2} last="65%" />
            </WCard>
            <WCard pad={11}>
              <div style={{ display: 'flex', gap: 6, marginBottom: 6, alignItems: 'center' }}>
                <WSource kind="nomad" />
                <WChip sm>Partial only</WChip>
                <span style={{ fontFamily: WK.mono, fontSize: 8, color: WK.ink3, marginLeft: 'auto' }}>3 MO AGO</span>
              </div>
              <WLines n={2} last="50%" />
            </WCard>
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

Object.assign(window, { FamilyMode, AccessibilityMode });