<?php
    include 'header.php';
?>

    <main class="flex-grow-1" style="padding-top: 80px;">


        <style>
            .hero-modern {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                position: relative;
                overflow: hidden;
                min-height: 80vh;
                display: flex;
                align-items: center;
            }

            .hero-modern::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.1"><circle cx="12" cy="12" r="2"/><circle cx="48" cy="12" r="2"/><circle cx="12" cy="48" r="2"/><circle cx="48" cy="48" r="2"/></g></g></svg>');
            }

            .hero-content {
                position: relative;
                z-index: 2;
            }

            .celebrity-card {
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                border: none;
                border-radius: 20px;
                overflow: hidden;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(20px);
            }

            .celebrity-card:hover {
                transform: translateY(-12px) scale(1.02);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            }

            .celebrity-card img {
                transition: transform 0.4s ease;
            }

            .celebrity-card:hover img {
                transform: scale(1.1);
            }

            .feature-card {
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(20px);
                border: none;
                border-radius: 20px;
                padding: 2rem;
                text-align: center;
                transition: all 0.3s ease;
                height: 100%;
            }

            .feature-card:hover {
                transform: translateY(-10px);
                box-shadow: var(--shadow-lg);
            }

            .feature-icon {
                width: 80px;
                height: 80px;
                background: var(--primary-gradient);
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 1.5rem;
                color: white;
                font-size: 2rem;
            }
        </style>

        <!-- Hero Section -->
        <section class="hero-modern">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 hero-content">
                        <h1 class="display-3 fw-bold text-white mb-4 fade-in-up">
                            Connect with Your
                            <span class="d-block"
                                style="background: linear-gradient(45deg, #fff, #f0f8ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Favorite
                                Stars</span>
                        </h1>
                        <p class="fs-5 text-white opacity-90 mb-5 fade-in-up" style="animation-delay: 0.2s;">
                            Get exclusive fan cards, book personal meetups, and hire celebrities for your special
                            events. Experience the magic of celebrity connections like never before.
                        </p>
                        <div class="d-flex flex-wrap gap-3 fade-in-up" style="animation-delay: 0.4s;">
                            <a href="celebrities.php"
                                class="btn btn-light btn-lg btn-modern px-4 py-3">
                                <i class="fas fa-star me-2"></i>Explore Celebrities
                            </a>
                            <a href="register.php"
                                class="btn btn-secondary-modern btn-lg px-4 py-3">
                                <i class="fas fa-rocket me-2"></i>Get Started Free
                            </a>
                        </div>

                        <!-- Stats -->
                        <div class="row mt-5 fade-in-up" style="animation-delay: 0.6s;">
                            <div class="col-4">
                                <div class="text-center">
                                    <h3 class="text-white fw-bold mb-0">8+</h3>
                                    <small class="text-white opacity-75">Celebrities</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center">
                                    <h3 class="text-white fw-bold mb-0">10K+</h3>
                                    <small class="text-white opacity-75">Happy Fans</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center">
                                    <h3 class="text-white fw-bold mb-0">5K+</h3>
                                    <small class="text-white opacity-75">Events Hosted</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 fade-in-up" style="animation-delay: 0.8s;">
                        <div class="position-relative">
                            <div class="glass-card p-4">
                                <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
                                    alt="Celebrity Management" class="img-fluid rounded-3 shadow-lg">
                            </div>
                            <!-- Floating Elements -->
                            <div class="position-absolute top-0 end-0 translate-middle">
                                <div class="bg-warning rounded-circle p-3 shadow-lg">
                                    <i class="fas fa-star text-white fa-lg"></i>
                                </div>
                            </div>
                            <div class="position-absolute bottom-0 start-0 translate-middle">
                                <div class="bg-success rounded-circle p-3 shadow-lg">
                                    <i class="fas fa-heart text-white fa-lg"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="py-5 my-5">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold mb-3">Why Choose Our Platform?</h2>
                    <p class="fs-5 text-muted">Experience celebrity connections like never before with our premium
                        features</p>
                </div>

                <div class="row g-4">
                    <div class="col-lg-4 col-md-6">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-id-card"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Exclusive Fan Cards</h5>
                            <p class="text-muted">Get personalized fan cards with your name, just like premium ATM
                                cards. Choose from Regular, VIP, and VVIP tiers with exclusive benefits.</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-handshake"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Personal Meetups</h5>
                            <p class="text-muted">Book one-on-one meetings with your favorite celebrities. Create
                                unforgettable memories with intimate conversations and photo opportunities.</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Event Bookings</h5>
                            <p class="text-muted">Hire celebrities for your special events, parties, and corporate
                                functions. Professional service with flexible duration options.</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fab fa-bitcoin"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Crypto Payments</h5>
                            <p class="text-muted">Pay securely with Bitcoin, Ethereum, or traditional payment methods.
                                Real-time conversion rates and transparent pricing.</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Secure & Verified</h5>
                            <p class="text-muted">All celebrities are verified professionals. Your payments and personal
                                information are protected with enterprise-grade security.</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="feature-card">
                            <div class="feature-icon">
                                <i class="fas fa-headset"></i>
                            </div>
                            <h5 class="fw-bold mb-3">24/7 Support</h5>
                            <p class="text-muted">Our dedicated support team is always here to help you with bookings,
                                payments, and any questions about your celebrity experiences.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Featured Celebrities -->
        <section class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold mb-3">Featured Celebrities</h2>
                    <p class="fs-5 text-muted">Connect with top stars from entertainment, sports, and social media</p>
                </div>

                <div class="row g-4">
                    	<?php 
    						$sql= "SELECT * FROM  celebrities ORDER BY id DESC";
    						  $result = mysqli_query($link,$sql);
    						  if(mysqli_num_rows($result) > 0){
    							  while($row = mysqli_fetch_assoc($result)){   
    	  			    ?>
                    <div class="col-lg-3 col-md-6">
                        <div class="celebrity-card card-modern h-100">
                            <div class="position-relative overflow-hidden">
                                <div class="position-relative" style="height: 280px; background: #f5f5f5;">
                                    <img src="uploads/celebrities/<?php echo $row['image'] ?>"
                                        class="card-img-top position-absolute top-0 start-0 w-100 h-100"
                                        alt="Stephen Amell" style="object-fit: cover;"
                                        onerror="this.onerror=null; this.src='';">
                                </div>

                                <!-- Status Badge -->
                                <div class="position-absolute top-0 end-0 m-3">
                                    <span class="badge bg-success rounded-pill px-3 py-2">
                                        <i class="fas fa-circle fa-xs me-1"></i>Available
                                    </span>
                                </div>

                                <!-- Quick Actions Overlay -->
                                <div
                                    class="position-absolute bottom-0 start-0 end-0 p-3 bg-gradient-dark bg-opacity-75">
                                    <div class="d-flex gap-2 justify-content-center">
                                        <small class="badge bg-light text-dark rounded-pill">
                                            <i class="fas fa-handshake fa-xs me-1"></i>Meetups
                                        </small>
                                        <small class="badge bg-light text-dark rounded-pill">
                                            <i class="fas fa-calendar fa-xs me-1"></i>Events
                                        </small>
                                        <small class="badge bg-light text-dark rounded-pill">
                                            <i class="fas fa-id-card fa-xs me-1"></i>Fan Cards
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body text-center p-4">
                                <h5 class="card-title fw-bold mb-2"><?php echo $row['name'] ?></h5>
                                <p class="text-muted mb-3"><?php echo $row['category'] ?></p>

                                <div class="row text-center mb-4">
                                    <div class="col">
                                        <div class="small text-muted">Meetup from</div>
                                        <div class="fw-bold text-primary">$<?php echo number_format($row['personal_meetup_fee'], 2) ?></div>
                                    </div>
                                    <div class="col">
                                        <div class="small text-muted">Events from</div>
                                        <div class="fw-bold text-success">$<?php echo number_format($row['event_booking_fee'], 2) ?></div>
                                    </div>
                                </div>

                                <a href="detailscelebrities.php?id=<?php echo $row['id'] ?>">
                                    <i class="fas fa-arrow-right me-2"></i>View Profile
                                </a>
                            </div>
                        </div>
                    </div>
                    <?php }} ?>
                    
                </div>

                <div class="text-center mt-5">
                    <a href="celebrities.php"
                        class="btn btn-outline-primary btn-lg btn-modern px-5">
                        <i class="fas fa-users me-2"></i>View All Celebrities
                    </a>
                </div>
            </div>
        </section>

        <!-- How It Works -->
        <section class="py-5 my-5">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold mb-3">How It Works</h2>
                    <p class="fs-5 text-muted">Get started with celebrity connections in three simple steps</p>
                </div>

                <div class="row g-4 align-items-center">
                    <div class="col-lg-4 text-center">
                        <div class="glass-card mb-4 d-inline-block p-4">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3"
                                style="width: 80px; height: 80px;">
                                <span class="text-white fw-bold fs-3">1</span>
                            </div>
                            <h5 class="fw-bold mb-3">Browse & Choose</h5>
                            <p class="text-muted">Explore our verified celebrity profiles and find your favorites. Check
                                their availability for meetups, events, or fan cards.</p>
                        </div>
                    </div>

                    <div class="col-lg-4 text-center">
                        <div class="glass-card mb-4 d-inline-block p-4">
                            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3"
                                style="width: 80px; height: 80px;">
                                <span class="text-white fw-bold fs-3">2</span>
                            </div>
                            <h5 class="fw-bold mb-3">Book & Pay</h5>
                            <p class="text-muted">Select your preferred service and make secure payments using crypto,
                                bank transfer, or manual payment upload.</p>
                        </div>
                    </div>

                    <div class="col-lg-4 text-center">
                        <div class="glass-card mb-4 d-inline-block p-4">
                            <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3"
                                style="width: 80px; height: 80px;">
                                <span class="text-white fw-bold fs-3">3</span>
                            </div>
                            <h5 class="fw-bold mb-3">Experience Magic</h5>
                            <p class="text-muted">Enjoy your personalized fan card, attend your meetup, or host an
                                unforgettable event with your chosen celebrity.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="py-5 hero-modern">
            <div class="container text-center">
                <div class="glass-card p-5 mx-auto" style="max-width: 600px;">
                    <h2 class="display-6 fw-bold text-white mb-4">Ready to Meet Your Heroes?</h2>
                    <p class="fs-5 text-white opacity-90 mb-4">Join thousands of fans who have already experienced the
                        magic of celebrity connections.</p>

                    <div class="d-flex flex-wrap gap-3 justify-content-center">
                        <a href="register.php" class="btn btn-light btn-lg btn-modern px-5">
                            <i class="fas fa-rocket me-2"></i>Start Your Journey
                        </a>
                        <a href="celebrities.php"
                            class="btn btn-secondary-modern btn-lg px-5">
                            <i class="fas fa-eye me-2"></i>Browse First
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>

<?php
    include 'footer.php';
?>