<?php
session_start();

$lang = $_SESSION['ln'] ?? 'en';

// LISTE COMPLÈTE DES LANGUES (corrigée + propre + sans erreurs SVG)
$languagesList = [
    'en' => ['name'=>'English','svg'=>'<svg class="language-flag" viewBox="0 0 60 30"><rect width="60" height="30" fill="#012169"/><path stroke="#FFF" stroke-width="6" d="M0 0L60 30M60 0L0 30"/><path stroke="#C8102E" stroke-width="4" d="M0 0L60 30M60 0L0 30"/><rect x="25" width="10" height="30" fill="#FFF"/><rect y="10" width="60" height="10" fill="#FFF"/><rect x="27" width="6" height="30" fill="#C8102E"/><rect y="12" width="60" height="6" fill="#C8102E"/></svg>'],

    'fr' => ['name'=>'Français','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="1" height="2" fill="#0055A4"/><rect x="1" width="1" height="2" fill="#FFF"/><rect x="2" width="1" height="2" fill="#EF4135"/></svg>'],

    'ar' => ['name'=>'العربية','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#006C35"/></svg>'],

    'es' => ['name'=>'Español','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#AA151B"/><rect y="0.67" width="3" height="0.66" fill="#F1BF00"/></svg>'],

    'de' => ['name'=>'Deutsch','svg'=>'<svg class="language-flag" viewBox="0 0 5 3"><rect width="5" height="1" fill="#000"/><rect y="1" width="5" height="1" fill="#DD0000"/><rect y="2" width="5" height="1" fill="#FFCE00"/></svg>'],

    'it' => ['name'=>'Italiano','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="1" height="2" fill="#009246"/><rect x="1" width="1" height="2" fill="#FFF"/><rect x="2" width="1" height="2" fill="#CE2B37"/></svg>'],

    'pt' => ['name'=>'Português','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#006600"/><rect width="1.5" height="2" fill="#FFCC00"/></svg>'],

    'ru' => ['name'=>'Русский','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#FFF"/><rect y="0.67" width="3" height="0.66" fill="#0039A6"/><rect y="1.33" width="3" height="0.67" fill="#D52B1E"/></svg>'],

    'zh' => ['name'=>'中文','svg'=>'<svg class="language-flag" viewBox="0 0 30 20"><rect width="30" height="20" fill="#DE2910"/><polygon fill="#FF0" points="5,2 6,4 8,4 6.5,5 7.5,7 5,5.5 2.5,7 3.5,5 2,4 4,4"/></svg>'],

    'ja' => ['name'=>'日本語','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#FFF"/><circle cx="1.5" cy="1" r="0.6" fill="#BC002D"/></svg>'],

    'ko' => ['name'=>'한국어','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#FFF"/><circle cx="1.5" cy="1" r="0.5" fill="#CD2E3A"/><circle cx="1.5" cy="1" r="0.3" fill="#0047A0"/></svg>'],

    'hi' => ['name'=>'हिन्दी','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#FF9933"/><rect y="0.67" width="3" height="0.66" fill="#138808"/><circle cx="1.5" cy="1" r="0.33" fill="#000"/></svg>'],

    'bn' => ['name'=>'বাংলা','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#F42A41"/><circle cx="1.5" cy="1" r="0.33" fill="#FFF"/></svg>'],

    'ur' => ['name'=>'اردو','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#01411C"/><circle cx="1.5" cy="1" r="0.5" fill="#FFF"/></svg>'],

    'tr' => ['name'=>'Türkçe','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#E30A17"/><circle cx="1" cy="1" r="0.5" fill="#FFF"/><circle cx="1.25" cy="1" r="0.4" fill="#E30A17"/></svg>'],

    'vi' => ['name'=>'Tiếng Việt','svg'=>'<svg class="language-flag" viewBox="0 0 3 2"><rect width="3" height="2" fill="#DA251D"/><polygon fill="#FF0" points="1.5,0.4 1.62,0.72 1.95,0.72 1.68,0.88 1.79,1.2 1.5,1 1.21,1.2 1.32,0.88 1.05,0.72 1.38,0.72"/></svg>'],

    'th' => ['name'=>'ไทย','svg'=>'<svg class="language-flag" viewBox="0 0 3 2">
        <rect width="3" height="2" fill="#A51931"/>
        <rect y="0.33" width="3" height="1.33" fill="#FFF"/>
        <rect y="0.66" width="3" height="0.66" fill="#2D2A4A"/>
    </svg>'],
];
?>

<style>
body {
  background: #f8f9fa;
  font-family: system-ui, sans-serif;
}
.language-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.15s, background 0.15s;
  cursor: pointer;
}
.language-card:hover {
  transform: translateY(-2px);
  background: #f1f1f1;
}
.language-flag {
  width: 32px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #ddd;
}
.search-box {
  border-radius: 10px;
  padding: 10px 15px;
  width: 90%;
  max-width: 350px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
</style>

<div class="container my-4">
  <h3 class="text-center mb-4">🌍 Select your language</h3>

  <div class="mb-4 text-center">
    <input type="text" id="search" class="search-box" placeholder="Search language...">
  </div>

  <div id="languageList" class="row g-3">
    <?php foreach ($languagesList as $code => $lng): ?>
      <div class="col-12 col-md-6 col-lg-4 language-item"
           data-name="<?= strtolower($lng['name']); ?>"
           onclick="window.location='?ln=<?= $code ?>'">
        <div class="language-card">
          <?= $lng['svg']; ?>
          <span class="fw-semibold"><?= $lng['name']; ?></span>
        </div>
      </div>
    <?php endforeach; ?>
  </div>
</div>

<script>
document.getElementById('search').addEventListener('input', function() {
    const search = this.value.toLowerCase().trim();
    const items = document.querySelectorAll('.language-item');

    items.forEach(item => {
        const name = item.dataset.name;
        item.style.display = name.includes(search) ? 'block' : 'none';
    });
});
</script>
