// flows-discover.jsx — Home/dashboard (2 variations) + Search & filtering (Marcus)
const { WK, WPhone, WLine, WLines, WImg, WChip, WBtn, WIcon, WIconCircle, WField,
  WSearch, WDivider, WCard, WSource, WRing, WMeter, WMap, WHeatLegend, WHead, WBody } = window;

const MARCUS = { name: 'Marcus, 34', role: 'Experienced solo · 6 yrs' };

// small watch-list row: city + score + sources + trend
function WatchRow({ city, country, score, trend, sources }) {
  return (
    <WCard pad={11} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
      <WRing size={46} score={score} label="" />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 700 }}>{city}</div>
        <div style={{ fontSize: 10.5, color: WK.ink2, marginBottom: 5 }}>{country}</div>
        <div style={{ display: 'flex', gap: 5 }}>{sources}</div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ width: 0, height: 0, borderLeft: '5px solid transparent',
          borderRight: '5px solid transparent',
          [trend === 'up' ? 'borderBottom' : 'borderTop']: `7px solid ${WK.ink}`,
          margin: '0 auto 4px' }} />
        <span style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink2 }}>
          {trend === 'up' ? 'STABLE' : 'WATCH'}</span>
      </div>
    </WCard>
  );
}

// ── HOME · Variation A — feed dashboard (info-dense, default) ───
function HomeFeed() {
  return (
    <window.Annotated persona={MARCUS} flowStep="HOME · A"
      notes={[
        { n: 1, title: 'Current-location pulse', body: 'Where Marcus is now — live status & any active alert sits at the very top.' },
        { n: 2, title: 'Watch list = the spine', body: 'Saved destinations with score, provenance tags & a trend arrow. Scan in seconds (principle #3).' },
        { n: 3, title: 'Map is one tap away', body: 'A teaser strip pulls power users into the heat map fast.' },
      ]}>
      <WPhone tab="home">
        <WBody p={0} gap={0}>
          <div style={{ padding: '14px 16px 10px', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: WK.mono, fontSize: 9, color: WK.ink2, letterSpacing: 0.5 }}>GOOD MORNING</div>
              <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: -0.4 }}>Marcus</div>
            </div>
            <WIconCircle s={34} label="AVA" />
          </div>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden' }}>
            <WCard pad={12} style={{ background: WK.fill3, position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={1} /></span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                <WRing size={52} score="7.8" label="NOW" />
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink2 }}>YOU ARE IN</div>
                  <div style={{ fontSize: 15, fontWeight: 800 }}>Medellín, CO</div>
                  <div style={{ marginTop: 4 }}><window.WChip sm>1 active alert nearby</window.WChip></div>
                </div>
              </div>
            </WCard>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 13, fontWeight: 800, flex: 1 }}>Your watch list</span>
              <window.WPin n={2} />
              <span style={{ fontFamily: WK.mono, fontSize: 9, color: WK.ink2 }}>SORT ▾</span>
            </div>
            <WatchRow city="Bangkok" country="Thailand" score="8.1" trend="up"
              sources={<><WSource kind="news" /><WSource kind="nomad" /></>} />
            <WatchRow city="Mexico City" country="Mexico" score="6.4" trend="down"
              sources={<><WSource kind="both" /></>} />
            <WCard pad={0} style={{ overflow: 'hidden', position: 'relative' }}>
              <span style={{ position: 'absolute', top: 6, right: 8, zIndex: 2 }}><window.WPin n={3} /></span>
              <WMap h={84} label="HEAT MAP" blobs={[
                { top: 14, left: 30, w: 50, h: 34, risk: 2 },
                { top: 30, left: 120, w: 60, h: 38, risk: 3 },
                { top: 20, left: 200, w: 44, h: 30, risk: 4 },
              ]} />
              <div style={{ padding: '9px 12px', display: 'flex', alignItems: 'center' }}>
                <span style={{ fontSize: 12, fontWeight: 700, flex: 1 }}>Explore the heat map →</span>
              </div>
            </WCard>
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// ── HOME · Variation B — map-first dashboard (bottom sheet) ─────
function HomeMapFirst() {
  return (
    <window.Annotated persona={MARCUS} flowStep="HOME · B"
      notes={[
        { n: 1, title: 'Map is the canvas', body: 'Spatial-first for power users — open the app, see regional tension immediately.' },
        { n: 2, title: 'Draggable bottom sheet', body: 'Watch list & search ride a sheet over the map; drag up for the full feed.' },
        { n: 3, title: 'Lens chips float on map', body: 'Switch data layers without leaving the map view.' },
      ]}>
      <WPhone tab="home">
        <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
          <WMap h={300} label="HEAT MAP · LIVE" pin={{ top: 150, left: 150 }} blobs={[
            { top: 40, left: 30, w: 90, h: 70, risk: 2 },
            { top: 120, left: 150, w: 110, h: 90, risk: 3 },
            { top: 70, left: 190, w: 70, h: 60, risk: 4 },
            { top: 210, left: 40, w: 80, h: 55, risk: 1 },
          ]} />
          {/* floating lens chips */}
          <div style={{ position: 'absolute', top: 40, left: 12, right: 12, display: 'flex',
            gap: 6, overflow: 'hidden' }}>
            <WChip active sm>Civil unrest</WChip><WChip sm>Crime</WChip><WChip sm>Health</WChip>
            <span style={{ marginLeft: 'auto' }}><window.WPin n={3} /></span>
          </div>
          {/* bottom sheet */}
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 196,
            background: WK.screen, borderRadius: '18px 18px 0 0', boxShadow: '0 -6px 20px rgba(0,0,0,.10)',
            border: `1px solid ${WK.line2}`, padding: '8px 16px 14px', display: 'flex',
            flexDirection: 'column', gap: 11 }}>
            <div style={{ width: 38, height: 4, borderRadius: 2, background: WK.line,
              alignSelf: 'center', position: 'relative' }}>
              <span style={{ position: 'absolute', right: -150, top: -6 }}><window.WPin n={2} /></span>
            </div>
            <WSearch placeholder="Search the map" />
            <div style={{ fontSize: 12, fontWeight: 800, display: 'flex', alignItems: 'center', gap: 6 }}>
              Watch list <window.WPin n={1} />
            </div>
            <WatchRow city="Bangkok" country="Thailand" score="8.1" trend="up"
              sources={<><WSource kind="news" /><WSource kind="nomad" /></>} />
            <WatchRow city="Medellín" country="Colombia" score="7.8" trend="up"
              sources={<><WSource kind="both" /></>} />
          </div>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

