// app-screens-2.jsx — Additional SURVIVAL screens (First Aid list, Map+download, Plant ID detail, Compass)

// ── First Aid list screen ──────────────────────────────────────────────────
function FirstAidScreen() {
  const items = [
    { id: 1, title: 'Anaphylaxis (Severe Allergic Reaction)', desc: 'Severe systemic allergic reaction. Life-threatening without immediate treatment.', iconColor: APP.warning },
    { id: 2, title: 'Recognizing a Stroke (CVA)', desc: 'Stroke — blockage or bleeding of blood vessel in the brain. Every minute counts.', iconColor: '#7AA8E0' },
    { id: 3, title: 'Cardiac Arrest — Adult CPR', desc: 'Person is unresponsive and not breathing normally. Every second counts.', iconColor: APP.danger },
    { id: 4, title: 'Treating Heat Stroke', desc: 'Core body temperature rises above 40°C. A life-threatening emergency.', iconColor: APP.warning },
  ];
  const tabs = ['Skills', 'Disasters', 'First Aid'];
  const filters = ['All', 'Reanimation', 'Bleeding', 'Breathing', 'Trauma'];

  return (
    <div style={{ position: 'absolute', inset: 0, background: APP.bg, paddingTop: 56, paddingBottom: 90, color: APP.white, overflow: 'hidden' }}>
      <div style={{ textAlign: 'center', fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 19, padding: '8px 0 12px' }}>Survival</div>

      {/* Segmented tabs */}
      <div style={{ padding: '4px 22px 14px', display: 'flex', gap: 8 }}>
        {tabs.map((t, i) => (
          <div key={t} style={{
            flex: 1, height: 40, borderRadius: 20,
            background: i === 2 ? APP.primary : 'transparent',
            border: `1px solid ${i === 2 ? APP.primary : APP.cardBorder}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Inter, system-ui', fontWeight: 600, fontSize: 15,
            color: i === 2 ? '#0a160d' : APP.primary,
          }}>{t}</div>
        ))}
      </div>

      <div style={{ padding: '0 22px 12px' }}>
        <SearchField placeholder="Search first aid scenarios…" />
      </div>

      {/* Category filter chips */}
      <div style={{ padding: '4px 22px 12px', display: 'flex', gap: 8, overflow: 'hidden' }}>
        {filters.map((f, i) => (
          <div key={f} style={{
            padding: '6px 14px', borderRadius: 16,
            background: i === 0 ? APP.primary : 'transparent',
            border: `1px solid ${i === 0 ? APP.primary : APP.cardBorder}`,
            fontFamily: 'Inter, system-ui', fontWeight: 600, fontSize: 13,
            color: i === 0 ? '#0a160d' : APP.primary,
            whiteSpace: 'nowrap',
          }}>{f}</div>
        ))}
      </div>

      <div style={{ height: 1, background: APP.cardBorder, margin: '0 22px 12px' }} />

      {/* Cards */}
      <div style={{ padding: '0 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map(it => (
          <div key={it.id} style={{
            border: `1px solid ${APP.cardBorder}`,
            borderLeft: `3px solid ${APP.danger}`,
            background: APP.card, borderRadius: 12,
            padding: '14px 14px 14px 12px', display: 'flex', gap: 12,
          }}>
            <div style={{
              width: 42, height: 42, borderRadius: 10,
              background: `${it.iconColor}22`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: 9, flexShrink: 0,
            }}>{Icons.plus(it.iconColor)}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 15,
                color: APP.white, marginBottom: 4, lineHeight: 1.2,
              }}>{it.title}</div>
              <div style={{
                fontFamily: 'Inter, system-ui', fontSize: 13, color: APP.white,
                opacity: 0.7, lineHeight: 1.35, marginBottom: 8,
              }}>{it.desc}</div>
              <span style={{
                display: 'inline-block',
                padding: '3px 9px', borderRadius: 12,
                border: `1px solid ${APP.dangerBorder}`,
                fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 11,
                color: APP.danger, letterSpacing: 0.2,
              }}>Life-threatening</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Map + offline download sheet ───────────────────────────────────────────
function MapScreen({ downloadedIdx = 0 }) {
  const regions = [
    { name: 'Nederland', size: '~180 MB', downloaded: true },
    { name: 'België', size: '~140 MB' },
    { name: 'Duitsland (NW)', size: '~220 MB' },
    { name: 'Noord-Frankrijk', size: '~190 MB' },
    { name: 'Zuid-Engeland', size: '~170 MB' },
    { name: 'Alpen Regio', size: '~260 MB' },
    { name: 'Scandinavië', size: '~500 MB' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: APP.bg, paddingTop: 56, paddingBottom: 90, color: APP.white, overflow: 'hidden' }}>
      <div style={{ textAlign: 'center', fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 19, padding: '8px 0 12px' }}>Map</div>

      {/* Faux map */}
      <div style={{
        position: 'relative', height: 200, margin: '0 0 12px',
        background: 'linear-gradient(160deg, #d6dde0 0%, #c8d2d6 60%, #a8c8de 100%)',
        overflow: 'hidden',
      }}>
        {/* Streets - vertical */}
        {[15, 28, 42, 56, 70, 82].map(p => (
          <div key={'v'+p} style={{ position: 'absolute', top: 0, bottom: 0, left: `${p}%`, width: 2, background: '#f1d56a', opacity: 0.85 }} />
        ))}
        {/* Streets - horizontal */}
        {[20, 38, 56, 74].map(p => (
          <div key={'h'+p} style={{ position: 'absolute', left: 0, right: 0, top: `${p}%`, height: 2, background: '#f1d56a', opacity: 0.85 }} />
        ))}
        {/* Diagonal */}
        <div style={{ position: 'absolute', top: 30, left: -10, width: '120%', height: 3, background: '#f1d56a', opacity: 0.9, transform: 'rotate(18deg)' }} />
        {/* Water on right */}
        <div style={{ position: 'absolute', top: 0, right: 0, width: '32%', height: '100%', background: 'linear-gradient(180deg, #6fa8d4, #4d8fc4)', clipPath: 'polygon(20% 0, 100% 0, 100% 100%, 0 100%)' }} />
        {/* Street label */}
        <div style={{ position: 'absolute', top: 110, left: 80, fontFamily: 'Inter, system-ui', fontSize: 10, color: '#5a6066', opacity: 0.8, transform: 'rotate(-2deg)' }}>Union Street</div>
        <div style={{ position: 'absolute', top: 60, left: 200, fontFamily: 'Inter, system-ui', fontSize: 10, color: '#5a6066', opacity: 0.8 }}>Bay Street</div>
      </div>

      {/* Bottom sheet */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 240, bottom: 90,
        background: APP.bg, borderRadius: '20px 20px 0 0',
        padding: '20px 22px 12px',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <span style={{ fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 18, color: APP.white }}>Download Offline Maps</span>
          <div style={{ width: 22, height: 22 }}>{Icons.close(APP.primary)}</div>
        </div>
        <div style={{ height: 1, background: APP.cardBorder, marginBottom: 6 }} />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {regions.map((r, i) => (
            <div key={r.name} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '14px 0', borderBottom: i < regions.length - 1 ? `0.5px solid ${APP.cardBorder}` : 'none',
            }}>
              <div>
                <div style={{ fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 15, color: APP.white }}>{r.name}</div>
                <div style={{ fontFamily: 'Inter, system-ui', fontSize: 12, color: APP.primaryDim, marginTop: 2 }}>{r.size}</div>
              </div>
              {i <= downloadedIdx ? (
                <div style={{
                  padding: '7px 14px', borderRadius: 16,
                  border: `1.5px solid ${APP.primary}`,
                  background: 'transparent',
                  display: 'flex', alignItems: 'center', gap: 5,
                  fontFamily: 'Inter, system-ui', fontWeight: 600, fontSize: 13,
                  color: APP.primary,
                }}>
                  <div style={{ width: 13, height: 13 }}>{Icons.check(APP.primary)}</div>
                  View
                </div>
              ) : (
                <div style={{
                  padding: '7px 18px', borderRadius: 16,
                  background: APP.primary,
                  fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 13,
                  color: '#0a160d',
                }}>Download</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Plant ID detail (hero close-up screen) ─────────────────────────────────
function PlantIDScreen() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: APP.bg, paddingTop: 56, paddingBottom: 90, color: APP.white, overflow: 'hidden' }}>
      <div style={{ textAlign: 'center', fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 19, padding: '8px 0 12px' }}>Plant Identification</div>

      {/* Image placeholder */}
      <div style={{
        margin: '0 22px 14px', height: 200, borderRadius: 14,
        background: 'radial-gradient(circle at 30% 40%, #2d5a35, #0e2014 70%)',
        border: `1px solid ${APP.cardBorder}`,
        position: 'relative', overflow: 'hidden',
      }}>
        {/* Faux leaf veins */}
        <svg viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.55 }} preserveAspectRatio="xMidYMid slice">
          <path d="M50 90 Q 30 60 20 30 Q 35 25 50 10 Q 65 25 80 30 Q 70 60 50 90 Z" fill="rgba(63,219,90,0.18)" stroke={APP.primary} strokeWidth="0.4"/>
          <path d="M50 90 L 50 10" stroke={APP.primary} strokeWidth="0.5" />
          {[20, 30, 40, 50, 60, 70, 80].map(y => (
            <g key={y}>
              <path d={`M50 ${y} L ${30 + y*0.15} ${y - 4}`} stroke={APP.primary} strokeWidth="0.3"/>
              <path d={`M50 ${y} L ${70 - y*0.15} ${y - 4}`} stroke={APP.primary} strokeWidth="0.3"/>
            </g>
          ))}
        </svg>
        {/* Crosshair scan */}
        <svg viewBox="0 0 100 100" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} preserveAspectRatio="none">
          <rect x="35" y="30" width="30" height="40" fill="none" stroke={APP.primary} strokeWidth="0.4" strokeDasharray="2 2"/>
          <circle cx="50" cy="50" r="2" fill={APP.primary}/>
        </svg>
        {/* Match badge */}
        <div style={{
          position: 'absolute', top: 12, right: 12,
          padding: '5px 11px', borderRadius: 14,
          background: APP.primarySoft, border: `1px solid ${APP.primary}`,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700,
          color: APP.primary, letterSpacing: 0.5,
        }}>97% MATCH</div>
      </div>

      <div style={{ padding: '0 22px' }}>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 800, fontSize: 24,
          color: APP.white, lineHeight: 1.1,
        }}>Wood Sorrel</div>
        <div style={{
          fontFamily: 'Inter, system-ui', fontStyle: 'italic', fontSize: 14,
          color: APP.primaryDim, marginTop: 2,
        }}>Oxalis acetosella</div>

        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <span style={{
            padding: '5px 11px', borderRadius: 14,
            background: APP.primarySoft, border: `1px solid ${APP.primary}`,
            fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 11,
            color: APP.primary,
          }}>EDIBLE</span>
          <span style={{
            padding: '5px 11px', borderRadius: 14,
            background: APP.warningBg, border: `1px solid ${APP.warningBorder}`,
            fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 11,
            color: APP.warning,
          }}>EAT IN MODERATION</span>
        </div>

        <div style={{
          marginTop: 16, padding: 14, borderRadius: 12,
          background: APP.card, border: `1px solid ${APP.cardBorder}`,
          fontFamily: 'Inter, system-ui', fontSize: 13, color: APP.white,
          opacity: 0.85, lineHeight: 1.45,
        }}>
          Sour-tasting clover-like leaves. Rich in vitamin C. Contains oxalic acid — avoid in large quantities or if you have kidney issues.
        </div>

        <div style={{
          marginTop: 12, padding: '10px 14px', borderRadius: 12,
          border: `1px dashed ${APP.cardBorder}`,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          color: APP.primaryDim, letterSpacing: 0.5,
        }}>
          IDENTIFIED OFFLINE · NO DATA SENT
        </div>
      </div>
    </div>
  );
}

// ── Compass / navigation screen ────────────────────────────────────────────
function CompassScreen({ bearing = 0, lat = '60.4720°N', lng = '8.4689°E' }) {
  const cx = 50, cy = 50, r = 38;
  return (
    <div style={{ position: 'absolute', inset: 0, background: APP.bgDeep, paddingTop: 56, paddingBottom: 90, color: APP.white, overflow: 'hidden' }}>
      <div style={{ textAlign: 'center', fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 19, padding: '8px 0 4px' }}>Navigation</div>
      <div style={{ textAlign: 'center', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: APP.primaryDim, letterSpacing: 1 }}>OFFLINE · GPS ONLY</div>

      {/* Compass dial */}
      <div style={{ position: 'relative', width: 280, height: 280, margin: '24px auto 0' }}>
        <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%', transform: `rotate(${-bearing}deg)`, transition: 'transform 80ms linear' }}>
          {/* Outer ring */}
          <circle cx={cx} cy={cy} r={r} fill="none" stroke={APP.primaryDim} strokeWidth="0.5"/>
          <circle cx={cx} cy={cy} r={r - 4} fill="none" stroke={APP.primaryDim} strokeWidth="0.2"/>
          {/* Tick marks */}
          {Array.from({ length: 36 }).map((_, i) => {
            const angle = (i * 10) * Math.PI / 180;
            const major = i % 3 === 0;
            const r1 = r;
            const r2 = r - (major ? 4 : 2);
            const x1 = cx + Math.sin(angle) * r1;
            const y1 = cy - Math.cos(angle) * r1;
            const x2 = cx + Math.sin(angle) * r2;
            const y2 = cy - Math.cos(angle) * r2;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={major ? APP.primary : APP.primaryDim} strokeWidth={major ? 0.45 : 0.25}/>;
          })}
          {/* Cardinal labels */}
          {[
            { l: 'N', x: 50, y: 8, c: APP.danger },
            { l: 'E', x: 92, y: 51 },
            { l: 'S', x: 50, y: 95 },
            { l: 'W', x: 8, y: 51 },
          ].map(d => (
            <text key={d.l} x={d.x} y={d.y} fill={d.c || APP.primary} fontSize="6" fontWeight="800" textAnchor="middle" dominantBaseline="middle" fontFamily="Inter, sans-serif">{d.l}</text>
          ))}
          {/* Needle */}
          <g>
            <path d="M50 14 L 53 50 L 50 86 L 47 50 Z" fill={APP.danger} opacity="0.95"/>
            <circle cx="50" cy="50" r="2" fill={APP.primary}/>
          </g>
        </svg>
        {/* Bearing readout */}
        <div style={{
          position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', pointerEvents: 'none',
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, fontSize: 36,
            color: APP.primary, lineHeight: 1,
          }}>{Math.round(bearing)}°</div>
          <div style={{ fontFamily: 'Inter, system-ui', fontSize: 11, color: APP.primaryDim, marginTop: 2, letterSpacing: 1 }}>TRUE NORTH</div>
        </div>
      </div>

      {/* Coordinates */}
      <div style={{
        margin: '20px 22px 0', padding: '12px 14px',
        background: APP.card, border: `1px solid ${APP.cardBorder}`,
        borderRadius: 12, display: 'flex', justifyContent: 'space-between',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 14, color: APP.white,
      }}>
        <div>
          <div style={{ fontSize: 9, color: APP.primaryDim, letterSpacing: 1.5, marginBottom: 4 }}>LAT</div>
          <div style={{ fontWeight: 600 }}>{lat}</div>
        </div>
        <div>
          <div style={{ fontSize: 9, color: APP.primaryDim, letterSpacing: 1.5, marginBottom: 4 }}>LNG</div>
          <div style={{ fontWeight: 600 }}>{lng}</div>
        </div>
        <div>
          <div style={{ fontSize: 9, color: APP.primaryDim, letterSpacing: 1.5, marginBottom: 4 }}>ALT</div>
          <div style={{ fontWeight: 600 }}>1284 m</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FirstAidScreen, MapScreen, PlantIDScreen, CompassScreen });