// app-screens.jsx — Recreated SURVIVAL app screens. All in-phone UI.
// Loaded after React + Babel. Components are exported to window at the bottom.

// ── Palette (matches the user's app screenshots) ───────────────────────────
const APP = {
  bg: '#0c1a10',
  bgDeep: '#06120a',
  card: 'rgba(255, 255, 255, 0.025)',
  cardBorder: 'rgba(63, 219, 90, 0.10)',
  primary: '#3FDB5A',
  primaryDim: 'rgba(63, 219, 90, 0.65)',
  primarySoft: 'rgba(63, 219, 90, 0.18)',
  muted: '#4a8a5a',
  mutedDim: '#3a6a48',
  white: '#e8f5ea',
  warning: '#E5A33A',
  warningBg: 'rgba(229, 163, 58, 0.10)',
  warningBorder: 'rgba(229, 163, 58, 0.45)',
  danger: '#E84C4C',
  dangerBg: 'rgba(232, 76, 76, 0.08)',
  dangerBorder: 'rgba(232, 76, 76, 0.6)',
  amber: '#E5A33A',
  blueIce: '#5AB0E5',
  purple: '#B47AE0',
  teal: '#3FC8C8',
};

// ── Inline category icons ──────────────────────────────────────────────────
const Icons = {
  sprout: (c = APP.primary) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 20V10"/><path d="M12 10c0-3 2-6 6-6-1 4-3 6-6 6z"/><path d="M12 12c0-2-1.5-4-4-4 .5 3 2 4 4 4z"/>
    </svg>
  ),
  animal: (c = APP.amber) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="11" r="4"/><path d="M6 6l2 3M18 6l-2 3"/><circle cx="10.5" cy="11" r="0.6" fill={c}/><circle cx="13.5" cy="11" r="0.6" fill={c}/><path d="M10 14c1 1 3 1 4 0"/><path d="M9 15v3M12 15.5v3.5M15 15v3"/>
    </svg>
  ),
  house: (c = APP.primary) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 11l8-6 8 6v9h-5v-6h-6v6H4z"/>
    </svg>
  ),
  food: (c = APP.warning) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 14a5 5 0 116 0v3h-6v-3z"/><path d="M10 19h4"/><path d="M11 21h2"/>
    </svg>
  ),
  drop: (c = APP.blueIce) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3c-3 5-6 8-6 12a6 6 0 0012 0c0-4-3-7-6-12z"/>
    </svg>
  ),
  flame: (c = '#E96A3A') => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3c1 4 4 6 4 10a4 4 0 11-8 0c0-2 1-3 2-4 0 2 1 3 2 3-1-3 0-6 0-9z"/>
    </svg>
  ),
  compass: (c = APP.purple) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="8"/><path d="M12 7l2 5-2 5-2-5 2-5z" fill={c} fillOpacity="0.2"/>
    </svg>
  ),
  disaster: (c = APP.teal) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="9" r="3"/><path d="M12 3v2M5 9h2M17 9h2M7 5l1.5 1.5M17 5l-1.5 1.5"/><path d="M7 19c1-3 3-5 5-5s4 2 5 5"/>
    </svg>
  ),
  plus: (c = APP.danger) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round">
      <rect x="4" y="4" width="16" height="16" rx="3"/><path d="M12 8v8M8 12h8"/>
    </svg>
  ),
  lightbulb: (c = '#D9D33A') => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 14a5 5 0 116 0v3h-6v-3z"/><path d="M10 19h4M11 21h2"/>
    </svg>
  ),
  search: (c) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round">
      <circle cx="11" cy="11" r="6"/><path d="M16 16l4 4"/>
    </svg>
  ),
  alertTri: (c = APP.warning) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3L2 20h20L12 3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r="0.8" fill={c}/>
    </svg>
  ),
  gear: (c = APP.primaryDim) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/>
    </svg>
  ),
  check: (c) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7"/>
    </svg>
  ),
  close: (c) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round">
      <path d="M6 6l12 12M18 6L6 18"/>
    </svg>
  ),
  scalpel: (c) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 21l8-8M11 13l6-6 3 3-6 6-3-3z"/>
    </svg>
  ),
  map: (c) => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke={c} strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
      <path d="M3 6l5-2 8 2 5-2v15l-5 2-8-2-5 2V6z"/><path d="M8 4v15M16 6v15"/>
    </svg>
  ),
};

