// flows-detail.jsx — Destination detail + infrastructure listings (Marcus · Medellín)
const { WK, WPhone, WLine, WLines, WImg, WChip, WBtn, WIcon, WIconCircle,
  WSearch, WDivider, WCard, WSource, WRing, WMeter, WMap, WHeatLegend, WHead, WBody } = window;

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

// segmented control
function Seg({ items, active }) {
  return (
    <div style={{ display: 'flex', background: WK.fill, borderRadius: 9, padding: 3, gap: 3 }}>
      {items.map((t, i) => (
        <div key={t} style={{ flex: 1, textAlign: 'center', padding: '6px 0', borderRadius: 7,
          fontSize: 11.5, fontWeight: i === active ? 700 : 500,
          background: i === active ? WK.screen : 'transparent',
          color: i === active ? WK.ink : WK.ink2,
          boxShadow: i === active ? '0 1px 2px rgba(0,0,0,.08)' : 'none' }}>{t}</div>
      ))}
    </div>
  );
}

// ── DESTINATION DETAIL ──────────────────────────────────────────
function DestDetail() {
  return (
    <window.Annotated persona={MARCUS_D} flowStep="DESTINATION DETAIL"
      notes={[
        { n: 1, title: 'Score + provenance together', body: 'The headline number never appears without its sources next to it — the trust contract made visual.' },
        { n: 2, title: 'Three lenses on one place', body: 'Safety · Infrastructure · Reports. Marcus lives in all three.' },
        { n: 3, title: 'Sub-scores, scannable', body: 'Civil stability, crime, women\u2019s safety, health — meters read in seconds.' },
        { n: 4, title: 'Source breakdown', body: 'Exactly how many news items vs nomad reports feed this score. Radical legibility.' },
        { n: 5, title: 'Persistent action bar', body: 'Save · Compare · Share always reachable while scrolling.' },
      ]}>
      <WPhone tab="map">
        <div style={{ position: 'relative', flexShrink: 0 }}>
          <WImg label="CITY HERO" h={104} r={0} />
          <div style={{ position: 'absolute', top: 10, left: 12, width: 30, height: 30,
            borderRadius: '50%', background: WK.screen, border: `1px solid ${WK.line}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 9, height: 9, borderLeft: `2px solid ${WK.ink}`,
              borderBottom: `2px solid ${WK.ink}`, transform: 'rotate(45deg)' }} />
          </div>
        </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, position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 0 }}><window.WPin n={1} /></span>
              <WRing size={58} score="7.8" label="SAFETY" />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.3 }}>Medellín</div>
                <div style={{ fontSize: 11, color: WK.ink2, marginBottom: 6 }}>Colombia · Antioquia</div>
                <div style={{ display: 'flex', gap: 5 }}>
                  <WSource kind="news" /><WSource kind="nomad" />
                </div>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <Seg items={['Safety', 'Infrastructure', 'Reports']} active={0} />
              <span style={{ position: 'absolute', top: -8, left: '50%' }}><window.WPin n={2} /></span>
            </div>
            <WCard pad={12} style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={3} /></span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                <WMeter label="Civil stability" fill={0.78} tag="7.8" />
                <WMeter label="Crime" fill={0.62} tag="6.2" />
                <WMeter label="Women's safety" fill={0.66} tag="6.6" />
                <WMeter label="Healthcare" fill={0.81} tag="8.1" />
              </div>
            </WCard>
            <WCard pad={12} style={{ background: WK.fill3 }}>
              <div style={{ fontSize: 11.5, fontWeight: 800, marginBottom: 6 }}>What the data says</div>
              <WLines n={3} last="55%" />
            </WCard>
            <WCard pad={11} style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative' }}>
              <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={4} /></span>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 18, fontWeight: 800 }}>42</div>
                <div style={{ fontFamily: WK.mono, fontSize: 8, color: WK.ink2 }}>NEWS ITEMS</div>
              </div>
              <WDivider />
              <div style={{ width: 1, height: 30, background: WK.line2 }} />
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 18, fontWeight: 800 }}>17</div>
                <div style={{ fontFamily: WK.mono, fontSize: 8, color: WK.ink2 }}>NOMAD REPORTS</div>
              </div>
              <div style={{ flex: 1, textAlign: 'right' }}>
                <span style={{ fontSize: 11, fontWeight: 700 }}>See sources →</span>
              </div>
            </WCard>
          </div>
        </WBody>
        {/* sticky action bar */}
        <div style={{ flexShrink: 0, borderTop: `1px solid ${WK.line2}`, padding: '9px 14px',
          display: 'flex', gap: 9, background: WK.screen, position: 'relative' }}>
          <span style={{ position: 'absolute', top: -10, right: 14 }}><window.WPin n={5} /></span>
          <div style={{ flex: 1 }}><WBtn full sm>Compare</WBtn></div>
          <div style={{ flex: 1 }}><WBtn full sm>Share</WBtn></div>
          <div style={{ flex: 1.2 }}><WBtn primary full sm>＋ Save</WBtn></div>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

// ── INFRASTRUCTURE LISTINGS ─────────────────────────────────────
function Infrastructure() {
  const places = [
    { n: 'Selina Cowork', d: '0.4 km', tags: ['Fiber 940↓', 'Nomad-verified'] },
    { n: 'Café Velvet', d: '0.9 km', tags: ['Reliable wifi', 'Quiet'] },
    { n: 'Tigo Hub Poblado', d: '1.2 km', tags: ['24/7', '500↓'] },
  ];
  return (
    <window.Annotated persona={MARCUS_D} flowStep="INFRASTRUCTURE"
      notes={[
        { n: 1, title: 'Infra in the safety app', body: 'Co-working, healthcare, pharmacy, transit — no juggling separate tools (closes a key gap).' },
        { n: 2, title: 'Category switch', body: 'Tabs swap the dataset; the list & map stay in place.' },
        { n: 3, title: 'Verified facts, not marketing', body: 'Nomad-verified tags (real fiber speeds, hours) instead of venue self-promo.' },
        { n: 4, title: 'List ⇄ map toggle', body: 'See the same facilities as pins relative to where you\u2019ll stay.' },
      ]}>
      <WPhone tab="map">
        <WHead title="Medellín · Infra" sub="Things nomads depend on" back
          action={<div style={{ position: 'relative' }}><WChip sm active>List</WChip>
            <span style={{ position: 'absolute', top: -16, right: -8 }}><window.WPin n={4} /></span></div>} />
        <div style={{ padding: '0 16px 8px', display: 'flex', gap: 7, flexShrink: 0, alignItems: 'center', overflow: 'hidden' }}>
          <WChip active sm>Co-working</WChip><WChip sm>Healthcare</WChip><WChip sm>Pharmacy</WChip><WChip sm>Transit</WChip>
          <span style={{ alignSelf: 'center' }}><window.WPin n={2} /></span>
        </div>
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <span style={{ alignSelf: 'flex-end' }}><window.WPin n={1} /></span>
            {places.map((p, i) => (
              <WCard key={p.n} pad={11} style={{ display: 'flex', gap: 11, position: 'relative' }}>
                {i === 0 && <span style={{ position: 'absolute', top: -8, right: 10 }}><window.WPin n={3} /></span>}
                <WImg label="PHOTO" h={50} w={50} r={8} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                    <span style={{ fontSize: 13, fontWeight: 700 }}>{p.n}</span>
                    <span style={{ fontFamily: WK.mono, fontSize: 9, color: WK.ink2, marginLeft: 'auto' }}>{p.d}</span>
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 6 }}>
                    {p.tags.map((t) => <WChip key={t} sm>{t}</WChip>)}
                  </div>
                </div>
              </WCard>
            ))}
            <WCard pad={0} style={{ overflow: 'hidden' }}>
              <WMap h={80} label="FACILITIES MAP" blobs={[]} pin={{ top: 32, left: 130 }} />
            </WCard>
          </div>
        </WBody>
      </WPhone>
    </window.Annotated>
  );
}

Object.assign(window, { DestDetail, Infrastructure });