<?php
include 'header.php';

if (isset($_GET['id'])){
    $celeb = $_GET['id'];

    $select = mysqli_query( $link, "SELECT * FROM  celebrities  WHERE id = '$celeb' " );
    if ( mysqli_num_rows( $select ) > 0 ) {
        $row = mysqli_fetch_assoc( $select );
        $celebrities_name = $row['name'];	
    } else {
        echo "<script>window.location.href = 'index.php'; </script>";
    }
} else {
    // echo "<script>window.location.href = 'index.php'; </script>";
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $celebrity_id = text_input($_POST['celebrity_id']);
    $amount = text_input($_POST['amount']);
    $fan_card_id = text_input($_POST['fan_card_id']);
    $payment_method = text_input($_POST['payment_method']);
    $celebrities = $celebrities_name;

    $_SESSION['payment'] = [
        "celebrity_id" => $celebrity_id,
        "amount" => $amount,
        "fan_card_id" => $fan_card_id,
        "payment_method" => $payment_method,
         "celebrities_name" => $celebrities
    ];
    echo "<script> window.location.href = 'payment.php'; </script>";

}

?>

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


    <style>
        .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
            border-radius: 0 0 30px 30px;
        }

        .profile-header::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>');
        }

        .profile-image {
            width: 200px;
            height: 200px;
            border-radius: 25px;
            object-fit: cover;
            border: 5px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }

        .service-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.3s ease;
            height: 100%;
        }

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

        .gallery-item {
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .gallery-item:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-md);
        }

        .gallery-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gallery-item:hover::after {
            opacity: 1;
            content: '🔍';
            font-size: 2rem;
        }

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

        .stats-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .action-buttons .btn {
            padding: 1rem 2rem;
            border-radius: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .floating-action {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }

        .floating-action .btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

        .testimonial-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .fan-card-preview {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            color: white;
            padding: 1.5rem;
            margin: 1rem 0;
            position: relative;
            overflow: hidden;
        }

        .fan-card-preview.vip {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .fan-card-preview.vvip {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: #2d3748;
        }

        .booking-form {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 2rem;
        }

        .price-calculator {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border-radius: 15px;
            padding: 1.5rem;
            margin: 1rem 0;
        }
    </style>

    <div class="container-fluid px-0 mb-5">
        <!-- Profile Header -->
        <section class="profile-header py-5">
            <div class="container position-relative" style="z-index: 2;">
                <div class="row align-items-center">
                    <div class="col-lg-4 text-center mb-4 mb-lg-0">
                        <img src="uploads/celebrities/<?php echo $row['image'] ?>"
                            alt="Pedro Pascal" class="profile-image mx-auto d-block" width="300" height="300">

                        <!-- Social Media Links (if available) -->
                        <div class="mt-4">
                            <a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="btn btn-outline-light btn-sm rounded-circle me-2">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="btn btn-outline-light btn-sm rounded-circle">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-8 text-white">
                        <div class="d-flex align-items-center flex-wrap mb-3">
                            <h1 class="display-4 fw-bold mb-0 me-3"><?php echo $row['name'] ?></h1>
                            <span class="badge bg-success rounded-pill px-3 py-2 fs-6">
                                <i class="fas fa-circle fa-xs me-1"></i>Available Now
                            </span>
                            <span class="badge bg-warning rounded-pill px-3 py-2 fs-6 ms-2">
                                <i class="fas fa-star fa-xs me-1"></i>Verified
                            </span>
                        </div>

                        <p class="fs-4 mb-4 opacity-90"><?php echo $row['specialties'] ?></p>

                        <!-- Stats Row -->
                        <div class="row mb-4">
                            <div class="col-md-3 col-6 mb-3">
                                <div class="stats-card">
                                    <h4 class="text-primary fw-bold mb-1"><?php echo $row['rating'] ?></h4>
                                    <small class="text-muted">Rating</small>
                                    <div class="text-warning mt-1">
                                        <i class="fas fa-star fa-sm"></i>
                                        <i class="fas fa-star fa-sm"></i>
                                        <i class="fas fa-star fa-sm"></i>
                                        <i class="fas fa-star fa-sm"></i>
                                        <i class="fas fa-star fa-sm"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="stats-card">
                                    <h4 class="text-success fw-bold mb-1"><?php echo $row['happy_fans'] ?>+</h4>
                                    <small class="text-muted">Happy Fans</small>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="stats-card">
                                    <h4 class="text-info fw-bold mb-1"><?php echo $row['events_done'] ?>+</h4>
                                    <small class="text-muted">Events Done</small>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="stats-card">
                                    <h4 class="text-warning fw-bold mb-1"><?php echo $row['response_rate'] ?>%</h4>
                                    <small class="text-muted">Response Rate</small>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Action Buttons -->
                        <div class="action-buttons d-flex flex-wrap gap-3">
                            <a href="#fan-cards-section" class="btn btn-light btn-modern">
                                <i class="fas fa-id-card me-2"></i>Get Fan Card
                            </a>

                            <a href="#meetup-section" class="btn btn-success btn-modern">
                                <i class="fas fa-handshake me-2"></i>Book Meetup
                                <small class="d-block">From $<?php echo number_format($row['personal_meetup_fee'], 2) ?></small>
                            </a>

                            <a href="#event-section" class="btn btn-info btn-modern">
                                <i class="fas fa-calendar-alt me-2"></i>Book Event
                                <small class="d-block">From $<?php echo number_format($row['event_booking_fee'], 2) ?></small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="container py-5">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Biography Section -->
                <div class="card-modern mb-5">
                    <div class="card-body p-4">
                        <h3 class="fw-bold mb-4">
                            <i class="fas fa-user-circle text-primary me-2"></i>About <?php echo $row['name'] ?>
                        </h3>
                        <p class="fs-6 lh-lg text-muted"><?php echo $row['about'] ?></p>

                        <!-- Celebrity Highlights -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <h6 class="fw-bold text-primary mb-3">Specialties</h6>
                                <ul class="list-unstyled">
                                    <li class="mb-2">
                                        <i class="fas fa-check text-success me-2"></i><?php echo $row['specialties'] ?>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="fw-bold text-primary mb-3">Languages</h6>
                                <div class="d-flex flex-wrap gap-2 mb-3">
                                    <span class="badge bg-light text-dark px-3 py-2"><?php echo $row['languages'] ?></span>
                                </div>

                                <h6 class="fw-bold text-primary mb-3">Response Time</h6>
                                <p class="text-muted mb-0">
                                    Usually response in <?php echo $row['response_time'] ?>mins
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fan Cards Section -->
                <div id="fan-cards-section" class="mb-5">
                    <h3 class="fw-bold mb-4">
                        <i class="fas fa-id-card text-primary me-2"></i>Exclusive Fan Cards
                    </h3>

                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="fan-card-preview regular">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <h5 class="fw-bold mb-1">Regular Fan Card</h5>
                                        <span class="badge bg-white bg-opacity-20 text-white px-3 py-1">
                                            REGULAR
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h4 class="fw-bold mb-0">$<?php echo number_format($row['regular_fee'], 2) ?></h4>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <h6 class="fw-bold"><?php echo $row['name'] ?></h6>
                                    <p class="mb-1 opacity-75"><?php echo $row['specialties'] ?></p>
                                </div>

                                <div class="mb-3">
                                    <small class="opacity-75">Benefits:</small>
                                    <p class="mb-0 small">Basic fan card with celebrity name and your name</p>
                                </div>

                                <form action="" method="POST"
                                    class="mt-3">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="11">
                                    <input type="hidden" name="fan_card_id" value="1">
                                    <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                    <button type="button" class="btn btn-light btn-sm w-100" data-bs-toggle="modal"
                                        data-bs-target="#paymentModal1">
                                        <i class="fas fa-shopping-cart me-2"></i>Purchase Now
                                    </button>
                                    <?php } ?>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="fan-card-preview vvip">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <h5 class="fw-bold mb-1">VVIP Fan Card</h5>
                                        <span class="badge bg-white bg-opacity-20 text-white px-3 py-1">
                                            VVIP
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h4 class="fw-bold mb-0">$<?php echo number_format($row['vvip_fee'], 2) ?></h4>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <h6 class="fw-bold"><?php echo $row['name'] ?></h6>
                                    <p class="mb-1 opacity-75"><?php echo $row['specialties'] ?></p>
                                </div>

                                <div class="mb-3">
                                    <small class="opacity-75">Benefits:</small>
                                    <p class="mb-0 small">Ultra-premium fan card with golden design and maximum
                                        exclusive benefits</p>
                                </div>

                                <form action="" method="POST"
                                    class="mt-3">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="11">
                                    <input type="hidden" name="fan_card_id" value="2">
                                    <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                    <button type="button" class="btn btn-light btn-sm w-100" data-bs-toggle="modal"
                                        data-bs-target="#paymentModal2">
                                        <i class="fas fa-shopping-cart me-2"></i>Purchase Now
                                    </button>
                                    
                                    <?php } ?>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="fan-card-preview vip">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <h5 class="fw-bold mb-1">gold</h5>
                                        <span class="badge bg-white bg-opacity-20 text-white px-3 py-1">
                                            VIP
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h4 class="fw-bold mb-0">$<?php echo number_format($row['gold_fee'], 2) ?></h4>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <h6 class="fw-bold"><?php echo $row['name'] ?></h6>
                                    <p class="mb-1 opacity-75"><?php echo $row['specialties'] ?></p>
                                </div>

                                <div class="mb-3">
                                    <small class="opacity-75">Benefits:</small>
                                    <p class="mb-0 small">all shows entrance</p>
                                </div>

                                <form action="" method="POST"
                                    class="mt-3">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="11">
                                    <input type="hidden" name="fan_card_id" value="3">
                                    <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                    <button type="button" class="btn btn-light btn-sm w-100" data-bs-toggle="modal"
                                        data-bs-target="#paymentModal3">
                                        <i class="fas fa-shopping-cart me-2"></i>Purchase Now
                                    </button>
                                    
                                    <?php } ?>
                                </form>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="fan-card-preview vip">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <h5 class="fw-bold mb-1">VIP Royal Card</h5>
                                        <span class="badge bg-white bg-opacity-20 text-white px-3 py-1">
                                            VIP
                                        </span>
                                    </div>
                                    <div class="text-end">
                                        <h4 class="fw-bold mb-0">$<?php echo number_format($row['vip_royal_fee'], 2) ?></h4>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <h6 class="fw-bold"><?php echo $row['name'] ?></h6>
                                    <p class="mb-1 opacity-75"><?php echo $row['specialties'] ?></p>
                                </div>

                                <div class="mb-3">
                                    <small class="opacity-75">Benefits:</small>
                                    <p class="mb-0 small">Meet ups
                                        Tourism</p>
                                </div>

                                <form action="" method="POST"
                                    class="mt-3">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="11">
                                    <input type="hidden" name="fan_card_id" value="4">
                                    <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                    <button type="button" class="btn btn-light btn-sm w-100" data-bs-toggle="modal"
                                        data-bs-target="#paymentModal4">
                                        <i class="fas fa-shopping-cart me-2"></i>Purchase Now
                                    </button>
                                    <?php } ?>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Meetup Section -->
                <div id="meetup-section" class="mb-5">
                    <h3 class="fw-bold mb-4">
                        <i class="fas fa-handshake text-success me-2"></i>Personal Meetup Experience
                    </h3>

                    <div class="service-card">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="fw-bold text-success mb-3">What's Included</h5>
                                <ul class="list-unstyled">
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>30-45 minute personal
                                        meeting</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Professional photo
                                        session</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Autographed
                                        memorabilia</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Personal conversation
                                    </li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Digital photo package
                                    </li>
                                </ul>
                            </div>

                            <div class="col-md-6">
                                <div class="price-calculator">
                                    <h6 class="fw-bold mb-3">Pricing</h6>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Base Price:</span>
                                        <span class="fw-bold">$<?php echo number_format($row['regular_fee'], 2) ?></span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Duration:</span>
                                        <span>30-45 minutes</span>
                                    </div>
                                    <hr>
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold">Total:</span>
                                        <span class="fw-bold text-success fs-5">$<?php echo number_format($row['regular_fee'], 2) ?></span>
                                    </div>
                                </div>
                                                 <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                <a href="bookings_meetup.php?celebrities=<?php echo $celeb ?>"
                                    class="btn btn-success btn-modern w-100 mt-3">
                                    <i class="fas fa-calendar-plus me-2"></i>Book Meetup Now
                                </a>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Event Booking Section -->
                <div id="event-section" class="mb-5">
                    <h3 class="fw-bold mb-4">
                        <i class="fas fa-calendar-alt text-info me-2"></i>Event Booking Services
                    </h3>

                    <div class="service-card">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="fw-bold text-info mb-3">Event Types</h5>
                                <div class="row">
                                    <div class="col-6">
                                        <ul class="list-unstyled">
                                            <li class="mb-2"><i class="fas fa-birthday-cake text-info me-2"></i>Birthday
                                                Parties</li>
                                            <li class="mb-2"><i class="fas fa-building text-info me-2"></i>Corporate
                                                Events</li>
                                            <li class="mb-2"><i class="fas fa-heart text-info me-2"></i>Weddings</li>
                                        </ul>
                                    </div>
                                    <div class="col-6">
                                        <ul class="list-unstyled">
                                            <li class="mb-2"><i
                                                    class="fas fa-graduation-cap text-info me-2"></i>Graduations</li>
                                            <li class="mb-2"><i class="fas fa-music text-info me-2"></i>Concerts</li>
                                            <li class="mb-2"><i class="fas fa-plus text-info me-2"></i>Custom Events
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="price-calculator">
                                    <h6 class="fw-bold mb-3">Event Pricing</h6>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Base Rate (1h):</span>
                                        <span class="fw-bold">$<?php echo number_format($row['event_booking_fee'], 2) ?></span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Additional Hours:</span>
                                        <span>$150.00/hr</span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-2">
                                        <span>Travel (if required):</span>
                                        <span>Quote on request</span>
                                    </div>
                                    <hr>
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold">Starting at:</span>
                                        <span class="fw-bold text-info fs-5">$<?php echo number_format($row['event_booking_fee'], 2) ?></span>
                                    </div>
                                </div>
                                            <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                <a href="bookings_event.php?celebrities=<?php echo $celeb  ?>"
                                    class="btn btn-info btn-modern w-100 mt-3">
                                    <i class="fas fa-calendar-plus me-2"></i>Book Event Now
                                </a>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Gallery Section -->
                <!--<div class="mb-5">-->
                <!--    <h3 class="fw-bold mb-4">-->
                <!--        <i class="fas fa-images text-primary me-2"></i>Photo Gallery-->
                <!--    </h3>-->

                <!--    <div class="row g-3" id="gallery-container">-->
                <!--        <div class="col-6 col-md-4 col-lg-3">-->
                <!--            <div class="gallery-item">-->
                <!--                <img src="https://celebbookingsmeetups.com/storage/app/public/celebrities/gallery/1748961959_683f0aa77b72c_1000018819.jpg"-->
                <!--                    alt="Gallery Image 1" class="img-fluid rounded-3" data-bs-toggle="modal"-->
                <!--                    data-bs-target="#galleryModal0">-->
                <!--            </div>-->

                            <!-- Gallery Modal -->
                <!--            <div class="modal fade" id="galleryModal0" tabindex="-1">-->
                <!--                <div class="modal-dialog modal-dialog-centered modal-lg">-->
                <!--                    <div class="modal-content bg-transparent border-0">-->
                <!--                        <div class="modal-body p-0">-->
                <!--                            <img src="https://celebbookingsmeetups.com/storage/app/public/celebrities/gallery/1748961959_683f0aa77b72c_1000018819.jpg"-->
                <!--                                alt="Gallery Image 1" class="img-fluid rounded-3">-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--        <div class="col-6 col-md-4 col-lg-3">-->
                <!--            <div class="gallery-item">-->
                <!--                <img src="https://celebbookingsmeetups.com/storage/app/public/celebrities/gallery/1748961959_683f0aa788e12_1000018821.jpg"-->
                <!--                    alt="Gallery Image 2" class="img-fluid rounded-3" data-bs-toggle="modal"-->
                <!--                    data-bs-target="#galleryModal1">-->
                <!--            </div>-->

                            <!-- Gallery Modal -->
                <!--            <div class="modal fade" id="galleryModal1" tabindex="-1">-->
                <!--                <div class="modal-dialog modal-dialog-centered modal-lg">-->
                <!--                    <div class="modal-content bg-transparent border-0">-->
                <!--                        <div class="modal-body p-0">-->
                <!--                            <img src="https://celebbookingsmeetups.com/storage/app/public/celebrities/gallery/1748961959_683f0aa788e12_1000018821.jpg"-->
                <!--                                alt="Gallery Image 2" class="img-fluid rounded-3">-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--        <div class="col-6 col-md-4 col-lg-3">-->
                <!--            <div class="gallery-item">-->
                <!--                <img src="https://celebbookingsmeetups.com/storage/app/public/celebrities/gallery/1748961959_683f0aa7b4df2_1000018823.jpg"-->
                <!--                    alt="Gallery Image 3" class="img-fluid rounded-3" data-bs-toggle="modal"-->
                <!--                    data-bs-target="#galleryModal2">-->
                <!--            </div>-->

                            <!-- Gallery Modal -->
                <!--            <div class="modal fade" id="galleryModal2" tabindex="-1">-->
                <!--                <div class="modal-dialog modal-dialog-centered modal-lg">-->
                <!--                    <div class="modal-content bg-transparent border-0">-->
                <!--                        <div class="modal-body p-0">-->
                <!--                            <img src="https://celebbookingsmeetups.com/storage/app/public/celebrities/gallery/1748961959_683f0aa7b4df2_1000018823.jpg"-->
                <!--                                alt="Gallery Image 3" class="img-fluid rounded-3">-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->

                <!-- Reviews Section -->
                <div class="mb-5">
                    <h3 class="fw-bold mb-4">
                        <i class="fas fa-star text-warning me-2"></i>Fan Reviews
                    </h3>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i> No reviews available.
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Quick Book Card -->
                <div class="card-modern mb-4 sticky-top" style="top: 100px;">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">Quick Actions</h5>

                        <div class="d-grid gap-3">
                            <a href="#fan-cards-section" class="btn btn-primary-modern btn-modern">
                                <i class="fas fa-id-card me-2"></i>Get Fan Card
                                <small class="d-block mt-1">Starting from $<?php echo number_format($row['regular_fee'], 2) ?></small>
                            </a>

                            <a href="#meetup-section" class="btn btn-success btn-modern">
                                <i class="fas fa-handshake me-2"></i>Book Meetup
                                <small class="d-block mt-1">$<?php echo number_format($row['personal_meetup_fee'], 2) ?></small>
                            </a>

                            <a href="#event-section" class="btn btn-info btn-modern">
                                <i class="fas fa-calendar-alt me-2"></i>Book Event
                                <small class="d-block mt-1">From $<?php echo number_format($row['event_booking_fee'], 2) ?></small>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Availability Calendar -->
                <div class="card-modern mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">
                            <i class="fas fa-calendar-check text-success me-2"></i>Availability
                        </h5>

                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted">Next Week:</span>
                                <span class="badge bg-warning rounded-pill">2 slots available</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="text-muted">This Month:</span>
                                <span class="badge bg-info rounded-pill">12 slots available</span>
                            </div>
                        </div>

                        <div class="alert alert-info rounded-3 border-0">
                            <i class="fas fa-info-circle me-2"></i>
                            <small>Book early to secure your preferred date and time!</small>
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="card-modern mb-4">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">
                            <i class="fas fa-info-circle text-primary me-2"></i>Important Info
                        </h5>

                        <div class="mb-3">
                            <h6 class="fw-semibold text-primary mb-2">Response Time</h6>
                            <p class="text-muted mb-0 small">Usually responds within 2-4 hours</p>
                        </div>

                        <div class="mb-3">
                            <h6 class="fw-semibold text-primary mb-2">Cancellation Policy</h6>
                            <p class="text-muted mb-0 small">Free cancellation up to 48 hours before the event</p>
                        </div>

                        <div class="mb-3">
                            <h6 class="fw-semibold text-primary mb-2">Payment Methods</h6>
                            <div class="d-flex gap-2 flex-wrap">
                                <span class="badge bg-light text-dark px-2 py-1"><i
                                        class="fab fa-bitcoin me-1"></i>Bitcoin</span>
                                <span class="badge bg-light text-dark px-2 py-1"><i
                                        class="fab fa-ethereum me-1"></i>Ethereum</span>
                                <span class="badge bg-light text-dark px-2 py-1"><i
                                        class="fas fa-university me-1"></i>Bank</span>
                                <span class="badge bg-light text-dark px-2 py-1"><i
                                        class="fas fa-upload me-1"></i>Manual</span>
                            </div>
                        </div>

                        <div>
                            <h6 class="fw-semibold text-primary mb-2">Location</h6>
                            <p class="text-muted mb-0 small">Available worldwide (travel costs may apply)</p>
                        </div>
                    </div>
                </div>

                <!-- Share Profile -->
                <div class="card-modern">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">Share Profile</h5>

                        <div class="d-flex gap-2 mb-3" id="shareButtons">
                            <button type="button" class="btn btn-outline-primary btn-sm rounded-3 flex-fill"
                                data-share="facebook" title="Share on Facebook">
                                <i class="fab fa-facebook-f"></i>
                            </button>
                            <button type="button" class="btn btn-outline-info btn-sm rounded-3 flex-fill"
                                data-share="twitter" title="Share on Twitter">
                                <i class="fab fa-twitter"></i>
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm rounded-3 flex-fill"
                                data-share="whatsapp" title="Share on WhatsApp">
                                <i class="fab fa-whatsapp"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm rounded-3 flex-fill"
                                data-share="copy" title="Copy link">
                                <i class="fas fa-link"></i>
                            </button>
                        </div>

                        <div class="input-group">
                            <input type="text" class="form-control form-control-sm bg-light border-0"
                                value="https://celebbookingsmeetups.com/celebrities/pedro-pascal" readonly
                                id="profileUrl">
                            <button class="btn btn-sm btn-outline-secondary" type="button" id="copyButton">
                                <i class="far fa-copy"></i>
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" onclick="copyToClipboard()">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Payment Modals for Fan Cards -->
                <div class="modal fade" id="paymentModal1" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content border-0 rounded-4">
                            <div class="modal-header border-0">
                                <h5 class="modal-title fw-bold">Complete Your Purchase</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body p-4">
                                <!-- Fan Card Preview -->
                                <div class="fan-card-preview regular mb-4">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h6 class="fw-bold mb-1">Regular Fan Card</h6>
                                            <span class="badge bg-white bg-opacity-20 text-white px-2 py-1">
                                                REGULAR
                                            </span>
                                        </div>
                                        <div class="text-end">
                                            <h5 class="fw-bold mb-0">$<?php echo number_format($row['regular_fee'], 2) ?></h5>
                                        </div>
                                    </div>

                                    <div class="mb-2">
                                        <h6 class="fw-bold"><?php echo $name ?></h6>
                                        <p class="mb-1 opacity-75"><?php echo $row['name'] ?>/p>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-end">
                                        <div>
                                            <small class="opacity-75">Valid Until</small>
                                            <div>07/26</div>
                                        </div>
                                        <div>
                                            <i class="fas fa-id-card fa-2x opacity-50"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Payment Form -->
                                <form action="" method="POST">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="<?php echo $celeb ?>">
                                    <input type="hidden" name="fan_card_id" value="1">
                                    <input type="hidden" name="amount" value="<?php echo $row['regular_fee']; ?>">

                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Choose Payment Method</label>
                                        <div class="row g-2">
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="bitcoin" id="bitcoin1" required>
                                                <label class="btn btn-outline-warning w-100" for="bitcoin1">
                                                    <i class="fab fa-bitcoin me-2"></i>Bitcoin
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="ethereum" id="ethereum1" required>
                                                <label class="btn btn-outline-primary w-100" for="ethereum1">
                                                    <i class="fab fa-ethereum me-2"></i>Ethereum
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method" value="bank"
                                                    id="bank1" required>
                                                <label class="btn btn-outline-success w-100" for="bank1">
                                                    <i class="fas fa-university me-2"></i>Bank
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="manual" id="manual1" required>
                                                <label class="btn btn-outline-secondary w-100" for="manual1">
                                                    <i class="fas fa-upload me-2"></i>Manual
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-grid">
                                        <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                        <button name="submit" type="submit" class="btn btn-primary-modern btn-modern btn-lg">
                                            <i class="fas fa-credit-card me-2"></i>Purchase for $<?php echo number_format($row['regular_fee'], 2) ?>
                                        </button>
                                        <?php } ?>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="modal fade" id="paymentModal2" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content border-0 rounded-4">
                            <div class="modal-header border-0">
                                <h5 class="modal-title fw-bold">Complete Your Purchase</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body p-4">
                                <!-- Fan Card Preview -->
                                <div class="fan-card-preview vvip mb-4">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h6 class="fw-bold mb-1">VVIP Fan Card</h6>
                                            <span class="badge bg-white bg-opacity-20 text-white px-2 py-1">
                                                VVIP
                                            </span>
                                        </div>
                                        <div class="text-end">
                                            <h5 class="fw-bold mb-0">$<?php echo number_format($row['vvip_fee'], 2) ?></h5>
                                        </div>
                                    </div>

                                    <div class="mb-2">
                                        <h6 class="fw-bold"><?php echo $name ?></h6>
                                        <p class="mb-1 opacity-75"><?php echo $row['name'] ?></p>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-end">
                                        <div>
                                            <small class="opacity-75">Valid Until</small>
                                            <div>07/26</div>
                                        </div>
                                        <div>
                                            <i class="fas fa-id-card fa-2x opacity-50"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Payment Form -->
                                <form action="" method="POST">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="<?php echo $celeb ?>">
                                    <input type="hidden" name="fan_card_id" value="2">
                                    <input type="hidden" name="amount" value="<?php echo $row['vvip_fee']; ?>">

                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Choose Payment Method</label>
                                        <div class="row g-2">
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="bitcoin" id="bitcoin2" required>
                                                <label class="btn btn-outline-warning w-100" for="bitcoin2">
                                                    <i class="fab fa-bitcoin me-2"></i>Bitcoin
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="ethereum" id="ethereum2" required>
                                                <label class="btn btn-outline-primary w-100" for="ethereum2">
                                                    <i class="fab fa-ethereum me-2"></i>Ethereum
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method" value="bank"
                                                    id="bank2" required>
                                                <label class="btn btn-outline-success w-100" for="bank2">
                                                    <i class="fas fa-university me-2"></i>Bank
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="manual" id="manual2" required>
                                                <label class="btn btn-outline-secondary w-100" for="manual2">
                                                    <i class="fas fa-upload me-2"></i>Manual
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-grid">
                                        <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                        <button name="submit" type="submit" class="btn btn-primary-modern btn-modern btn-lg">
                                            <i class="fas fa-credit-card me-2"></i>Purchase for $<?php echo number_format($row['vvip_fee'], 2) ?>
                                        </button>
                                        
                                        <?php } ?>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="paymentModal3" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content border-0 rounded-4">
                            <div class="modal-header border-0">
                                <h5 class="modal-title fw-bold">Complete Your Purchase</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body p-4">
                                <!-- Fan Card Preview -->
                                <div class="fan-card-preview vip mb-4">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h6 class="fw-bold mb-1">gold</h6>
                                            <span class="badge bg-white bg-opacity-20 text-white px-2 py-1">
                                                VIP
                                            </span>
                                        </div>
                                        <div class="text-end">
                                            <h5 class="fw-bold mb-0">$<?php echo number_format($row['gold_fee'], 2) ?></h5>
                                        </div>
                                    </div>

                                    <div class="mb-2">
                                        <h6 class="fw-bold"><?php echo $name ?></h6>
                                        <p class="mb-1 opacity-75"><?php echo $row['name'] ?></p>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-end">
                                        <div>
                                            <small class="opacity-75">Valid Until</small>
                                            <div>07/26</div>
                                        </div>
                                        <div>
                                            <i class="fas fa-id-card fa-2x opacity-50"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Payment Form -->
                                <form action="" method="POST">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="<?php echo $celeb; ?>">
                                    <input type="hidden" name="fan_card_id" value="3">
                                    <input type="hidden" name="amount" value="<?php echo $row['gold_fee']; ?>">

                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Choose Payment Method</label>
                                        <div class="row g-2">
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="bitcoin" id="bitcoin3" required>
                                                <label class="btn btn-outline-warning w-100" for="bitcoin3">
                                                    <i class="fab fa-bitcoin me-2"></i>Bitcoin
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="ethereum" id="ethereum3" required>
                                                <label class="btn btn-outline-primary w-100" for="ethereum3">
                                                    <i class="fab fa-ethereum me-2"></i>Ethereum
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method" value="bank"
                                                    id="bank3" required>
                                                <label class="btn btn-outline-success w-100" for="bank3">
                                                    <i class="fas fa-university me-2"></i>Bank
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="manual" id="manual3" required>
                                                <label class="btn btn-outline-secondary w-100" for="manual3">
                                                    <i class="fas fa-upload me-2"></i>Manual
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    

                                    <div class="d-grid">
                                            <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                        <button name="submit" type="submit" class="btn btn-primary-modern btn-modern btn-lg">
                                            <i class="fas fa-credit-card me-2"></i>Purchase for $<?php echo number_format($row['gold_fee'], 2) ?>
                                        </button>
                                        
                                        <?php } ?>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="paymentModal4" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content border-0 rounded-4">
                            <div class="modal-header border-0">
                                <h5 class="modal-title fw-bold">Complete Your Purchase</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body p-4">
                                <!-- Fan Card Preview -->
                                <div class="fan-card-preview vip mb-4">
                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div>
                                            <h6 class="fw-bold mb-1">VIP Royal Card</h6>
                                            <span class="badge bg-white bg-opacity-20 text-white px-2 py-1">
                                                VIP
                                            </span>
                                        </div>
                                        <div class="text-end">
                                            <h5 class="fw-bold mb-0">$<?php echo number_format($row['vip_royal_fee'], 2) ?></h5>
                                        </div>
                                    </div>

                                    <div class="mb-2">
                                        <h6 class="fw-bold"><?php echo $name ?></h6>
                                        <p class="mb-1 opacity-75"><?php echo $row['name'] ?></p>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-end">
                                        <div>
                                            <small class="opacity-75">Valid Until</small>
                                            <div>07/26</div>
                                        </div>
                                        <div>
                                            <i class="fas fa-id-card fa-2x opacity-50"></i>
                                        </div>
                                    </div>
                                </div>

                                <!-- Payment Form -->
                                <form action="" method="POST">
                                    <input type="hidden" name="_token" value="fKwUf5kuluksiswU437GEUOH4VtM5DVsMhMBGjsq"
                                        autocomplete="off"> <input type="hidden" name="celebrity_id" value="<?php echo $celeb ?>">
                                    <input type="hidden" name="fan_card_id" value="<?php echo $row['vip_royal_fee']; ?>">
                                    <input type="hidden" name="amount" value="720.00">

                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Choose Payment Method</label>
                                        <div class="row g-2">
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="bitcoin" id="bitcoin4" required>
                                                <label class="btn btn-outline-warning w-100" for="bitcoin4">
                                                    <i class="fab fa-bitcoin me-2"></i>Bitcoin
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="ethereum" id="ethereum4" required>
                                                <label class="btn btn-outline-primary w-100" for="ethereum4">
                                                    <i class="fab fa-ethereum me-2"></i>Ethereum
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method" value="bank"
                                                    id="bank4" required>
                                                <label class="btn btn-outline-success w-100" for="bank4">
                                                    <i class="fas fa-university me-2"></i>Bank
                                                </label>
                                            </div>
                                            <div class="col-6">
                                                <input type="radio" class="btn-check" name="payment_method"
                                                    value="manual" id="manual4" required>
                                                <label class="btn btn-outline-secondary w-100" for="manual4">
                                                    <i class="fas fa-upload me-2"></i>Manual
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-grid">
                                           <?php
                                                if (!isset($_SESSION["USER_LOGIN"])){
                                            ?>
                                            
                                            <a href="login.php" class="btn btn-outline-success btn-modern w-100 mt-3">
                                                Login to Book
                                            </a>
                                            
                                            <?php }else{ ?>
                                            
                                        <button name="submit" type="submit" class="btn btn-primary-modern btn-modern btn-lg">
                                            <i class="fas fa-credit-card me-2"></i>Purchase for $<?php echo number_format($row['vip_royal_fee'], 2) ?>
                                        </button>
                                        
                                        <?php } ?>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Floating Action Button -->
                <div class="floating-action d-md-none">
                    <div class="dropup">
                        <button class="btn btn-primary-modern dropdown-toggle border-0" type="button"
                            data-bs-toggle="dropdown">
                            <i class="fas fa-plus"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end mb-2 border-0 shadow-lg">
                            <li>
                                <h6 class="dropdown-header">Quick Actions</h6>
                            </li>
                            <li><a class="dropdown-item" href="#fan-cards-section">
                                    <i class="fas fa-id-card me-2 text-primary"></i>Get Fan Card
                                </a></li>
                            <li><a class="dropdown-item" href="#meetup-section">
                                    <i class="fas fa-handshake me-2 text-success"></i>Book Meetup
                                </a></li>
                            <li><a class="dropdown-item" href="#event-section">
                                    <i class="fas fa-calendar-alt me-2 text-info"></i>Book Event
                                </a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#" onclick="shareProfile()">
                                    <i class="fas fa-share me-2 text-secondary"></i>Share Profile
                                </a></li>
                        </ul>
                    </div>
                </div>

                <!-- Back to Top Button -->
                <button class="btn btn-secondary-modern rounded-circle position-fixed"
                    style="bottom: 30px; left: 30px; width: 50px; height: 50px; z-index: 999;" onclick="scrollToTop()"
                    id="backToTopBtn">
                    <i class="fas fa-arrow-up"></i>
                </button>
