import React, { useState } from 'react';
import type { WallpaperType } from '../App';

interface Case2DesktopProps {
  onComplete: (type: WallpaperType) => void;
}

interface Site {
  id: number;
  name: string;
  domain: string;
  https: boolean;
  isLegit: boolean;
  adLabel?: boolean;
  description: string;
  version: string;
  fileName: string;
  fileSize: string;
  malwareType: string | null;
  malwareDesc: string | null;
}

const SITES: Site[] = [
  {
    id: 1,
    name: 'ТелеЛитр — скачать бесплатно быстро',
    domain: 'telelitr-download.net',
    https: false,
    isLegit: false,
    adLabel: true,
    description: 'Скачать ТелеЛитр бесплатно! Последняя версия 2024. Быстрая загрузка без регистрации.',
    version: 'v2.1.4',
    fileName: 'TeleLitrFREE_setup.exe',
    fileSize: '48 МБ',
    malwareType: 'Троян-шпион',
    malwareDesc: 'Файл содержит кейлоггер — программу, которая записывает все нажатия клавиш и передаёт злоумышленнику ваши пароли, переписку и данные карт.',
  },
  {
    id: 2,
    name: 'TeleLitr — официальный сайт',
    domain: 'telelitr.ru',
    https: true,
    isLegit: true,
    description: 'Официальный сайт мессенджера ТелеЛитр. Безопасные звонки и сообщения с end-to-end шифрованием.',
    version: 'v2.1.4',
    fileName: 'TeleLitr_Setup_2.1.4.exe',
    fileSize: '52 МБ',
    malwareType: null,
    malwareDesc: null,
  },
  {
    id: 3,
    name: 'Скачать ТелеЛитр — все версии',
    domain: 'tele-litr.ru',
    https: false,
    isLegit: false,
    adLabel: true,
    description: 'ТелеЛитр для Windows, Mac, Android. Все версии. Без вирусов (проверено)!',
    version: 'v2.1.3',
    fileName: 'telelitr_installer_x64.exe',
    fileSize: '61 МБ',
    malwareType: 'Майнер криптовалюты',
    malwareDesc: 'Вместе с мессенджером устанавливается скрытый майнер, который использует ресурсы вашего компьютера для добычи криптовалюты в пользу злоумышленника.',
  },
  {
    id: 4,
    name: 'TeleLitr Download — быстро и бесплатно',
    domain: 'telelitr-app.com',
    https: false,
    isLegit: false,
    description: 'Мессенджер ТелеЛитр. Скачать installer. Работает на Windows 7/8/10/11.',
    version: 'v2.0.9',
    fileName: 'TeleLitr_v209_win.exe',
    fileSize: '55 МБ',
    malwareType: 'Рекламное ПО (Adware)',
    malwareDesc: 'Инсталлятор содержит связку нежелательных программ: меняет стартовую страницу браузера, устанавливает тулбары и показывает навязчивую рекламу.',
  },
  {
    id: 5,
    name: 'TeleLitr — мессенджер с шифрованием',
    domain: 'telelitr-official.net',
    https: true,
    isLegit: false,
    adLabel: true,
    description: 'Защищённый мессенджер. Скачайте официальную версию с нашего сайта.',
    version: 'v2.1.4',
    fileName: 'TeleLitr_Setup.exe',
    fileSize: '50 МБ',
    malwareType: 'Фишинговый клиент',
    malwareDesc: 'Это поддельный клиент мессенджера. Внешне он идентичен настоящему, но при входе передаёт ваш логин и пароль на сервер злоумышленников.',
  },
  {
    id: 6,
    name: 'ТелеЛитр скачать — все платформы',
    domain: 'get-telelitr.xyz',
    https: false,
    isLegit: false,
    description: 'Скачать ТелеЛитр для Windows. Версия 2024. Установка за 1 минуту.',
    version: 'v2.1.1',
    fileName: 'get_telelitr.exe',
    fileSize: '43 МБ',
    malwareType: 'Программа-вымогатель',
    malwareDesc: 'После установки вирус шифрует файлы на вашем компьютере и требует выкуп за их восстановление. Домен .xyz — частый признак вредоносных сайтов.',
  },
  {
    id: 7,
    name: 'TeleLitr для Windows — скачать',
    domain: 'telelitr-win.ru',
    https: false,
    isLegit: false,
    description: 'Мессенджер ТелеЛитр. Версия для Windows. Бесплатно.',
    version: 'v2.1.4',
    fileName: 'telelitr_windows_setup.exe',
    fileSize: '58 МБ',
    malwareType: 'Бэкдор',
    malwareDesc: 'Программа открывает скрытый удалённый доступ к вашему компьютеру. Злоумышленник может управлять системой, красть файлы и устанавливать другое вредоносное ПО.',
  },
  {
    id: 8,
    name: 'ТелеЛитр — мессенджер 2024',
    domain: 'telelitrapp.ru',
    https: true,
    isLegit: false,
    description: 'Официальная загрузка. ТелеЛитр 2024 — новый интерфейс, улучшенное шифрование.',
    version: 'v3.0.0-beta',
    fileName: 'TeleLitr_2024_Pro.exe',
    fileSize: '67 МБ',
    malwareType: 'Поддельное ПО со шпионажем',
    malwareDesc: 'Версия "3.0.0-beta" не существует — это фейк. Программа имитирует мессенджер, но перехватывает все сообщения и звонки, отправляя их третьим лицам.',
  },
  {
    id: 9,
    name: 'Скачать TeleLitr — зеркало',
    domain: 'mirror-telelitr.com',
    https: false,
    isLegit: false,
    adLabel: true,
    description: 'Зеркало официального сайта. Быстрая загрузка без ограничений.',
    version: 'v2.1.4',
    fileName: 'TeleLitr_mirror.exe',
    fileSize: '52 МБ',
    malwareType: 'Троян с руткитом',
    malwareDesc: '"Зеркала" официальных сайтов — распространённый способ распространения вредоносного ПО. Файл содержит руткит, скрывающий своё присутствие в системе.',
  },
  {
    id: 10,
    name: 'TeleLitr — официальный сайт приложения',
    domain: 'telelitr.ru',
    https: true,
    isLegit: true,
    description: 'Скачайте ТелеЛитр с официального сайта. Цифровая подпись подтверждена. Безопасно.',
    version: 'v2.1.4',
    fileName: 'TeleLitr_Setup_2.1.4.exe',
    fileSize: '52 МБ',
    malwareType: null,
    malwareDesc: null,
  },
];

