<?php
//Developer: core tech web designTechnology
$page_title = "Home";
$page_description = "Your one-stop platform for virtual numbers, social media growth, airtime, data & bill payments.";
include('include/header.php');
$page_title = $site_data['web_name'] . " - Premium Digital Services";

// Fetch marketplace accounts
try {
    $mp_accounts = $pdo->query("SELECT platform, username, followers, price, profile_url FROM marketplace_accounts WHERE status = 'available' AND approval_status = 'approved' ORDER BY platform, created_at DESC LIMIT 6")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $mp_accounts = [];
}
?>

<!-- Hero Section -->
<header class="relative pt-12 pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-12">
  <div class="flex-1 text-center lg:text-left">
    <!-- Badge -->
    <div class="inline-flex items-center gap-2 bg-primary/10 border border-primary/20 rounded-full px-4 py-1.5 mb-6">
      <span class="flex h-2 w-2 relative">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
      </span>
      <span class="text-xs font-semibold text-slate-800 tracking-wide uppercase">All-in-One Digital Hub</span>
    </div>

    <!-- Heading -->
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-none mb-6 text-slate-900">
      Digital Services<br class="hidden sm:inline">
      <span class="bg-gradient-to-r from-primary via-primary-light to-accent bg-clip-text text-transparent">Simplified & Secured.</span>
    </h1>
    <p class="text-lg text-slate-600 max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed">
      Buy premium accounts, grow your social presence, get virtual numbers, pay bills, and access digital services — all in one platform.
    </p>

    <!-- CTA Buttons -->
    <div class="flex gap-4 justify-center lg:justify-start flex-wrap mb-10">
      <a href="<?php echo $site_data['web_url']; ?>/signup" class="bg-primary hover:bg-primary-light text-white font-bold text-sm px-8 py-4 rounded-xl transition-all shadow-glow-purple flex items-center gap-2">
        <i class="fa-solid fa-bolt"></i> Get Started Free
      </a>
      <a href="<?php echo $site_data['web_url']; ?>/services" class="border-2 border-slate-200 hover:border-primary text-slate-800 hover:text-primary font-bold text-sm px-8 py-4 rounded-xl transition-all flex items-center gap-2">
        <i class="fa-solid fa-shapes"></i> Explore Services
      </a>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-3 gap-4 max-w-md mx-auto lg:mx-0">
      <div class="border-l-2 border-primary pl-3 text-left">
        <p class="text-2xl font-black text-slate-900">10K+</p>
        <p class="text-xs text-slate-400">Active Users</p>
      </div>
      <div class="border-l-2 border-accent pl-3 text-left">
        <p class="text-2xl font-black text-slate-900">50K+</p>
        <p class="text-xs text-slate-400">Orders Completed</p>
      </div>
      <div class="border-l-2 border-primary pl-3 text-left">
        <p class="text-2xl font-black text-slate-900">99.9%</p>
        <p class="text-xs text-slate-400">Uptime</p>
      </div>
    </div>
  </div>

  <!-- Hero Card — Login Form -->
  <div class="flex-1 w-full max-w-md lg:max-w-none relative">
    <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-accent/10 rounded-3xl blur-2xl opacity-70"></div>
    <div class="relative glassmorphism rounded-3xl p-8 shadow-premium">
      <div class="flex items-center gap-3 mb-6">
        <div class="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
          <i class="fa-solid fa-right-to-bracket text-white"></i>
        </div>
        <div>
          <h3 class="text-lg font-bold text-slate-900">Welcome Back</h3>
          <p class="text-xs text-slate-500">Sign in to your account</p>
        </div>
      </div>

      <?php if (isset($_SESSION['login_error'])): ?>
      <div class="bg-red-50 border border-red-200 text-red-700 text-xs font-medium px-4 py-3 rounded-xl mb-4 flex items-center gap-2">
        <i class="fa-solid fa-circle-exclamation"></i>
        <?php echo htmlspecialchars($_SESSION['login_error']); unset($_SESSION['login_error']); ?>
      </div>
      <?php endif; ?>

      <form method="POST" action="<?php echo $site_data['web_url']; ?>/signin" class="space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-600 mb-1.5">Email Address</label>
          <div class="relative">
            <i class="fa-solid fa-envelope absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
            <input type="email" name="LoginForm[email]" required placeholder="you@email.com"
                   class="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none transition-all">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-600 mb-1.5">Password</label>
          <div class="relative">
            <i class="fa-solid fa-lock absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
            <input type="password" name="LoginForm[password]" required placeholder="••••••••"
                   class="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none transition-all">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-600 mb-1.5">
            <i class="fa-solid fa-shield-halved mr-1 text-primary"></i>Solve: 
            <?php
              $h_num1 = rand(1, 12); $h_num2 = rand(1, 8);
              $h_op = rand(0,1) ? '+' : '-';
              if ($h_op === '-' && $h_num1 < $h_num2) { $tmp = $h_num1; $h_num1 = $h_num2; $h_num2 = $tmp; }
              $_SESSION['captcha_result'] = $h_op === '+' ? $h_num1 + $h_num2 : $h_num1 - $h_num2;
              echo "<strong>{$h_num1} {$h_op} {$h_num2} = ?</strong>";
            ?>
          </label>
          <input type="number" name="captcha_answer" required placeholder="Answer"
                 class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-primary focus:ring-2 focus:ring-primary/10 outline-none transition-all">
        </div>
        <div class="flex items-center justify-between">
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="LoginForm[remember]" class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary">
            <span class="text-xs text-slate-600">Remember me</span>
          </label>
          <a href="<?php echo $site_data['web_url']; ?>/resetpassword" class="text-xs font-semibold text-primary hover:underline">Forgot password?</a>
        </div>
        <button type="submit" class="w-full bg-primary hover:bg-primary-light text-white font-bold text-sm py-3.5 rounded-xl transition-all shadow-glow-purple flex items-center justify-center gap-2">
          <i class="fa-solid fa-arrow-right-to-bracket"></i> Sign In
        </button>
      </form>

      <div class="mt-5 text-center">
        <p class="text-xs text-slate-500">Don't have an account? 
          <a href="<?php echo $site_data['web_url']; ?>/signup" class="font-bold text-accent hover:underline">Sign Up Free</a>
        </p>
      </div>
    </div>
  </div>
