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

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

interface Site {
  id: number;
  name: string;
  domain: string;
  https: boolean;
  isLegit: boolean;
  description: string;
  price: number;
  productName: string;
  paymentProcessor: string | null; // null = прямая форма (скиммер)
  skimmerHint: string | null;
  adLabel?: boolean;
}

const SITES: Site[] = [
  {
    id: 1,
    name: 'KleyMaster — магазин клея',
    domain: 'kley-master.ru',
    https: true,
    isLegit: true,
    description: 'Широкий ассортимент клея: ПВА, момент, эпоксидный. Доставка по России.',
    price: 149,
    productName: 'Клей ПВА "Универсал" 250мл',
    paymentProcessor: 'Тинькофф',
    skimmerHint: null,
  },
  {
    id: 2,
    name: 'Kley-Online — купить клей дёшево',
    domain: 'kley-online.shop',
    https: false,
    isLegit: false,
    adLabel: true,
    description: 'Клей ПВА, суперклей, момент. Скидки до 70%! Доставка 1 день.',
    price: 99,
    productName: 'Клей ПВА 250мл',
    paymentProcessor: null,
    skimmerHint: 'HTTP-соединение: данные карты передаются в открытом виде',
  },
  {
    id: 3,
    name: 'SuperKley Discount — акции и скидки',
    domain: 'superkley-discount.ru',
    https: false,
    isLegit: false,
    adLabel: true,
    description: 'Суперклей, ПВА, эпоксидный. Оптовые цены. Акция: -50% на всё!',
    price: 75,
    productName: 'ПВА клей универсальный',
    paymentProcessor: null,
    skimmerHint: 'Домен зарегистрирован 3 дня назад, нет контактов и юридических данных',
  },
  {
    id: 4,
    name: 'HobbyTrade — товары для творчества',
    domain: 'hobbytrade-shop.ru',
    https: true,
    isLegit: true,
    description: 'Материалы для рукоделия, клей, краски. Более 15 лет на рынке.',
    price: 162,
    productName: 'Клей ПВА "Универсал" 250мл',
    paymentProcessor: 'СберПей',
    skimmerHint: null,
  },
  {
    id: 5,
    name: 'KleyCheap — дешевле не бывает',
    domain: 'kleycheap.xyz',
    https: false,
    isLegit: false,
    adLabel: true,
    description: 'Клей по ценам производителя. Без наценки! Только сегодня -60%.',
    price: 59,
    productName: 'Клей ПВА 250мл АКЦИЯ',
    paymentProcessor: null,
    skimmerHint: 'Домен в зоне .xyz — часто используется мошенниками',
  },
  {
    id: 6,
    name: 'Kley-Market Online — каталог клея',
    domain: 'kley-market-online.ru',
    https: true,
    isLegit: false,
    description: 'Большой каталог клея. Быстрая доставка. Безопасная оплата.',
    price: 139,
    productName: 'Клей ПВА 250мл',
    paymentProcessor: null,
    skimmerHint: 'Форма оплаты не перенаправляет на банк — данные карты попадают прямо на сайт',
  },
  {
    id: 7,
    name: 'BestKley — выгодные покупки',
    domain: 'best-kley.site',
    https: false,
    isLegit: false,
    adLabel: true,
    description: 'Лучший клей по лучшим ценам. Гарантия качества. Отзывы покупателей.',
    price: 89,
    productName: 'Клей ПВА BEST 250мл',
    paymentProcessor: null,
    skimmerHint: 'Домен .site и отсутствие HTTPS — типичные признаки фишингового магазина',
  },
  {
    id: 8,
    name: 'Kley-Opt — оптовые цены',
    domain: 'kley-opt24.ru',
    https: true,
    isLegit: false,
    description: 'Клей оптом и в розницу. Цены от производителя. Доставка 2-3 дня.',
    price: 119,
    productName: 'Клей ПВА универсальный',
    paymentProcessor: null,
    skimmerHint: 'Скопированный дизайн чужого магазина, платёжная форма ведёт на сторонний сервер',
  },
  {
    id: 9,
    name: 'MegaKley24 — акционные предложения',
    domain: 'megakley24.ru',
    https: true,
    isLegit: false,
    adLabel: true,
    description: 'Клей ПВА, момент, суперклей. 24/7. Карты Visa/MasterCard. Быстро.',
    price: 109,
    productName: 'Клей ПВА 250мл выгодно',
    paymentProcessor: null,
    skimmerHint: 'Страница оплаты загружает сторонний скрипт, перехватывающий данные карты',
  },
  {
    id: 10,
    name: 'Kley-Sale — распродажа клея',
    domain: 'kley-sale.shop',
    https: false,
    isLegit: false,
    description: 'Распродажа! Клей ПВА, эпоксидный, момент. Только сегодня!',
    price: 49,
    productName: 'Клей ПВА SALE',
    paymentProcessor: null,
    skimmerHint: 'Сайт создан вчера, нет ИНН/ОГРН, телефон не существует',
  },
];