</main>

<?php
include 'footer.php';

?>

<!-- Load remaining scripts -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Lazy load images
        const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));

        if ('IntersectionObserver' in window) {
            let lazyImageObserver = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        let lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;
                        lazyImage.classList.add('loaded');
                        lazyImageObserver.unobserve(lazyImage);
                    }
                });
            });

            lazyImages.forEach(function (lazyImage) {
                lazyImageObserver.observe(lazyImage);
            });
        } else {
            // Fallback for browsers that don't support IntersectionObserver
            let active = false;
            const lazyLoad = function () {
                if (active === false) {
                    active = true;
                    setTimeout(function () {
                        lazyImages.forEach(function (lazyImage) {
                            if ((lazyImage.getBoundingClientRect().top <= window.innerHeight &&
                                lazyImage.getBoundingClientRect().bottom >= 0) &&
                                getComputedStyle(lazyImage).display !== 'none') {
                                lazyImage.src = lazyImage.dataset.src;
                                lazyImage.classList.add('loaded');
                                lazyImages = lazyImages.filter(function (image) {
                                    return image !== lazyImage;
                                });

                                if (lazyImages.length === 0) {
                                    document.removeEventListener('scroll', lazyLoad);
                                    window.removeEventListener('resize', lazyLoad);
                                    window.removeEventListener('orientationchange', lazyLoad);
                                }
                            }
                        });
                        active = false;
                    }, 200);
                }
            };

            document.addEventListener('scroll', lazyLoad);
            window.addEventListener('resize', lazyLoad);
            window.addEventListener('orientationchange', lazyLoad);
        }

        // Preconnect to external domains
        const preconnect = function (url) {
            const link = document.createElement('link');
            link.rel = 'preconnect';
            link.href = url;
            document.head.appendChild(link);
        };

        // Preconnect to CDNs
        preconnect('https://fonts.googleapis.com');
        preconnect('https://fonts.gstatic.com');
        preconnect('https://cdnjs.cloudflare.com');
    });
</script>


</body>

</html>