</header>

<!-- Services Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
  <div class="text-center max-w-3xl mx-auto mb-16">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-4 text-slate-900">Everything You Need, <span class="text-accent italic">One Platform</span></h2>
    <p class="text-slate-600">From social media growth to bill payments, we've got you covered with fast, reliable services.</p>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="glassmorphism rounded-3xl p-6 hover:border-primary/40 transition-all hover:-translate-y-2 group shadow-sm hover:shadow-premium">
      <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all"><i class="fa-solid fa-comment-sms text-2xl"></i></div>
      <h3 class="text-xl font-bold mb-3 text-slate-900 group-hover:text-accent transition-colors">Virtual Numbers</h3>
      <p class="text-slate-600 text-sm leading-relaxed">Get virtual phone numbers for SMS verification on any platform worldwide. 150+ countries available.</p>
    </div>
    <div class="glassmorphism rounded-3xl p-6 hover:border-primary/40 transition-all hover:-translate-y-2 group shadow-sm hover:shadow-premium">
      <div class="w-12 h-12 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-6 group-hover:bg-accent group-hover:text-white transition-all"><i class="fa-solid fa-rocket text-2xl"></i></div>
      <h3 class="text-xl font-bold mb-3 text-slate-900 group-hover:text-accent transition-colors">Social Media Growth</h3>
      <p class="text-slate-600 text-sm leading-relaxed">Boost your presence with real followers, likes, views, and engagement across all platforms.</p>
    </div>
    <div class="glassmorphism rounded-3xl p-6 hover:border-primary/40 transition-all hover:-translate-y-2 group shadow-sm hover:shadow-premium">
      <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all"><i class="fa-solid fa-wifi text-2xl"></i></div>
      <h3 class="text-xl font-bold mb-3 text-slate-900 group-hover:text-accent transition-colors">Data & Airtime</h3>
      <p class="text-slate-600 text-sm leading-relaxed">Purchase high-speed mobile data bundles and airtime at unmatched discounted wholesale rates.</p>
    </div>
    <div class="glassmorphism rounded-3xl p-6 hover:border-primary/40 transition-all hover:-translate-y-2 group shadow-sm hover:shadow-premium">
      <div class="w-12 h-12 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-6 group-hover:bg-accent group-hover:text-white transition-all"><i class="fa-solid fa-bolt-lightning text-2xl"></i></div>
      <h3 class="text-xl font-bold mb-3 text-slate-900 group-hover:text-accent transition-colors">Bills & Utilities</h3>
      <p class="text-slate-600 text-sm leading-relaxed">Pay electricity, cable TV, and broadband bills effortlessly with instant confirmation.</p>
    </div>
    <div class="glassmorphism rounded-3xl p-6 hover:border-primary/40 transition-all hover:-translate-y-2 group shadow-sm hover:shadow-premium">
      <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all"><i class="fa-solid fa-gift text-2xl"></i></div>
      <h3 class="text-xl font-bold mb-3 text-slate-900 group-hover:text-accent transition-colors">Gift Cards</h3>
      <p class="text-slate-600 text-sm leading-relaxed">Buy and sell gift cards from top brands at competitive rates. Instant processing guaranteed.</p>
    </div>
    <div class="glassmorphism rounded-3xl p-6 hover:border-primary/40 transition-all hover:-translate-y-2 group shadow-sm hover:shadow-premium">
      <div class="w-12 h-12 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-6 group-hover:bg-accent group-hover:text-white transition-all"><i class="fa-solid fa-store text-2xl"></i></div>
      <h3 class="text-xl font-bold mb-3 text-slate-900 group-hover:text-accent transition-colors">Account Marketplace</h3>
      <p class="text-slate-600 text-sm leading-relaxed">Buy and sell verified social media accounts. Instagram, TikTok, YouTube, and more.</p>
    </div>
  </div>
