// flows-map.jsx — Heat map (2 variations) + region drill-in + civil-unrest alerts (Marcus)
const { WK, WPhone, WLine, WLines, WImg, WChip, WBtn, WIcon, WIconCircle,
  WSearch, WDivider, WCard, WSource, WRing, WMeter, WMap, WHeatLegend, WHead, WBody } = window;

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

// ── HEAT MAP · Variation A — full-bleed + tap-to-preview card ───
function MapFull() {
  return (
    <window.Annotated persona={MARCUS_M} flowStep="MAP · A"
      notes={[
        { n: 1, title: 'Layer switcher', body: 'Civil unrest / crime / health / accessibility — one tap swaps the heat layer.' },
        { n: 2, title: 'Hatch = risk, not color', body: 'Density encodes tension level so it survives grayscale & colour-blind users. Legend always visible.' },
        { n: 3, title: 'Tap a region → preview', body: 'A peek card slides up with the headline score + a way into the full region view.' },
      ]}>
      <WPhone tab="map">
        <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
          <WMap h={520} label="WORLD · CIVIL UNREST" pin={{ top: 250, left: 120 }} blobs={[
            { top: 60, left: 20, w: 110, h: 80, risk: 2 },
            { top: 150, left: 90, w: 130, h: 110, risk: 3 },
            { top: 90, left: 180, w: 90, h: 70, risk: 4 },
            { top: 250, left: 30, w: 90, h: 70, risk: 1 },
            { top: 300, left: 170, w: 100, h: 80, risk: 2 },
          ]} />
          {/* search + layers */}
          <div style={{ position: 'absolute', top: 12, left: 12, right: 12, display: 'flex',
            flexDirection: 'column', gap: 8 }}>
            <WSearch placeholder="Search the map" />
            <div style={{ display: 'flex', gap: 6, overflow: 'hidden' }}>
              <WChip active sm>Civil unrest</WChip><WChip sm>Crime</WChip><WChip sm>Health</WChip>
              <span style={{ alignSelf: 'center' }}><window.WPin n={1} /></span>
            </div>
          </div>
          {/* legend */}
          <div style={{ position: 'absolute', top: 96, right: 12, background: WK.screen,
            border: `1px solid ${WK.line2}`, borderRadius: 8, padding: '8px 9px' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {['High', 'Elevated', 'Moderate', 'Low'].map((t, i) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span className={`wk-hatch${4 - i}`} style={{ width: 13, height: 9, borderRadius: 2,
                    border: `1px solid ${WK.line}` }} />
                  <span style={{ fontSize: 8.5, color: WK.ink2 }}>{t}</span>
                </div>
              ))}
            </div>
            <span style={{ position: 'absolute', left: -22, top: 2 }}><window.WPin n={2} /></span>
          </div>
          {/* peek card */}
          <div style={{ position: 'absolute', left: 12, right: 12, bottom: 12, background: WK.screen,
            borderRadius: 12, border: `1px solid ${WK.line}`, padding: 12,
            boxShadow: '0 6px 20px rgba(0,0,0,.12)', display: 'flex', alignItems: 'center', gap: 11 }}>
            <span style={{ position: 'absolute', top: -10, right: 12 }}><window.WPin n={3} /></span>
            <WRing size={48} score="6.4" label="" />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 800 }}>Mexico City</div>
              <div style={{ fontSize: 10.5, color: WK.ink2, marginBottom: 5 }}>Elevated unrest · 2 active reports</div>
              <div style={{ display: 'flex', gap: 5 }}><WSource kind="news" /><WSource kind="nomad" /></div>
            </div>
            <div style={{ width: 14, height: 14, borderTop: `2px solid ${WK.ink}`,
              borderRight: `2px solid ${WK.ink}`, transform: 'rotate(45deg)' }} />
          </div>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

// ── HEAT MAP · Variation B — split map + ranked list ────────────
function MapSplit() {
  const rows = [
    { c: 'Lisbon, PT', s: '8.6', r: 1 },
    { c: 'Bangkok, TH', s: '8.1', r: 1 },
    { c: 'Medellín, CO', s: '7.8', r: 2 },
    { c: 'Tbilisi, GE', s: '7.2', r: 2 },
    { c: 'Mexico City, MX', s: '6.4', r: 3 },
  ];
  return (
    <window.Annotated persona={MARCUS_M} flowStep="MAP · B"
      notes={[
        { n: 1, title: 'Map + ranking together', body: 'Half map, half ranked list — compare spatial pattern against a hard ordering.' },
        { n: 2, title: 'Tap row ↔ highlight pin', body: 'List and map are linked; selecting a city pans the map to it.' },
        { n: 3, title: 'Risk badge per row', body: 'Same hatch language as the map keeps the two halves legible together.' },
      ]}>
      <WPhone tab="map">
        <div style={{ position: 'relative', flexShrink: 0 }}>
          <WMap h={210} label="REGION · CENTRAL AMERICA" pin={{ top: 100, left: 130 }} blobs={[
            { top: 30, left: 30, w: 90, h: 70, risk: 2 },
            { top: 90, left: 130, w: 100, h: 80, risk: 3 },
            { top: 50, left: 200, w: 60, h: 50, risk: 4 },
          ]} />
          <div style={{ position: 'absolute', bottom: 8, left: 10 }}>
            <div style={{ background: WK.screen, borderRadius: 7, border: `1px solid ${WK.line2}`,
              padding: '5px 7px' }}><WHeatLegend /></div>
          </div>
          <span style={{ position: 'absolute', top: 8, right: 10 }}><window.WPin n={1} /></span>
        </div>
        <div style={{ padding: '10px 16px 6px', display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
          <span style={{ fontSize: 12.5, fontWeight: 800, flex: 1 }}>Ranked by stability</span>
          <window.WPin n={2} />
          <span style={{ fontFamily: WK.mono, fontSize: 9, color: WK.ink2 }}>FILTER ▾</span>
        </div>
        <WBody p={0} gap={0}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column' }}>
            {rows.map((r, i) => (
              <div key={r.c} style={{ display: 'flex', alignItems: 'center', gap: 11,
                padding: '9px 0', borderBottom: `1px solid ${WK.line2}` }}>
                <span style={{ fontFamily: WK.mono, fontSize: 11, color: WK.ink2, width: 16 }}>{i + 1}</span>
                <span className={`wk-hatch${r.r}`} style={{ width: 10, height: 26, borderRadius: 3,
                  border: `1px solid ${WK.line}` }} />
                <span style={{ flex: 1, fontSize: 13, fontWeight: 700 }}>{r.c}</span>
                {i === 0 && <span><window.WPin n={3} /></span>}
                <WRing size={36} score={r.s} label="" />
              </div>
            ))}
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// ── REGION DRILL-IN ─────────────────────────────────────────────
function RegionDetail() {
  return (
    <window.Annotated persona={MARCUS_M} flowStep="MAP → REGION"
      notes={[
        { n: 1, title: 'Region summary', body: 'Aggregate stability + what changed this week, before drilling to a single city.' },
        { n: 2, title: 'Cities as pins + list', body: 'Marcus scans Central America, then dives into one city detail.' },
        { n: 3, title: 'Recent ground reports', body: 'Live nomad reports for the region build the "ground-truth-first" picture.' },
      ]}>
      <WPhone tab="map">
        <WHead title="Central America" sub="Regional overview" back />
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <WCard pad={12} style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={1} /></span>
              <WRing size={54} score="6.9" label="REGION" />
              <div style={{ flex: 1 }}>
                <WMeter label="Civil stability" fill={0.62} tag="6.2" />
                <div style={{ height: 6 }} />
                <WMeter label="Crime" fill={0.55} tag="5.5" />
                <div style={{ height: 6 }} />
                <WMeter label="Healthcare" fill={0.71} tag="7.1" />
              </div>
            </WCard>
            <div style={{ position: 'relative' }}>
              <WMap h={92} label="REGION MAP" blobs={[
                { top: 16, left: 30, w: 50, h: 38, risk: 2 },
                { top: 30, left: 110, w: 60, h: 44, risk: 3 },
                { top: 18, left: 200, w: 44, h: 34, risk: 4 },
              ]} pin={{ top: 40, left: 120 }} />
              <span style={{ position: 'absolute', top: -8, left: '50%' }}><window.WPin n={2} /></span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
              {[['Medellín, CO', '7.8'], ['Mexico City, MX', '6.4'], ['Guatemala City, GT', '5.1']].map(([c, s]) => (
                <WCard key={c} pad={9} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 12, height: 12, borderRadius: '50% 50% 50% 0',
                    transform: 'rotate(-45deg)', background: WK.ink }} />
                  <span style={{ flex: 1, fontSize: 12.5, fontWeight: 700 }}>{c}</span>
                  <WRing size={34} score={s} label="" />
                </WCard>
              ))}
            </div>
            <div style={{ fontSize: 12, fontWeight: 800, display: 'flex', alignItems: 'center', gap: 6 }}>
              Recent reports <window.WPin n={3} /></div>
            <WCard pad={10}>
              <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                <WSource kind="nomad" /><span style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink3, marginLeft: 'auto' }}>2H AGO</span>
              </div>
              <WLines n={2} last="60%" />
            </WCard>
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

// ── CIVIL-UNREST ALERTS FEED ────────────────────────────────────
function AlertsFeed() {
  const alerts = [
    { sev: 4, type: 'PROTEST', loc: 'Mexico City · Reforma', t: '38 min', near: true, src: ['news', 'nomad'] },
    { sev: 3, type: 'TRANSIT STRIKE', loc: 'Bangkok · BTS lines', t: '3 h', near: false, src: ['news'] },
    { sev: 2, type: 'POLITICAL TRANSITION', loc: 'Tbilisi · nationwide', t: '1 d', near: false, src: ['news'] },
    { sev: 3, type: 'CRIME SPIKE', loc: 'Medellín · El Poblado', t: '2 d', near: false, src: ['nomad'] },
  ];
  return (
    <window.Annotated persona={MARCUS_M} flowStep="ALERTS"
      notes={[
        { n: 1, title: '"Near you" pinned', body: 'Anything affecting Marcus right now floats to the top with a distinct treatment.' },
        { n: 2, title: 'Severity = hatch + label', body: 'Same risk language as the map; never relies on colour alone.' },
        { n: 3, title: 'Dual-sourced or flagged', body: 'Each alert shows whether it is news-verified, nomad-reported, or both.' },
        { n: 4, title: 'Filter by region / severity', body: 'Power users tame the firehose down to what they act on.' },
      ]}>
      <WPhone tab="alerts">
        <WHead title="Alerts" sub="Real-time civil & safety events"
          action={<WIcon s={22} />} />
        <div style={{ padding: '0 16px 8px', display: 'flex', gap: 7, flexShrink: 0, alignItems: 'center' }}>
          <WChip active sm>All</WChip><WChip sm>High only</WChip><WChip sm>My regions</WChip>
          <span style={{ marginLeft: 'auto' }}><window.WPin n={4} /></span>
        </div>
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 9 }}>
            {alerts.map((a, i) => (
              <WCard key={i} pad={11} style={{ display: 'flex', gap: 11, position: 'relative',
                borderColor: a.near ? WK.ink : WK.line, borderWidth: a.near ? 2 : 1 }}>
                {a.near && <span style={{ position: 'absolute', top: -8, left: 10 }}><window.WPin n={1} /></span>}
                {i === 0 && <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={2} /></span>}
                <span className={`wk-hatch${a.sev}`} style={{ width: 8, borderRadius: 4,
                  border: `1px solid ${WK.line}`, flexShrink: 0 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                    {a.near && <WChip sm active>NEAR YOU</WChip>}
                    <span style={{ fontFamily: WK.mono, fontSize: 9, fontWeight: 600, color: WK.ink2 }}>{a.type}</span>
                    <span style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink3, marginLeft: 'auto' }}>{a.t}</span>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 6 }}>{a.loc}</div>
                  <div style={{ display: 'flex', gap: 5 }}>
                    {a.src.map((k) => <WSource key={k} kind={k} />)}
                    {i === 0 && <span style={{ marginLeft: 'auto' }}><window.WPin n={3} /></span>}
                  </div>
                </div>
              </WCard>
            ))}
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

Object.assign(window, { MapFull, MapSplit, RegionDetail, AlertsFeed });