<?php
/**
 * dunya.php - aahaber.com "Rakamlarla Dünya" Canlı İstatistik Gösterge Paneli
 * 
 * Worldometer (worldometers.info/tr) gerçek zamanlı küresel istatistikleri:
 * Nüfus, ekonomi, toplum ve medya, çevre, gıda, su, enerji ve sağlık göstergeleri.
 */

$json_path = __DIR__ . '/data/worldometers_data.json';
$world_data = [];
if (file_exists($json_path)) {
    $raw = @file_get_contents($json_path);
    $world_data = json_decode($raw, true) ?: [];
}

$categories = $world_data['categories'] ?? [];

$page_title = "Rakamlarla Dünya — Gerçek Zamanlı Canlı Dünya İstatistikleri";
$page_desc = "Worldometer verileriyle dünya nüfusu, kamu harcamaları, çevre, enerji, gıda ve sağlık göstergeleri gerçek zamanlı canlı sayaçlarla aahaber.com'da.";
$page_keywords = "rakamlarla dünya, dünya istatistikleri, dünya nüfusu canlı, worldometer türkçe, küresel veriler, çevre ve sağlık göstergeleri";
$page_active = "dunya";
$body_class = "dunya-page";

$extra_css = ['dunya.css?v=1.3'];
$extra_js = ['dunya.js?v=1.4'];

require_once __DIR__ . '/ust.php';
?>

