<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>HELPY (HLP) – The First Global Solidarity Crypto</title>

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap" rel="stylesheet" />

  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

  <style>
    :root {
      --gold: #ffd86b;
      --gold2: #ffb347;
      --blue-mid: #0a1530;
      --text: #e8ecff;
      --light-text: #1b1d2b;
    }

    [data-theme="dark"] {
      --bg: radial-gradient(1400px 900px at 20% 15%, #141f45 0%, #0a1330 45%, #070c1f 100%);
      --text-color: var(--text);
      --accent: var(--gold);
    }

    [data-theme="light"] {
      --bg: linear-gradient(180deg, #f9fafc, #e8ebf3);
      --text-color: var(--light-text);
      --accent: var(--blue-mid);
    }

    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
      color: var(--text-color);
      background: var(--bg);
      transition: background 1s ease, color 0.5s ease;
      overflow-x: hidden;
    }

    header.hero {
      text-align: center;
      padding: 80px 20px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    /* ✨ Background glowing rays */
    .hero::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 50% 50%, rgba(255,216,107,0.15), transparent 70%);
      animation: rays 8s infinite linear;
      z-index: 0;
    }

    @keyframes rays {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .controls {
      position: fixed;
      top: 20px;
      right: 20px;
      display: flex;
      gap: 10px;
      z-index: 20;
    }

    .theme-toggle, .lang-select {
      border: 2px solid var(--accent);
      border-radius: 50px;
      padding: 8px 12px;
      font-weight: 600;
      color: var(--accent);
      background: rgba(255,255,255,0.1);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    select.lang-select {
      appearance: none;
      border-radius: 999px;
      font-family: inherit;
      font-weight: 600;
    }

    /* ✨ LOGO FLOAT + GLOW */
    .coin-logo {
      width: 140px;
      filter: drop-shadow(0 0 25px rgba(255,216,107,0.4));
      animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite alternate;
      z-index: 1;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes glow {
      0% { filter: drop-shadow(0 0 10px rgba(255,216,107,0.4)); }
      100% { filter: drop-shadow(0 0 40px rgba(255,216,107,0.8)); }
    }

    h1.title { font-size: clamp(28px, 4vw, 56px); color: var(--accent); z-index: 2; }
    p.subtitle { font-size: clamp(16px, 2vw, 22px); color: #bcd0ff; }

    .hero-text {
      max-width: 850px;
      margin: 20px auto 32px;
      font-weight: 300;
      line-height: 1.7;
    }

    /* ✨ BUTTON GLOW + SCINTILLANT */
    .btn {
      display: inline-block;
      padding: 13px 26px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 700;
      color: #111;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      box-shadow: 0 0 12px rgba(255,216,107,0.4);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .btn::after {
      content: "";
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg, rgba(255,255,255,0.3), transparent);
      transform: skewX(-20deg);
      animation: shimmer 3.5s infinite;
    }

    @keyframes shimmer {
      0% { left: -75%; }
      100% { left: 125%; }
    }

    .btn--outline {
      border: 2px solid var(--accent);
      background: transparent;
      color: var(--accent);
      box-shadow: none;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 20px rgba(255,216,107,0.6);
    }

    .btn--outline:hover {
      background: var(--accent);
      color: #111;
      box-shadow: 0 0 20px rgba(255,216,107,0.6);
    }

    .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; z-index: 2; }

    footer {
      background: rgba(0,0,0,0.85);
      border-top: 2px solid var(--accent);
      padding: 30px 20px 50px;
      color: #bbb;
      text-align: center;
      line-height: 1.6;
      font-size: 0.9em;
    }

    footer a { color: var(--accent); font-weight: 600; text-decoration: none; }
    footer a:hover { color: #fff; }

    #visitorCounter {
      position: fixed;
      bottom: 12px;
      right: 16px;
      background: rgba(255,255,255,0.08);
      color: gold;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      font-family: Poppins, sans-serif;
      backdrop-filter: blur(6px);
      box-shadow: 0 0 8px rgba(0,0,0,0.25);
      opacity: 0.7;
      z-index: 9999;
      transition: opacity 0.3s;
    }

    #visitorCounter:hover { opacity: 1; }
  </style>
</head>

<body data-theme="dark">
  <div class="controls">
    <select class="lang-select" id="langSelect">
      <option value="en">🇬🇧 EN</option>
      <option value="fr">🇫🇷 FR</option>
      <option value="es">🇪🇸 ES</option>
      <option value="de">🇩🇪 DE</option>
    </select>
    <button class="theme-toggle" id="themeToggle">🌙</button>
  </div>

  <header class="hero">
    <img src="/assets/img/hlp_coin.png" alt="HELPY Logo" class="coin-logo" />
    <h1 class="title">HELPY (HLP) – The First Global Solidarity Crypto</h1>
    <p class="subtitle">You Help. You Earn. You Change the World.</p>
    <p class="hero-text">
      HELPY (HLP) is a worldwide movement turning generosity into growth. Every transaction fuels a transparent solidarity engine.
    </p>
    <div class="cta-row">
      <a href="/buy/" class="btn">Buy HLP</a>
      <a href="/presale/" class="btn">🔥 Join Pre-Sale (LIVE)</a>
      <a href="/solidarityfi/" class="btn">🌐 Enter SolidarityFi</a>
      <a href="/marketplace/nft.html" class="btn btn--outline">Explore NFTs</a>
      <a href="/game/" class="btn btn--outline">Play Game</a>
      <a href="/ambassadors/" class="btn">Become Ambassador</a>
    </div>
  </header>

  <footer>
    <p style="color:var(--accent);font-weight:700;">© 2025 HELPY Crypto — You Help, You Earn</p>
    <p>
      <a href="/legal/privacy.html">Privacy Policy</a> ·
      <a href="/legal/terms.html">Terms</a> ·
      <a href="/legal/disclaimer.html">Disclaimer</a><br><br>
      Contact: <a href="mailto:contact@helpycrypto.com">contact@helpycrypto.com</a>
    </p>
  </footer>

  <script>
    // 🌓 Theme toggle
    const themeToggle = document.getElementById('themeToggle');
    const root = document.body;
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) root.dataset.theme = savedTheme;
    themeToggle.textContent = root.dataset.theme === 'light' ? '☀️' : '🌙';
    themeToggle.onclick = () => {
      const newTheme = root.dataset.theme === 'light' ? 'dark' : 'light';
      root.dataset.theme = newTheme;
      localStorage.setItem('theme', newTheme);
      themeToggle.textContent = newTheme === 'light' ? '☀️' : '🌙';
    };

    // 👁️ Global Visitor Counter
    document.addEventListener("DOMContentLoaded", async () => {
      try {
        const res = await fetch("https://helpycrypto.com/api/visit.php");
        const data = await res.json();
        const count = data.visits?.toLocaleString() || 0;
        const countries = data.countries_count || 0;
        const counter = document.createElement("div");
        counter.id = "visitorCounter";
        counter.textContent = `👁️ ${count} visits · 🌍 ${countries} countries reached`;
        document.body.appendChild(counter);
      } catch (err) {
        console.error("Visitor counter unavailable", err);
      }
    });
  </script>
</body>
</html>