// ── Status bar (matches the screenshots' 24h "14:37") ──────────────────────
function StatusBar({ time = '14:37', noSignal = false }) {
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: 54,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '14px 28px 0', zIndex: 30, color: APP.white,
      fontFamily: '-apple-system, "SF Pro", system-ui',
      fontWeight: 600, fontSize: 17, letterSpacing: 0.2,
    }}>
      <span>{time}</span>
      {/* Dynamic island */}
      <div style={{
        position: 'absolute', left: '50%', top: 12, transform: 'translateX(-50%)',
        width: 105, height: 33, background: '#000', borderRadius: 22,
      }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        {/* signal */}
        {noSignal ? (
          <svg width="22" height="13" viewBox="0 0 22 13">
            <rect x="0" y="9" width="2.5" height="3.5" rx="0.5" fill={APP.white} fillOpacity="0.35"/>
            <rect x="4" y="6.5" width="2.5" height="6" rx="0.5" fill={APP.white} fillOpacity="0.35"/>
            <rect x="8" y="3.5" width="2.5" height="9" rx="0.5" fill={APP.white} fillOpacity="0.35"/>
            <rect x="12" y="0.5" width="2.5" height="12" rx="0.5" fill={APP.white} fillOpacity="0.35"/>
            <path d="M16 4l5 5M21 4l-5 5" stroke={APP.danger} strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
        ) : (
          <svg width="13" height="11" viewBox="0 0 22 13">
            <circle cx="3" cy="9" r="1.5" fill={APP.white}/>
            <circle cx="9" cy="9" r="1.5" fill={APP.white}/>
            <circle cx="15" cy="9" r="1.5" fill={APP.white}/>
            <circle cx="21" cy="9" r="1.5" fill={APP.white}/>
          </svg>
        )}
        {/* wifi */}
        <svg width="17" height="12" viewBox="0 0 17 12" fill={APP.white}>
          <path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z"/>
          <path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z"/>
          <circle cx="8.5" cy="10.5" r="1.5"/>
        </svg>
        {/* battery */}
        <svg width="27" height="13" viewBox="0 0 27 13">
          <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={APP.white} strokeOpacity="0.55" fill="none"/>
          <rect x="2" y="2" width="20" height="9" rx="2" fill={APP.white}/>
          <path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill={APP.white} fillOpacity="0.4"/>
        </svg>
      </div>
    </div>
  );
}

