/* WildTrack — Mobile screens 2 — Map, Tag Reg, Emergency, Session */

/* ────────────────────────────────────────
   2B — MAP VIEW (with tapped marker)
   ──────────────────────────────────────── */
function MapView({ fieldMode = false }) {
  return (
    <div style={{ height: '100%', position: 'relative', background: '#1A2332', overflow: 'hidden' }}>
      <TopoMap
        width={390} height={790}
        variant="lake"
        tags={[
          { x: 0.28, y: 0.32 },
          { x: 0.52, y: 0.42, tapped: true },
          { x: 0.72, y: 0.5 },
          { x: 0.42, y: 0.6 },
          { x: 0.58, y: 0.72 },
        ]}
        others={[
          { x: 0.78, y: 0.35, initials: 'TH' },
          { x: 0.32, y: 0.78, initials: 'SM' },
        ]}
        userPos={[0.38, 0.55]}
        fieldMode={fieldMode}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      />

      {/* Top bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '12px 16px',
        background: 'linear-gradient(to bottom, rgba(15,31,24,0.92), rgba(15,31,24,0))',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'white',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 999, background: 'rgba(255,255,255,0.1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon.ArrowLeft size={18} stroke="white"/>
          </div>
          <div>
            <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 15 }}>Lake District Zone A</div>
            <div className="font-mono" style={{ fontSize: 10, color: '#8BAF96', letterSpacing: '0.12em', marginTop: 1 }}>
              4 MEMBERS · ACTIVE SESSION
            </div>
          </div>
        </div>
        <div style={{
          padding: '6px 10px', borderRadius: 999,
          background: 'rgba(82,183,136,0.2)', border: '1px solid rgba(82,183,136,0.4)',
          display: 'flex', alignItems: 'center', gap: 6,
          fontSize: 11, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em', color: '#52B788',
        }}>
          <Icon.Crosshair size={12} stroke="#52B788"/>
          ± 4m
        </div>
      </div>

      {/* Species filter chips */}
      <div style={{
        position: 'absolute', top: 68, left: 0, right: 0,
        padding: '8px 16px',
        display: 'flex', gap: 8, overflowX: 'auto',
      }}>
        {[
          { lbl: 'All', count: '5', active: true },
          { lbl: 'Red Deer', count: '3', active: false },
          { lbl: 'Roe Deer', count: '1', active: false },
          { lbl: 'Pheasant', count: '1', active: false },
        ].map(c => (
          <div key={c.lbl} style={{
            padding: '8px 14px', borderRadius: 999,
            background: c.active ? '#52B788' : 'rgba(26,47,34,0.85)',
            backdropFilter: 'blur(8px)',
            border: c.active ? 'none' : '1px solid rgba(82,183,136,0.3)',
            color: c.active ? '#0F1F18' : 'white',
            fontSize: 12, fontWeight: 500,
            display: 'flex', gap: 8, alignItems: 'center',
            whiteSpace: 'nowrap',
            flexShrink: 0,
          }}>
            {c.lbl}
            <span style={{ opacity: 0.7, fontSize: 10 }}>{c.count}</span>
          </div>
        ))}
      </div>

      {/* Compass + zoom controls */}
      <div style={{
        position: 'absolute', top: 124, right: 12,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {[
          <Icon.Plus size={18} stroke="white"/>,
          <Icon.Compass size={18} stroke="white"/>,
          <Icon.Crosshair size={18} stroke="white"/>,
        ].map((ico, i) => (
          <div key={i} style={{
            width: 38, height: 38, borderRadius: 10,
            background: 'rgba(26,47,34,0.85)', backdropFilter: 'blur(8px)',
            border: '1px solid rgba(82,183,136,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{ico}</div>
        ))}
      </div>

      {/* Tapped marker popup card */}
      <div style={{
        position: 'absolute', top: 200, left: 50,
        width: 220,
      }}>
        {/* Pointer line */}
        <div style={{ position: 'absolute', bottom: -16, left: 24, width: 0, height: 0,
          borderLeft: '8px solid transparent', borderRight: '8px solid transparent',
          borderTop: '8px solid white' }}/>
        <div style={{
          background: 'white', borderRadius: 12, padding: 14,
          boxShadow: '0 8px 24px rgba(0,0,0,0.3)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, fontWeight: 600, color: '#1B1B1B' }}>
              WT-2026-00042
            </span>
            <span className="rh-badge rh-badge-active" style={{ fontSize: 10, padding: '2px 8px' }}>Tagged</span>
          </div>
          <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 18, fontWeight: 700, color: '#1B1B1B', marginBottom: 2 }}>
            Red Deer
          </div>
          <div style={{ fontSize: 12, color: '#6C757D', marginBottom: 10 }}>
            Harvest · 14:22 · J. MacAllister
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            paddingTop: 10, borderTop: '1px solid #EAEAEA',
          }}>
            <span style={{ fontSize: 12, color: '#2D6A4F', fontWeight: 500 }}>View Trace</span>
            <Icon.ChevronRight size={16} stroke="#2D6A4F"/>
          </div>
        </div>
      </div>

      {/* Bottom sheet — collapsed */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: '#0F1F18', borderTop: '1px solid #2A4A38',
        borderTopLeftRadius: 18, borderTopRightRadius: 18,
        padding: '8px 20px 24px',
        color: 'white',
      }}>
        <div style={{ width: 36, height: 4, background: '#3A4A66', borderRadius: 2, margin: '6px auto 14px' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 10, color: '#52B788', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              Active Session
            </div>
            <div style={{ fontSize: 15, fontWeight: 600, marginTop: 4 }}>1h 23m · 4 tags logged</div>
          </div>
          <Icon.ChevronRight size={18} stroke="#8BAF96"/>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, padding: '12px',
            background: '#52B788', border: 'none', borderRadius: 10,
            color: '#0F1F18', fontWeight: 600, fontSize: 14,
          }}>+ Register Tag</button>
          <button style={{
            padding: '12px',
            background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
            borderRadius: 10, color: 'white', fontSize: 13, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon.Layers size={16} stroke="white"/>
          </button>
        </div>
      </div>

      {/* Emergency FAB */}
      <div style={{
        position: 'absolute', bottom: 150, right: 16,
        width: 56, height: 56, borderRadius: 999,
        background: '#C0392B',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 10px 24px -4px rgba(192,57,43,0.5)',
        color: 'white',
      }}>
        <Icon.Alert size={24} stroke="white"/>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────
   2C — TAG REGISTRATION (3 screens)
   ──────────────────────────────────────── */
function TagScan() {
  return (
    <div style={{ height: '100%', background: '#0A0F0C', color: 'white', position: 'relative', overflow: 'hidden' }}>
      {/* Subtle blurred backdrop simulating viewfinder */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 60% 50% at 50% 45%, rgba(40,60,50,0.6), rgba(10,15,12,1))',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 8px)',
      }}/>

      {/* Top bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: '14px 16px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 2,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.12)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.X size={18} stroke="white"/>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 14 }}>Scan Tag</span>
        </div>
        <div style={{
          width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.12)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Flash size={18} stroke="white"/>
        </div>
      </div>

      {/* Viewfinder frame */}
      <div style={{
        position: 'absolute', top: '32%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 240, height: 240,
        zIndex: 2,
      }}>
        {/* Corner brackets */}
        {[[0,0,'tl'], [0,1,'tr'], [1,0,'bl'], [1,1,'br']].map(([r, c, id]) => {
          const isTop = r === 0, isLeft = c === 0;
          return (
            <div key={id} style={{
              position: 'absolute',
              [isTop ? 'top' : 'bottom']: 0,
              [isLeft ? 'left' : 'right']: 0,
              width: 36, height: 36,
              borderTop: isTop ? '3px solid #52B788' : 'none',
              borderBottom: !isTop ? '3px solid #52B788' : 'none',
              borderLeft: isLeft ? '3px solid #52B788' : 'none',
              borderRight: !isLeft ? '3px solid #52B788' : 'none',
              borderRadius: isTop && isLeft ? '8px 0 0 0' : isTop ? '0 8px 0 0' : isLeft ? '0 0 0 8px' : '0 0 8px 0',
            }}/>
          );
        })}
        {/* Centre QR placeholder */}
        <div style={{
          position: 'absolute', inset: 24,
          background: 'rgba(82,183,136,0.04)',
          borderRadius: 8,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            width: 120, height: 120,
            backgroundImage: `
              linear-gradient(45deg, rgba(82,183,136,0.4) 25%, transparent 25%),
              linear-gradient(-45deg, rgba(82,183,136,0.4) 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, rgba(82,183,136,0.4) 75%),
              linear-gradient(-45deg, transparent 75%, rgba(82,183,136,0.4) 75%)`,
            backgroundSize: '14px 14px',
            backgroundPosition: '0 0, 0 7px, 7px -7px, -7px 0',
            opacity: 0.4,
          }}/>
        </div>
        {/* Scan line */}
        <div style={{
          position: 'absolute', left: 0, right: 0, top: '50%',
          height: 2, background: 'linear-gradient(to right, transparent, #52B788, transparent)',
          boxShadow: '0 0 8px #52B788',
        }}/>
      </div>

      {/* Instruction */}
      <div style={{
        position: 'absolute', top: '63%', left: 0, right: 0, textAlign: 'center', zIndex: 2,
      }}>
        <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 18, fontWeight: 600 }}>
          Align QR code within frame
        </div>
        <div style={{ fontSize: 13, color: '#8BAF96', marginTop: 6 }}>
          Holds steady — scanning automatically
        </div>
      </div>

      {/* Manual button */}
      <div style={{ position: 'absolute', bottom: 60, left: 20, right: 20, zIndex: 2 }}>
        <button style={{
          width: '100%', padding: '14px',
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
          borderRadius: 12, color: 'white', fontSize: 14, fontWeight: 500,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          backdropFilter: 'blur(8px)',
        }}>
          <Icon.Edit size={16} stroke="white"/>
          Enter tag ID manually
        </button>
      </div>
    </div>
  );
}

function TagDetails() {
  return (
    <div style={{ height: '100%', background: 'white', display: 'flex', flexDirection: 'column' }}>
      {/* Header */}
      <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid #EAEAEA' }}>
        <Icon.ArrowLeft size={22} stroke="#1B1B1B"/>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Syne, sans-serif', fontSize: 18, fontWeight: 700, color: '#1B1B1B' }}>Register Tag</div>
          <div style={{ fontSize: 11, color: '#6C757D', marginTop: 1 }}>Step 2 of 3 · Details</div>
        </div>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: '#2D6A4F', letterSpacing: '0.12em' }}>
          02/03
        </span>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '16px' }}>
        {/* Auto-filled pills */}
        <div style={{ marginBottom: 20 }}>
          <Label>Auto-detected</Label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <PillField icon={<Icon.QR size={16} stroke="#2D6A4F"/>} label="TAG ID" value="WT-2026-00043"/>
            <PillField icon={<Icon.MapPin size={16} stroke="#2D6A4F"/>} label="GPS" value="54.4621°N · 2.3010°W"
              right={<span className="rh-badge rh-badge-active" style={{ fontSize: 10, padding: '2px 8px' }}>± 4m</span>}/>
            <PillField icon={<Icon.Clock size={16} stroke="#2D6A4F"/>} label="TIME" value="15:44 · 14/05/2026"/>
          </div>
        </div>

        {/* Species */}
        <Label>Species</Label>
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', marginLeft: -16, padding: '0 16px 4px', marginBottom: 20 }}>
          {[
            { ico: Icon.Deer, lbl: 'Red Deer', active: true },
            { ico: Icon.Deer, lbl: 'Roe Deer' },
            { ico: Icon.Pheasant, lbl: 'Pheasant' },
            { ico: Icon.Boar, lbl: 'Wild Boar' },
            { ico: Icon.Grouse, lbl: 'Red Grouse' },
            { ico: Icon.Plus, lbl: 'Custom' },
          ].map(s => (
            <div key={s.lbl} style={{
              padding: '10px 14px', borderRadius: 12, flexShrink: 0,
              background: s.active ? '#2D6A4F' : 'white',
              border: '1.5px solid ' + (s.active ? '#2D6A4F' : '#D0D0D0'),
              color: s.active ? 'white' : '#1B1B1B',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              minWidth: 72,
            }}>
              <s.ico size={22} stroke={s.active ? 'white' : '#2D6A4F'}/>
              <span style={{ fontSize: 11, fontWeight: 500 }}>{s.lbl}</span>
            </div>
          ))}
        </div>

        {/* Activity type */}
        <Label>Activity</Label>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 20 }}>
          <RadioCard ico={<Icon.Crosshair size={20} stroke="white"/>} title="Harvest" selected/>
          <RadioCard ico={<Icon.Eye size={20} stroke="#2D6A4F"/>} title="Monitor"/>
        </div>

        {/* Notes */}
        <Label>Field Notes <span style={{ color: '#6C757D', fontWeight: 400 }}>(optional)</span></Label>
        <div style={{
          padding: '12px 14px',
          border: '1px solid #D0D0D0', borderRadius: 8,
          minHeight: 70,
          color: '#B0B0B0', fontSize: 14,
          marginBottom: 20,
        }}>
          Add field notes...
        </div>

        {/* Photo */}
        <Label>Photos</Label>
        <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
          <button style={{
            width: 70, height: 70, borderRadius: 12,
            border: '1.5px dashed #D0D0D0', background: '#FAFAFA',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
            color: '#6C757D',
          }}>
            <Icon.Camera size={20} stroke="#2D6A4F"/>
            <span style={{ fontSize: 10 }}>Add</span>
          </button>
        </div>
      </div>

      {/* Bottom fixed */}
      <div style={{ padding: '12px 16px 24px', borderTop: '1px solid #EAEAEA', background: 'white' }}>
        <button style={{
          width: '100%', padding: '14px',
          background: '#2D6A4F', color: 'white', border: 'none', borderRadius: 10,
          fontWeight: 600, fontSize: 15,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          Register Tag
          <Icon.ChevronRight size={18} stroke="white"/>
        </button>
      </div>
    </div>
  );
}

