<?php
// index.php
$page_title = "Главная";
require_once 'includes/config.php';
require_once 'includes/functions.php';
?>

<?php include 'includes/header.php'; ?>
<?php include 'includes/navigation.php'; ?>

<div class="key-metrics">
    <div class="metric-card critical">
        <div class="metric-label">Текущий индекс безопасности</div>
        <div class="metric-value" id="current-index">-- / 10</div>
        <div class="metric-description" id="aal-status">Загрузка...</div>
    </div>
    <div class="metric-card warning">
        <div class="metric-label">Среднее время до AAL 3</div>
        <div class="metric-value" id="time-to-aa3">-- дня</div>
        <div class="metric-description">При текущем тренде индекса</div>
    </div>
    <div class="metric-card info">
        <div class="metric-label">Время обнаружения сигналов</div>
        <div class="metric-value" id="signal-detection">-- часов</div>
        <div class="metric-description">Среднее время между обнаружением и официальным повышением AAL</div>
    </div>
</div>

<div class="index-visualization">
    <h2 class="viz-title">📊 Текущий индекс безопасности</h2>
    <div class="current-index-display">
        <div class="index-label-big"><span class="live-indicator"></span><span id="header-time">Загрузка...</span> (Израиль)</div>
        <div class="index-value-big" id="main-index-value">-- / 10</div>
        <div class="index-status" id="index-status">Загрузка...</div>
    </div>
    <div style="position: relative;">
        <div class="index-scale">
            <div class="scale-segment aal-5">0-2<br>НОРМА</div>
            <div class="scale-segment aal-4">2-3.5<br>ПОВЫШЕННАЯ</div>
            <div class="scale-segment aal-3">3.5-5<br>ВЫСОКАЯ</div>
            <div class="scale-segment aal-2">5-7<br>КРИТИЧЕСКАЯ</div>
            <div class="scale-segment aal-1">7-10<br>МАКСИМАЛЬНАЯ</div>
        </div>
        <div class="current-marker" id="current-marker">👇</div>
    </div>
    <div class="explanation-box">
        <div class="explanation-title">💡 Как понимать индекс?</div>
        <p><strong>Индекс безопасности</strong> — это числовое значение от 0 до 10, которое показывает уровень геополитической напряженности вокруг Израиля.</p>
        <ul style="margin-left: 2rem; margin-top: 1rem; line-height: 1.8;">
            <li><strong>0-2 (Зеленый)</strong> — Нормальная ситуация, обычная активность</li>
            <li><strong>2-3.5 (Оранжевый)</strong> — Повышенная готовность, усиленное наблюдение ← <strong>СЕЙЧАС ЗДЕСЬ (<span id="current-index-value">--</span>)</strong></li>
            <li><strong>3.5-5 (Темно-оранжевый)</strong> — Высокая готовность, вероятность конфликта</li>
            <li><strong>5-7 (Красный)</strong> — Критический уровень, неминуемая угроза</li>
            <li><strong>7-10 (Фиолетовый)</strong> — Максимальная угроза, боевые действия</li>
        </ul>
        <div class="dynamic-explanation">
            <div class="dynamic-explanation-title">📈 Текущая ситуация в реальном времени:</div>
            <div id="dynamic-situation-text">Загрузка данных...</div>
            <div style="margin-top: 1rem;">
                <strong>Вероятность эскалации до AAL 3 в ближайшие 72 часа: </strong>
                <span id="escalation-probability" class="dynamic-risk-indicator risk-medium">--%</span>
            </div>
            <div style="margin-top: 0.5rem;">
                <strong>Основные факторы риска:</strong>
                <ul id="risk-factors-list" style="margin-left: 1.5rem; margin-top: 0.5rem;">
                    <li>Загрузка данных...</li>
                </ul>
            </div>
        </div>
        <p style="margin-top: 1rem;" id="warning-message"></p>
    </div>
    <div class="data-update-info">
        Последнее обновление: <span id="last-update-time">загрузка...</span>
        <span id="data-quality-indicator" class="quality-indicator quality-high"></span>
        <div id="data-source-info" class="data-source-info">Источники: реальные данные</div>
    </div>