</section>

<!-- Marketplace Preview -->
<?php if (!empty($mp_accounts)): ?>
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-slate-50/50 rounded-3xl">
  <div class="text-center max-w-3xl mx-auto mb-12">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-4 text-slate-900">Premium <span class="text-accent italic">Accounts For Sale</span></h2>
    <p class="text-slate-600">Verified social media accounts ready for purchase. Sign up to access the full marketplace.</p>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <?php foreach ($mp_accounts as $mp):
      $mp_icons = ['Instagram'=>'fa-instagram','TikTok'=>'fa-tiktok','Facebook'=>'fa-facebook','Twitter/X'=>'fa-x-twitter','YouTube'=>'fa-youtube','Snapchat'=>'fa-snapchat','Telegram'=>'fa-telegram'];
      $mp_icon = $mp_icons[$mp['platform']] ?? 'fa-globe';
    ?>
    <div class="glassmorphism rounded-2xl p-6 hover:-translate-y-2 transition-all shadow-sm hover:shadow-premium">
      <div class="flex items-center gap-3 mb-4">
        <div class="w-10 h-10 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center">
          <i class="fa-brands <?php echo $mp_icon; ?> text-lg text-primary"></i>
        </div>
        <div class="flex-1 min-w-0">
          <div class="text-sm font-bold text-slate-800 truncate"><?php echo htmlspecialchars($mp['username']); ?></div>
          <div class="text-xs text-slate-400 uppercase"><?php echo htmlspecialchars($mp['platform']); ?></div>
        </div>
      </div>
      <div class="flex items-center justify-between mb-4">
        <span class="text-xs text-slate-500"><i class="fa-solid fa-users text-[10px]"></i> <?php echo number_format($mp['followers']); ?> followers</span>
        <span class="text-lg font-black text-accent">₦<?php echo number_format($mp['price'], 0); ?></span>
      </div>
      <a href="<?php echo $site_data['web_url']; ?>/signup" class="block text-center bg-primary hover:bg-primary-light text-white text-xs font-bold py-2.5 rounded-xl transition-all">Buy Now</a>
    </div>
    <?php endforeach; ?>
  </div>
  <div class="text-center mt-10">
    <a href="<?php echo $site_data['web_url']; ?>/signup" class="bg-primary hover:bg-primary-light text-white font-bold text-sm px-8 py-4 rounded-xl transition-all shadow-glow-purple inline-flex items-center gap-2">
      <i class="fa-solid fa-user-plus"></i> Sign Up for Full Marketplace
    </a>
  </div>
</section>
<?php endif; ?>

