<!-- HOME PAGE REDESIGN -->
<div class="bg-[#050816] text-white overflow-x-hidden min-h-screen">
  
  <!-- HERO SECTION -->
  <section id="hero" class="relative min-h-screen flex items-center pt-24 pb-12 px-4">
    <!-- Grid Background -->
    <div class="absolute inset-0 z-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.15) 1px, transparent 0); background-size: 32px 32px;"></div>
    <!-- Glow Orbs -->
    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-600/20 rounded-full blur-[120px] pointer-events-none"></div>
    <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-[120px] pointer-events-none"></div>

    <div class="container mx-auto max-w-7xl relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
      <!-- Left: Text & Buttons -->
      <div class="flex flex-col gap-6 text-center lg:text-left reveal">
        <h1 class="text-4xl md:text-6xl font-bold leading-tight">
          <?= get_option('hero_title', 'Automate Your Payment Gateway') ?>
        </h1>
        <p class="text-lg text-gray-400 max-w-2xl mx-auto lg:mx-0">
          <?= get_option('hero_subtext', 'Start accepting payments in minutes.') ?>
        </p>
        <div class="pt-4">
          <?php if (session('uid')): ?>
            <a href="<?= base_url('user/dashboard') ?>" class="inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold transition-all shadow-[0_0_40px_rgba(79,70,229,0.3)] hover:shadow-[0_0_60px_rgba(79,70,229,0.5)]">
              Dashboard <i class="fas fa-arrow-right"></i>
            </a>
          <?php else: ?>
            <a href="#" onclick="openAuth('login');return false" class="inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold transition-all shadow-[0_0_40px_rgba(79,70,229,0.3)] hover:shadow-[0_0_60px_rgba(79,70,229,0.5)]">
              Get Started <i class="fas fa-arrow-right"></i>
            </a>
          <?php endif; ?>
        </div>
      </div>
      
      <!-- Right: Hero Image -->
      <div class="relative w-full aspect-video md:aspect-[4/3] rounded-2xl border border-white/10 shadow-2xl shadow-indigo-500/10 overflow-hidden flex items-center justify-center reveal float" >
        <!-- Mac-like header dots -->
        <div class="absolute top-4 left-4 flex gap-2 z-20">
          <div class="w-3 h-3 rounded-full bg-red-500/80 shadow"></div>
          <div class="w-3 h-3 rounded-full bg-yellow-500/80 shadow"></div>
          <div class="w-3 h-3 rounded-full bg-green-500/80 shadow"></div>
        </div>
        
        <?php if(get_option('hero_image')): ?>
          <img src="<?= base_url(get_option('hero_image')) ?>" alt="Dashboard Preview" class="w-full h-full object-cover">
        <?php else: ?>
          <div class="text-gray-500 font-medium">Upload Hero Image from Admin Panel</div>
        <?php endif; ?>
      </div>
    </div>
  </section>

  <!-- STATS SECTION -->
  <section class="py-10 border-y border-white/5 bg-white/[0.02]">
    <div class="container mx-auto max-w-7xl px-4">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:divide-x md:divide-y-0 divide-y divide-white/5">
        <div class="text-center px-4 py-4 md:py-0 reveal" >
          <div class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Total Users</div>
          <div class="text-3xl font-black text-white"><span class="counter" data-target="<?= $total_users ?? 0 ?>">0</span>+</div>
        </div>
        <div class="text-center px-4 py-4 md:py-0 reveal" >
          <div class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Transactions</div>
          <div class="text-3xl font-black text-white"><span class="counter" data-target="<?= $total_tx ?? 0 ?>">0</span>+</div>
        </div>
        <div class="text-center px-4 py-4 md:py-0 reveal" >
          <div class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Success Rate</div>
          <div class="text-3xl font-black text-green-400"><span class="counter" data-target="99.9" data-decimals="1">0</span>%</div>
        </div>
        <div class="text-center px-4 py-4 md:py-0 reveal" >
          <div class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Security</div>
          <div class="text-3xl font-black text-blue-400"><span class="counter" data-target="100">0</span>%</div>
        </div>
      </div>
    </div>
  </section>

  <!-- SYSTEM ABOUT SECTION -->
  <section class="py-24 px-4 relative">
    <div class="container mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
      <!-- Left: About Image -->
      <div class="order-2 lg:order-1 relative rounded-3xl overflow-hidden border border-white/10 shadow-2xl aspect-square md:aspect-video lg:aspect-square flex items-center justify-center bg-white/5 backdrop-blur-md p-4 reveal">
        <?php if(get_option('about_image')): ?>
          <img src="<?= base_url(get_option('about_image')) ?>" alt="System About" class="w-full h-full object-cover rounded-2xl">
        <?php else: ?>
          <div class="text-gray-500 font-medium">Upload About Image from Admin Panel</div>
        <?php endif; ?>
      </div>
      
      <!-- Right: About Text -->
      <div class="order-1 lg:order-2 flex flex-col gap-6 text-center lg:text-left reveal">
        <div class="inline-block px-4 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-wider w-max mx-auto lg:mx-0 mb-2">System About</div>
        <h2 class="text-3xl md:text-5xl font-bold leading-tight"><?= get_option('about_heading', 'Everything you need to scale your business.') ?></h2>
        <p class="text-lg text-gray-400 leading-relaxed">
          <?= get_option('about_text', 'Our system is designed to provide you with the most secure, reliable, and fast payment gateway integration. Track all your users and transactions seamlessly.') ?>
        </p>
      </div>
    </div>
  </section>

  <!-- SUPPORTED GATEWAYS (WALLETS) MARQUEE -->
  <section class="py-16 bg-white/[0.01] border-y border-white/5 overflow-hidden">
    <div class="container mx-auto max-w-7xl px-4 text-center mb-10 reveal">
      <h3 class="text-xl md:text-2xl font-bold">Supported Gateways & Wallets</h3>
      <p class="text-sm text-gray-400 mt-2">Connect with all major payment providers instantly.</p>
    </div>
    <!-- Marquee Container -->
    <div class="relative w-full group">
      <!-- Gradient masks for smooth fade -->
      <div class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-[#050816] to-transparent z-10 pointer-events-none"></div>
      <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-[#050816] to-transparent z-10 pointer-events-none"></div>
      
      <!-- Scrolling Track -->
      <div class="flex animate-marquee hover:[animation-play-state:paused] gap-8 md:gap-16 items-center px-4 md:px-8 whitespace-nowrap min-w-max">
        <!-- Dynamic Active Wallets -->
        <?php if (!empty($payments)): ?>
          <?php 
          // Duplicate array items to ensure the track is wide enough
          $display_payments = $payments;
          while(count($display_payments) < 16) {
              $display_payments = array_merge($display_payments, $payments);
          }
          $display_payments = array_slice($display_payments, 0, 16);
          ?>
          
          <!-- Block 1 -->
          <div class="flex gap-8 md:gap-16 items-center flex-shrink-0">
          <?php foreach ($display_payments as $payment): 
              $logo = '';
              if (!empty($payment['type'])) {
                  $logo = payment_option($payment['type'], 'logo');
              }
              if (empty($logo)) {
                  $logo = base_url('public/assets/images/placeholder.png');
              }
          ?>
          <div class="flex flex-col items-center gap-3 group/item transition-all hover:-translate-y-1">
            <div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-white border border-white/10 flex items-center justify-center p-3 shadow-lg cursor-pointer">
              <img src="<?= $logo ?>" alt="<?= esc($payment['name']) ?>" class="max-w-full max-h-full object-contain drop-shadow-sm">
            </div>
            <span class="text-xs font-medium text-gray-400 group-hover/item:text-white transition-colors"><?= esc($payment['name']) ?></span>
          </div>
          <?php endforeach; ?>
          </div>
          
          <!-- Block 2 (Exact Duplicate for seamless JS loop) -->
          <div class="flex gap-8 md:gap-16 items-center flex-shrink-0">
          <?php foreach ($display_payments as $payment): 
              $logo = '';
              if (!empty($payment['type'])) {
                  $logo = payment_option($payment['type'], 'logo');
              }
              if (empty($logo)) {
                  $logo = base_url('public/assets/images/placeholder.png');
              }
          ?>
          <div class="flex flex-col items-center gap-3 group/item transition-all hover:-translate-y-1">
            <div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-white border border-white/10 flex items-center justify-center p-3 shadow-lg cursor-pointer">
              <img src="<?= $logo ?>" alt="<?= esc($payment['name']) ?>" class="max-w-full max-h-full object-contain drop-shadow-sm">
            </div>
            <span class="text-xs font-medium text-gray-400 group-hover/item:text-white transition-colors"><?= esc($payment['name']) ?></span>
          </div>
          <?php endforeach; ?>
          </div>
          
        <?php endif; ?>
      </div>
    </div>
  </section>

  <!-- SUPPORTED PLATFORMS MARQUEE -->
  <section class="py-16 overflow-hidden">
    <div class="container mx-auto max-w-7xl px-4 text-center mb-10 reveal">
      <h3 class="text-xl md:text-2xl font-bold">Supported Platforms</h3>
      <p class="text-sm text-gray-400 mt-2">Integrate our system anywhere you need.</p>
    </div>
    
    <!-- Marquee Container -->
    <div class="relative w-full flex overflow-x-hidden group">
      <!-- Gradient masks for smooth fade -->
      <div class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-[#050816] to-transparent z-10"></div>
      <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-[#050816] to-transparent z-10"></div>
      
      <!-- Scrolling Track (Reverse direction) -->
      <div class="flex animate-marquee-reverse gap-8 md:gap-16 items-center px-4 md:px-8 whitespace-nowrap min-w-max hover:[animation-play-state:paused]">
        <!-- Demo Platforms (Duplicated to ensure seamless loop) -->
        <?php 
        $platforms_setting = get_option('supported_platforms', 'Wordpress:wordpress, Magento:magento, Shopify:shopify, React:react');
        $platforms_raw = array_filter(array_map('trim', explode(',', $platforms_setting)));
        $platforms = [];
        foreach($platforms_raw as $raw) {
            if (strpos($raw, ':') !== false) {
                list($name, $icon) = explode(':', $raw, 2);
                $platforms[] = ['name' => trim($name), 'icon' => trim($icon)];
            } else {
                $platforms[] = ['name' => ucfirst($raw), 'icon' => strtolower($raw)];
            }
        }
        if (empty($platforms)) {
            $platforms = [
                ['name' => 'Wordpress', 'icon' => 'wordpress'], 
                ['name' => 'Magento', 'icon' => 'magento'], 
                ['name' => 'Shopify', 'icon' => 'shopify'], 
                ['name' => 'React', 'icon' => 'react']
            ];
        }
        $display_platforms = $platforms;
        while(count($display_platforms) < 16) {
            $display_platforms = array_merge($display_platforms, $platforms);
        }
        $display_platforms = array_slice($display_platforms, 0, 16);
        ?>
        <?php foreach($display_platforms as $platform): 
            $icon = str_replace('\\', '/', $platform['icon']);
            $isUrl = (strpos($icon, 'http') === 0 || strpos($icon, '/') === 0 || strpos($icon, '.') !== false);
            if ($isUrl && strpos($icon, 'http') !== 0) {
                // Determine correct absolute path dynamically
                $base_path = rtrim(dirname($_SERVER['SCRIPT_NAME']), '/\\');
                $icon = $base_path . '/' . ltrim($icon, '/');
            }
        ?>
        <div class="flex flex-col items-center gap-3 group/item transition-all opacity-80 hover:opacity-100">
          <div class="w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-[#131b2e] border border-white/20 shadow-lg flex items-center justify-center p-4">
            <?php if ($isUrl): ?>
                <img src="<?= esc($icon) ?>" class="max-w-full max-h-full object-contain group-hover/item:scale-110 transition-all" alt="<?= esc($platform['name']) ?>">
            <?php else: ?>
                <i class="fab fa-<?= esc($platform['icon']) ?> text-4xl text-gray-200 group-hover/item:text-white group-hover/item:scale-110 transition-all"></i>
            <?php endif; ?>
          </div>
          <span class="text-xs font-semibold text-gray-300 group-hover/item:text-white transition-colors capitalize"><?= esc($platform['name']) ?></span>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <!-- CUSTOMER REVIEWS -->
  <section class="py-24 px-4 bg-white/[0.01] border-y border-white/5 overflow-hidden">
    <div class="container mx-auto max-w-7xl text-center mb-16 reveal">
      <h2 class="text-3xl md:text-4xl font-bold">What Our Customers Say</h2>
      <p class="text-gray-400 mt-4">Trusted by thousands of businesses worldwide.</p>
    </div>
    
    <!-- Marquee Container -->
    <div class="relative w-full flex overflow-x-hidden group">
      <div class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-[#050816] to-transparent z-10"></div>
      <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-[#050816] to-transparent z-10"></div>
      
      <!-- Scrolling Track -->
      <div class="flex animate-marquee-slow gap-6 px-4 whitespace-nowrap min-w-max hover:[animation-play-state:paused] pb-4">
        <!-- Review Cards -->
        <?php 
        $display_reviews = !empty($reviews) ? $reviews : [
            ['name' => 'Alex M.', 'rating' => 5, 'comment' => 'Absolutely fantastic service. Integration was seamless, and the support team was incredibly helpful.', 'avatar' => null],
            ['name' => 'Sarah J.', 'rating' => 5, 'comment' => 'Best payment gateway experience so far. Highly recommend to any business.', 'avatar' => null],
            ['name' => 'David K.', 'rating' => 4, 'comment' => 'Very reliable and fast. Had a minor issue initially but support fixed it immediately.', 'avatar' => null],
            ['name' => 'Emily R.', 'rating' => 5, 'comment' => 'Secure and easy to use. Track all my users and transactions without a hassle.', 'avatar' => null]
        ];
        // Duplicate items if too few, to ensure smooth infinite marquee scroll
        $scroll_reviews = $display_reviews;
        while(count($scroll_reviews) < 8) {
            $scroll_reviews = array_merge($scroll_reviews, $display_reviews);
        }
        $scroll_reviews = array_slice($scroll_reviews, 0, 16);
        ?>
        <?php foreach($scroll_reviews as $rev): 
            $rating = isset($rev['rating']) ? (int)$rev['rating'] : 5;
            $name = $rev['name'] ?? 'Customer';
            $comment = $rev['comment'] ?? '';
            $initial = strtoupper(substr($name, 0, 1));
        ?>
        <div class="w-80 md:w-96 rounded-2xl bg-[#0a0f1c] border border-white/10 p-6 flex flex-col gap-4 whitespace-normal shadow-lg transition-transform hover:-translate-y-2">
          <div class="flex items-center gap-1 text-yellow-400 text-sm">
            <?php for($r=0; $r<$rating; $r++): ?><i class="fas fa-star"></i><?php endfor; ?>
            <?php for($r=$rating; $r<5; $r++): ?><i class="far fa-star"></i><?php endfor; ?>
          </div>
          <p class="text-gray-300 italic text-sm leading-relaxed">
            "<?= esc($comment) ?>"
          </p>
          <div class="mt-auto pt-4 border-t border-white/5 flex items-center gap-3">
              <?php if(!empty($rev['avatar'])): 
                $base_path = rtrim(dirname($_SERVER['SCRIPT_NAME']), '/\\');
                $avatar_url = (strpos($rev['avatar'], 'http') === 0) ? $rev['avatar'] : $base_path . '/' . ltrim($rev['avatar'], '/');
              ?>
                <img src="<?= esc($avatar_url) ?>" alt="<?= esc($name) ?>" class="w-10 h-10 rounded-full object-cover border border-white/10">
              <?php else: ?>
                <div class="w-10 h-10 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400 font-bold">
                <?= esc($initial) ?>
              </div>
            <?php endif; ?>
            <div>
              <div class="text-sm font-bold text-white"><?= esc($name) ?></div>
              <div class="text-xs text-gray-500">Verified User</div>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <!-- FAQS -->
  <section class="py-24 px-4">
    <div class="container mx-auto max-w-3xl">
      <div class="text-center mb-16 reveal">
        <h2 class="text-3xl md:text-4xl font-bold">Frequently Asked Questions</h2>
        <p class="text-gray-400 mt-4">Find answers to common questions about our platform.</p>
      </div>
      
      <div class="flex flex-col gap-4">
        <?php if(!empty($faqs)): foreach($faqs as $i => $faq): ?>
        <div class="fq rounded-2xl border border-white/10 bg-white/5 overflow-hidden transition-all duration-300 reveal" >
          <button class="w-full px-6 py-5 text-left flex justify-between items-center text-white hover:bg-white/5 transition-colors focus:outline-none" onclick="toggleFaq(this)">
            <span class="font-medium pr-8"><?= esc($faq['question']) ?></span>
            <i class="fas fa-chevron-down text-gray-500 transition-transform duration-300 fq-icon"></i>
          </button>
            <div class="fq-a max-h-0 overflow-hidden transition-all duration-300 px-6 text-gray-400">
              <div class="pb-5 pt-2 prose prose-invert max-w-none"><?= $faq['answer'] ?></div>
            </div>
        </div>
        <?php endforeach; else: ?>
          <!-- Dummy FAQs -->
          <?php for($i=1; $i<=4; $i++): ?>
          <div class="fq rounded-2xl border border-white/10 bg-[#0a0f1c] overflow-hidden transition-all duration-300">
            <button class="w-full px-6 py-5 text-left flex justify-between items-center text-white hover:bg-white/5 transition-colors focus:outline-none" onclick="toggleFaq(this)">
              <span class="font-medium pr-8">How long does integration take?</span>
              <i class="fas fa-chevron-down text-gray-500 transition-transform duration-300 fq-icon"></i>
            </button>
            <div class="fq-a max-h-0 overflow-hidden transition-all duration-300 px-6 text-gray-400">
              <div class="pb-5 pt-2">Our API is designed for quick integration. Most developers can complete the setup within a few hours.</div>
            </div>
          </div>
          <?php endfor; ?>
        <?php endif; ?>
      </div>
    </div>
  </section>

</div>

<style>
/* Custom animations for tailwind */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes marqueeReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-marquee-slow { animation: marquee 45s linear infinite; }
.animate-marquee-reverse { animation: marqueeReverse 30s linear infinite; }

/* FAQ Toggle Styles */
.fq.active .fq-icon { transform: rotate(180deg); color: white; }
.fq.active .fq-a { max-height: 500px; }
.fq.active { border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.05); }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {

    const counters = document.querySelectorAll('.counter');
    
    const animateCounter = (counter) => {
        const target = parseFloat(counter.getAttribute('data-target'));
        const decimals = parseInt(counter.getAttribute('data-decimals') || 0);
        const duration = 2000; 
        const frameDuration = 1000 / 60;
        const totalFrames = Math.round(duration / frameDuration);
        let frame = 0;
        
        const formatNumber = (num) => {
            if (decimals > 0) return num.toFixed(decimals);
            return Math.floor(num).toLocaleString();
        };

        const counterInterval = setInterval(() => {
            frame++;
            const progress = frame / totalFrames;
            const easeOutQuart = 1 - Math.pow(1 - progress, 4);
            const currentCount = target * easeOutQuart;
            
            counter.innerText = formatNumber(currentCount);
            
            if (frame === totalFrames) {
                counter.innerText = formatNumber(target);
                clearInterval(counterInterval);
            }
        }, frameDuration);
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounter(entry.target);
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    counters.forEach(counter => {
        observer.observe(counter);
    });
});
</script>