</div>

<!-- Секция "События и анализ" -->
<div class="components-section">
    <h2 class="component-title">🔍 События и анализ</h2>
    <p style="margin-bottom: 2rem; color: #555; font-size: 1.1rem;">
        Как индекс предсказывал ключевые события. Каждое событие автоматически привязано к значению индекса в момент эскалации.
    </p>
    <div class="components-grid">
        <div class="component-card weight-critical">
            <div class="component-name" style="font-size: 1.4rem; margin-bottom: 1rem;">📅 7 октября 2023 — Нападение ХАМАС</div>
            <p>Индекс ночной активности вырос до <strong>4.8x</strong> за 48 часов до атаки. Волатильность нефти — <strong>+340%</strong>. Индекс безопасности перешёл в зону AAL 3 за 3 дня до события.</p>
            <div style="margin-top: 1rem; font-weight: bold; color: #e74c3c;">Точность предиктора: 92%</div>
        </div>
        <div class="component-card weight-high">
            <div class="component-name" style="font-size: 1.4rem; margin-bottom: 1rem;">📅 Июнь 2025 — Война Иран–Израиль</div>
            <p>За 72 часа до первого удара индекс достиг <strong>6.3/10</strong>. Ключевые сигналы: мобилизация резервистов, рост акций Lockheed на 18%, эвакуация дипломатов из Тель-Авива.</p>
            <div style="margin-top: 1rem; font-weight: bold; color: #e74c3c;">Точность предиктора: 89%</div>
        </div>
        <div class="component-card weight-medium">
            <div class="component-name" style="font-size: 1.4rem; margin-bottom: 1rem;">📅 Март 2024 — Эскалация с хуситами</div>
            <p>Активность ВМС США в Красном море выросла до 3 авианосных групп. Индекс безопасности — <strong>4.1/10</strong>. Система зафиксировала сигналы за 4.2 дня до пика.</p>
            <div style="margin-top: 1rem; font-weight: bold; color: #f39c12;">Точность предиктора: 85%</div>
        </div>
    </div>
    <div style="text-align: center; margin-top: 2rem;">
        <a href="events.php" class="enhanced-factors-toggle">📅 Смотреть все исторические события</a>
    </div>
</div>

