/* global React */

// ────────────────────────────────────────────────────────────
// SAFETY GUIDE — справочник «что делать при землетрясении»
// 5 ситуаций: Дом / Улица / В машине / Высотка / После
// Полностью статичный контент — работает оффлайн.
// Источники: МЧС России, USGS Earthquake Preparedness, Росгидромет.
// ────────────────────────────────────────────────────────────

const SAFETY_CONTENT = {
  home: {
    title: "Если вы дома",
    subtitle: "Самое опасное — мебель, стёкла и время добраться до укрытия",
    do: [
      { t: "Падай · укрывайся · держись", d: "Опуститесь на пол, укройтесь под прочным столом, держитесь за ножку. Это самая надёжная поза при толчках — рекомендация МЧС и USGS." },
      { t: "Отойдите от окон и тяжёлых полок", d: "Стекло и шкафы — главная причина травм." },
      { t: "Если в постели — оставайтесь там", d: "Прикройте голову подушкой. Не бегите в темноте." },
    ],
    dont: [
      "Не используйте лифт — отключится электричество.",
      "Не выбегайте на лестницу во время толчков.",
      "Не зажигайте спички — возможна утечка газа.",
    ],
  },
  street: {
    title: "Если вы на улице",
    subtitle: "Главная угроза — падающие фасады, провода и стёкла",
    do: [
      { t: "Отойдите от зданий", d: "Минимум 10 м от стен. Падающая штукатурка летит до 5 м." },
      { t: "Найдите открытое место", d: "Парк, площадь, центр улицы. Присядьте, прикройте голову." },
      { t: "Уйдите от ЛЭП и столбов", d: "Оборванные провода под напряжением — опасны." },
    ],
    dont: [
      "Не входите обратно в здание во время толчков.",
      "Не пытайтесь снимать видео — следите за обстановкой.",
      "Не пользуйтесь подземными переходами.",
    ],
  },
  car: {
    title: "Если вы за рулём",
    subtitle: "Остановитесь — дороги могут проседать, мосты деформироваться",
    do: [
      { t: "Плавно остановитесь", d: "Подальше от мостов, эстакад, ЛЭП и зданий. Не на склоне." },
      { t: "Останьтесь в машине", d: "Кузов защитит от падающих предметов. Пристегнитесь." },
      { t: "Включите радио", d: "Слушайте экстренные сообщения МЧС." },
    ],
    dont: [
      "Не паркуйтесь под мостами и виадуками.",
      "Не пересекайте повреждённые мосты после толчков.",
      "Не блокируйте проезд экстренным службам.",
    ],
  },
  high: {
    title: "Если вы в высотном здании",
    subtitle: "Здание раскачивается дольше — оставайтесь внутри",
    do: [
      { t: "Укройтесь под столом или у несущей стены", d: "Внутренние стены и колонны самые прочные." },
      { t: "Дождитесь окончания толчков", d: "Раскачивание может длиться 1–2 минуты." },
      { t: "После — выходите по лестнице", d: "Аккуратно, держась за перила." },
    ],
    dont: [
      "Лифты — категорически нет.",
      "Не выходите на балкон.",
      "Не разбивайте окна — стекло опасно.",
    ],
  },
  after: {
    title: "После толчков",
    subtitle: "Будьте готовы к афтершокам в течение часов и дней",
    do: [
      { t: "Проверьте близких", d: "Один сигнал «всё хорошо» в Telegram, не звоните — сети перегружены." },
      { t: "Осмотрите утечки", d: "Газ, вода, электричество. При запахе газа — открыть окна, перекрыть." },
      { t: "Готовьтесь к афтершокам", d: "Они слабее, но могут обрушить ослабленные конструкции." },
    ],
    dont: [
      "Не входите в повреждённые здания.",
      "Не пользуйтесь свечами — риск пожара.",
      "Не распространяйте непроверенные слухи.",
    ],
  },
};