function Label({ children }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 600, color: '#4A4A4A',
      letterSpacing: '0.16em', textTransform: 'uppercase',
      fontFamily: 'JetBrains Mono, monospace',
      marginBottom: 10,
    }}>{children}</div>
  );
}

function PillField({ icon, label, value, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 14px',
      background: '#F4FBF7', border: '1px solid #D8F3DC', borderRadius: 10,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8, background: 'white',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 10, color: '#6C757D', letterSpacing: '0.12em', fontFamily: 'JetBrains Mono, monospace' }}>{label}</div>
        <div style={{ fontSize: 14, fontWeight: 500, color: '#1B1B1B', fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>{value}</div>
      </div>
      {right}
    </div>
  );
}

function RadioCard({ ico, title, selected }) {
  return (
    <div style={{
      padding: '14px',
      background: selected ? '#2D6A4F' : 'white',
      border: '1.5px solid ' + (selected ? '#2D6A4F' : '#D0D0D0'),
      borderRadius: 12,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 9,
        background: selected ? 'rgba(255,255,255,0.15)' : '#D8F3DC',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{ico}</div>
      <div style={{
        fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 16,
        color: selected ? 'white' : '#1B1B1B', letterSpacing: '0.01em',
      }}>{title}</div>
    </div>
  );
}

function TagConfirm() {
  return (
    <div style={{ height: '100%', background: 'white', display: 'flex', flexDirection: 'column', padding: '32px 20px 24px', textAlign: 'center' }}>
      {/* Check */}
      <div style={{ margin: '24px auto 24px' }}>
        <div style={{
          width: 96, height: 96, borderRadius: 999,
          background: '#D8F3DC',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: '0 auto',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: -8,
            border: '2px solid #52B788', borderRadius: 999,
            opacity: 0.3,
          }}/>
          <Icon.Check size={48} stroke="#2D6A4F" sw={2.5}/>
        </div>
      </div>

      <h2 style={{ fontFamily: 'Syne, sans-serif', fontSize: 28, fontWeight: 700, color: '#1B1B1B', margin: 0, letterSpacing: '-0.02em' }}>
        Tag Registered
      </h2>
      <p style={{ fontSize: 14, color: '#6C757D', marginTop: 8, marginBottom: 24 }}>
        Synced to your zone · Trace published
      </p>

      {/* Summary card */}
      <div style={{
        background: '#F5F5F5', borderRadius: 12, padding: 16, textAlign: 'left',
        marginBottom: 20,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, fontWeight: 600, color: '#1B1B1B' }}>
            WT-2026-00043
          </span>
          <span className="rh-badge rh-badge-active" style={{ fontSize: 10, padding: '2px 8px' }}>Tagged</span>
        </div>
        <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 18, color: '#1B1B1B', marginBottom: 8 }}>
          Red Deer · Harvest
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 11, color: '#6C757D' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 9 }}>GPS</div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', color: '#1B1B1B', fontSize: 12, marginTop: 2 }}>54.4621°N 2.3010°W</div>
          </div>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 9 }}>Time</div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', color: '#1B1B1B', fontSize: 12, marginTop: 2 }}>15:44 · 14/05/26</div>
          </div>
        </div>
      </div>

      {/* QR code */}
      <div style={{
        background: 'white', border: '1px solid #E0E0E0', borderRadius: 12, padding: 20,
        margin: '0 auto 20px',
      }}>
        <div style={{
          width: 140, height: 140,
          backgroundImage: `
            linear-gradient(45deg, #1B1B1B 25%, transparent 25%),
            linear-gradient(-45deg, #1B1B1B 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #1B1B1B 75%),
            linear-gradient(-45deg, transparent 75%, #1B1B1B 75%)`,
          backgroundSize: '10px 10px',
          backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0',
          margin: '0 auto',
          position: 'relative',
        }}>
          {/* QR corner squares */}
          {[[0,0],[0,1],[1,0]].map(([r,c],i) => (
            <div key={i} style={{
              position: 'absolute',
              [r === 0 ? 'top' : 'bottom']: 0,
              [c === 0 ? 'left' : 'right']: 0,
              width: 32, height: 32,
              background: 'white',
              border: '7px solid #1B1B1B',
              boxShadow: 'inset 0 0 0 4px white, inset 0 0 0 10px #1B1B1B',
            }}/>
          ))}
        </div>
        <div style={{ fontSize: 11, color: '#6C757D', marginTop: 10, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          Scan to view trace
        </div>
      </div>

      <div style={{ flex: 1 }}/>

      <div style={{ display: 'flex', gap: 10 }}>
        <button style={{
          flex: 1, padding: '14px', borderRadius: 10,
          background: 'white', border: '1.5px solid #2D6A4F', color: '#2D6A4F',
          fontSize: 14, fontWeight: 600,
        }}>Register Another</button>
        <button style={{
          flex: 1, padding: '14px', borderRadius: 10,
          background: '#2D6A4F', border: 'none', color: 'white',
          fontSize: 14, fontWeight: 600,
        }}>Back to Map</button>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────
   2D — EMERGENCY (pre/post)
   ──────────────────────────────────────── */
function EmergencyPre() {
  return (
    <div style={{
      height: '100%', background: '#1A0A08', color: 'white',
      display: 'flex', flexDirection: 'column',
      padding: '20px 20px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Background tint */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, rgba(192,57,43,0.18), transparent 60%)',
        pointerEvents: 'none',
      }}/>

      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <Icon.X size={24} stroke="white"/>
        <span style={{ fontFamily: 'Syne, sans-serif', fontWeight: 700, fontSize: 14, letterSpacing: '0.1em' }}>
          EMERGENCY
        </span>
        <Icon.Settings size={20} stroke="rgba(255,255,255,0.5)"/>
      </div>

      {/* Warning icon */}
      <div style={{ textAlign: 'center', marginTop: 56, position: 'relative', zIndex: 2 }}>
        <div style={{
          width: 60, height: 60, margin: '0 auto 16px',
          borderRadius: 999,
          background: 'rgba(192,57,43,0.18)',
          border: '1px solid rgba(192,57,43,0.4)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.Alert size={28} stroke="#FF8B7A"/>
        </div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.22em', color: '#FF8B7A', textTransform: 'uppercase' }}>
          Stand by
        </div>
      </div>

      {/* The big button */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
        <div style={{ position: 'relative' }}>
          {/* Outer ring (progress placeholder showing partial fill) */}
          <svg width="240" height="240" style={{ position: 'absolute', inset: 0 }}>
            <circle cx="120" cy="120" r="115" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="3"/>
            <circle cx="120" cy="120" r="115" fill="none" stroke="#C0392B" strokeWidth="3"
              strokeDasharray="722" strokeDashoffset="500" transform="rotate(-90 120 120)" strokeLinecap="round"/>
          </svg>
          <div style={{
            width: 220, height: 220, borderRadius: 999,
            background: 'radial-gradient(circle at 30% 30%, #D94A38, #C0392B 60%, #8B2A1F 100%)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            margin: 10,
            boxShadow: '0 20px 50px -10px rgba(192,57,43,0.5), inset 0 4px 12px rgba(255,255,255,0.15), inset 0 -10px 20px rgba(0,0,0,0.3)',
            position: 'relative',
          }}>
            <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 32, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 8 }}>
              HOLD
            </div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.85)' }}>
              TO ALERT
            </div>
            <div style={{
              marginTop: 16, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, fontWeight: 500,
              padding: '6px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.12)',
              color: 'white',
            }}>
              02 / 03 s
            </div>
          </div>
        </div>
      </div>

      {/* Sub-text */}
      <div style={{ textAlign: 'center', position: 'relative', zIndex: 2 }}>
        <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5, margin: '0 0 14px', padding: '0 16px' }}>
          Sends your GPS location to all zone members and your Zone Manager. SMS fallback if offline.
        </p>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px', borderRadius: 999,
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
        }}>
          <Icon.MapPin size={14} stroke="#52B788"/>
          <span className="font-mono" style={{ fontSize: 12, letterSpacing: '0.05em' }}>54.4621°N · 2.3010°W</span>
        </div>
      </div>
    </div>
  );
}