// ── Bottom tab bar ─────────────────────────────────────────────────────────
function TabBar({ active = 'home' }) {
  const tabs = [
    { id: 'home', label: 'Home', icon: (
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6">
        <circle cx="12" cy="12" r="8"/><path d="M12 7l2 5-2 5-2-5 2-5z" fill="currentColor" fillOpacity="0.2"/>
      </svg>
    )},
    { id: 'nature', label: 'Nature', icon: Icons.sprout('currentColor') },
    { id: 'survival', label: 'Survival', icon: Icons.scalpel('currentColor') },
    { id: 'map', label: 'Map', icon: Icons.map('currentColor') },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingBottom: 28, paddingTop: 8,
      display: 'flex', justifyContent: 'space-around', alignItems: 'flex-start',
      borderTop: `0.5px solid ${APP.cardBorder}`,
      background: 'linear-gradient(to top, #0a160d 60%, rgba(10,22,13,0))',
      zIndex: 20,
    }}>
      {tabs.map(t => {
        const isActive = t.id === active;
        const color = isActive ? APP.primary : APP.mutedDim;
        return (
          <div key={t.id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            color, width: 64,
          }}>
            <div style={{ width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {t.icon}
            </div>
            <span style={{
              fontFamily: 'Inter, system-ui', fontSize: 11, fontWeight: 600,
              letterSpacing: 0.1, color: isActive ? APP.primary : APP.white,
              opacity: isActive ? 1 : 0.85,
            }}>{t.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ── Search field (faux) ────────────────────────────────────────────────────
function SearchField({ placeholder = 'Search…' }) {
  return (
    <div style={{
      height: 48, borderRadius: 14, background: APP.card,
      border: `1px solid ${APP.cardBorder}`,
      display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px',
      color: APP.primaryDim,
    }}>
      <div style={{ width: 18, height: 18 }}>{Icons.search(APP.primaryDim)}</div>
      <span style={{
        fontFamily: 'Inter, system-ui', fontSize: 16, fontWeight: 400, opacity: 0.7,
      }}>{placeholder}</span>
    </div>
  );
}

// ── Home screen — categories grid + daily tip ──────────────────────────────
function HomeScreen() {
  const categories = [
    { id: 'plants', label: 'Plants', icon: Icons.sprout, tint: 'rgba(63,219,90,0.10)', stroke: APP.primary },
    { id: 'animals', label: 'Animals', icon: Icons.animal, tint: 'rgba(229,163,58,0.15)', stroke: APP.amber },
    { id: 'shelter', label: 'Shelter', icon: Icons.house, tint: 'rgba(63,219,90,0.10)', stroke: APP.primary },
    { id: 'food', label: 'Food', icon: Icons.lightbulb, tint: 'rgba(217,211,58,0.12)', stroke: '#D9D33A' },
    { id: 'water', label: 'Water', icon: Icons.drop, tint: 'rgba(90,176,229,0.12)', stroke: APP.blueIce },
    { id: 'fire', label: 'Fire', icon: Icons.flame, tint: 'rgba(233,106,58,0.15)', stroke: '#E96A3A' },
    { id: 'nav', label: 'Navigation', icon: Icons.compass, tint: 'rgba(180,122,224,0.12)', stroke: APP.purple },
    { id: 'dis', label: 'Disasters', icon: Icons.disaster, tint: 'rgba(63,200,200,0.12)', stroke: APP.teal },
    { id: 'aid', label: 'First Aid', icon: Icons.plus, tint: 'rgba(232,76,76,0.10)', stroke: APP.danger },
  ];
  return (
    <div style={{
      position: 'absolute', inset: 0, background: APP.bg,
      paddingTop: 62, paddingBottom: 90, overflow: 'hidden',
      color: APP.white,
    }}>
      {/* Header */}
      <div style={{ padding: '14px 22px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{
            fontFamily: 'Inter, system-ui', fontWeight: 900,
            fontSize: 38, color: APP.primary, letterSpacing: 4,
            lineHeight: 1,
          }}>SURVIVAL</div>
          <div style={{
            fontFamily: 'Inter, system-ui', fontWeight: 400,
            fontSize: 17, color: APP.white, letterSpacing: 3, marginTop: 6, opacity: 0.85,
          }}>Offline Survival Guide</div>
        </div>
        <div style={{ width: 28, height: 28, opacity: 0.7 }}>{Icons.gear(APP.primaryDim)}</div>
      </div>

      {/* Search */}
      <div style={{ padding: '14px 22px 0' }}>
        <SearchField placeholder="Search plants, animals, skills…" />
      </div>

      {/* Daily tip */}
      <div style={{ padding: '18px 22px 0' }}>
        <div style={{
          border: `1.5px solid ${APP.warningBorder}`,
          background: APP.warningBg,
          borderRadius: 12, padding: '14px 16px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <div style={{ width: 18, height: 18 }}>{Icons.alertTri(APP.warning)}</div>
            <span style={{
              fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 13,
              color: APP.warning, letterSpacing: 1.5,
            }}>DAILY TIP</span>
          </div>
          <div style={{
            fontFamily: 'Inter, system-ui', fontSize: 14, color: APP.white,
            opacity: 0.9, lineHeight: 1.4,
          }}>Always set multiple traps at the same time — the chance of success is much greater.</div>
        </div>
      </div>

      {/* Categories */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 13,
          color: APP.primary, letterSpacing: 2, marginBottom: 10,
        }}>CATEGORIES</div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9,
        }}>
          {categories.map(c => (
            <div key={c.id} style={{
              aspectRatio: '1 / 1', borderRadius: 14,
              background: APP.card, border: `1px solid ${APP.cardBorder}`,
              padding: 12, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div style={{
                width: 50, height: 50, borderRadius: 12,
                background: c.tint,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: 11, marginTop: 6,
              }}>
                {c.icon(c.stroke)}
              </div>
              <span style={{
                fontFamily: 'Inter, system-ui', fontWeight: 700, fontSize: 13,
                color: APP.white,
              }}>{c.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { APP, Icons, StatusBar, TabBar, SearchField, HomeScreen });