resources/views/scroll_reveal_landing.blade.php

{{--
  scroll_reveal_landing.blade.php
  Epic animated hero + horizontal game-card gallery
  – $totalProducts & $gameCount injected
  – every card glows with unique vibrant color
  – last card alignment fixed
  – Shop Now → /store?game=slug
--}}
<x-app-layout>
  <!-- 1️⃣  EPIC HERO SECTION  -->
  <div class="hero-wrapper min-h-screen relative overflow-hidden">
    <!-- Parallax layers -->
    <div class="parallax-bg absolute inset-0">
      <div class="parallax-layer" data-speed="0.2">
        <div class="absolute top-20 left-10 w-96 h-96 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-20 right-10 w-80 h-80 bg-gradient-to-r from-pink-500/10 to-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay:2s;"></div>
      </div>
      <div class="parallax-layer" data-speed="0.5">
        <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-gradient-to-r from-cyan-500/15 to-blue-500/15 rounded-full blur-2xl float"></div>
        <div class="absolute bottom-1/3 left-1/4 w-48 h-48 bg-gradient-to-r from-yellow-500/15 to-orange-500/15 rounded-full blur-2xl float" style="animation-delay:3s;"></div>
      </div>
      <div class="parallax-layer" data-speed="0.8">
        <div class="absolute top-10 right-20 w-32 h-32 bg-gradient-to-r from-green-500/20 to-teal-500/20 rounded-full blur-xl float" style="animation-delay:1s;"></div>
        <div class="absolute bottom-32 left-32 w-24 h-24 bg-gradient-to-r from-red-500/20 to-pink-500/20 rounded-full blur-xl float" style="animation-delay:4s;"></div>
      </div>
    </div>

    <!-- Animated particles -->
    <div class="particles absolute inset-0 pointer-events-none">
      @for ($i = 0; $i < 10; $i++)
        <div class="particle" style="left:{{ $i*10 }}%; animation-delay:{{ $i*0.5 }}s;"></div>
      @endfor
    </div>

    <!-- Hero content -->
    <div class="hero-content flex items-center justify-center min-h-screen relative z-10 px-4">
      <div class="container-custom py-16 text-center">
        <div class="max-w-6xl mx-auto">
          <!-- Animated badge -->
          <div class="hero-badge mb-8 opacity-0 transform translate-y-10">
            <div class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full border border-purple-500/30 backdrop-blur-sm">
              <i class="fas fa-gamepad text-purple-400 mr-3 text-lg"></i>
              <span class="text-purple-300 font-semibold text-lg">Premium Gaming Store</span>
              <div class="ml-3 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
            </div>
          </div>

          <!-- Main title -->
          <h1 class="hero-title text-7xl md:text-9xl font-black mb-8 text-white leading-none opacity-0 transform translate-y-20">
            <span class="inline-block">Gaming</span><br>
            <span class="gradient-text inline-block">Store</span>
          </h1>

          <p class="hero-subtitle text-2xl md:text-3xl text-white/80 mb-16 max-w-4xl mx-auto">
            Discover premium digital content for your favourite games
          </p>

          <!-- Stats -->
          <div class="hero-stats flex flex-wrap justify-center gap-8 mb-16 opacity-0 transform translate-y-10">
            <div class="stat-card glass-bg px-8 py-6 rounded-2xl">
              <div class="text-4xl font-bold text-white counter" data-target="{{ $totalProducts }}">0</div>
              <div class="text-white/60 text-lg font-medium">Items Sold</div>
            </div>
            <div class="stat-card glass-bg px-8 py-6 rounded-2xl">
              <div class="text-4xl font-bold text-white counter" data-target="{{ $gameCount }}">0</div>
              <div class="text-white/60 text-lg font-medium">Games</div>
            </div>
            <div class="stat-card glass-bg px-8 py-6 rounded-2xl">
              <div class="text-4xl font-bold text-white">24/7</div>
              <div class="text-white/60 text-lg font-medium">Support</div>
            </div>
          </div>

          <!-- CTA -->
          <div class="hero-cta flex flex-col sm:flex-row items-center justify-center gap-6 opacity-0 transform translate-y-10">
            <button onclick="scrollToCards()" class="btn-primary text-xl px-12 py-5">
              <i class="fas fa-rocket mr-3"></i>Explore Store
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Scroll indicator -->
    <div class="scroll-indicator absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white/60 animate-bounce">
      <i class="fas fa-chevron-down text-xl"></i>
    </div>
  </div>

  <!-- 2️⃣  HORIZONTAL GAME-CARD GALLERY  -->
  @php
    /* 1. Core games */
    $coreGames = [
      ['slug'=>'genshin','name'=>'Genshin Impact','desc'=>'Premium accounts & rare items','icon'=>'fas fa-star','color'=>'#fbbf24','glow'=>'rgba(251,191,36,.45)','count'=>$categoryCounts['Genshin']??0],
      ['slug'=>'starrail','name'=>'Honkai: Star Rail','desc'=>'Stellar jade & limited characters','icon'=>'fas fa-rocket','color'=>'#a855f7','glow'=>'rgba(168,85,247,.45)','count'=>$categoryCounts['Starrail']??0],
      ['slug'=>'wutheringwave','name'=>'Wuthering Waves','desc'=>'Resonators & weapons','icon'=>'fas fa-wave-square','color'=>'#06b6d4','glow'=>'rgba(6,182,212,.45)','count'=>$categoryCounts['WutheringWave']??0],
    ];

    /* 2. Custom games from database */
    $extraGames = [];
    if(isset($customGames)) {
        foreach ($customGames as $customGame) {
            // Convert gradient to hex color for consistency
            $gradientParts = explode(' ', $customGame->color_gradient);
            $primaryColor = str_replace(['from-', '-500'], '', $gradientParts[0] ?? 'purple');
            
            // Map color names to hex values and glow colors
            $colorMap = [
                'red' => ['hex' => '#ef4444', 'glow' => 'rgba(239,68,68,.45)'],
                'pink' => ['hex' => '#ec4899', 'glow' => 'rgba(236,72,153,.45)'],
                'purple' => ['hex' => '#8b5cf6', 'glow' => 'rgba(139,92,246,.45)'],
                'blue' => ['hex' => '#3b82f6', 'glow' => 'rgba(59,130,246,.45)'],
                'green' => ['hex' => '#10b981', 'glow' => 'rgba(16,185,129,.45)'],
                'orange' => ['hex' => '#f97316', 'glow' => 'rgba(249,115,22,.45)'],
                'yellow' => ['hex' => '#eab308', 'glow' => 'rgba(234,179,8,.45)'],
                'teal' => ['hex' => '#14b8a6', 'glow' => 'rgba(20,184,166,.45)'],
                'cyan' => ['hex' => '#06b6d4', 'glow' => 'rgba(6,182,212,.45)'],
                'indigo' => ['hex' => '#6366f1', 'glow' => 'rgba(99,102,241,.45)'],
                'violet' => ['hex' => '#8b5cf6', 'glow' => 'rgba(139,92,246,.45)'],
                'emerald' => ['hex' => '#10b981', 'glow' => 'rgba(16,185,129,.45)'],
                'rose' => ['hex' => '#f43f5e', 'glow' => 'rgba(244,63,94,.45)']
            ];
            
            $colorData = $colorMap[$primaryColor] ?? $colorMap['purple'];
            $hexColor = $colorData['hex'];
            $glowColor = $colorData['glow'];
            
            $extraGames[] = [
                'slug'  => Illuminate\Support\Str::slug($customGame->name),
                'name'  => $customGame->name,
                'desc'  => "Exclusive items for {$customGame->name}",
                'icon'  => $customGame->icon,
                'color' => $hexColor,
                'glow'  => $glowColor,
                'count' => \App\Models\Product::where('game', $customGame->name)->count()
            ];
        }
    }
    $games = array_merge($coreGames, $extraGames);
  @endphp

  <section class="horizontal-gallery">
    @foreach($games as $idx=>$game)
      <article class="game-tile {{ $game['slug'] }}-theme" data-index="{{ $idx }}">
        <div class="tile-frame">
          <div class="tile-glow" style="--glow-color:{{ $game['glow'] }}"></div>
          <div class="tile-inner">
            <div class="tile-notch top-notch"></div>
            <div class="tile-notch side-notch"></div>

            <div class="tile-icon animate" data-delay="0" style="background:linear-gradient(135deg,{{ $game['color'] }},{{ $game['color'] }}dd)">
              <i class="{{ $game['icon'] }} text-4xl"></i>
            </div>

            <h2 class="tile-title animate" data-delay="100">{{ $game['name'] }}</h2>
            <p class="tile-desc animate" data-delay="200">{{ $game['desc'] }}</p>

            <div class="tile-badge animate" data-delay="300">
              <i class="{{ $game['icon'] }} mr-2"></i>Featured Game
            </div>

            <div class="tile-stats animate" data-delay="400">
              <i class="fas fa-shopping-cart mr-2"></i>{{ $game['count'] }} items
            </div>

            <!-- LINK TO /store -->
            <a href="{{ route('categories') }}?game={{ $game['slug'] }}" class="tile-btn animate" data-delay="500"
               style="background:linear-gradient(135deg,{{ $game['color'] }},{{ $game['color'] }}cc)">
              <i class="fas fa-shopping-bag mr-2"></i>Shop Now
            </a>
          </div>
        </div>
      </article>
    @endforeach
    <div style="height:100vh;pointer-events:none;"></div>
  </section>

  <style>
    /* ----------  HERO STYLES  ---------- */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0a0a;color:#fff;overflow-x:hidden;perspective:2000px}
    .hero-wrapper{min-height:100vh;position:relative;overflow:hidden;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)}
    .parallax-layer{position:absolute;top:0;left:0;width:100%;height:120%;will-change:transform}
    .particles{position:absolute;inset:0;pointer-events:none}
    .particle{position:absolute;top:-10px;width:3px;height:3px;background:#fff;border-radius:50%;animation:particle 5s linear infinite}
    @keyframes particle{0%{transform:translateY(0) scale(0);opacity:1}20%{transform:translateY(30vh) scale(1);opacity:1}100%{transform:translateY(110vh) scale(0);opacity:0}}
    .hero-content{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:0 1rem}
    .container-custom{max-width:1200px;margin:0 auto}
    .glass-bg{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px);border-radius:1rem}
    .hero-badge,.hero-title,.hero-subtitle,.hero-stats,.hero-cta{opacity:0;transform:translateY(50px);transition:opacity 1s ease-out,transform 1s ease-out}
    .hero-badge{transition-delay:.2s}.hero-title{transition-delay:.4s}.hero-subtitle{transition-delay:.6s}.hero-stats{transition-delay:.8s}.hero-cta{transition-delay:1s}
    .loaded .hero-badge,.loaded .hero-title,.loaded .hero-subtitle,.loaded .hero-stats,.loaded .hero-cta{opacity:1;transform:translateY(0)}
    .gradient-text{background:linear-gradient(135deg,#8b5cf6 0%,#a855f7 50%,#c084fc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .stat-card{min-width:200px}
    .btn-primary{background:linear-gradient(135deg,#8b5cf6 0%,#a855f7 100%);color:#fff;padding:1.25rem 2.5rem;border-radius:9999px;font-size:1.25rem;font-weight:700;transition:.3s}
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(139,92,246,.5)}
    .scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:15}

    /* ----------  CARDS  ---------- */
    .horizontal-gallery{display:flex;flex-direction:column;gap:0}
    .game-tile{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}
    .tile-frame{width:90%;max-width:950px;height:85vh;border-radius:48px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);backdrop-filter:blur(40px);box-shadow:0 60px 120px rgba(0,0,0,.5);transform:rotateY(30deg) scale(.9) translateZ(0);opacity:0;transition:transform 1.2s cubic-bezier(.25,.8,.25,1),opacity 1s ease-out}
    .tile-frame:hover{transform:rotateY(0deg) scale(1.02) translateZ(40px) !important}
    .game-tile.visible .tile-frame{transform:rotateY(0deg) scale(1) translateZ(0);opacity:1}
    .tile-glow{position:absolute;inset:-70px;border-radius:72px;background:conic-gradient(from 0deg,transparent,var(--glow-color),transparent);filter:blur(90px);opacity:0;transition:opacity 1.2s ease-out;z-index:-2}
    .game-tile.visible .tile-glow{opacity:.75}
    .tile-notch{position:absolute;background:inherit;z-index:-1}
    .top-notch{top:-40px;left:50%;transform:translateX(-50%);width:140px;height:80px;border-radius:40px 40px 0 0}
    .side-notch{top:50%;right:-40px;transform:translateY(-50%);width:80px;height:140px;border-radius:0 40px 40px 0}
    .tile-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem;height:100%}
    .tile-icon{width:140px;height:140px;margin-bottom:2rem;border-radius:2.5rem;display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:#fff}
    .tile-title{font-size:clamp(2.8rem,5vw,4rem);font-weight:900;margin-bottom:1rem}
    .tile-desc{font-size:clamp(1.2rem,2.5vw,1.8rem);color:rgba(255,255,255,.85);max-width:600px;margin-bottom:1.5rem}
    .tile-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:50px;font-size:1.1rem;background:rgba(255,255,255,.1);margin-bottom:1.5rem}
    .tile-stats{margin-bottom:2.5rem;font-weight:600;font-size:1.3rem}
    .tile-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1.3rem 3rem;border-radius:9999px;color:#fff;font-weight:700;font-size:1.4rem;transition:.3s}
    .tile-btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 18px 50px rgba(0,0,0,.5)}
    .animate{opacity:0;transform:translateY(40px);transition:opacity .7s ease-out,transform .7s ease-out}
    .game-tile.visible .animate{opacity:1;transform:translateY(0)}
  </style>

  <script>
    /* ----------  HERO / CARD REVEAL  ---------- */
    window.addEventListener('load', () => document.querySelector('.hero-wrapper').classList.add('loaded'));
    function scrollToCards(){
      document.querySelector('.horizontal-gallery').scrollIntoView({behavior:'smooth'});
    }

    /* parallax */
    window.addEventListener('scroll', () => {
      const y = window.pageYOffset;
      document.querySelectorAll('.parallax-layer').forEach(layer=>{
        layer.style.transform = `translateY(${-y * (parseFloat(layer.dataset.speed)||0.5)}px)`;
      });
    });

    /* cards */
    const tiles = document.querySelectorAll('.game-tile');
    function updateCards(){
      const y = window.pageYOffset;
      tiles.forEach((tile, idx)=>{
        const start = (idx + 1) * innerHeight;
        const end   = (idx + 2) * innerHeight;
        const inView = y >= start && y < end;
        tile.classList.toggle('visible', inView);
        tile.querySelectorAll('.animate').forEach(el=>{
          el.style.transitionDelay = inView ? `${el.dataset.delay || 0}ms` : '0ms';
        });
      });
    }
    window.addEventListener('scroll', updateCards);
    window.addEventListener('resize', updateCards);
    updateCards();

    /* counters */
    let countersDone = false;
    window.addEventListener('scroll', ()=>{
      if(window.pageYOffset > 100 && !countersDone){
        countersDone = true;
        document.querySelectorAll('.counter').forEach(el=>{
          const target = +el.dataset.target;
          let cur = 0, inc = target / 60;
          const tick = setInterval(()=>{
            cur += inc;
            if(cur >= target){ el.textContent = target; clearInterval(tick);}
            else el.textContent = Math.floor(cur);
          }, 30);
        });
      }
    });
  </script>
</x-app-layout>