function EmergencyPost() {
  return (
    <div style={{
      height: '100%', background: '#1A0A08', color: 'white',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      {/* Pulsing banner */}
      <div style={{
        padding: '16px 20px',
        background: '#C0392B',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        animation: 'rh-blink 1.4s ease-in-out infinite',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon.Alert size={20} stroke="white"/>
          <div>
            <div style={{ fontFamily: 'Syne, sans-serif', fontWeight: 800, fontSize: 16, letterSpacing: '0.08em' }}>
              EMERGENCY ACTIVE
            </div>
            <div style={{ fontSize: 11, opacity: 0.85, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', marginTop: 1 }}>
              Alert sent · 0:42 ago
            </div>
          </div>
        </div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 20, fontWeight: 600 }}>00:42</div>
      </div>

      <div style={{ flex: 1, padding: '24px 20px', overflowY: 'auto' }}>
        {/* GPS */}
        <div style={{
          background: 'rgba(192,57,43,0.12)', border: '1px solid rgba(192,57,43,0.3)',
          borderRadius: 12, padding: 20, marginBottom: 20, textAlign: 'center',
        }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.22em', color: '#FF8B7A', textTransform: 'uppercase', marginBottom: 8 }}>
            Your location
          </div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 22, fontWeight: 600, color: 'white', lineHeight: 1.2 }}>
            54.4621°N<br/>2.3010°W
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', marginTop: 8 }}>
            Lake District Zone A · ± 4m
          </div>
        </div>

        {/* Zone members */}
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.22em', color: '#FF8B7A', textTransform: 'uppercase', marginBottom: 12 }}>
          Zone Members · 4
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 20 }}>
          <AlertMemberRow initials="JM" name="J. MacAllister" status="acked" time="0:15"/>
          <AlertMemberRow initials="TH" name="T. Hargreaves" status="notifying"/>
          <AlertMemberRow initials="SM" name="S. Munro" status="sms"/>
          <AlertMemberRow initials="DC" name="D. Campbell" role="Zone Manager" status="sms"/>
        </div>
      </div>

      {/* Cancel */}
      <div style={{ padding: '12px 20px 24px' }}>
        <button style={{
          width: '100%', padding: '14px', borderRadius: 10,
          background: 'transparent', border: '1.5px solid rgba(255,255,255,0.4)', color: 'white',
          fontSize: 14, fontWeight: 600,
        }}>Cancel Alert</button>
      </div>
    </div>
  );
}

function AlertMemberRow({ initials, name, role, status, time }) {
  const statusColor = { acked: '#52B788', notifying: '#E9C46A', sms: '#8BAF96' }[status];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 14px',
      background: 'rgba(255,255,255,0.05)', borderRadius: 10,
      border: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 18,
        background: 'rgba(255,255,255,0.1)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 12, fontWeight: 600,
      }}>{initials}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{name}</div>
        {role && <div style={{ fontSize: 11, color: '#FF8B7A', marginTop: 2 }}>{role}</div>}
      </div>
      <div style={{ textAlign: 'right' }}>
        {status === 'acked' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: statusColor, fontSize: 12, fontWeight: 500 }}>
            <Icon.Check size={14} stroke={statusColor}/>
            Acked · {time}
          </div>
        )}
        {status === 'notifying' && (
          <div className="rh-blink" style={{ color: statusColor, fontSize: 12, fontWeight: 500 }}>
            Notifying…
          </div>
        )}
        {status === 'sms' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: statusColor, fontSize: 12, fontWeight: 500 }}>
            <Icon.Phone size={12} stroke={statusColor}/>
            SMS sent
          </div>
        )}
      </div>
    </div>
  );
}

