// flows-community.jsx — Nomad ground reports: read + submit
const { WK, WPhone, WLine, WLines, WImg, WChip, WBtn, WIcon, WIconCircle,
  WSearch, WDivider, WCard, WSource, WRing, WMeter, WMap, WHeatLegend, WHead, WBody } = window;

const MARCUS_C = { name: 'Marcus, 34', role: 'Reading ground reports' };
const TARYN_C = { name: 'Taryn, 41', role: 'Submitting a report' };

// ── READ: nomad ground reports feed ─────────────────────────────
function ReportsRead() {
  const reports = [
    { who: 'verified nomad · 3 yr', cat: 'CIVIL', t: '5 h', votes: 24, photo: true },
    { who: 'verified nomad · 1 yr', cat: 'WOMEN\u2019S SAFETY', t: '1 d', votes: 11, photo: false },
    { who: 'verified nomad · 6 yr', cat: 'CO-WORKING', t: '2 d', votes: 8, photo: true },
  ];
  return (
    <window.Annotated persona={MARCUS_C} flowStep="GROUND REPORTS · READ"
      notes={[
        { n: 1, title: 'Vetted contributors', body: 'Every report shows the nomad\u2019s verification & tenure — credibility is part of the data.' },
        { n: 2, title: 'Categorised & filterable', body: 'Civil, crime, women\u2019s safety, accessibility, co-work — find the lens that matters.' },
        { n: 3, title: 'Community signal', body: 'Helpful votes & flags let the crowd surface ground truth and bury noise.' },
        { n: 4, title: 'One tap to contribute', body: 'Reading and writing live together — keeps the data chain flowing.' },
      ]}>
      <WPhone tab="map">
        <WHead title="Ground reports" sub="Medellín · from nomads here" back />
        <div style={{ padding: '0 16px 8px', display: 'flex', gap: 7, flexShrink: 0, alignItems: 'center', overflow: 'hidden' }}>
          <WChip active sm>All</WChip><WChip sm>Civil</WChip><WChip sm>Safety</WChip><WChip sm>Co-work</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 }}>
            {reports.map((r, i) => (
              <WCard key={i} pad={11} style={{ position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 8 }}>
                  <WIconCircle s={28} label="" />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                      <WLine w={70} h={7} dark />
                      {i === 0 && <span><window.WPin n={1} /></span>}
                    </div>
                    <div style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink2, marginTop: 3 }}>{r.who}</div>
                  </div>
                  <span style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink3 }}>{r.t}</span>
                </div>
                <div style={{ marginBottom: 7 }}><WChip sm active>{r.cat}</WChip></div>
                <WLines n={2} last="70%" />
                {r.photo && <div style={{ marginTop: 8 }}><WImg label="PHOTO" h={64} r={7} /></div>}
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 9 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 10.5,
                    color: WK.ink2, fontWeight: 600 }}>
                    <WIcon s={14} r={4} /> Helpful · {r.votes}</span>
                  <span style={{ fontSize: 10.5, color: WK.ink2, fontWeight: 600 }}>Flag</span>
                  {i === 0 && <span style={{ marginLeft: 'auto' }}><window.WPin n={3} /></span>}
                </div>
              </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={4} /></span>
          <WBtn primary full sm>＋ Add a report</WBtn>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

// ── SUBMIT: contribute a report ─────────────────────────────────
function ReportsSubmit() {
  return (
    <window.Annotated persona={TARYN_C} flowStep="GROUND REPORTS · SUBMIT"
      notes={[
        { n: 1, title: 'Category first', body: 'Pick the lens up front so the form adapts — accessibility asks full-vs-partial, civil asks severity.' },
        { n: 2, title: 'Structured + freeform', body: 'Tap-able condition tags keep reports comparable; the text box adds nuance.' },
        { n: 3, title: 'Evidence boosts trust', body: 'Optional photo / location pin raises a report\u2019s weight in the data chain.' },
        { n: 4, title: 'Posted as verified nomad', body: 'Identity & tenure attach automatically — that\u2019s what makes it ground truth.' },
      ]}>
      <WPhone tab="map">
        <WHead title="Add a report" sub="Barcelona · accessibility" back
          action={<span style={{ fontSize: 12, fontWeight: 700, color: WK.ink2 }}>Cancel</span>} />
        <WBody p={0} gap={0} style={{ overflow: 'hidden' }}>
          <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 13 }}>
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: WK.ink2, textTransform: 'uppercase',
                letterSpacing: 0.4, marginBottom: 7 }}>Category</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                <WChip active>Accessibility</WChip><WChip sm>Civil</WChip><WChip sm>Crime</WChip>
                <WChip sm>Women's safety</WChip><WChip sm>Co-work</WChip>
              </div>
              <span style={{ position: 'absolute', top: -4, right: 0 }}><window.WPin n={1} /></span>
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: WK.ink2, textTransform: 'uppercase',
                letterSpacing: 0.4, marginBottom: 7 }}>Condition</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                <WChip active sm>Full ambulatory</WChip><WChip sm>Partial</WChip><WChip sm>Not accessible</WChip>
              </div>
              <span style={{ position: 'absolute', top: -4, right: 0 }}><window.WPin n={2} /></span>
            </div>
            <WField label="Location" value="Passeig de Gràcia metro" leading />
            <div>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: WK.ink2, textTransform: 'uppercase',
                letterSpacing: 0.4, marginBottom: 7 }}>What did you find?</div>
              <div style={{ height: 64, borderRadius: 8, border: `1.5px solid ${WK.line}`,
                background: WK.fill3, padding: 10 }}>
                <WLines n={2} last="45%" />
              </div>
            </div>
            <div style={{ display: 'flex', gap: 9, position: 'relative' }}>
              <span style={{ position: 'absolute', top: -10, left: 0 }}><window.WPin n={3} /></span>
              <div style={{ flex: 1, height: 54, borderRadius: 8, border: `1.5px dashed ${WK.line}`,
                background: WK.fill3, display: 'flex', flexDirection: 'column', alignItems: 'center',
                justifyContent: 'center', gap: 4 }}>
                <WIcon s={18} /><span style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink2 }}>ADD PHOTO</span>
              </div>
              <div style={{ flex: 1, height: 54, borderRadius: 8, border: `1.5px dashed ${WK.line}`,
                background: WK.fill3, display: 'flex', flexDirection: 'column', alignItems: 'center',
                justifyContent: 'center', gap: 4 }}>
                <WIcon s={18} /><span style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink2 }}>PIN LOCATION</span>
              </div>
            </div>
          </div>
        </WBody>
        <div style={{ flexShrink: 0, borderTop: `1px solid ${WK.line2}`, padding: '8px 14px',
          background: WK.screen, position: 'relative', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ position: 'absolute', top: -10, left: 14 }}><window.WPin n={4} /></span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, flex: 1 }}>
            <WIconCircle s={24} label="" />
            <span style={{ fontFamily: WK.mono, fontSize: 8.5, color: WK.ink2 }}>VERIFIED NOMAD · 4 YR</span>
          </div>
          <div style={{ width: 120 }}><WBtn primary full sm>Post report</WBtn></div>
        </div>
      </WPhone>
    </window.Annotated>
  );
}

Object.assign(window, { ReportsRead, ReportsSubmit });