<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GergCat</title>
  <link rel="icon" href="gerg.webp" type="image/webp" />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Share+Tech&family=Cairo:wght@400;600&display=swap');
    * { font-family: 'Share Tech', sans-serif; }
    [dir="rtl"], [dir="rtl"] * { font-family: 'Cairo', sans-serif; }
    html, body { height: 100%; }
  </style>
  <script defer src="/_vercel/insights/script.js"></script>
</head>
<body class="min-h-screen relative flex flex-col items-center justify-center px-4 py-12 overflow-x-hidden">

  <!-- Background -->
  <div class="fixed inset-0 -z-10">
    <img src="map.png" alt="" class="w-full h-full object-cover" />
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
  </div>

  <div class="w-full max-w-sm flex flex-col gap-4">
    <!-- Section 3: Discord -->
    <div class="flex flex-col gap-3 bg-black/40 border border-white/10 rounded-2xl p-5 backdrop-blur-md">
      <p class="text-white/80 text-sm leading-relaxed text-center" dir="rtl">
        إذا فتت على اللعبة بدون مساعدة ممكن تحسها صعبة، فمن الأفضل تفوت على السيرفر اللبناني.
     </p>
      <a
        href="https://discord.gg/liban"
        onclick="track('discord')"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center gap-4 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/25 rounded-xl px-4 py-3 no-underline"
      >
        <img src="discord.png" alt="Discord" class="w-10 h-10 rounded-lg object-contain flex-shrink-0" />
        <div class="flex flex-col">
          <span class="text-white text-sm tracking-widest uppercase">Lebanese Community</span>
          <span class="text-white/35 text-xs mt-0.5 tracking-wider">discord.gg/liban</span>
        </div>
        <svg class="ml-auto text-white/30 w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
      </a>
    </div>
    <!-- Section 1: Description -->
    <div class="flex flex-col gap-3 bg-black/40 border border-white/10 rounded-2xl p-5 backdrop-blur-md">
      <p class="text-white/80 text-sm leading-relaxed text-center" dir="rtl">
        نحنا Community منلعب WarEra عبارة عن دول وكل شخص بيختار ينتمي لدولة. حاليا لبنان باللعبة معها بيروت وباقي المناطق محتلة من تركيا.
      </p>
      <img src="map2.png" alt="War Era Map" class="w-full h-48 object-fill rounded-xl" />
      
      <p class="text-white/80 text-sm leading-relaxed text-center" dir="rtl">حتلاقي باللعبة سياسة، حكومات، إقتصاد وحروب.</p>
    </div>

    <!-- Section 2: Play -->
    <div class="flex flex-col gap-3 bg-black/40 border border-white/10 rounded-2xl p-5 backdrop-blur-md">
      <a
        href="https://app.warera.io?referrerId=69815a6b5312557c1fbf27d1"
        target="_blank"
        rel="noopener noreferrer"
        onclick="track('play')"
        class="flex items-center gap-4 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/25 rounded-xl px-4 py-3 no-underline"
      >
        <img src="warera.png" alt="War Era" class="w-10 h-10 rounded-lg object-contain flex-shrink-0" />
        <div class="flex flex-col">
          <span class="text-white text-sm tracking-widest uppercase">Play the Game</span>
          <span class="text-white/35 text-xs mt-0.5 tracking-wider">app.warera.io</span>
        </div>
        <svg class="ml-auto text-white/30 w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
      </a>
    </div>

  </div>

  <script>
    var _d={r:document.referrer||null,l:navigator.language,s:screen.width+'x'+screen.height};
    navigator.sendBeacon('/api/analytics',JSON.stringify({type:'visit',referrer:_d.r,lang:_d.l,screen:_d.s}));
    function track(b){navigator.sendBeacon('/api/analytics',JSON.stringify({type:'click',button:b,referrer:_d.r,lang:_d.l,screen:_d.s}));}
  </script>
</body>
</html>