/* ────────────────────────────────────────
   2E — SESSION SUMMARY
   ──────────────────────────────────────── */
function SessionSummary() {
  return (
    <div style={{ height: '100%', background: 'white', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <Icon.X size={22} stroke="#1B1B1B"/>
        <div style={{ flex: 1, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase' }}>
          Session · Complete
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px 20px' }}>
        <h2 style={{ fontFamily: 'Syne, sans-serif', fontSize: 32, fontWeight: 700, color: '#1B1B1B', margin: '8px 0 6px', letterSpacing: '-0.02em' }}>
          Session Complete
        </h2>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 24, fontWeight: 600, color: '#2D6A4F' }}>
            3h 14m
          </span>
          <span style={{ fontSize: 13, color: '#6C757D' }}>11:30 — 14:44 · 14/05/2026</span>
        </div>

        {/* Mini map with trail */}
        <div style={{ borderRadius: 12, overflow: 'hidden', marginBottom: 16, border: '1px solid #1A2F22' }}>
          <TopoMap width={350} height={200} variant="lake"
            tags={[{ x: 0.22, y: 0.45 }, { x: 0.42, y: 0.32 }, { x: 0.6, y: 0.5 }, { x: 0.78, y: 0.62 }]}
            others={[]}
            userPos={[0.78, 0.62]}
            trail="M150,420 C200,360 280,340 320,400 C380,470 460,460 500,400 C540,360 600,360 640,420 C680,470 740,520 780,560"
            style={{ width: '100%', height: 200, display: 'block' }}
          />
        </div>

        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 20 }}>
          <SessionStat val="8.2" unit="km" lbl="Distance"/>
          <SessionStat val="4" unit="" lbl="Tags"/>
          <SessionStat val="LDA" unit="" lbl="Zone"/>
        </div>

        {/* Tag list */}
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.22em', color: '#6C757D', textTransform: 'uppercase', marginBottom: 10, fontWeight: 600 }}>
          Tags this session · 4
        </div>
        <div style={{ background: '#F5F5F5', borderRadius: 12, padding: 4, marginBottom: 20 }}>
          {[
            { id: 'WT-2026-00040', sp: 'Red Deer', t: 'Harvest', tm: '11:52' },
            { id: 'WT-2026-00041', sp: 'Roe Deer', t: 'Monitor', tm: '12:38' },
            { id: 'WT-2026-00042', sp: 'Red Deer', t: 'Harvest', tm: '13:15' },
            { id: 'WT-2026-00043', sp: 'Pheasant', t: 'Harvest', tm: '14:22' },
          ].map((tag, i) => (
            <div key={tag.id} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 12px',
              borderTop: i > 0 ? '1px solid #EAEAEA' : 'none',
            }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: '#52B788' }}/>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#6C757D', minWidth: 110 }}>{tag.id}</span>
              <span style={{ fontSize: 13, fontWeight: 500, color: '#1B1B1B', flex: 1 }}>{tag.sp}</span>
              <span style={{ fontSize: 11, color: '#6C757D' }}>{tag.t} · {tag.tm}</span>
            </div>
          ))}
        </div>

        {/* Export */}
        <div style={{ display: 'flex', gap: 10 }}>
          <button style={{
            flex: 1, padding: '12px',
            background: 'white', border: '1.5px solid #D0D0D0',
            borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            fontSize: 13, fontWeight: 500, color: '#1B1B1B',
          }}>
            <Icon.Download size={16} stroke="#1B1B1B"/> Export PDF
          </button>
          <button style={{
            flex: 1, padding: '12px',
            background: 'white', border: '1.5px solid #D0D0D0',
            borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            fontSize: 13, fontWeight: 500, color: '#1B1B1B',
          }}>
            <Icon.Share size={16} stroke="#1B1B1B"/> Share Trace
          </button>
        </div>
      </div>

      <div style={{ padding: '12px 20px 24px', borderTop: '1px solid #EAEAEA' }}>
        <button style={{
          width: '100%', padding: '14px',
          background: '#2D6A4F', color: 'white', border: 'none', borderRadius: 10,
          fontWeight: 600, fontSize: 15,
        }}>Done</button>
      </div>
    </div>
  );
}

function SessionStat({ val, unit, lbl }) {
  return (
    <div style={{ padding: 14, background: '#F5F5F5', borderRadius: 10 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
        <span style={{ fontFamily: 'Syne, sans-serif', fontSize: 22, fontWeight: 700, color: '#1B1B1B', letterSpacing: '-0.01em' }}>{val}</span>
        <span style={{ fontSize: 11, color: '#6C757D' }}>{unit}</span>
      </div>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, letterSpacing: '0.15em', color: '#6C757D', textTransform: 'uppercase', marginTop: 2 }}>{lbl}</div>
    </div>
  );
}

Object.assign(window, { MapView, TagScan, TagDetails, TagConfirm, EmergencyPre, EmergencyPost, SessionSummary });