// TownPost — Community alert credibility system
// Two screens:
//   ScreenAlertVerify  — viewer-side: shows trust ladder, lets neighbors confirm/deny/mark affected
//   ScreenAlertReport  — composer: redesigned alert form with category, severity, location, photo

// ─── Trust ladder visual (used in detail header) ──────────────────────────
function TrustLadder({ stage = 'reported', confirms = 0, threshold = 10 }) {
  const stages = [
    { id: 'reported', label: 'Reported', sub: '1 person' },
    { id: 'confirmed', label: 'Confirmed', sub: '3+ neighbors' },
    { id: 'verified', label: 'Verified', sub: `${threshold}+ confirms` },
  ];
  const idx = stages.findIndex(s => s.id === stage);
  return (
    <div style={{ padding: '14px 16px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
        {stages.map((s, i) => {
          const reached = i <= idx;
          const isCurrent = i === idx;
          const accent = stage === 'verified' ? TP.forest : stage === 'confirmed' ? TP.ochre : TP.muted;
          return (
            <React.Fragment key={s.id}>
              <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 76 }}>
                <div style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: reached ? accent : TP.cream,
                  border: `2px solid ${reached ? accent : TP.hairlineStrong}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: isCurrent ? `0 0 0 4px ${stage === 'verified' ? TP.forestTint : stage === 'confirmed' ? TP.amberTint : 'rgba(0,0,0,0.05)'}` : 'none',
                  transition: 'all 0.2s',
                }}>
                  {reached
                    ? <TPIcon name="check" size={14} color={TP.cream} stroke={2.6} />
                    : <div style={{ width: 6, height: 6, borderRadius: '50%', background: TP.muted }} />
                  }
                </div>
                <div style={{
                  fontFamily: TP.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: 0.8,
                  color: reached ? accent : TP.muted, textTransform: 'uppercase',
                }}>{s.label}</div>
                <div style={{ fontFamily: TP.sans, fontSize: 10, color: TP.muted, textAlign: 'center', lineHeight: 1.2 }}>
                  {s.sub}
                </div>
              </div>
              {i < stages.length - 1 && (
                <div style={{
                  flex: 1, height: 2, marginTop: -34,
                  background: i < idx ? accent : TP.hairlineStrong,
                  transition: 'background 0.2s',
                }} />
              )}
            </React.Fragment>
          );
        })}
      </div>
      {stage !== 'verified' && (
        <div style={{
          marginTop: 14, padding: '8px 12px',
          background: TP.cream, borderRadius: TP.r.md,
          fontFamily: TP.sans, fontSize: 12, color: TP.inkSoft, lineHeight: 1.4,
        }}>
          {stage === 'reported' && (
            <>Needs <strong style={{ color: TP.ink }}>2 more confirms</strong> from nearby neighbors to move to Confirmed.</>
          )}
          {stage === 'confirmed' && (
            <>Needs <strong style={{ color: TP.ink }}>{Math.max(0, threshold - confirms)} more confirms</strong> to reach Verified status.</>
          )}
        </div>
      )}
    </div>
  );
}

// ─── Reporter card with reputation ──────────────────────────
function ReporterCard({ alert }) {
  const rep = alert.reporterRep || { posts: 12, verified: 9 };
  const trustPct = Math.round((rep.verified / rep.posts) * 100);
  return (
    <div style={{
      margin: '0 16px 14px',
      padding: '12px',
      background: TP.cream, borderRadius: TP.r.md,
      border: `1px solid ${TP.hairline}`,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <TPAvatar name={alert.source?.replace('Neighbor: ', '') || 'J. Ortiz'} hue={4} size={40} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontFamily: TP.sans, fontSize: 13.5, fontWeight: 600, color: TP.ink }}>
            {alert.source?.replace('Neighbor: ', '') || 'J. Ortiz'}
          </span>
          {trustPct >= 75 && (
            <span title="Trusted reporter" style={{ display: 'flex', alignItems: 'center' }}>
              <TPIcon name="shield" size={13} color={TP.forest} stroke={2.2} fill={TP.forestTint} />
            </span>
          )}
        </div>
        <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, marginTop: 2 }}>
          {rep.verified} of {rep.posts} alerts verified · Linden Square
        </div>
      </div>
      <button onClick={(e) => e.stopPropagation()} style={{
        background: 'transparent', border: `1px solid ${TP.hairlineStrong}`,
        padding: '5px 10px', borderRadius: TP.r.pill, cursor: 'pointer',
        fontFamily: TP.sans, fontSize: 11.5, fontWeight: 600, color: TP.inkSoft,
      }}>Follow</button>
    </div>
  );
}

// ─── Action button group: confirm / can't confirm / affected / details ───
function VerifyActions({ initialConfirms = 7, initialCantConfirm = 1, initialAffected = 23 }) {
  const [vote, setVote] = React.useState(null); // 'confirm' | 'cant' | null
  const [affected, setAffected] = React.useState(false);
  const [confirms, setConfirms] = React.useState(initialConfirms);
  const [cantConfirm, setCantConfirm] = React.useState(initialCantConfirm);
  const [affectedCount, setAffectedCount] = React.useState(initialAffected);

  const onConfirm = () => {
    if (vote === 'confirm') return;
    if (vote === 'cant') setCantConfirm(c => c - 1);
    setConfirms(c => c + 1);
    setVote('confirm');
  };
  const onCant = () => {
    if (vote === 'cant') return;
    if (vote === 'confirm') setConfirms(c => c - 1);
    setCantConfirm(c => c + 1);
    setVote('cant');
  };
  const onAffected = () => {
    setAffected(a => !a);
    setAffectedCount(c => affected ? c - 1 : c + 1);
  };

  return (
    <div style={{ padding: '0 16px 14px' }}>
      <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.muted, letterSpacing: 1.4, marginBottom: 10, textTransform: 'uppercase' }}>
        Are you nearby? Help verify
      </div>

      {/* Primary verify row */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <button onClick={onConfirm} style={{
          flex: 1, padding: '12px 10px', borderRadius: TP.r.md,
          background: vote === 'confirm' ? TP.forest : TP.paper,
          color: vote === 'confirm' ? TP.cream : TP.forest,
          border: `1.5px solid ${vote === 'confirm' ? TP.forest : TP.forest}`,
          fontFamily: TP.sans, fontSize: 13, fontWeight: 600,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          cursor: 'pointer', transition: 'all 0.15s',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <TPIcon name="check" size={15} color={vote === 'confirm' ? TP.cream : TP.forest} stroke={2.4} />
            I can confirm
          </div>
          <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 600, opacity: 0.85, letterSpacing: 0.3 }}>
            {confirms} {confirms === 1 ? 'neighbor' : 'neighbors'}
          </div>
        </button>
        <button onClick={onCant} style={{
          flex: 1, padding: '12px 10px', borderRadius: TP.r.md,
          background: vote === 'cant' ? TP.muted : TP.paper,
          color: vote === 'cant' ? TP.cream : TP.inkSoft,
          border: `1.5px solid ${vote === 'cant' ? TP.muted : TP.hairlineStrong}`,
          fontFamily: TP.sans, fontSize: 13, fontWeight: 600,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          cursor: 'pointer', transition: 'all 0.15s',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <TPIcon name="close" size={15} color={vote === 'cant' ? TP.cream : TP.muted} stroke={2.4} />
            Can't confirm
          </div>
          <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 600, opacity: 0.85, letterSpacing: 0.3 }}>
            {cantConfirm} {cantConfirm === 1 ? 'neighbor' : 'neighbors'}
          </div>
        </button>
      </div>

      {/* Secondary actions */}
      <div style={{ display: 'flex', gap: 8 }}>
        <button onClick={onAffected} style={{
          flex: 1, padding: '9px 10px', borderRadius: TP.r.md,
          background: affected ? TP.terracotta : 'transparent',
          color: affected ? TP.cream : TP.inkSoft,
          border: `1px solid ${affected ? TP.terracotta : TP.hairlineStrong}`,
          fontFamily: TP.sans, fontSize: 12, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          cursor: 'pointer', transition: 'all 0.15s',
        }}>
          <TPIcon name="home" size={13} color={affected ? TP.cream : TP.terracotta} stroke={2} />
          I'm affected
          <span style={{ fontFamily: TP.mono, fontSize: 10, opacity: 0.8 }}>· {affectedCount}</span>
        </button>
        <button onClick={(e) => e.stopPropagation()} style={{
          flex: 1, padding: '9px 10px', borderRadius: TP.r.md,
          background: 'transparent', color: TP.inkSoft,
          border: `1px solid ${TP.hairlineStrong}`,
          fontFamily: TP.sans, fontSize: 12, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          cursor: 'pointer',
        }}>
          <TPIcon name="image" size={13} color={TP.inkSoft} stroke={2} />
          Add photo / details
        </button>
      </div>

      {/* Sub-actions */}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12 }}>
        <button style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 5,
          fontFamily: TP.sans, fontSize: 11.5, color: TP.forest, fontWeight: 500,
        }}>
          <TPIcon name="check" size={12} color={TP.forest} stroke={2.2} />
          Mark resolved
        </button>
        <button style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 5,
          fontFamily: TP.sans, fontSize: 11.5, color: TP.muted, fontWeight: 500,
        }}>
          <TPIcon name="flag" size={12} color={TP.muted} stroke={2.2} />
          Report as fake
        </button>
      </div>
    </div>
  );
}

// ─── Confirmation activity timeline ──────────────────────────
function ConfirmTimeline({ alert }) {
  const events = [
    { time: '9 min ago', text: 'Reported by J. Ortiz · photo attached', kind: 'report', live: false },
    { time: '8 min ago', text: 'Maria S. confirmed · 0.1 mi away', kind: 'confirm' },
    { time: '6 min ago', text: '2 more confirms · stage moved to Confirmed', kind: 'stage' },
    { time: '4 min ago', text: 'Eastgate Crossing Guard marked affected', kind: 'affected' },
    { time: '1 min ago', text: 'Public Works dispatched a crew', kind: 'official', live: true },
  ];
  const colorFor = (k) => ({
    report: TP.muted, confirm: TP.forest, stage: TP.ochre, affected: TP.terracotta, official: TP.alertRed,
  }[k] || TP.muted);

  return (
    <div style={{ padding: '0 16px 16px' }}>
      <div style={{ fontFamily: TP.mono, fontSize: 10, fontWeight: 700, color: TP.muted, letterSpacing: 1.4, marginBottom: 12, textTransform: 'uppercase' }}>
        Activity
      </div>
      {events.map((e, i) => (
        <div key={i} style={{ display: 'flex', gap: 12, position: 'relative', paddingBottom: 12 }}>
          <div style={{ position: 'relative', width: 12, paddingTop: 4 }}>
            <div style={{
              width: 10, height: 10, borderRadius: '50%',
              background: colorFor(e.kind),
              border: `2px solid ${TP.cream}`,
              boxShadow: e.live ? `0 0 0 4px ${TP.redTint}` : 'none',
            }} />
            {i !== events.length - 1 && (
              <div style={{ position: 'absolute', top: 18, left: 4, bottom: -12, width: 2, background: TP.hairline }} />
            )}
          </div>
          <div style={{ flex: 1, paddingTop: 1 }}>
            <div style={{ fontFamily: TP.mono, fontSize: 10, color: TP.muted, letterSpacing: 0.6, marginBottom: 1 }}>{e.time}</div>
            <div style={{ fontFamily: TP.sans, fontSize: 12.5, color: TP.inkSoft, lineHeight: 1.4 }}>{e.text}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Main: community alert detail ──────────────────────────
function ScreenAlertVerify({ onNav = () => {}, alert: alertProp }) {
  const alert = alertProp || ALERTS[1]; // Default to tree-down (community-sourced)
  const stage = alert.stage || 'confirmed';
  const confirms = alert.confirms || 7;
  const tones = {
    red: { bg: TP.redTint, accent: TP.alertRed },
    amber: { bg: TP.amberTint, accent: TP.alertAmber },
    blue: { bg: TP.blueTint, accent: TP.alertBlue },
    forest: { bg: TP.forestTint, accent: TP.forest },
  };
  const t = tones[alert.tone] || tones.amber;

  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <button style={{ width: 32, height: 32, borderRadius: '50%', background: 'transparent', border: `1px solid ${TP.hairlineStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <TPIcon name="chevronLeft" size={18} color={TP.ink} />
        </button>
        <div style={{ flex: 1, fontFamily: TP.sans, fontSize: 14, fontWeight: 600, color: TP.ink }}>Community alert</div>
        <TPIcon name="share" size={18} color={TP.ink} />
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Hero with map + photo */}
        <div style={{ position: 'relative' }}>
          <div style={{ height: 180, position: 'relative', background: TP.cream }}>
            <MapBackdrop />
            {/* affected zone */}
            <div style={{
              position: 'absolute', left: '20%', top: '28%', width: '50%', height: '44%',
              background: 'rgba(196,143,36,0.18)', border: `2px dashed ${TP.alertAmber}`, borderRadius: 12,
            }} />
            <Pin x={150} y={92} kind="alert" />
            {/* Confirmation pins */}
            <Pin x={110} y={70} kind="confirm" />
            <Pin x={195} y={75} kind="confirm" />
            <Pin x={170} y={120} kind="confirm" />
            <Pin x={130} y={130} kind="confirm" />
            <div style={{
              position: 'absolute', bottom: 10, left: 12,
              background: TP.paper, padding: '4px 10px', borderRadius: TP.r.pill,
              fontFamily: TP.mono, fontSize: 10, color: TP.inkSoft, fontWeight: 600, letterSpacing: 0.6,
              border: `1px solid ${TP.hairline}`,
            }}>
              {confirms} CONFIRMS WITHIN 0.3 MI
            </div>
            <div style={{
              position: 'absolute', bottom: 10, right: 12,
              background: TP.paper, padding: '4px 10px', borderRadius: TP.r.pill,
              fontFamily: TP.mono, fontSize: 10, color: TP.inkSoft, fontWeight: 600, letterSpacing: 0.6,
              border: `1px solid ${TP.hairline}`,
              display: 'flex', alignItems: 'center', gap: 4,
            }}>
              <TPIcon name="location" size={10} stroke={2} color={TP.inkSoft} /> {alert.distance || '0.4 mi away'}
            </div>
          </div>
          {/* User photo strip */}
          <div style={{
            display: 'flex', gap: 6, padding: '10px 12px',
            background: TP.paper, borderBottom: `1px solid ${TP.hairline}`,
          }}>
            <PhotoTile hue1="#5b6b48" hue2="#3a4530" caption="Reporter" />
            <PhotoTile hue1="#7a5a3c" hue2="#5a3e26" caption="Maria S." />
            <PhotoTile hue1="#4a5b6b" hue2="#2e3a48" caption="+2 more" overlay />
          </div>
        </div>

        {/* Status banner */}
        <div style={{
          background: t.bg, padding: '10px 16px',
          display: 'flex', alignItems: 'center', gap: 8,
          borderBottom: `1px solid ${TP.hairline}`,
        }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: t.accent }} />
          <span style={{ fontFamily: TP.mono, fontSize: 11, fontWeight: 700, color: t.accent, letterSpacing: 1 }}>
            ADVISORY · {alert.time?.toUpperCase() || '22 MIN AGO'}
          </span>
          <span style={{ marginLeft: 'auto', fontFamily: TP.sans, fontSize: 11, color: t.accent, fontWeight: 500 }}>
            {alert.views} watching
          </span>
        </div>

        {/* Title */}
        <div style={{ padding: '18px 16px 4px', background: TP.paper }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
            <TPTrustBadge stage={stage} confirms={confirms} />
            <span style={{
              padding: '3px 8px', borderRadius: 4, background: TP.cream,
              fontFamily: TP.mono, fontSize: 9.5, fontWeight: 700, color: TP.inkSoft, letterSpacing: 0.8,
              border: `1px solid ${TP.hairline}`,
            }}>
              <TPIcon name="car" size={10} color={TP.inkSoft} stroke={2.2} /> ROAD HAZARD
            </span>
            <span style={{
              padding: '3px 8px', borderRadius: 4, background: TP.cream,
              fontFamily: TP.mono, fontSize: 9.5, fontWeight: 700, color: TP.inkSoft, letterSpacing: 0.8,
              border: `1px solid ${TP.hairline}`,
            }}>SEVERITY · MEDIUM</span>
          </div>
          <div style={{
            fontFamily: TP.serif, fontSize: 26, color: TP.ink,
            lineHeight: 1.15, letterSpacing: -0.4, marginBottom: 6,
          }}>
            {alert.title}
          </div>
          <div style={{ fontFamily: TP.sans, fontSize: 14.5, color: TP.inkSoft, lineHeight: 1.55, marginBottom: 14 }}>
            {alert.body}
          </div>
        </div>

        {/* Reporter card */}
        <div style={{ background: TP.paper, paddingBottom: 6 }}>
          <ReporterCard alert={alert} />
        </div>

        {/* Trust ladder */}
        <TrustLadder stage={stage} confirms={confirms} threshold={10} />

        {/* Verify actions */}
        <div style={{ background: TP.paper, paddingTop: 14, borderBottom: `1px solid ${TP.hairline}` }}>
          <VerifyActions
            initialConfirms={confirms}
            initialCantConfirm={alert.cantConfirm || 1}
            initialAffected={alert.affected || 23}
          />
        </div>

        {/* Activity timeline */}
        <div style={{ background: TP.paper, paddingTop: 14, borderBottom: `1px solid ${TP.hairline}` }}>
          <ConfirmTimeline alert={alert} />
        </div>

        <div style={{ height: 24 }} />
      </div>
    </div>
  );
}

// ─── Photo tile (used in photo strip) ──────────────────────────
function PhotoTile({ hue1, hue2, caption, overlay }) {
  return (
    <div style={{
      flex: 1, height: 70, borderRadius: TP.r.md, position: 'relative',
      background: `linear-gradient(135deg, ${hue1}, ${hue2})`,
      overflow: 'hidden', cursor: 'pointer',
    }}>
      {overlay && (
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: TP.sans, fontSize: 13, color: TP.cream, fontWeight: 600,
        }}>+2</div>
      )}
      <div style={{
        position: 'absolute', bottom: 4, left: 6,
        fontFamily: TP.mono, fontSize: 9, color: TP.cream, fontWeight: 600,
        letterSpacing: 0.5, textShadow: '0 1px 2px rgba(0,0,0,0.5)',
      }}>{caption}</div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// ScreenAlertReport — community alert composer
// ──────────────────────────────────────────────────────────────────────────

const ALERT_CATEGORIES = [
  { id: 'safety', icon: 'shield', label: 'Safety', tone: TP.alertRed },
  { id: 'road', icon: 'car', label: 'Road / traffic', tone: TP.alertAmber },
  { id: 'weather', icon: 'cloud', label: 'Weather', tone: TP.alertBlue },
  { id: 'utility', icon: 'briefcase', label: 'Utility', tone: TP.ochre },
  { id: 'animal', icon: 'paw', label: 'Lost/found pet', tone: TP.terracotta },
  { id: 'other', icon: 'alert', label: 'Other', tone: TP.muted },
];

const SEVERITIES = [
  { id: 'low', label: 'FYI', sub: 'For awareness', color: TP.forest },
  { id: 'med', label: 'Caution', sub: 'Avoid the area', color: TP.alertAmber },
  { id: 'high', label: 'Urgent', sub: 'Immediate danger', color: TP.alertRed },
];

function ScreenAlertReport({ onNav = () => {} }) {
  const [cat, setCat] = React.useState('road');
  const [sev, setSev] = React.useState('med');
  const [title, setTitle] = React.useState('Tree down across Linden Pkwy');
  const [body, setBody] = React.useState('Eastbound lane fully blocked at the school crossing. Crew not on scene yet.');
  const [hasPhoto, setHasPhoto] = React.useState(true);
  const [location, setLocation] = React.useState('Linden Pkwy & 4th St');

  const sevObj = SEVERITIES.find(s => s.id === sev);
  const canPost = title.length >= 8 && cat;

  return (
    <div style={{ background: TP.cream, height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: TP.paper, borderBottom: `1px solid ${TP.hairline}` }}>
        <button style={{ background: 'none', border: 'none', fontFamily: TP.sans, fontSize: 14, color: TP.muted, fontWeight: 500, cursor: 'pointer' }}>Cancel</button>
        <div style={{ flex: 1, textAlign: 'center', fontFamily: TP.sans, fontSize: 14, fontWeight: 600, color: TP.ink }}>
          New alert
        </div>
        <button disabled={!canPost} style={{
          padding: '7px 14px', borderRadius: TP.r.pill,
          background: canPost ? TP.alertRed : TP.muted,
          color: TP.cream, border: 'none',
          fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600,
          opacity: canPost ? 1 : 0.5, cursor: canPost ? 'pointer' : 'default',
        }}>Post alert</button>
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {/* Trust notice — sets expectations */}
        <div style={{
          margin: '14px 16px 0', padding: '10px 12px',
          background: TP.amberTint, border: `1px solid ${TP.alertAmber}`,
          borderRadius: TP.r.md, display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <TPIcon name="shield" size={16} color={TP.alertAmber} stroke={2} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: TP.sans, fontSize: 12.5, fontWeight: 600, color: TP.ink, marginBottom: 2 }}>
              Posts as <span style={{ color: TP.muted, fontWeight: 500 }}>REPORTED</span> until 3 nearby neighbors confirm
            </div>
            <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.inkSoft, lineHeight: 1.4 }}>
              False alerts hurt your reporter score and can be flagged for moderation.
            </div>
          </div>
        </div>

        {/* Category */}
        <SectionLabel>Category</SectionLabel>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
          padding: '0 16px',
        }}>
          {ALERT_CATEGORIES.map(c => {
            const active = c.id === cat;
            return (
              <button key={c.id} onClick={() => setCat(c.id)} style={{
                padding: '12px 6px', borderRadius: TP.r.md,
                background: active ? c.tone : TP.paper,
                color: active ? TP.cream : TP.inkSoft,
                border: `1.5px solid ${active ? c.tone : TP.hairlineStrong}`,
                fontFamily: TP.sans, fontSize: 11.5, fontWeight: 600,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                cursor: 'pointer', transition: 'all 0.15s',
              }}>
                <TPIcon name={c.icon} size={20} color={active ? TP.cream : c.tone} stroke={2} />
                {c.label}
              </button>
            );
          })}
        </div>

        {/* Severity */}
        <SectionLabel>Severity</SectionLabel>
        <div style={{ display: 'flex', gap: 8, padding: '0 16px' }}>
          {SEVERITIES.map(s => {
            const active = s.id === sev;
            return (
              <button key={s.id} onClick={() => setSev(s.id)} style={{
                flex: 1, padding: '10px 8px', borderRadius: TP.r.md,
                background: active ? s.color : TP.paper,
                color: active ? TP.cream : TP.inkSoft,
                border: `1.5px solid ${active ? s.color : TP.hairlineStrong}`,
                cursor: 'pointer', transition: 'all 0.15s',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
              }}>
                <span style={{ fontFamily: TP.sans, fontSize: 13, fontWeight: 700 }}>{s.label}</span>
                <span style={{ fontFamily: TP.sans, fontSize: 10.5, opacity: 0.85, fontWeight: 500 }}>{s.sub}</span>
              </button>
            );
          })}
        </div>

        {/* Title */}
        <SectionLabel>What happened?</SectionLabel>
        <div style={{ padding: '0 16px' }}>
          <div style={{
            background: TP.paper, padding: '12px 14px',
            borderRadius: TP.r.md, border: `1px solid ${TP.hairlineStrong}`,
            fontFamily: TP.sans, fontSize: 16, color: TP.ink, fontWeight: 600,
            lineHeight: 1.3, minHeight: 24,
          }}>
            {title}
            <span style={{ background: TP.ink, width: 2, height: 18, display: 'inline-block', verticalAlign: 'middle', marginLeft: 1, animation: 'tpBlink 1s infinite' }} />
          </div>
          <style>{`@keyframes tpBlink { 0%,50%{opacity:1;} 51%,100%{opacity:0;} }`}</style>
          <div style={{
            marginTop: 8, background: TP.paper, padding: '10px 14px',
            borderRadius: TP.r.md, border: `1px solid ${TP.hairlineStrong}`,
            fontFamily: TP.sans, fontSize: 13.5, color: TP.inkSoft,
            lineHeight: 1.5, minHeight: 70,
          }}>
            {body}
            <div style={{ fontFamily: TP.sans, fontSize: 11, color: TP.muted, marginTop: 6, fontWeight: 500 }}>
              Add details (optional) — what's happening, where exactly, what neighbors should do
            </div>
          </div>
        </div>

        {/* Location */}
        <SectionLabel>Location</SectionLabel>
        <div style={{ padding: '0 16px' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '12px 14px', background: TP.paper,
            borderRadius: TP.r.md, border: `1px solid ${TP.hairlineStrong}`,
          }}>
            <TPIcon name="location" size={16} color={TP.alertRed} stroke={2} />
            <div style={{ flex: 1, fontFamily: TP.sans, fontSize: 13.5, color: TP.ink, fontWeight: 600 }}>
              {location}
            </div>
            <button style={{
              fontFamily: TP.sans, fontSize: 11.5, color: TP.forest, fontWeight: 600,
              background: 'transparent', border: 'none', cursor: 'pointer',
            }}>Change</button>
          </div>
          {/* Mini map preview */}
          <div style={{
            height: 110, marginTop: 8, borderRadius: TP.r.md, overflow: 'hidden',
            border: `1px solid ${TP.hairlineStrong}`, position: 'relative',
          }}>
            <MapBackdrop />
            <Pin x={170} y={55} kind="alert" />
          </div>
        </div>

        {/* Photo */}
        <SectionLabel>Photo {!hasPhoto && <span style={{ color: TP.muted, fontWeight: 500, textTransform: 'none', letterSpacing: 0 }}>· strongly recommended</span>}</SectionLabel>
        <div style={{ padding: '0 16px 20px' }}>
          {hasPhoto ? (
            <div style={{
              height: 180, borderRadius: TP.r.md, position: 'relative', overflow: 'hidden',
              background: 'linear-gradient(135deg, #5b6b48 0%, #3a4530 60%, #2a3422 100%)',
            }}>
              <div style={{
                position: 'absolute', top: 8, right: 8,
                width: 28, height: 28, borderRadius: '50%',
                background: 'rgba(0,0,0,0.5)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer',
              }} onClick={() => setHasPhoto(false)}>
                <TPIcon name="close" size={14} color={TP.cream} stroke={2.4} />
              </div>
              <div style={{
                position: 'absolute', bottom: 10, left: 12,
                fontFamily: TP.mono, fontSize: 10, color: TP.cream, fontWeight: 600,
                letterSpacing: 0.6, textShadow: '0 1px 2px rgba(0,0,0,0.5)',
                background: 'rgba(0,0,0,0.4)', padding: '3px 8px', borderRadius: 4,
              }}>📍 Linden Pkwy & 4th · just now</div>
            </div>
          ) : (
            <button onClick={() => setHasPhoto(true)} style={{
              width: '100%', height: 100, borderRadius: TP.r.md,
              background: TP.paper, border: `2px dashed ${TP.hairlineStrong}`,
              color: TP.muted, fontFamily: TP.sans, fontSize: 13, fontWeight: 600,
              cursor: 'pointer', display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              <TPIcon name="image" size={24} color={TP.muted} stroke={1.8} />
              Add photo from camera or library
            </button>
          )}
        </div>

        {/* Visibility / radius */}
        <div style={{
          margin: '0 16px 20px', padding: '12px',
          background: TP.paper, borderRadius: TP.r.md, border: `1px solid ${TP.hairline}`,
        }}>
          <div style={{ fontFamily: TP.mono, fontSize: 9.5, fontWeight: 700, color: TP.muted, letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
            Notification radius
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: TP.sans, fontSize: 13, fontWeight: 600, color: TP.ink, marginBottom: 2 }}>
                Push to neighbors within 0.5 mi
              </div>
              <div style={{ fontFamily: TP.sans, fontSize: 11.5, color: TP.muted }}>
                ~340 households · {sevObj.label === 'Urgent' ? 'urgent push' : 'in-app only'}
              </div>
            </div>
            <div style={{
              width: 38, height: 22, borderRadius: 999, background: TP.forest, position: 'relative', cursor: 'pointer',
            }}>
              <div style={{
                position: 'absolute', top: 2, right: 2, width: 18, height: 18, borderRadius: '50%', background: '#fff',
              }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SectionLabel({ children }) {
  return (
    <div style={{
      padding: '18px 16px 8px',
      fontFamily: TP.mono, fontSize: 10, fontWeight: 700,
      color: TP.muted, letterSpacing: 1.4, textTransform: 'uppercase',
    }}>{children}</div>
  );
}

Object.assign(window, { ScreenAlertVerify, ScreenAlertReport });