<div class="dunya-page-container">

  <!-- 1. ÜST BAŞLIK VE CANLI ROZET ŞERİDİ -->
  <div class="dunya-header-banner">
    <div class="dunya-header-top">
      <div class="dunya-live-indicator">
        <span class="dunya-pulse-dot"></span>
        <span>CANLI VERİ AKIŞI</span>
      </div>

      <div class="dunya-source-pill">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
        <span>Worldometer & BM / DSÖ İstatistik Konsorsiyumu</span>
      </div>
    </div>

    <h1 class="dunya-main-title">Rakamlarla Dünya</h1>
    <p class="dunya-main-subtitle">
      Dünya nüfusu, ekonomi, toplum, çevre, gıda, su, enerji ve sağlık alanlarındaki küresel değişimleri anbean gerçek zamanlı sayaçlarla canlı takip edin.
    </p>
  </div>

  <!-- 2. HERO: DÜNYA NÜFUSU GÖREV KONTROL KARTI -->
  <div class="dunya-hero-card">
    <div class="dunya-hero-bg-glow"></div>

    <div class="dunya-hero-header">
      <div class="dunya-hero-badge">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
        <span>Mevcut Dünya Nüfusu Saati</span>
      </div>
      <div class="dunya-hero-clock-time" id="heroClockTime">UTC+3 Canlı</div>
    </div>

    <div class="dunya-hero-number-wrap">
      <div class="dunya-hero-number rts-counter" rel="current_population" id="heroPopulationClock">8.161.972.572</div>
      <span class="dunya-hero-label">insan</span>
    </div>

    <!-- Hero İkincil 4'lü Metrik Barı -->
    <div class="dunya-hero-subgrid">
      <div class="dunya-hero-subitem">
        <div class="dunya-subitem-title">
          <span>👶 Bugün Doğanlar</span>
        </div>
        <div class="dunya-subitem-val green dunya-live-value rts-counter" data-key="births_today" rel="births_today">---</div>
      </div>

      <div class="dunya-hero-subitem">
        <div class="dunya-subitem-title">
          <span>🕊️ Bugün Ölenler</span>
        </div>
        <div class="dunya-subitem-val red dunya-live-value rts-counter" data-key="dth1s_today" rel="dth1s_today">---</div>
      </div>

      <div class="dunya-hero-subitem">
        <div class="dunya-subitem-title">
          <span>📈 Bugünkü Net Artış</span>
        </div>
        <div class="dunya-subitem-val green dunya-live-value rts-counter" data-key="absolute_growth" rel="absolute_growth">---</div>
      </div>

      <div class="dunya-hero-subitem">
        <div class="dunya-subitem-title">
          <span>📅 Bu Yılki Net Artış</span>
        </div>
        <div class="dunya-subitem-val green dunya-live-value rts-counter" data-key="absolute_growth_year" rel="absolute_growth_year">---</div>
      </div>
    </div>
  </div>

  <!-- TÜRKİYE NÜFUSU ÖZEL ÇAĞRI BANNERI -->
  <a href="turkiye-nufusu.php" class="dunya-turkey-banner" style="display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, rgba(225, 29, 72, 0.08) 0%, rgba(225, 29, 72, 0.02) 100%); border: 1px solid rgba(225, 29, 72, 0.22); border-radius: 1rem; padding: 1rem 1.4rem; margin-bottom: 2rem; text-decoration: none; color: inherit; transition: all 0.2s ease;">
    <div style="display: flex; align-items: center; gap: 1rem;">
      <span style="display: flex; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.15); flex-shrink: 0;">
        <svg width="34" height="23" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="#E30A17"/><circle cx="425" cy="400" r="200" fill="#ffffff"/><circle cx="475" cy="400" r="160" fill="#E30A17"/><polygon points="583.33,400 706.77,440.11 659.77,319.89 659.77,480.11 706.77,359.89" fill="#ffffff"/></svg>
      </span>
      <div>
        <div style="font-weight: 800; font-size: 1.05rem; color: var(--text-main, #0f172a); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
          <span>Türkiye Nüfusu Canlı Sayaç & Demografi Raporu</span>
          <span style="font-size: 0.72rem; background: #e11d48; color: #fff; padding: 0.15rem 0.5rem; border-radius: 9999px; font-weight: 700;">YENİ & CANLI</span>
        </div>
        <div style="font-size: 0.85rem; color: var(--text-muted, #64748b); margin-top: 0.2rem;">
          Türkiye'nin anlık canlı nüfusu (~87.96M), 1950-2050 tarihsel ve tahmin verileri ve en büyük 70 şehrin nüfus istatistikleri.
        </div>
      </div>
    </div>
    <div style="display: flex; align-items: center; gap: 0.4rem; color: #e11d48; font-weight: 700; font-size: 0.88rem; white-space: nowrap;">
      <span>İncele</span>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"></polyline></svg>
    </div>
  </a>

  <!-- 3. ARAMA VE KATEGORİ ÇUBUĞU -->
  <div class="dunya-toolbar">
    <div class="dunya-search-box">
      <svg class="dunya-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
      <input 
        type="search" 
        class="dunya-search-input" 
        id="dunyaSearchInput" 
        placeholder="Küresel veri veya metrik ara (örn: CO2, araba, internet, sigara, obezite)..." 
        aria-label="Metrik Ara"
      />
    </div>

    <div class="dunya-category-pills" role="tablist" aria-label="Kategoriler">
      <button type="button" class="dunya-cat-pill active" data-cat="all">
        <span>🌍 Tümü</span>
      </button>
      <?php foreach ($categories as $cat): ?>
        <button type="button" class="dunya-cat-pill" data-cat="<?= htmlspecialchars($cat['id']) ?>">
          <span><?= $cat['icon'] ?> <?= htmlspecialchars($cat['category']) ?></span>
        </button>
      <?php endforeach; ?>
    </div>
  </div>

  <!-- 4. TÜM KATEGORİLER VE METRİK KARTLARI -->
  <div class="dunya-categories-wrapper" id="dunyaCategoriesWrapper">
    <?php foreach ($categories as $cat): ?>
      <section class="dunya-category-section" id="cat-<?= htmlspecialchars($cat['id']) ?>">
        
        <div class="dunya-cat-header">
          <div class="dunya-cat-title-group">
            <span class="dunya-cat-icon"><?= $cat['icon'] ?></span>
            <h2 class="dunya-cat-title"><?= htmlspecialchars($cat['category']) ?></h2>
            <span class="dunya-cat-badge"><?= count($cat['counters'] ?? []) ?> gösterge</span>
          </div>
          <span class="dunya-source-pill"><?= htmlspecialchars($cat['desc']) ?></span>
        </div>

        <div class="dunya-metrics-grid">
          <?php foreach ($cat['counters'] as $counter): 
            $timeframe_label = ($counter['timeframe'] === 'canlı') ? 'Canlı' : (($counter['timeframe'] === 'bu yıl') ? 'Bu Yıl' : 'Bugün');
            $is_live = ($counter['timeframe'] === 'canlı');
          ?>
            <article class="dunya-metric-card" data-key="<?= htmlspecialchars($counter['key']) ?>">
              <div class="dunya-card-top">
                <span class="dunya-timeframe-badge <?= $is_live ? 'live' : '' ?>">
                  <?= $timeframe_label ?>
                </span>
              </div>

              <div>
                <div class="dunya-number-display">
                  <?php if (!empty($counter['unit']) && $counter['unit'] === '$'): ?>
                    <span class="dunya-currency-prefix">$</span>
                  <?php endif; ?>

                  <span 
                    class="dunya-live-value rts-counter" 
                    data-key="<?= htmlspecialchars($counter['key']) ?>"
                    rel="<?= htmlspecialchars($counter['key']) ?>"
                  >---</span>

                  <?php if (!empty($counter['unit']) && $counter['unit'] !== '$'): ?>
                    <span class="dunya-unit-suffix"><?= htmlspecialchars($counter['unit']) ?></span>
                  <?php endif; ?>
                </div>

                <h3 class="dunya-metric-label"><?= htmlspecialchars($counter['label']) ?></h3>
              </div>

              <!-- Detay / Kaynak Çekmecesi -->
              <div class="dunya-card-drawer">
                <?= htmlspecialchars($counter['desc'] ?? 'Resmi uluslararası kuruluşlar tarafından modellenen gerçek zamanlı veri akışı.') ?>
              </div>
            </article>
          <?php endforeach; ?>
        </div>

      </section>
    <?php endforeach; ?>
  </div>

  <!-- 5. ALT BİLGİ VE KAYNAK BİLDİRİMİ -->
  <div class="dunya-footer-banner">
    <div class="dunya-footer-left">
      <div class="dunya-footer-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg>
      </div>
      <div class="dunya-footer-text">
        <h4>Gerçek Zamanlı Küresel İstatistik Metodolojisi</h4>
        <p>Veriler; Birleşmiş Milletler (BM), Dünya Sağlık Örgütü (DSÖ), Dünya Bankası, UNESCO, FAO, IEA ve Worldometer analiz motorları temel alınarak matematiksel projeksiyon algoritmalarıyla canlı olarak hesaplanmaktadır.</p>
      </div>
    </div>
  </div>

</div> <!-- /.dunya-page-container -->

<?php
require_once __DIR__ . '/alt.php';
?>
