<?php
/**
 * Landing Page — Redirect by role
 */
session_start();
require_once __DIR__ . '/config/database.php';
require_once __DIR__ . '/includes/auth.php';

if (isLoggedIn()) {
    if ($_SESSION['role'] === 'admin') {
        header('Location: ' . url('/admin/dashboard.php'));
    } else {
        header('Location: ' . url('/member/katalog.php'));
    }
    exit;
}

// Not logged in → show landing

// Get some stats
$totalKelas = $pdo->query("SELECT COUNT(*) FROM kelas WHERE status='aktif'")->fetchColumn();
$totalMember = $pdo->query("SELECT COUNT(*) FROM users WHERE role='member'")->fetchColumn();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FITZONE GYM — Premium Gym Booking System</title>
    <meta name="description" content="FITZONE — Platform booking kelas gym premium. Yoga, Zumba, Muay Thai, dan banyak lagi.">
    <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=Inter:wght@400;700;900&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: { volt: '#D4F900', dark: '#0D0D0D', surface: '#1A1A1A', border: '#2a2a2a', muted: '#888888' },
                    fontFamily: { inter: ['Inter', 'sans-serif'] }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css">
</head>
<body class="bg-dark text-white font-inter">

<!-- Nav -->
<nav class="fixed top-0 left-0 right-0 z-50 bg-dark/80 backdrop-blur-xl border-b border-border">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
        <a href="/" class="text-2xl font-black tracking-tight"><span class="text-white">FIT</span><span class="text-volt">ZONE</span></a>
        <div class="flex items-center gap-3">
            <a href="<?= BASE_URL ?>/login_admin.php" class="px-4 py-2 text-sm text-muted hover:text-white transition-colors">Login Admin</a>
            <a href="<?= BASE_URL ?>/login_member.php" class="px-4 py-2 text-sm text-muted hover:text-white transition-colors">Login Member</a>
            <a href="<?= BASE_URL ?>/register.php" class="px-4 py-2 bg-volt text-dark rounded-lg text-sm font-black hover:shadow-lg hover:shadow-volt/25 transition-all duration-200">Daftar</a>
        </div>
    </div>
</nav>

<div class="h-16"></div>

<!-- Hero -->
<section class="min-h-[85vh] flex items-center justify-center px-4">
    <div class="max-w-4xl mx-auto text-center" style="opacity:0;animation:fadeUp 0.6s ease 0.1s forwards;">
        <!-- Badge -->
        <div class="inline-flex items-center gap-2 bg-surface border border-border rounded-full px-4 py-1.5 mb-8">
            <span class="w-2 h-2 bg-volt rounded-full animate-pulse"></span>
            <span class="text-xs font-bold text-muted tracking-wide uppercase"><?= $totalKelas ?> Kelas Aktif · <?= $totalMember ?> Member</span>
        </div>

        <h1 class="text-5xl sm:text-7xl lg:text-8xl font-black leading-[0.9] mb-6">
            BOOK YOUR<br>
            <span class="text-volt">FITNESS</span><br>
            CLASS
        </h1>

        <p class="text-muted text-lg sm:text-xl max-w-2xl mx-auto mb-10 leading-relaxed">
            Platform booking kelas gym terbaik. Yoga, Zumba, Muay Thai, CrossFit — pilih kelasmu dan mulai transformasi hari ini.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="<?= BASE_URL ?>/register.php" class="btn-volt px-8 py-4 text-base pulse">
                Mulai Sekarang →
            </a>
            <a href="<?= BASE_URL ?>/login_member.php" class="px-8 py-4 border border-border rounded-lg text-sm font-bold text-muted hover:text-white hover:border-volt transition-all duration-200">
                Sudah Punya Akun
            </a>
        </div>
    </div>
</section>

<!-- Features -->
<section class="py-20 px-4" style="opacity:0;animation:fadeUp 0.6s ease 0.3s forwards;">
    <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-surface border border-border rounded-2xl p-8 hover:border-volt transition-colors duration-200">
            <div class="text-4xl mb-4">🏋️</div>
            <h3 class="text-lg font-black mb-2">Beragam Kelas</h3>
            <p class="text-muted text-sm leading-relaxed">Yoga, Zumba, Muay Thai, CrossFit, Pilates, Spinning — pilih sesuai gaya hidupmu.</p>
        </div>
        <div class="bg-surface border border-border rounded-2xl p-8 hover:border-volt transition-colors duration-200">
            <div class="text-4xl mb-4">⚡</div>
            <h3 class="text-lg font-black mb-2">Booking Instan</h3>
            <p class="text-muted text-sm leading-relaxed">Pilih kelas, checkout, upload bukti bayar — semua dalam hitungan menit.</p>
        </div>
        <div class="bg-surface border border-border rounded-2xl p-8 hover:border-volt transition-colors duration-200">
            <div class="text-4xl mb-4">⭐</div>
            <h3 class="text-lg font-black mb-2">Rating & Review</h3>
            <p class="text-muted text-sm leading-relaxed">Berikan rating untuk instruktur dan bantu member lain menemukan kelas terbaik.</p>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="border-t border-border bg-surface/50">
    <div class="max-w-7xl mx-auto px-4 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="text-lg font-black"><span class="text-white">FIT</span><span class="text-volt">ZONE</span></div>
        <p class="text-muted text-sm">&copy; <?= date('Y') ?> FITZONE Gym. All rights reserved.</p>
    </div>
</footer>

<script src="<?= BASE_URL ?>/assets/js/main.js?v=<?= time() ?>"></script>
</body>
</html>