const Case2Desktop: React.FC<Case2DesktopProps> = ({ onComplete }) => {
  const [searched, setSearched] = useState(false);
  const [query, setQuery] = useState('скачать ТелеЛитр мессенджер');
  const [selectedSite, setSelectedSite] = useState<Site | null>(null);
  const [downloading, setDownloading] = useState(false);
  const [modal, setModal] = useState<'malware' | 'success' | null>(null);

  const currentUrl = selectedSite ? selectedSite.domain : 'ya.ru';
  const isSecure = !selectedSite || selectedSite.https;

  const openSite = (site: Site) => setSelectedSite(site);

  const handleDownload = () => {
    if (!selectedSite) return;
    setDownloading(true);
    setTimeout(() => {
      setDownloading(false);
      setModal(selectedSite.isLegit ? 'success' : 'malware');
    }, 1800);
  };

  const reset = () => {
    setModal(null);
    setSelectedSite(null);
  };

  return (
    <div style={s.root}>
      {/* Легенда */}
      <div style={s.story}>
        <p style={{ margin: 0 }}>
          Ваша компания переходит на новый корпоративный мессенджер <b style={{ color: '#00FFFF' }}>ТелеЛитр</b>.
          IT-отдел прислал инструкцию: скачайте и установите его самостоятельно.
          <br />
          <b style={{ color: '#f5a623' }}>Задача:</b> найти официальный сайт и скачать настоящий установщик.
        </p>
      </div>

      {/* Браузер */}
      <div style={s.browser}>
        <div style={s.chrome}>
          {selectedSite && <button style={s.navBtn} onClick={reset}>←</button>}
          <div style={s.urlBar}>
            <span style={isSecure ? s.httpsIcon : s.httpIcon}>{isSecure ? '🔒' : '⚠'}</span>
            <span style={{ ...s.urlText, color: isSecure ? '#aaa' : '#f5a623' }}>{currentUrl}</span>
            {!isSecure && <span style={s.httpWarn}>Небезопасно</span>}
          </div>
        </div>

        <div style={s.content}>

          {/* Яндекс главная */}
          {!searched && !selectedSite && (
            <div style={s.yandexHome}>
              <div style={s.yandexLogo}>
                <span style={s.yandexY}>Я</span>
                <span style={s.yandexNdex}>ндекс</span>
              </div>
              <div style={s.searchBox}>
                <input
                  style={s.searchInput}
                  value={query}
                  onChange={e => setQuery(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && setSearched(true)}
                  placeholder="Найти в интернете"
                />
                <button style={s.searchBtn} onClick={() => setSearched(true)}>Найти</button>
              </div>
            </div>
          )}

          {/* Результаты поиска */}
          {searched && !selectedSite && (
            <div style={s.searchResults}>
              <div style={s.searchHeader}>
                <div style={s.searchBoxSmall}>
                  <span style={s.yandexSmall}>Я</span>
                  <input
                    style={s.searchInputSmall}
                    value={query}
                    onChange={e => setQuery(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && setSearched(true)}
                  />
                  <button style={s.searchBtnSmall} onClick={() => setSearched(true)}>🔍</button>
                </div>
                <div style={s.resultCount}>Нашлось 10 результатов</div>
              </div>
              <div style={s.resultsList}>
                {SITES.map(site => (
                  <div key={site.id} style={s.resultItem} onClick={() => openSite(site)}>
                    {site.adLabel && <span style={s.adBadge}>Реклама</span>}
                    <div style={s.resultName}>{site.name}</div>
                    <div style={{ ...s.resultDomain, color: site.https ? '#4a9e6e' : '#f5a623' }}>
                      {site.https ? '🔒' : '⚠'} {site.domain}
                    </div>
                    <div style={s.resultDesc}>{site.description}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Страница сайта */}
          {selectedSite && (
            <div style={s.sitePage}>
              <div style={s.siteHeader}>
                <span style={{ fontSize: 32 }}>📱</span>
                <div>
                  <div style={s.siteTitle}>ТелеЛитр</div>
                  <div style={s.siteDomain}>{selectedSite.domain}</div>
                </div>
                {!selectedSite.https && (
                  <span style={s.unsafeBadge}>⚠ HTTP — небезопасный сайт</span>
                )}
              </div>

              <div style={s.downloadCard}>
                <div style={s.appInfo}>
                  <span style={{ fontSize: 56 }}>📱</span>
                  <div style={{ flex: 1 }}>
                    <div style={s.appName}>TeleLitr Messenger</div>
                    <div style={s.appVersion}>Версия {selectedSite.version}</div>
                    <div style={{ fontSize: 13, marginBottom: 4 }}>
                      <span style={{ color: '#666' }}>Файл: </span>
                      <span style={{ color: selectedSite.isLegit ? '#00FF41' : '#f5a623' }}>
                        {selectedSite.fileName}
                      </span>
                    </div>
                    <div style={{ color: '#555', fontSize: 12 }}>Размер: {selectedSite.fileSize}</div>
                  </div>
                </div>

                {!selectedSite.isLegit && (
                  <div style={s.warnHints}>
                    <div style={s.warnTitle}>⚠ Признаки подозрительного сайта:</div>
                    <ul style={s.hintList}>
                      {!selectedSite.https && <li>Сайт работает по HTTP — данные не шифруются</li>}
                      {(selectedSite.domain.includes('.xyz') || selectedSite.domain.includes('.net') || selectedSite.domain.includes('.com') || selectedSite.domain.includes('mirror') || selectedSite.domain.includes('download')) && (
                        <li>Домен не совпадает с официальным <b>telelitr.ru</b></li>
                      )}
                      {selectedSite.domain !== 'telelitr.ru' && (
                        <li>Имя файла отличается от официального: <b>TeleLitr_Setup_2.1.4.exe</b></li>
                      )}
                      {selectedSite.adLabel && <li>Рекламная ссылка в поиске — не гарантирует официальность</li>}
                    </ul>
                  </div>
                )}
                {selectedSite.isLegit && (
                  <div style={s.safeHints}>
                    <div style={s.safeTitle}>✅ Признаки официального сайта:</div>
                    <ul style={s.hintList}>
                      <li>HTTPS — соединение зашифровано</li>
                      <li>Домен <b>telelitr.ru</b> — совпадает с официальным</li>
                      <li>Имя файла содержит точную версию: TeleLitr_Setup_<b>2.1.4</b>.exe</li>
                      <li>Цифровая подпись файла подтверждена</li>
                    </ul>
                  </div>
                )}

                <button
                  style={downloading ? s.dlBtnLoading : selectedSite.isLegit ? s.dlBtnSafe : s.dlBtnDanger}
                  onClick={handleDownload}
                  disabled={downloading}
                >
                  {downloading ? '⟳ Загрузка...' : `↓ Скачать ${selectedSite.fileName}`}
                </button>

                {downloading && (
                  <div style={s.progressBar}>
                    <div style={s.progressFill} />
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Модал: вредонос */}
      {modal === 'malware' && selectedSite && (
        <div style={s.modalOverlay}>
          <div style={s.modalDanger}>
            <div style={s.modalIcon}>☠️</div>
            <div style={s.modalTitle}>Вредоносное ПО обнаружено!</div>
            <div style={s.modalText}>
              Файл <b style={{ color: '#FF0040' }}>{selectedSite.fileName}</b> с сайта{' '}
              <b style={{ color: '#FF0040' }}>{selectedSite.domain}</b> является вредоносным.
            </div>
            <div style={s.malwareBlock}>
              <div style={{ color: '#aaa', fontSize: 13, marginBottom: 6 }}>
                Тип угрозы: <b style={{ color: '#FF0040' }}>{selectedSite.malwareType}</b>
              </div>
              <div style={{ color: '#aaa', fontSize: 13, lineHeight: 1.6 }}>{selectedSite.malwareDesc}</div>
            </div>
            <div style={s.rulesBlock}>
              <div style={s.rulesTitle}>Как найти официальный сайт:</div>
              <ul style={s.rulesList}>
                <li>Проверяйте домен — он должен совпадать с официальным</li>
                <li>HTTPS важен, но сам по себе не гарантирует безопасность</li>
                <li>Имя файла должно содержать точную версию программы</li>
                <li>Берите ссылку с сайта разработчика или из документации к ПО</li>
                <li>Проверяйте цифровую подпись скачанного .exe файла</li>
              </ul>
            </div>
            <button style={s.retryBtn} onClick={reset}>← Вернуться к поиску</button>
          </div>
        </div>
      )}

      {/* Модал: успех */}
      {modal === 'success' && selectedSite && (
        <div style={s.modalOverlay}>
          <div style={s.modalSuccess}>
            <div style={s.modalIcon}>✅</div>
            <div style={{ ...s.modalTitle, color: '#00FF41' }}>Официальный установщик загружен!</div>
            <div style={s.modalText}>
              Вы скачали <b style={{ color: '#00FF41' }}>{selectedSite.fileName}</b> с официального сайта{' '}
              <b style={{ color: '#00FF41' }}>{selectedSite.domain}</b>.
            </div>
            <div style={s.successDetails}>
              <div style={s.successRow}><span>Файл:</span><span style={{ color: '#00FF41' }}>{selectedSite.fileName}</span></div>
              <div style={s.successRow}><span>Версия:</span><span style={{ color: '#00FF41' }}>{selectedSite.version}</span></div>
              <div style={s.successRow}><span>Подпись:</span><span style={{ color: '#00FF41' }}>✓ Подтверждена</span></div>
              <div style={s.successRow}><span>Угрозы:</span><span style={{ color: '#00FF41' }}>Не обнаружены</span></div>
            </div>
            <button style={s.completeBtn} onClick={() => { setModal(null); onComplete('win10'); }}>
              ✓ Завершить кейс
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

const s: Record<string, React.CSSProperties> = {
  root: {
    minHeight: '100vh',
    background: 'linear-gradient(135deg, #0a0a14 0%, #0d1117 60%, #001400 100%)',
    color: '#ccc',
    fontFamily: "'Share Tech Mono', monospace",
    padding: '0 0 40px',
  },
  story: {
    maxWidth: 760, margin: '24px auto 0', padding: '14px 24px',
    background: 'rgba(0,255,255,0.04)', border: '1px solid rgba(0,255,255,0.15)',
    borderRadius: 8, fontSize: 14, lineHeight: 1.7, color: '#aaa', textAlign: 'center',
  },
  browser: {
    maxWidth: 860, margin: '24px auto 0',
    border: '1px solid rgba(0,255,255,0.2)', borderRadius: 10, overflow: 'hidden',
    boxShadow: '0 0 30px rgba(0,255,255,0.06)',
  },
  chrome: {
    background: '#080818', borderBottom: '1px solid rgba(0,255,255,0.15)',
    padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 8,
  },
  navBtn: {
    background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
    color: '#888', borderRadius: 4, padding: '4px 10px', cursor: 'pointer',
    fontSize: 14, fontFamily: "'Share Tech Mono', monospace",
  },
  urlBar: {
    flex: 1, background: '#0a0a1a', border: '1px solid rgba(0,255,255,0.2)',
    borderRadius: 4, padding: '5px 12px', fontSize: 13,
    display: 'flex', alignItems: 'center', gap: 8,
  },
  httpsIcon: { color: '#00FF41', fontSize: 13 },
  httpIcon: { color: '#f5a623', fontSize: 13 },
  urlText: { flex: 1 },
  httpWarn: { color: '#f5a623', fontSize: 11 },
  content: { background: '#0d0d0d', minHeight: 480 },
  yandexHome: {
    display: 'flex', flexDirection: 'column', alignItems: 'center',
    justifyContent: 'center', paddingTop: 80, paddingBottom: 60, gap: 28,
  },
  yandexLogo: { fontSize: 52, fontWeight: 700, lineHeight: 1 },
  yandexY: { color: '#FF0040', fontFamily: 'Georgia, serif' },
  yandexNdex: { color: '#eee', fontFamily: 'Georgia, serif' },
  searchBox: { display: 'flex', width: '100%', maxWidth: 560 },
  searchInput: {
    flex: 1, padding: '12px 16px', background: '#1a1a2e',
    border: '1px solid rgba(0,255,255,0.25)', borderRight: 'none',
    borderRadius: '6px 0 0 6px', color: '#eee', fontSize: 15,
    fontFamily: "'Share Tech Mono', monospace", outline: 'none',
  },
  searchBtn: {
    padding: '12px 24px', background: '#FF0040', border: 'none',
    borderRadius: '0 6px 6px 0', color: '#fff',
    fontFamily: "'Orbitron', monospace", fontSize: 13, fontWeight: 700, cursor: 'pointer',
  },
  searchResults: { padding: '0 0 24px' },
  searchHeader: {
    background: '#080818', borderBottom: '1px solid rgba(0,255,255,0.1)',
    padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' as const,
  },
  searchBoxSmall: {
    display: 'flex', alignItems: 'center', flex: 1, maxWidth: 400,
    background: '#0d0d22', border: '1px solid rgba(0,255,255,0.2)',
    borderRadius: 6, overflow: 'hidden',
  },
  yandexSmall: { color: '#FF0040', fontFamily: 'Georgia, serif', fontSize: 18, fontWeight: 700, padding: '0 8px' },
  searchInputSmall: {
    flex: 1, background: 'transparent', border: 'none', color: '#eee',
    fontSize: 13, fontFamily: "'Share Tech Mono', monospace", padding: '8px 4px', outline: 'none',
  },
  searchBtnSmall: { background: 'transparent', border: 'none', color: '#888', cursor: 'pointer', padding: '8px 12px', fontSize: 14 },
  resultCount: { color: '#555', fontSize: 12 },
  resultsList: { padding: '8px 20px', display: 'flex', flexDirection: 'column', gap: 2 },
  resultItem: { padding: '14px 16px', borderRadius: 6, cursor: 'pointer', borderBottom: '1px solid rgba(255,255,255,0.04)' },
  adBadge: {
    display: 'inline-block', background: 'rgba(245,166,35,0.15)',
    border: '1px solid rgba(245,166,35,0.4)', color: '#f5a623',
    fontSize: 10, padding: '1px 6px', borderRadius: 3, marginBottom: 4,
    fontFamily: "'Share Tech Mono', monospace",
  },
  resultName: { color: '#5b9bd5', fontSize: 15, marginBottom: 2 },
  resultDomain: { fontSize: 12, marginBottom: 4 },
  resultDesc: { color: '#777', fontSize: 13, lineHeight: 1.5 },
  sitePage: { padding: 24 },
  siteHeader: {
    display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20,
    paddingBottom: 12, borderBottom: '1px solid rgba(255,255,255,0.06)',
  },
  siteTitle: { color: '#00FFFF', fontFamily: "'Orbitron', monospace", fontSize: 16, fontWeight: 700 },
  siteDomain: { color: '#555', fontSize: 12, marginTop: 2 },
  unsafeBadge: {
    marginLeft: 'auto', background: 'rgba(245,166,35,0.12)',
    border: '1px solid #f5a623', color: '#f5a623', fontSize: 11, padding: '4px 12px', borderRadius: 4,
  },
  downloadCard: {
    background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
    borderRadius: 10, padding: 20,
  },
  appInfo: { display: 'flex', gap: 20, alignItems: 'flex-start', marginBottom: 20 },
  appName: { color: '#ddd', fontSize: 18, fontWeight: 700, marginBottom: 4 },
  appVersion: { color: '#888', fontSize: 13, marginBottom: 6 },
  warnHints: {
    background: 'rgba(245,166,35,0.06)', border: '1px solid rgba(245,166,35,0.3)',
    borderRadius: 8, padding: '12px 16px', marginBottom: 16,
  },
  warnTitle: { color: '#f5a623', fontFamily: "'Orbitron', monospace", fontSize: 12, fontWeight: 700, marginBottom: 8 },
  safeHints: {
    background: 'rgba(0,255,65,0.05)', border: '1px solid rgba(0,255,65,0.25)',
    borderRadius: 8, padding: '12px 16px', marginBottom: 16,
  },
  safeTitle: { color: '#00FF41', fontFamily: "'Orbitron', monospace", fontSize: 12, fontWeight: 700, marginBottom: 8 },
  hintList: { margin: 0, paddingLeft: 20, color: '#aaa', fontSize: 13, lineHeight: 1.8 },
  dlBtnSafe: {
    width: '100%', padding: '13px', background: 'rgba(0,255,65,0.1)',
    border: '1px solid #00FF41', color: '#00FF41', borderRadius: 7, cursor: 'pointer',
    fontFamily: "'Orbitron', monospace", fontSize: 13, fontWeight: 700,
  },
  dlBtnDanger: {
    width: '100%', padding: '13px', background: 'rgba(245,166,35,0.08)',
    border: '1px solid #f5a623', color: '#f5a623', borderRadius: 7, cursor: 'pointer',
    fontFamily: "'Orbitron', monospace", fontSize: 13, fontWeight: 700,
  },
  dlBtnLoading: {
    width: '100%', padding: '13px', background: 'rgba(0,255,255,0.06)',
    border: '1px solid rgba(0,255,255,0.3)', color: '#00FFFF', borderRadius: 7, cursor: 'not-allowed',
    fontFamily: "'Orbitron', monospace", fontSize: 13, fontWeight: 700,
  },
  progressBar: { marginTop: 10, height: 3, background: 'rgba(0,255,255,0.1)', borderRadius: 2, overflow: 'hidden' },
  progressFill: {
    height: '100%', background: '#00FFFF', borderRadius: 2, width: '100%',
    animation: 'none', transition: 'none',
    boxShadow: '0 0 8px rgba(0,255,255,0.5)',
  },
  modalOverlay: {
    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.82)',
    display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
    zIndex: 200, overflowY: 'auto', padding: '40px 16px',
  },
  modalDanger: {
    background: '#0d0d22', border: '1px solid #FF0040', borderRadius: 12,
    padding: '28px 28px 24px', maxWidth: 520, width: '100%',
    boxShadow: '0 0 40px rgba(255,0,64,0.25)', textAlign: 'center',
  },
  modalSuccess: {
    background: '#0d0d22', border: '1px solid #00FF41', borderRadius: 12,
    padding: '28px 28px 24px', maxWidth: 480, width: '100%',
    boxShadow: '0 0 40px rgba(0,255,65,0.2)', textAlign: 'center',
  },
  modalIcon: { fontSize: 48, marginBottom: 12 },
  modalTitle: { color: '#FF0040', fontFamily: "'Orbitron', monospace", fontSize: 16, fontWeight: 700, marginBottom: 12 },
  modalText: { color: '#aaa', fontSize: 13, lineHeight: 1.7, marginBottom: 16 },
  malwareBlock: {
    background: 'rgba(255,0,64,0.07)', border: '1px solid rgba(255,0,64,0.3)',
    borderRadius: 8, padding: '12px 16px', marginBottom: 14, textAlign: 'left',
  },
  rulesBlock: {
    background: 'rgba(0,255,65,0.04)', border: '1px solid rgba(0,255,65,0.2)',
    borderRadius: 8, padding: '12px 16px', marginBottom: 20, textAlign: 'left',
  },
  rulesTitle: { color: '#00FF41', fontFamily: "'Orbitron', monospace", fontSize: 12, fontWeight: 700, marginBottom: 8 },
  rulesList: { margin: 0, paddingLeft: 20, color: '#aaa', fontSize: 13, lineHeight: 1.8 },
  retryBtn: {
    padding: '10px 20px', background: 'transparent',
    border: '1px solid rgba(0,255,255,0.3)', borderRadius: 6,
    color: '#888', cursor: 'pointer', fontFamily: "'Share Tech Mono', monospace", fontSize: 13,
  },
  successDetails: {
    background: 'rgba(0,255,65,0.05)', border: '1px solid rgba(0,255,65,0.2)',
    borderRadius: 8, padding: '12px 16px', marginBottom: 20, textAlign: 'left',
  },
  successRow: { display: 'flex', justifyContent: 'space-between', padding: '4px 0', fontSize: 13, color: '#aaa' },
  completeBtn: {
    padding: '12px 36px', background: '#00FF41', border: 'none',
    borderRadius: 6, color: '#000', fontFamily: "'Orbitron', monospace",
    fontSize: 14, fontWeight: 700, cursor: 'pointer',
  },
};

export default Case2Desktop;