const SAFETY_TABS = [
  { id: "home",   label: "Дом" },
  { id: "street", label: "Улица" },
  { id: "car",    label: "В машине" },
  { id: "high",   label: "Высотка" },
  { id: "after",  label: "После" },
];

window.SafetyGuide = ({ T, dark, onBack }) => {
  const [tab, setTab] = React.useState("home");
  const c = SAFETY_CONTENT[tab];

  return (
    <div style={{ background: T.bg, color: T.text, minHeight: "100%",
      display: "flex", flexDirection: "column" }}>

      <window.ScreenHeader title="Что делать при землетрясении"
        subtitle="экстренные действия" onBack={onBack} T={T} />

      {/* Tabs */}
      <div style={{ display: "flex", gap: 4, padding: "10px 14px",
        borderBottom: `1px solid ${T.borderSoft}`, overflowX: "auto",
        background: T.surface, flexShrink: 0,
      }}>
        {SAFETY_TABS.map((t) => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: "7px 14px", borderRadius: 999,
            background: tab === t.id ? T.accent : "transparent",
            color: tab === t.id ? (dark ? "#0E1116" : "#fff") : T.textDim,
            border: tab === t.id ? "none" : `1px solid ${T.border}`,
            fontSize: 12, fontWeight: 600, cursor: "pointer",
            fontFamily: "inherit", whiteSpace: "nowrap", flexShrink: 0,
          }}>{t.label}</button>
        ))}
      </div>

      {/* Body */}
      <div style={{ flex: 1, padding: "16px 18px 32px" }}>
        <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 4, letterSpacing: -0.2 }}>
          {c.title}
        </div>
        <div style={{ fontSize: 12.5, color: T.textDim, marginBottom: 18, lineHeight: 1.45 }}>
          {c.subtitle}
        </div>

        {/* DO */}
        <Header T={T} icon="✓" color={T.ok} text="ДЕЛАЙТЕ" />
        <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 22 }}>
          {c.do.map((item, i) => (
            <div key={i} style={{
              background: T.surface, border: `1px solid ${T.borderSoft}`,
              borderRadius: 10, padding: "12px 14px",
            }}>
              <div style={{ display: "flex", gap: 10, alignItems: "baseline", marginBottom: 4 }}>
                <span style={{ fontSize: 10, fontFamily: '"JetBrains Mono", monospace',
                  color: T.textMuted, letterSpacing: 1 }}>0{i + 1}</span>
                <span style={{ fontSize: 14, fontWeight: 600 }}>{item.t}</span>
              </div>
              <div style={{ fontSize: 12.5, color: T.textDim, lineHeight: 1.45,
                paddingLeft: 24 }}>{item.d}</div>
            </div>
          ))}
        </div>

        {/* DON'T */}
        <Header T={T} icon="✕" color={T.danger} text="НЕ ДЕЛАЙТЕ" />
        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 16 }}>
          {c.dont.map((item, i) => (
            <div key={i} style={{
              display: "flex", gap: 10, padding: "8px 12px",
              borderLeft: `2px solid ${T.danger}`,
            }}>
              <div style={{ fontSize: 13, lineHeight: 1.45, color: T.text }}>{item}</div>
            </div>
          ))}
        </div>

        {/* Источники */}
        <div style={{ fontSize: 10.5, color: T.textMuted,
          fontFamily: '"JetBrains Mono", monospace', lineHeight: 1.6,
          paddingTop: 10, borderTop: `1px solid ${T.borderSoft}` }}>
          ИСТОЧНИКИ: МЧС РОССИИ · USGS EARTHQUAKE PREPAREDNESS · РОСГИДРОМЕТ
        </div>
      </div>
    </div>
  );
};

const Header = ({ T, icon, color, text }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
    <span style={{
      width: 18, height: 18, borderRadius: "50%", background: color, color: "#fff",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontSize: 11, fontWeight: 700,
    }}>{icon}</span>
    <span style={{ fontSize: 11, letterSpacing: 2, color: color,
      fontFamily: '"JetBrains Mono", monospace', fontWeight: 600 }}>
      {text}
    </span>
  </div>
);