<!-- How It Works -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
  <div class="text-center max-w-3xl mx-auto mb-16">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-4 text-slate-900">Get Started in <span class="text-accent italic">Minutes</span></h2>
    <p class="text-slate-600">No complicated setup. Just three simple steps to access all our services.</p>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="glassmorphism p-8 rounded-3xl text-center shadow-sm">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary-light flex items-center justify-center mx-auto mb-6 shadow-glow-purple">
        <span class="text-2xl font-black text-white">1</span>
      </div>
      <h4 class="text-lg font-bold text-slate-900 mb-2">Create Account</h4>
      <p class="text-slate-600 text-sm">Sign up free in seconds with just your email and phone number.</p>
    </div>
    <div class="glassmorphism p-8 rounded-3xl text-center shadow-sm">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-accent to-accent-light flex items-center justify-center mx-auto mb-6 shadow-glow-orange">
        <span class="text-2xl font-black text-white">2</span>
      </div>
      <h4 class="text-lg font-bold text-slate-900 mb-2">Fund Wallet</h4>
      <p class="text-slate-600 text-sm">Add money via bank transfer, card payment, or cryptocurrency.</p>
    </div>
    <div class="glassmorphism p-8 rounded-3xl text-center shadow-sm">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary-light flex items-center justify-center mx-auto mb-6 shadow-glow-purple">
        <span class="text-2xl font-black text-white">3</span>
      </div>
      <h4 class="text-lg font-bold text-slate-900 mb-2">Instant Delivery</h4>
      <p class="text-slate-600 text-sm">Get your order delivered in seconds, 24/7. No waiting around.</p>
    </div>
  </div>
</section>

<!-- Testimonials -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
  <div class="text-center max-w-3xl mx-auto mb-16">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-4 text-slate-900">What Our <span class="text-accent italic">Users Say</span></h2>
    <p class="text-slate-600">Thousands of satisfied customers trust us for their digital needs.</p>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="glassmorphism rounded-2xl p-6 shadow-sm">
      <div class="text-amber-400 text-sm mb-3"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
      <p class="text-slate-600 text-sm leading-relaxed mb-4 italic">"Bought an Instagram account with 50K followers and the delivery was instant. Exactly as described. Highly recommended!"</p>
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold">AO</div>
        <div><div class="text-sm font-bold text-slate-800">Adebayo O.</div><div class="text-xs text-slate-400">Lagos, Nigeria</div></div>
      </div>
    </div>
    <div class="glassmorphism rounded-2xl p-6 shadow-sm">
      <div class="text-amber-400 text-sm mb-3"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
      <p class="text-slate-600 text-sm leading-relaxed mb-4 italic">"The social media boosting service is amazing. Got 10K followers on TikTok within hours. Prices are unbeatable."</p>
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-accent flex items-center justify-center text-white text-xs font-bold">CF</div>
        <div><div class="text-sm font-bold text-slate-800">Chioma F.</div><div class="text-xs text-slate-400">Abuja, Nigeria</div></div>
      </div>
    </div>
    <div class="glassmorphism rounded-2xl p-6 shadow-sm">
      <div class="text-amber-400 text-sm mb-3"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i></div>
      <p class="text-slate-600 text-sm leading-relaxed mb-4 italic">"I use this platform daily for airtime and data. Faster and cheaper than vendors. Virtual numbers feature is a lifesaver."</p>
      <div class="flex items-center gap-3">
        <div class="w-9 h-9 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold">EK</div>
        <div><div class="text-sm font-bold text-slate-800">Emmanuel K.</div><div class="text-xs text-slate-400">Port Harcourt, Nigeria</div></div>
      </div>
    </div>
  </div>
</section>

<!-- CTA Banner -->
<section class="py-10 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
  <div class="relative rounded-3xl overflow-hidden p-8 md:p-12 text-center bg-gradient-to-br from-primary to-primary-dark shadow-glow-purple">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,102,0,0.15),transparent)] pointer-events-none"></div>
    <div class="relative z-10">
      <h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-white">Ready to Get Started?</h2>
      <p class="text-purple-200 max-w-xl mx-auto mb-8 text-sm md:text-base">Join thousands of users growing their online presence and managing digital services effortlessly.</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="<?php echo $site_data['web_url']; ?>/signup" class="bg-white text-primary font-black px-8 py-4 rounded-xl transition-all shadow-md text-sm hover:bg-slate-100">Create Free Account</a>
        <a href="<?php echo $site_data['web_url']; ?>/signin" class="bg-white/10 hover:bg-white/20 border border-white/20 text-white font-bold px-8 py-4 rounded-xl transition-all text-sm">Sign In →</a>
      </div>
    </div>
  </div>
</section>

<?php include('include/footer.php'); ?>