type PageType = 'search' | 'product' | 'payment' | null;

const Case5Desktop: React.FC<Case5DesktopProps> = ({ onComplete }) => {
  const [searchQuery, setSearchQuery] = useState('купить клей пва 250мл');
  const [searched, setSearched] = useState(false);
  const [selectedSite, setSelectedSite] = useState<Site | null>(null);
  const [page, setPage] = useState<PageType>(null);
  const [cardNum, setCardNum] = useState('');
  const [cardExp, setCardExp] = useState('');
  const [cardCvv, setCardCvv] = useState('');
  const [modal, setModal] = useState<'skimmer' | 'success' | null>(null);

  const currentUrl = (() => {
    if (!selectedSite) return 'ya.ru';
    if (page === 'product') return `${selectedSite.domain}/catalog/kley-pva`;
    if (page === 'payment') return `${selectedSite.domain}/checkout/payment`;
    return 'ya.ru';
  })();

  const isSecure = (() => {
    if (!selectedSite) return true;
    return selectedSite.https;
  })();

  const goSearch = () => setSearched(true);
  const openSite = (site: Site) => { setSelectedSite(site); setPage('product'); };
  const goToPayment = () => setPage('payment');

  const handlePay = () => {
    if (!selectedSite) return;
    if (selectedSite.isLegit) {
      setModal('success');
    } else {
      setModal('skimmer');
    }
  };

  const resetToSearch = () => {
    setModal(null);
    setSelectedSite(null);
    setPage(null);
    setCardNum('');
    setCardExp('');
    setCardCvv('');
  };

  return (
    <div style={s.root}>
      {/* Легенда */}
      <div style={s.story}>
        <p>
          Вам нужно купить клей ПВА для ремонта. Вы открываете Яндекс и ищете товар в интернете.
          <br />
          <b style={{ color: '#f5a623' }}>Задача:</b> найти надёжный магазин и безопасно оплатить покупку.
        </p>
      </div>

      {/* Браузер */}
      <div style={s.browser}>
        {/* Хром браузера */}
        <div style={s.chrome}>
          {selectedSite && (
            <button style={s.navBtn} onClick={resetToSearch}>←</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.httpWarnText}>Небезопасно</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={searchQuery}
                  onChange={e => setSearchQuery(e.target.value)}
                  onKeyDown={e => e.key === 'Enter' && goSearch()}
                  placeholder="Найти в интернете"
                />
                <button style={s.searchBtn} onClick={goSearch}>Найти</button>
              </div>
            </div>
          )}

          {/* === РЕЗУЛЬТАТЫ ПОИСКА === */}
          {searched && !selectedSite && (
            <div style={s.searchResults}>
              <div style={s.searchResultsHeader}>
                <div style={s.searchBoxSmall}>
                  <span style={s.yandexSmall}>Я</span>
                  <input
                    style={s.searchInputSmall}
                    value={searchQuery}
                    onChange={e => setSearchQuery(e.target.value)}
                    onKeyDown={e => e.key === 'Enter' && goSearch()}
                  />
                  <button style={s.searchBtnSmall} onClick={goSearch}>🔍</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 style={s.resultPrice}>от {site.price} ₽</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* === СТРАНИЦА ТОВАРА === */}
          {selectedSite && page === 'product' && (
            <div style={s.productPage}>
              <div style={s.shopHeader}>
                <span style={s.shopName}>{selectedSite.name}</span>
                {!selectedSite.https && (
                  <span style={s.unsafeBadge}>⚠ HTTP — небезопасный сайт</span>
                )}
              </div>

              <div style={s.productCard}>
                <div style={s.productImage}>
                  <span style={{ fontSize: 64 }}>🧴</span>
                </div>
                <div style={s.productInfo}>
                  <div style={s.productTitle}>{selectedSite.productName}</div>
                  <div style={s.productPriceTag}>{selectedSite.price} ₽</div>
                  <div style={s.productDesc}>
                    Объём: 250 мл · В наличии · Доставка 2–5 дней
                  </div>
                  <button style={s.buyBtn} onClick={goToPayment}>
                    🛒 Купить
                  </button>
                </div>
              </div>

              {/* Подозрительные признаки */}
              {!selectedSite.isLegit && (
                <div style={s.suspiciousHints}>
                  <div style={s.hintTitle}>💡 Обратите внимание на признаки сайта:</div>
                  <ul style={s.hintList}>
                    {!selectedSite.https && <li>⚠ Сайт не использует HTTPS</li>}
                    {selectedSite.domain.includes('.xyz') && <li>⚠ Нестандартный домен (.xyz)</li>}
                    {selectedSite.domain.includes('.shop') && <li>⚠ Нестандартный домен (.shop)</li>}
                    {selectedSite.domain.includes('.site') && <li>⚠ Нестандартный домен (.site)</li>}
                    {selectedSite.adLabel && <li>ℹ Рекламная ссылка в поиске</li>}
                    <li>ℹ Нет раздела «О компании», нет ИНН / ОГРН</li>
                  </ul>
                </div>
              )}
              {selectedSite.isLegit && (
                <div style={s.legitHints}>
                  <div style={s.hintTitleGood}>✅ Признаки надёжного магазина:</div>
                  <ul style={s.hintList}>
                    <li>✅ HTTPS — соединение зашифровано</li>
                    <li>✅ Известный домен .ru</li>
                    <li>✅ Есть раздел «О нас» с ИНН и ОГРН</li>
                    <li>✅ Оплата через проверенную платёжную систему</li>
                  </ul>
                </div>
              )}
            </div>
          )}

          {/* === СТРАНИЦА ОПЛАТЫ === */}
          {selectedSite && page === 'payment' && (
            <div style={s.paymentPage}>
              <div style={s.paymentTitle}>Оформление заказа</div>

              {/* Сводка заказа */}
              <div style={s.orderSummary}>
                <div style={s.orderRow}>
                  <span style={s.orderLabel}>Товар:</span>
                  <span style={s.orderValue}>{selectedSite.productName}</span>
                </div>
                <div style={s.orderRow}>
                  <span style={s.orderLabel}>Сумма:</span>
                  <span style={{ ...s.orderValue, color: '#00FF41', fontWeight: 700 }}>
                    {selectedSite.price} ₽
                  </span>
                </div>
              </div>

              {/* Форма оплаты — легитимная */}
              {selectedSite.isLegit ? (
                <div style={s.legitPayment}>
                  <div style={s.processorBadge}>
                    <span style={s.processorIcon}>🏦</span>
                    <span style={s.processorName}>Оплата через {selectedSite.paymentProcessor}</span>
                    <span style={s.processorSecure}>🔒 Защищено</span>
                  </div>
                  <p style={s.processorNote}>
                    Вы будете перенаправлены на защищённую страницу банка.
                    Магазин не получает данные вашей карты.
                  </p>
                  <div style={s.cardForm}>
                    <label style={s.cardLabel}>Номер карты</label>
                    <input
                      style={s.cardInput}
                      placeholder="0000 0000 0000 0000"
                      value={cardNum}
                      onChange={e => setCardNum(e.target.value)}
                      maxLength={19}
                    />
                    <div style={{ display: 'flex', gap: 12 }}>
                      <div style={{ flex: 1 }}>
                        <label style={s.cardLabel}>Срок действия</label>
                        <input
                          style={s.cardInput}
                          placeholder="MM/YY"
                          value={cardExp}
                          onChange={e => setCardExp(e.target.value)}
                          maxLength={5}
                        />
                      </div>
                      <div style={{ flex: 1 }}>
                        <label style={s.cardLabel}>CVV</label>
                        <input
                          style={s.cardInput}
                          placeholder="•••"
                          value={cardCvv}
                          onChange={e => setCardCvv(e.target.value)}
                          maxLength={3}
                          type="password"
                        />
                      </div>
                    </div>
                  </div>
                  <button style={s.payBtn} onClick={handlePay}>
                    Оплатить {selectedSite.price} ₽
                  </button>
                </div>
              ) : (
                /* Форма оплаты — скиммер */
                <div style={s.fakePayment}>
                  <div style={s.fakeSecureBadge}>
                    <span>🔒</span>
                    <span>Безопасная оплата картой</span>
                    <span style={s.visaBadge}>VISA</span>
                    <span style={s.mcBadge}>MC</span>
                  </div>
                  <div style={s.cardForm}>
                    <label style={s.cardLabel}>Номер карты</label>
                    <input
                      style={s.cardInput}
                      placeholder="0000 0000 0000 0000"
                      value={cardNum}
                      onChange={e => setCardNum(e.target.value)}
                      maxLength={19}
                    />
                    <div style={{ display: 'flex', gap: 12 }}>
                      <div style={{ flex: 1 }}>
                        <label style={s.cardLabel}>Срок действия</label>
                        <input
                          style={s.cardInput}
                          placeholder="MM/YY"
                          value={cardExp}
                          onChange={e => setCardExp(e.target.value)}
                          maxLength={5}
                        />
                      </div>
                      <div style={{ flex: 1 }}>
                        <label style={s.cardLabel}>CVV</label>
                        <input
                          style={s.cardInput}
                          placeholder="•••"
                          value={cardCvv}
                          onChange={e => setCardCvv(e.target.value)}
                          maxLength={3}
                          type="password"
                        />
                      </div>
                    </div>
                  </div>
                  <button style={s.payBtnFake} onClick={handlePay}>
                    Оплатить {selectedSite.price} ₽
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* === МОДАЛ: СКИММЕР === */}
      {modal === 'skimmer' && 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.domain}</b>,
              который использует <b>веб-скиммер</b> — вредоносный скрипт, перехватывающий
              платёжные данные прямо на странице оплаты.
            </div>

            <div style={s.skimmerExplain}>
              <div style={s.skimmerExplainTitle}>Что такое скимминг?</div>
              <div style={s.skimmerExplainText}>
                Скиммер — код, встроенный в страницу оплаты. Пока вы вводите номер карты,
                он тайно копирует данные и отправляет злоумышленнику. Внешне страница
                выглядит как обычная форма оплаты.
              </div>
            </div>

            <div style={s.skimmerReason}>
              <div style={s.skimmerReasonTitle}>Почему этот сайт подозрителен:</div>
              <div style={s.skimmerReasonText}>{selectedSite.skimmerHint}</div>
            </div>

            <div style={s.safeRules}>
              <div style={s.safeRulesTitle}>Как защититься:</div>
              <ul style={s.safeRulesList}>
                <li>Платите только на известных площадках (Ozon, Wildberries, DNS и т.п.)</li>
                <li>Ищите перенаправление на страницу банка (СберПей, Тинькофф и др.)</li>
                <li>Проверяйте HTTPS и домен перед вводом карты</li>
                <li>Используйте виртуальную карту с лимитом для онлайн-покупок</li>
              </ul>
            </div>

            <button style={s.retryBtn} onClick={resetToSearch}>
              ← Вернуться к поиску и выбрать другой магазин
            </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.paymentProcessor}</b>.
              Магазин <b>{selectedSite.domain}</b> не получил данные вашей карты —
              они были переданы напрямую банку по зашифрованному соединению.
            </div>
            <div style={s.successDetails}>
              <div style={s.successRow}>
                <span>Товар:</span>
                <span>{selectedSite.productName}</span>
              </div>
              <div style={s.successRow}>
                <span>Сумма:</span>
                <span style={{ color: '#00FF41' }}>{selectedSite.price} ₽</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%, #0a1400 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 },
  httpWarnText: { color: '#f5a623', fontSize: 11, marginLeft: 4 },
  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,
    gap: 0,
  },
  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',
  },
  searchResultsHeader: {
    background: '#080818',
    borderBottom: '1px solid rgba(0,255,255,0.1)',
    padding: '10px 16px',
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    flexWrap: 'wrap',
  },
  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',
    transition: 'background 0.15s',
    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,
  },
  resultPrice: {
    color: '#00FF41',
    fontSize: 13,
    marginTop: 4,
    fontFamily: "'Orbitron', monospace",
  },

  /* Страница товара */
  productPage: {
    padding: 24,
  },
  shopHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    marginBottom: 20,
    paddingBottom: 12,
    borderBottom: '1px solid rgba(255,255,255,0.06)',
  },
  shopName: {
    color: '#00FFFF',
    fontFamily: "'Orbitron', monospace",
    fontSize: 14,
    fontWeight: 700,
  },
  unsafeBadge: {
    background: 'rgba(245,166,35,0.15)',
    border: '1px solid #f5a623',
    color: '#f5a623',
    fontSize: 11,
    padding: '3px 10px',
    borderRadius: 4,
  },
  productCard: {
    display: 'flex',
    gap: 24,
    background: 'rgba(255,255,255,0.03)',
    border: '1px solid rgba(255,255,255,0.08)',
    borderRadius: 8,
    padding: 20,
    marginBottom: 20,
  },
  productImage: {
    width: 100,
    height: 100,
    background: 'rgba(255,255,255,0.05)',
    borderRadius: 8,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
  },
  productInfo: {
    flex: 1,
  },
  productTitle: {
    color: '#ddd',
    fontSize: 16,
    marginBottom: 8,
    lineHeight: 1.4,
  },
  productPriceTag: {
    color: '#00FF41',
    fontFamily: "'Orbitron', monospace",
    fontSize: 22,
    fontWeight: 700,
    marginBottom: 8,
  },
  productDesc: {
    color: '#666',
    fontSize: 12,
    marginBottom: 16,
  },
  buyBtn: {
    padding: '10px 28px',
    background: '#00FFFF',
    border: 'none',
    borderRadius: 6,
    color: '#000',
    fontFamily: "'Orbitron', monospace",
    fontSize: 13,
    fontWeight: 700,
    cursor: 'pointer',
  },
  suspiciousHints: {
    background: 'rgba(245,166,35,0.06)',
    border: '1px solid rgba(245,166,35,0.3)',
    borderRadius: 8,
    padding: '14px 18px',
    marginTop: 16,
  },
  hintTitle: {
    color: '#f5a623',
    fontSize: 13,
    marginBottom: 8,
    fontFamily: "'Orbitron', monospace",
    fontWeight: 700,
  },
  legitHints: {
    background: 'rgba(0,255,65,0.05)',
    border: '1px solid rgba(0,255,65,0.25)',
    borderRadius: 8,
    padding: '14px 18px',
    marginTop: 16,
  },
  hintTitleGood: {
    color: '#00FF41',
    fontSize: 13,
    marginBottom: 8,
    fontFamily: "'Orbitron', monospace",
    fontWeight: 700,
  },
  hintList: {
    margin: 0,
    paddingLeft: 20,
    color: '#aaa',
    fontSize: 13,
    lineHeight: 1.8,
  },

  /* Страница оплаты */
  paymentPage: {
    padding: 24,
    maxWidth: 480,
    margin: '0 auto',
  },
  paymentTitle: {
    color: '#00FFFF',
    fontFamily: "'Orbitron', monospace",
    fontSize: 16,
    fontWeight: 700,
    marginBottom: 16,
    textAlign: 'center',
  },
  orderSummary: {
    background: 'rgba(0,255,255,0.04)',
    border: '1px solid rgba(0,255,255,0.15)',
    borderRadius: 8,
    padding: '12px 16px',
    marginBottom: 20,
  },
  orderRow: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: '4px 0',
    fontSize: 13,
  },
  orderLabel: { color: '#666' },
  orderValue: { color: '#ddd' },
  legitPayment: {
    background: 'rgba(0,255,65,0.04)',
    border: '1px solid rgba(0,255,65,0.2)',
    borderRadius: 8,
    padding: 20,
  },
  processorBadge: {
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    marginBottom: 10,
    padding: '8px 14px',
    background: 'rgba(0,255,65,0.08)',
    borderRadius: 6,
  },
  processorIcon: { fontSize: 20 },
  processorName: { color: '#00FF41', fontFamily: "'Orbitron', monospace", fontSize: 13, fontWeight: 700, flex: 1 },
  processorSecure: { color: '#00FF41', fontSize: 12 },
  processorNote: {
    color: '#777',
    fontSize: 12,
    lineHeight: 1.6,
    marginBottom: 16,
    textAlign: 'center',
  },
  fakePayment: {
    background: 'rgba(255,255,255,0.03)',
    border: '1px solid rgba(255,255,255,0.1)',
    borderRadius: 8,
    padding: 20,
  },
  fakeSecureBadge: {
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    marginBottom: 16,
    color: '#888',
    fontSize: 12,
  },
  visaBadge: {
    background: '#1a1a6e',
    color: '#fff',
    padding: '1px 6px',
    borderRadius: 3,
    fontSize: 10,
    fontWeight: 700,
  },
  mcBadge: {
    background: '#8b0000',
    color: '#fff',
    padding: '1px 6px',
    borderRadius: 3,
    fontSize: 10,
    fontWeight: 700,
  },
  cardForm: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    marginBottom: 16,
  },
  cardLabel: {
    display: 'block',
    color: '#666',
    fontSize: 11,
    marginBottom: 4,
    fontFamily: "'Share Tech Mono', monospace",
  },
  cardInput: {
    width: '100%',
    padding: '9px 12px',
    background: '#0a0a1a',
    border: '1px solid rgba(0,255,255,0.2)',
    borderRadius: 5,
    color: '#ddd',
    fontSize: 14,
    fontFamily: "'Share Tech Mono', monospace",
    outline: 'none',
    boxSizing: 'border-box',
  },
  payBtn: {
    width: '100%',
    padding: '12px',
    background: '#00FF41',
    border: 'none',
    borderRadius: 6,
    color: '#000',
    fontFamily: "'Orbitron', monospace",
    fontSize: 14,
    fontWeight: 700,
    cursor: 'pointer',
  },
  payBtnFake: {
    width: '100%',
    padding: '12px',
    background: '#2255cc',
    border: 'none',
    borderRadius: 6,
    color: '#fff',
    fontFamily: 'Arial, sans-serif',
    fontSize: 14,
    fontWeight: 700,
    cursor: 'pointer',
  },

  /* Модалки */
  modalOverlay: {
    position: 'fixed',
    inset: 0,
    background: 'rgba(0,0,0,0.8)',
    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,
  },
  skimmerExplain: {
    background: 'rgba(255,0,64,0.06)',
    border: '1px solid rgba(255,0,64,0.25)',
    borderRadius: 8,
    padding: '12px 16px',
    marginBottom: 12,
    textAlign: 'left',
  },
  skimmerExplainTitle: {
    color: '#FF0040',
    fontFamily: "'Orbitron', monospace",
    fontSize: 12,
    fontWeight: 700,
    marginBottom: 6,
  },
  skimmerExplainText: {
    color: '#aaa',
    fontSize: 13,
    lineHeight: 1.6,
  },
  skimmerReason: {
    background: 'rgba(245,166,35,0.06)',
    border: '1px solid rgba(245,166,35,0.25)',
    borderRadius: 8,
    padding: '12px 16px',
    marginBottom: 12,
    textAlign: 'left',
  },
  skimmerReasonTitle: {
    color: '#f5a623',
    fontFamily: "'Orbitron', monospace",
    fontSize: 12,
    fontWeight: 700,
    marginBottom: 6,
  },
  skimmerReasonText: {
    color: '#aaa',
    fontSize: 13,
    lineHeight: 1.6,
  },
  safeRules: {
    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',
  },
  safeRulesTitle: {
    color: '#00FF41',
    fontFamily: "'Orbitron', monospace",
    fontSize: 12,
    fontWeight: 700,
    marginBottom: 8,
  },
  safeRulesList: {
    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 Case5Desktop;