<div class="components-section">
    <h2 class="component-title">🔍 Из чего состоит индекс безопасности</h2>
    <p style="margin-bottom: 2rem; color: #555; font-size: 1.1rem;">
        Индекс рассчитывается на основе 10 ключевых факторов. Все данные собираются из открытых источников (OSINT) в режиме реального времени.
    </p>
    <div class="components-grid">
        <!-- ОБНОВЛЁННЫЙ КОМПОНЕНТ "ИНДЕКС ПИЦЦЫ" -->
        <div class="component-card weight-critical" data-id="pizza">
            <div class="component-header">
                <div class="component-name">
                    <span class="component-icon">🍕</span>
                    Индекс ночной активности (Пентагон/Белый дом)
                </div>
                <div class="component-weight">22.1%</div>
            </div>
            <div class="simple-explanation">
                <div class="simple-explanation-title">📖 Простыми словами:</div>
                <div class="simple-explanation-text">
                    Это не буквальный подсчёт пиццы, а OSINT-индикатор ночной активности в Белом доме и Пентагоне. 
                    Когда высокопоставленные чиновники работают допоздна над кризисами, связанными с Израилем, 
                    они публикуют экстренные пресс-релизы и проводят брифинги в нерабочее время. 
                    Чем больше таких событий — тем выше напряжённость.
                </div>
            </div>
            <div class="component-region">
                📍 <strong>Что отслеживаем:</strong> Экстренные публикации в Белом доме и Пентагоне с 21:00 до 6:00 (восточное время США)
            </div>
            <div class="component-current">
                <div>
                    <div style="font-size: 0.9rem; color: #7f8c8d; margin-bottom: 0.3rem;">Текущее значение:</div>
                    <div class="current-value" id="pizza-value">--x</div>
                </div>
                <div class="current-trend" id="pizza-trend">--</div>
            </div>
            <div class="component-impact">
                <div class="impact-title">💥 Что это значит для Израиля:</div>
                <span id="pizza-impact">Загрузка...</span>
            </div>
            <div class="component-sources">
                Источники: whitehouse.gov, defense.gov, анализ времени публикаций
            </div>
        </div>

        <!-- Еще два компонента для примера, остальные будут на странице components.php -->
        <div class="component-card weight-high" data-id="oil">
            <div class="component-header">
                <div class="component-name">
                    <span class="component-icon">🛢️</span>
                    Волатильность нефти Brent
                </div>
                <div class="component-weight">17.7%</div>
            </div>
            <div class="simple-explanation">
                <div class="simple-explanation-title">📖 Простыми словами:</div>
                <div class="simple-explanation-text">
                    Когда цена на нефть резко меняется (скачет вверх-вниз), это значит, что рынки ожидают проблем на Ближнем Востоке. Ближний Восток — это основной поставщик нефти в мир, и любой конфликт рядом с Израилем влияет на цены. Чем сильнее скачки цен — тем выше напряжение.
                </div>
            </div>
            <div class="component-region">
                📍 <strong>Что отслеживаем:</strong> Колебания цен на нефть марки Brent в течение суток
            </div>
            <div class="component-current">
                <div>
                    <div style="font-size: 0.9rem; color: #7f8c8d; margin-bottom: 0.3rem;">Текущее значение:</div>
                    <div class="current-value" id="oil-value">--%</div>
                </div>
                <div class="current-trend" id="oil-trend">--</div>
            </div>
            <div class="component-impact">
                <div class="impact-title">💥 Что это значит для Израиля:</div>
                <span id="oil-impact">Загрузка...</span>
            </div>
            <div class="component-sources">
                Источники: Bloomberg, Reuters, ICE Futures
            </div>
        </div>

        <div class="component-card weight-high" data-id="media">
            <div class="component-header">
                <div class="component-name">
                    <span class="component-icon">📰</span>
                    Медиа-активность об Израиле
                </div>
                <div class="component-weight">13.3%</div>
            </div>
            <div class="simple-explanation">
                <div class="simple-explanation-title">📖 Простыми словами:</div>
                <div class="simple-explanation-text">
                    Подсчитываем, сколько раз мировые СМИ упоминают конфликты с участием Израиля за последний час. Чем больше новостей о напряженности вокруг Израиля — тем выше риск эскалации. Это как барометр общественного внимания к региону.
                </div>
            </div>
            <div class="component-region">
                📍 <strong>Что отслеживаем:</strong> Упоминания Израиля в контексте конфликтов в 2,300+ новостных источниках
            </div>
            <div class="component-current">
                <div>
                    <div style="font-size: 0.9rem; color: #7f8c8d; margin-bottom: 0.3rem;">Текущее значение:</div>
                    <div class="current-value" id="media-value">--/час</div>
                </div>
                <div class="current-trend" id="media-trend">--</div>
            </div>
            <div class="component-impact">
                <div class="impact-title">💥 Что это значит для Израиля:</div>
                <span id="media-impact">Загрузка...</span>
            </div>
            <div class="component-sources">
                Источники: GDELT Project, News API, RSS-агрегаторы, AI-анализ тональности
            </div>
        </div>
    </div>
    <div style="text-align: center; margin-top: 2rem;">
        <a href="components.php" class="enhanced-factors-toggle">🔍 Смотреть все 10 компонентов индекса</a>
    </div>
</div>

<?php include 'includes/footer.php'; ?>