// ── SEARCH & FILTERING ──────────────────────────────────────────
function SearchFilter() {
  const results = [
    { c: 'Lisbon, PT', s: '8.6', src: ['both'] },
    { c: 'Tbilisi, GE', s: '7.2', src: ['news', 'nomad'] },
    { c: 'Bangkok, TH', s: '8.1', src: ['news', 'nomad'] },
    { c: 'Mexico City, MX', s: '6.4', src: ['both'] },
  ];
  return (
    <window.Annotated persona={MARCUS} flowStep="EXPLORE"
      notes={[
        { n: 1, title: 'Lens chips persist', body: 'Filters carry the onboarding lens; tapping refines the result set live.' },
        { n: 2, title: 'Sort by what matters', body: 'Experienced nomads sort by civil-stability, not cost — surfaced first.' },
        { n: 3, title: 'Provenance on every row', body: 'No result without a visible source — keeps the list trustworthy at a glance.' },
        { n: 4, title: 'Full filter sheet', body: 'Advanced controls (score range, infra, region) open in a sheet.' },
      ]}>
      <WPhone tab="home">
        <div style={{ padding: '12px 16px 8px', flexShrink: 0 }}>
          <WSearch placeholder="Bangkok" />
        </div>
        <div style={{ padding: '0 16px 8px', display: 'flex', gap: 7, overflow: 'hidden', flexShrink: 0 }}>
          <WChip active>Filters</WChip><WChip active sm>Women's safety</WChip>
          <WChip sm>Health</WChip><WChip sm>Co-work</WChip>
          <span style={{ alignSelf: 'center', marginLeft: 'auto' }}><window.WPin n={1} /></span>
        </div>
        <div style={{ padding: '0 16px 8px', display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
          <span style={{ fontFamily: WK.mono, fontSize: 9, color: WK.ink2, flex: 1 }}>128 DESTINATIONS</span>
          <window.WPin n={2} />
          <span style={{ fontSize: 10.5, fontWeight: 700 }}>Sort: Stability ▾</span>
        </div>
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 9 }}>
            {results.map((r, i) => (
              <WCard key={r.c} pad={10} style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative' }}>
                {i === 0 && <span style={{ position: 'absolute', top: -8, right: 8 }}><window.WPin n={3} /></span>}
                <WImg label="THMB" h={42} w={42} r={8} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{r.c}</div>
                  <div style={{ display: 'flex', gap: 5, marginTop: 4 }}>
                    {r.src.map((k) => <WSource key={k} kind={k} />)}
                  </div>
                </div>
                <WRing size={40} score={r.s} label="" />
              </WCard>
            ))}
          </div>
        </WBody>
        <div style={{ position: 'absolute', bottom: 12, left: 0, right: 0, display: 'flex',
          justifyContent: 'center' }}>
          <div style={{ position: 'relative' }}>
            <WBtn primary>Map view</WBtn>
            <span style={{ position: 'absolute', top: -10, right: -20 }}><window.WPin n={4} /></span>
          </div>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

Object.assign(window, { HomeFeed, HomeMapFirst, SearchFilter });