/* global React */

// ────────────────────────────────────────────────────────────
// ABOUT — информация о проекте, источники данных, ссылки
// ────────────────────────────────────────────────────────────
window.AboutScreen = ({ T, dark, onBack }) => (
  <div style={{ background: T.bg, color: T.text, paddingBottom: 32, minHeight: "100%" }}>
    <window.ScreenHeader title="О приложении" subtitle="Сейсмомониторинг" onBack={onBack} T={T} />

    <div style={{ padding: 16 }}>
      {/* Главное описание */}
      <div style={{
        background: T.surface, border: `1px solid ${T.border}`,
        borderRadius: 10, padding: 16, marginBottom: 16,
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 24,
          border: `2px solid ${T.accent}`, color: T.accent,
          display: "flex", alignItems: "center", justifyContent: "center",
          marginBottom: 12,
        }}>
          {window.Icon.pulse(28)}
        </div>
        <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 6,
          letterSpacing: -0.2 }}>
          Сейсмомониторинг
        </div>
        <div style={{ fontSize: 12, color: T.textDim, lineHeight: 1.5 }}>
          Telegram-бот, отслеживающий землетрясения по всему миру в режиме
          реального времени. Объединяет данные двух независимых источников
          (USGS и EMSC), отправляет алерты в личный чат и публичный канал
          при превышении настраиваемого порога магнитуды.
        </div>
        <div style={{ marginTop: 10, fontSize: 10.5,
          fontFamily: '"JetBrains Mono", monospace', color: T.textMuted,
          letterSpacing: 0.4 }}>
          Mini App v2.0 · {window.CONFIG.CHANNEL}
        </div>
      </div>

      {/* Как это работает */}
      <Section T={T} title="КАК ЭТО РАБОТАЕТ">
        <Item T={T} icon="🛰" title="Каждые 10 минут" desc="Опрос USGS FDSN и EMSC API, окно 60 минут с фильтром updatedafter — ловим даже опаздывающие публикации." />
        <window.Divider T={T} />
        <Item T={T} icon="🔍" title="Дедупликация" desc="События от разных источников с одинаковыми координатами и временем (±5 мин) объединяются — двойной отметки нет." />
        <window.Divider T={T} />
        <Item T={T} icon="📨" title="Алерт" desc="При M ≥ порога — мгновенное сообщение в чат и канал. Дайджест в 08:00 и 20:00 МСК — сводка за 12 часов." />
        <window.Divider T={T} />
        <Item T={T} icon="🌐" title="Этот Mini App" desc="Read-only вид всех событий из Supabase: Лента, Сводка, Карта, Статистика. Настройки изменяются через защищённый API." />
      </Section>

      {/* Источники */}
      <Section T={T} title="ИСТОЧНИКИ ДАННЫХ">
        <LinkItem T={T} title="USGS Earthquake Hazards" desc="U.S. Geological Survey · earthquake.usgs.gov"
          url="https://earthquake.usgs.gov/" />
        <window.Divider T={T} />
        <LinkItem T={T} title="EMSC" desc="European-Mediterranean Seismological Centre · seismicportal.eu"
          url="https://www.emsc-csem.org/" />
      </Section>

      {/* Полезные ссылки */}
      <Section T={T} title="ССЫЛКИ">
        <LinkItem T={T} title="Канал в Telegram" desc={window.CONFIG.CHANNEL}
          url={`https://t.me/${window.CONFIG.CHANNEL.replace("@", "")}`} />
      </Section>

      <div style={{ textAlign: "center", color: T.textMuted, fontSize: 10.5,
        fontFamily: '"JetBrains Mono", monospace', letterSpacing: 0.4, marginTop: 20 }}>
        Не является официальным источником сейсмических данных.<br />
        Для критических решений обращайтесь к USGS / EMSC напрямую.
      </div>
    </div>
  </div>
);

const Section = ({ T, title, children }) => (
  <div style={{ marginBottom: 16 }}>
    <div style={{ fontSize: 10, letterSpacing: 1.4, color: T.textMuted,
      fontFamily: '"JetBrains Mono", monospace', marginBottom: 8, paddingLeft: 4 }}>
      {title}
    </div>
    <div style={{ background: T.surface, border: `1px solid ${T.border}`,
      borderRadius: 10, overflow: "hidden" }}>{children}</div>
  </div>
);

const Item = ({ T, icon, title, desc }) => (
  <div style={{ padding: "12px 14px", display: "flex", gap: 12, alignItems: "flex-start" }}>
    <div style={{ fontSize: 16, lineHeight: 1, marginTop: 2 }}>{icon}</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13, fontWeight: 600 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: T.textDim, marginTop: 3, lineHeight: 1.4 }}>
        {desc}
      </div>
    </div>
  </div>
);

const LinkItem = ({ T, title, desc, url }) => (
  <a href={url} target="_blank" rel="noopener noreferrer" style={{
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "12px 14px", color: T.text, textDecoration: "none",
  }}>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{title}</div>
      <div style={{ fontSize: 10.5, color: T.textMuted, marginTop: 2,
        fontFamily: '"JetBrains Mono", monospace' }}>{desc}</div>
    </div>
    <div style={{ color: T.accent, fontSize: 14, marginLeft: 8 }}>↗</div>
  </a>
);