<?php
// require_once 'functions.php'; // Uncomment this in your actual project when connecting to a database

// --- DUMMY DATA ---
// In a real application, these would come from your database via functions.php

// Dummy Key Event
$keyEvent = [
    'id' => 101,
    'title' => 'SLAITO Annual Gala Dinner 2025',
    'description' => 'Join us for the most anticipated networking event of the year, bringing together industry leaders, policymakers, and tourism professionals. An evening of elegance, insights, and unparalleled networking opportunities.',
    'image_url' => 'public/images/events/gala_dinner.jpg', // Ensure this image exists!
    'event_date' => '2025-11-15',
    'event_time' => '19:00:00',
    'location' => 'Grand Ballroom, Colombo City Center',
    'type' => 'Gala',
    'status' => 'upcoming',
    'views' => 1500,
    'likes' => 350,
    'members_count' => 200,
    'created_at' => '2025-08-01 10:00:00'
];

// Dummy Upcoming Events
$upcomingEvents = [
    [
        'id' => 102,
        'title' => 'Sustainable Tourism Workshop',
        'description' => 'A comprehensive workshop on implementing sustainable practices in tourism. Learn from experts and share best practices to build a greener industry.',
        'image_url' => 'public/images/events/sustainable_workshop.jpg', // Ensure this image exists!
        'event_date' => '2025-09-20',
        'event_time' => '09:30:00',
        'location' => 'Online Webinar',
        'type' => 'Workshop',
        'status' => 'upcoming',
        'views' => 450,
        'likes' => 80,
        'members_count' => 120,
        'created_at' => '2025-08-10 14:00:00'
    ],
    [
        'id' => 103,
        'title' => 'Digital Marketing Summit for Tourism',
        'description' => 'Explore the latest trends and strategies in digital marketing to boost your tourism business. Featuring keynote speakers and interactive sessions.',
        'image_url' => 'public/images/events/digital_summit.jpg', // Ensure this image exists!
        'event_date' => '2025-10-05',
        'event_time' => '10:00:00',
        'location' => 'BMICH Exhibition Hall, Colombo',
        'type' => 'Summit',
        'status' => 'upcoming',
        'views' => 620,
        'likes' => 110,
        'members_count' => 180,
        'created_at' => '2025-08-15 09:00:00'
    ],
    [
        'id' => 104,
        'title' => 'Adventure Tourism Expo 2025',
        'description' => 'Showcasing thrilling adventure tourism packages and destinations. Connect with adventure seekers and promote unique experiences across Sri Lanka.',
        'image_url' => 'public/images/events/adventure_expo.jpg', // Ensure this image exists!
        'event_date' => '2025-12-01',
        'event_time' => '09:00:00',
        'location' => 'Colombo Exhibition & Convention Centre',
        'type' => 'Expo',
        'status' => 'upcoming',
        'views' => 780,
        'likes' => 150,
        'members_count' => 250,
        'created_at' => '2025-08-20 11:00:00'
    ]
];

// Dummy Past Events (8 events)
$pastEvents = [
    [
        'id' => 201,
        'title' => 'Inbound Tour Operators Convention',
        'description' => 'Annual convention focusing on challenges and opportunities for inbound tour operators in the post-pandemic era. Industry insights and networking.',
        'image_url' => 'public/images/events/past_convention.jpg', // Ensure this image exists!
        'event_date' => '2024-07-20',
        'event_time' => '09:00:00',
        'location' => 'Shangri-La Hotel, Colombo',
        'type' => 'Convention',
        'status' => 'completed',
        'views' => 980,
        'likes' => 210,
        'members_count' => 300,
        'created_at' => '2024-05-01 10:00:00'
    ],
    [
        'id' => 202,
        'title' => 'Coastal Cleanup Initiative',
        'description' => 'A successful community and industry effort to clean up Negombo beaches, promoting responsible tourism and environmental conservation.',
        'image_url' => 'public/images/events/past_cleanup.jpg', // Ensure this image exists!
        'event_date' => '2024-06-10',
        'event_time' => '08:00:00',
        'location' => 'Negombo Beach',
        'type' => 'CSR Project',
        'status' => 'completed',
        'views' => 750,
        'likes' => 180,
        'members_count' => 50,
        'created_at' => '2024-04-15 12:00:00'
    ],
    [
        'id' => 203,
        'title' => 'Tourism Investment Forum',
        'description' => 'Connecting investors with promising tourism projects across Sri Lanka. Highlighting new opportunities in sustainable and luxury tourism.',
        'image_url' => 'public/images/events/past_investment.jpg', // Ensure this image exists!
        'event_date' => '2024-05-15',
        'event_time' => '14:00:00',
        'location' => 'Cinnamon Grand, Colombo',
        'type' => 'Forum',
        'status' => 'completed',
        'views' => 1100,
        'likes' => 250,
        'members_count' => 150,
        'created_at' => '2024-03-20 11:00:00'
    ],
    [
        'id' => 204,
        'title' => 'Heritage Site Preservation Project',
        'description' => 'Our ongoing commitment to preserving Sri Lanka\'s rich cultural heritage. Phase 1 completed at the ancient city of Polonnaruwa.',
        'image_url' => 'public/images/events/past_heritage.jpg', // Ensure this image exists!
        'event_date' => '2024-04-01',
        'event_time' => '09:00:00',
        'location' => 'Polonnaruwa',
        'type' => 'Project',
        'status' => 'completed',
        'views' => 890,
        'likes' => 190,
        'members_count' => 70,
        'created_at' => '2024-02-10 13:00:00'
    ],
    [
        'id' => 205,
        'title' => 'Webinar: E-visa System Updates',
        'description' => 'An informative session covering the latest updates and changes to Sri Lanka\'s e-visa system, critical for tour operators and travel agents.',
        'image_url' => 'public/images/events/past_webinar.jpg', // Ensure this image exists!
        'event_date' => '2024-03-10',
        'event_time' => '11:00:00',
        'location' => 'Online Webinar',
        'type' => 'Webinar',
        'status' => 'completed',
        'views' => 600,
        'likes' => 100,
        'members_count' => 200,
        'created_at' => '2024-01-25 10:00:00'
    ],
    [
        'id' => 206,
        'title' => 'Rural Tourism Development Initiative',
        'description' => 'Supporting local communities through tourism. Focused on developing unique rural experiences in the Ella region.',
        'image_url' => 'public/images/events/past_rural.jpg', // Ensure this image exists!
        'event_date' => '2024-02-05',
        'event_time' => '09:00:00',
        'location' => 'Ella, Badulla District',
        'type' => 'Project',
        'status' => 'completed',
        'views' => 820,
        'likes' => 170,
        'members_count' => 60,
        'created_at' => '2024-01-01 09:00:00'
    ],
    [
        'id' => 207,
        'title' => 'SLAITO Members\' Meetup - Kandy',
        'description' => 'A relaxed gathering for SLAITO members in Kandy to network, share insights, and discuss regional tourism challenges and opportunities.',
        'image_url' => 'public/images/events/past_meetup_kandy.jpg', // Ensure this image exists!
        'event_date' => '2024-01-28',
        'event_time' => '16:00:00',
        'location' => 'Earl\'s Regency, Kandy',
        'type' => 'Meetup',
        'status' => 'completed',
        'views' => 550,
        'likes' => 130,
        'members_count' => 90,
        'created_at' => '2023-12-10 14:00:00'
    ],
    [
        'id' => 208,
        'title' => 'Travel Agent Training Program',
        'description' => 'Intensive training program designed to equip travel agents with advanced sales techniques and product knowledge for Sri Lanka tourism.',
        'image_url' => 'public/images/events/past_training.jpg', // Ensure this image exists!
        'event_date' => '2023-12-05',
        'event_time' => '09:00:00',
        'location' => 'SLAITO Auditorium, Colombo',
        'type' => 'Training',
        'status' => 'completed',
        'views' => 700,
        'likes' => 160,
        'members_count' => 100,
        'created_at' => '2023-11-01 10:00:00'
    ],
    [
        'id' => 209,
        'title' => 'Tourism Resilience Conference',
        'description' => 'International conference discussing strategies for building resilient tourism sectors in the face of global challenges. Lessons from experts worldwide.',
        'image_url' => 'public/images/events/past_resilience.jpg', // Ensure this image exists!
        'event_date' => '2023-11-20',
        'event_time' => '09:00:00',
        'location' => 'Galle Face Hotel, Colombo',
        'type' => 'Conference',
        'status' => 'completed',
        'views' => 1200,
        'likes' => 280,
        'members_count' => 400,
        'created_at' => '2023-09-15 15:00:00'
    ],
    [
        'id' => 210,
        'title' => 'Wilderness Tourism Promotion',
        'description' => 'Showcasing Sri Lanka\'s incredible biodiversity and promoting responsible wildlife tourism, including safaris and eco-lodges.',
        'image_url' => 'public/images/events/past_wildlife.jpg', // Ensure this image exists!
        'event_date' => '2023-10-10',
        'event_time' => '10:00:00',
        'location' => 'Yala National Park',
        'type' => 'Promotion',
        'status' => 'completed',
        'views' => 950,
        'likes' => 200,
        'members_count' => 80,
        'created_at' => '2023-08-20 11:00:00'
    ],
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light">
    <title>Projects & Events - SLAITO</title>
    <link rel="icon" type="image/png" href="public/images/favicon.png">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <img src="public/images/logo.png" alt="SLAITO" class="logo-img">
                </div>
                <ul class="nav-menu">
                    <li class="nav-item"><a href="index.php" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
                    <li class="nav-item"><a href="events.php" class="nav-link active">Events</a></li>
                    <li class="nav-item"><a href="blog.php" class="nav-link">Blog & News</a></li>
                    <li class="nav-item has-submenu">
                        <a href="">Members <i class="fas fa-chevron-down submenu-arrow"></i></a>
                        <ul class="submenu">
                            <li><a href="members.html" class="submenu-link">Current Members</a></li>
                            <li><a href="becomeMember.php" class="submenu-link">Become a Member</a></li>
                        </ul>
                    </li>
                    <li class="nav-item"><a href="training_&_knowledge.html" class="nav-link">Training & Knowledge</a></li>
                    <li class="nav-item"><a href="jobs.php" class="nav-link">Careers</a></li>
                </ul>
                <div class="nav-auth">
                    <button class="login-btn" onclick="window.location.href='dashboard.php'">
                        <i class="fas fa-user"></i>
                        Log In
                    </button>
                </div>
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </nav>
    </header>

    <!-- Hero Section -->
<section class="hero-section">
  <div class="hero-content">
    <h1>Projects & Events</h1>
    <p>Stay updated with our latest initiatives, upcoming events, and impactful past projects.</p>
  </div>
</section>

<style>
    .has-submenu {
          position: relative;
      }
      .submenu {
          list-style: none;
          margin: 0;
          padding: 0;
          position: absolute;
          top: 100%;
          left: 0;
          background-color: #2c3e50;
          min-width: 180px;
          box-shadow: 0 8px 16px rgba(0,0,0,0.2);
          border-radius: 5px;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease, visibility 0.3s ease;
          z-index: 999;
          padding: 10px 0;
      }
      .has-submenu:hover .submenu {
          opacity: 1;
          visibility: visible;
      }
      .submenu li {
          padding: 0;
      }
      .submenu-link {
          display: block;
          padding: 10px 20px;
          color: white;
          text-decoration: none;
          white-space: nowrap;
          transition: background-color 0.2s ease, color 0.2s ease;
          font-size: 0.95rem;
      }
      .submenu-link:hover {
          background-color: #3b5a77;
          color: #EEA520;
      }
      .submenu-arrow {
          margin-left: 8px;
          font-size: 0.8em;
          transition: transform 0.3s ease;
      }
      .has-submenu:hover .submenu-arrow {
          transform: rotate(180deg);
      }
      .nav-link {
          display: flex;
          align-items: center;
          /* Adjust existing padding here if necessary */
      }

      /* Responsive adjustments for mobile menu */
      @media (max-width: 768px) {
          .submenu {
              position: static;
              width: 100%;
              box-shadow: none;
              background-color: transparent;
              padding: 0;
              border-radius: 0;
              opacity: 1;
              visibility: visible;
              display: none; /* Controlled by JS 'open' class */
          }
          .has-submenu.open .submenu {
              display: block;
          }
          .submenu-link {
              padding-left: 30px;
              font-size: 1rem;
          }
          .submenu-arrow {
              display: none;
          }
      }
      /* Remove blue color from 'Members' main link */
.nav-item.has-submenu > a {
    color: inherit !important;
    text-decoration: none;
}
  .hero-section {
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
                url('public/images/events/8c3f833322c3305f73106f86ac66007d594e9821.jpg') center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 0 1rem;
  }

  .hero-content {
    max-width: 800px;
  }

  .hero-content h1 {
    font-size: 3rem;
    font-weight: bold;
    color: #EEA520; /* orange-400 */
    margin-bottom: 1rem;
  }

  .hero-content p {
    font-size: 1.25rem;
    opacity: 0.9;
  }

  @media (max-width: 768px) {
    .hero-content h1 {
      font-size: 2rem;
    }

    .hero-content p {
      font-size: 1rem;
    }
  }
      

      /* Event Details Modal Styles (Kept as is - they are good) */
      .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        overflow-y: auto; /* Allow scrolling for modal itself if content is too tall */
      }

      .modal-content {
        background-color: white;
        margin: 5% auto;
        padding: 20px;
        border-radius: 10px;
        width: 90%;
        max-width: 800px;
        max-height: 80vh; /* Limits modal height, enabling internal scroll */
        overflow-y: auto; /* Scroll individual modal content */
        box-shadow: 0 8px 30px rgba(0,0,0,0.2); /* Stronger shadow */
      }

      .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.2s ease;
      }

      .close:hover {
        color: #333;
      }

      .event-details-header {
        position: relative;
        margin: -20px -20px 20px -20px;
        height: 300px;
        background-size: cover;
        background-position: center;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
      }

      .event-details-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
        display: flex;
        align-items: flex-end;
        padding: 30px;
        color: white;
      }

      .event-details-title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      }

      .event-details-meta {
        display: flex;
        gap: 20px;
        font-size: 1rem;
        opacity: 0.9;
      }

      .event-details-body {
        padding: 20px 0;
      }

      .event-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 30px;
      }

      .event-info-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #EEA520;
      }

      .event-info-icon {
        width: 40px;
        height: 40px;
        background: rgba(238, 165, 32, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #EEA520;
      }

      .event-description {
        line-height: 1.6;
        color: #374151;
        font-size: 1.1rem;
        margin-bottom: 30px;
      }

      .event-stats-row {
        display: flex;
        justify-content: space-around;
        background: #f8f9fa;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
      }

      .stat-box {
        text-align: center;
      }

      .stat-box .number {
        font-size: 2rem;
        font-weight: bold;
        color: #EEA520;
      }

      .stat-box .label {
        color: #6b7280;
        font-size: 0.9rem;
      }

      .status-indicator {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 500;
        text-transform: capitalize;
      }

      .status-upcoming {
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
        border: 1px solid rgba(34, 197, 94, 0.3);
      }

      .status-ongoing {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.3);
      }

      .status-completed {
        background: rgba(107, 114, 128, 0.1);
        color: #6b7280;
        border: 1px solid rgba(107, 114, 128, 0.3);
      }

      .event-actions {
        display: flex;
        gap: 15px;
        justify-content: center;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
      }

      .btn-like {
        background: #fff;
        color: #e11d48;
        border: 2px solid #e11d48;
        padding: 10px 20px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s;
      }

      .btn-like:hover {
        background: #e11d48;
        color: white;
      }

      .btn-share {
        background: #3b82f6;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s;
      }

      .btn-share:hover {
        background: #2563eb;
      }

      .btn-join {
        background: #EEA520;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s;
      }

      .btn-join:hover {
        background: #d97706;
      }

      /* Animations (Keep these as they are good) */
      .animate-fade-in {
          opacity: 0;
          animation: fadeIn 0.6s forwards;
      }
      .animate-slide-in-left {
          opacity: 0;
          transform: translateX(-50px);
          animation: slideInLeft 0.8s forwards;
      }
      .animate-slide-in-right {
          opacity: 0;
          transform: translateX(50px);
          animation: slideInRight 0.8s forwards;
      }
      .animate-scale-in {
          opacity: 0;
          transform: scale(0.9);
          animation: scaleIn 0.7s forwards;
      }

      /* Delay utilities (Tailwind-like) - if not using Tailwind's JIT, define these */
      .delay-0 { animation-delay: 0s; }
      .delay-100 { animation-delay: 0.1s; }
      .delay-200 { animation-delay: 0.2s; }
      .delay-300 { animation-delay: 0.3s; }
      .delay-400 { animation-delay: 0.4s; }
      .delay-500 { animation-delay: 0.5s; }
      .delay-600 { animation-delay: 0.6s; }
      .delay-700 { animation-delay: 0.7s; }
      .delay-800 { animation-delay: 0.8s; }
      .delay-900 { animation-delay: 0.9s; }
      .delay-1000 { animation-delay: 1s; }
      /* Add more if needed, e.g., for past events grid */

      @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }
      @keyframes slideInLeft {
          from { opacity: 0; transform: translateX(-50px); }
          to { opacity: 1; transform: translateX(0); }
      }
      @keyframes slideInRight {
          from { opacity: 0; transform: translateX(50px); }
          to { opacity: 1; transform: translateX(0); }
      }
      @keyframes scaleIn {
          from { opacity: 0; transform: scale(0.9); }
          to { opacity: 1; transform: scale(1); }
      }

      /* Responsive Adjustments */
      @media (max-width: 768px) {
        .event-info-grid {
          grid-template-columns: 1fr;
        }
        
        .event-details-title {
          font-size: 2rem;
        }
        
        .event-stats-row {
          flex-direction: column;
          gap: 15px;
        }
        
        .event-actions {
          flex-direction: column;
        }
      }

      /* Specific styles for key event section */
      .key-event-card {
        background-color: #1a202c; /* Dark background to contrast with white sections */
        color: white;
        padding: 4rem 2rem;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        text-align: center;
      }

      .key-event-card .overlay-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        filter: brightness(0.4) saturate(1.2); /* Darken and enhance image */
        z-index: 1;
        transform: scale(1.05); /* Slight zoom for background effect */
        transition: transform 0.5s ease;
      }
      .key-event-card:hover .overlay-bg {
          transform: scale(1);
      }

      .key-event-card-content {
        position: relative;
        z-index: 2;
        max-width: 900px;
        margin: 0 auto;
      }

      .key-event-card h3 {
        font-size: 3.5rem;
        font-weight: bold;
        color: #EEA520;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
      }

      .key-event-card p {
        font-size: 1.25rem;
        margin-bottom: 2rem;
        line-height: 1.7;
        color: rgba(255,255,255,0.9);
      }

      .key-event-card .meta {
        display: flex;
        justify-content: center;
        gap: 2rem;
        font-size: 1.1rem;
        margin-bottom: 2rem;
      }

      .key-event-card .meta span {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: rgba(255,255,255,0.8);
      }

      .key-event-card .meta i {
        color: #EEA520;
      }

      .key-event-card .key-event-actions button {
          padding: 12px 30px;
          border-radius: 30px;
          font-weight: 600;
          font-size: 1.1rem;
          transition: background-color 0.3s ease, transform 0.2s ease;
      }
      .key-event-card .btn-details {
          background-color: #EEA520;
          color: white;
          border: 2px solid #EEA520;
          margin-right: 1rem;
      }
      .key-event-card .btn-details:hover {
          background-color: #d97706;
          transform: translateY(-2px);
      }
      .key-event-card .btn-share {
          background-color: transparent;
          color: white;
          border: 2px solid rgba(255,255,255,0.5);
      }
      .key-event-card .btn-share:hover {
          background-color: rgba(255,255,255,0.1);
          transform: translateY(-2px);
      }

      /* Grid card styles for upcoming/past events */
      .event-card-grid {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
      }
      .event-card-grid:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0,0,0,0.15);
      }
      .event-card-grid img {
          width: 100%;
          height: 200px;
          object-fit: cover;
      }
      .event-card-grid .p-4 {
          padding: 1rem;
      }
      .event-card-grid h4 {
          font-size: 1.25rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 0.5rem;
      }
      .event-card-grid .text-gray-600 {
          color: #666;
          font-size: 0.95rem;
          line-height: 1.5;
      }
      .event-card-grid .event-meta-info {
          display: flex;
          align-items: center;
          font-size: 0.85rem;
          color: #888;
          gap: 0.75rem;
      }
      .event-card-grid .event-meta-info i {
          color: #EEA520;
      }
      .event-card-grid .event-card-buttons {
          margin-top: 1rem;
          display: flex;
          gap: 0.75rem;
      }
      .event-card-grid .event-card-buttons button {
          padding: 8px 15px;
          border-radius: 20px;
          font-size: 0.85rem;
          font-weight: 600;
          transition: background-color 0.2s ease, color 0.2s ease;
      }
      .event-card-grid .btn-primary {
          background-color: #EEA520;
          color: white;
          border: none;
      }
      .event-card-grid .btn-primary:hover {
          background-color: #d97706;
      }
      .event-card-grid .btn-secondary {
          background-color: transparent;
          color: #555;
          border: 1px solid #ccc;
      }
      .event-card-grid .btn-secondary:hover {
          background-color: #f0f0f0;
          color: #333;
      }

      /* Responsive adjustments for key event */
      @media (max-width: 768px) {
          .key-event-card h3 {
              font-size: 2.5rem;
          }
          .key-event-card p {
              font-size: 1rem;
          }
          .key-event-card .meta {
              flex-direction: column;
              gap: 0.75rem;
          }
          .key-event-card .key-event-actions button {
              width: 100%;
              margin-right: 0;
              margin-bottom: 0.75rem;
          }
      }
    </style>

    <!-- Key Event Section -->
    <section class="py-20 bg-gray-100">
        <div class="container mx-auto px-4">
            <?php if ($keyEvent): ?>
                <div class="key-event-card animate-fade-in delay-0" onclick="showEventDetails(<?php echo $keyEvent['id']; ?>)">
                    <div class="overlay-bg" style="background-image: url('<?php echo htmlspecialchars($keyEvent['image_url']); ?>');"></div>
                    <div class="key-event-card-content">
                        <span class="status-indicator status-<?php echo htmlspecialchars($keyEvent['status']); ?> mb-4"><?php echo htmlspecialchars($keyEvent['status']); ?> Event</span>
                        <h3><?php echo htmlspecialchars($keyEvent['title']); ?></h3>
                        <p><?php echo htmlspecialchars($keyEvent['description']); ?></p>
                        <div class="meta">
                            <span><i class="fas fa-calendar-alt"></i> <?php echo date('M j, Y', strtotime($keyEvent['event_date'])); ?></span>
                            <span><i class="fas fa-clock"></i> <?php echo date('h:i A', strtotime($keyEvent['event_time'])); ?></span>
                            <span><i class="fas fa-map-marker-alt"></i> <?php echo htmlspecialchars($keyEvent['location']); ?></span>
                        </div>
                        <div class="key-event-actions">
                            <button class="btn-details" onclick="event.stopPropagation(); showEventDetails(<?php echo $keyEvent['id']; ?>)">View Details</button>
                            <button class="btn-share" onclick="event.stopPropagation(); shareEvent(<?php echo $keyEvent['id']; ?>)">Share Event</button>
                        </div>
                    </div>
                </div>
            <?php else: ?>
                <div class="text-center py-8">
                    <p class="text-gray-600 text-lg">No key event available at the moment. Check back soon!</p>
                </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- Upcoming Events Section -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">Upcoming Events</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php if (!empty($upcomingEvents)): ?>
                    <?php foreach ($upcomingEvents as $index => $event): ?>
                    <div class="event-card-grid animate-fade-in" 
                         style="animation-delay: <?php echo $index * 150; ?>ms;" 
                         onclick="showEventDetails(<?php echo $event['id']; ?>)">
                        <img src="<?php echo htmlspecialchars($event['image_url']); ?>" alt="<?php echo htmlspecialchars($event['title']); ?>">
                        <div class="p-4">
                            <h4 class="mb-2"><?php echo htmlspecialchars($event['title']); ?></h4>
                            <p class="text-gray-600 text-sm mb-3"><?php echo htmlspecialchars(substr($event['description'], 0, 100)) . '...'; ?></p>
                            <div class="event-meta-info">
                                <span><i class="fas fa-calendar-alt"></i> <?php echo date('M j, Y', strtotime($event['event_date'])); ?></span>
                                <span><i class="fas fa-map-marker-alt"></i> <?php echo htmlspecialchars($event['location']); ?></span>
                            </div>
                            <div class="event-card-buttons">
                                <button class="btn-primary" onclick="event.stopPropagation(); joinEvent(<?php echo $event['id']; ?>)">Join Now</button>
                                <button class="btn-secondary" onclick="event.stopPropagation(); showEventDetails(<?php echo $event['id']; ?>)">Details</button>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-span-full text-center py-8">
                        <p class="text-gray-500 text-lg">No upcoming events scheduled at the moment.</p>
                    </div>
                <?php endif; ?>
            </div>
            <!-- Optional: "View All Upcoming Events" button -->
            <?php /* if (count($upcomingEvents) > 3) : // Add logic if you have more upcoming events than displayed ?>
                <div class="text-center mt-12">
                    <a href="#" class="inline-block bg-orange-500 text-white font-bold py-3 px-8 rounded-full hover:bg-orange-600 transition-colors">View All Upcoming Events</a>
                </div>
            <?php endif; */ ?>
        </div>
    </section>

    <!-- Past Events Section -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">Past Events & Projects</h2>
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                <?php if (!empty($pastEvents)): ?>
                    <?php foreach ($pastEvents as $index => $event): ?>
                    <div class="event-card-grid animate-scale-in" 
                         style="animation-delay: <?php echo $index * 100; ?>ms;" 
                         onclick="showEventDetails(<?php echo $event['id']; ?>)">
                        <img src="<?php echo htmlspecialchars($event['image_url']); ?>" alt="<?php echo htmlspecialchars($event['title']); ?>">
                        <div class="p-4">
                            <h4 class="mb-2"><?php echo htmlspecialchars($event['title']); ?></h4>
                            <p class="text-gray-600 text-sm mb-3"><?php echo htmlspecialchars(substr($event['description'], 0, 100)) . '...'; ?></p>
                            <div class="event-meta-info">
                                <span><i class="fas fa-calendar-alt"></i> <?php echo date('M j, Y', strtotime($event['event_date'])); ?></span>
                                <span><i class="fas fa-map-marker-alt"></i> <?php echo htmlspecialchars($event['location']); ?></span>
                            </div>
                            <div class="event-card-buttons">
                                <button class="btn-primary" onclick="event.stopPropagation(); showEventDetails(<?php echo $event['id']; ?>)">View Photos</button>
                                <button class="btn-secondary" onclick="event.stopPropagation(); shareEvent(<?php echo $event['id']; ?>)">Share</button>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-span-full text-center py-8">
                        <p class="text-gray-500 text-lg">No past events or projects available.</p>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Pagination (Keep as is, but ensure it works with your getPastEvents logic) -->
            <?php if (count($pastEvents) >= 8): ?>
            <div class="flex justify-center items-center space-x-2 mt-12">
                <button class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-700 hover:bg-gray-400 transition-colors"><i class="fas fa-chevron-left"></i></button>
                <button class="w-8 h-8 rounded-full bg-black text-white flex items-center justify-center">1</button>
                <button class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition-colors">2</button>
                <button class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition-colors">3</button>
                <span class="text-gray-500">...</span>
                <button class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-gray-300 transition-colors">10</button>
                <button class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-700 hover:bg-gray-400 transition-colors"><i class="fas fa-chevron-right"></i></button>
            </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- Event Details Modal (Remains unchanged) -->
    <div id="eventDetailsModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeDetailsModal()">&times;</span>
            <div id="eventDetailsContent">
                <!-- Event details will be loaded here -->
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <div class="footer-logo">
                        <img src="public/images/logo.png" alt="SLAITO">
                    </div>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    <div class="footer-social">
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h3>Explore</h3>
                    <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="events.php">Events</a></li>
                        <li><a href="blog.php">Blogs & News</a></li>
                        <li><a href="members.html">Members</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Company</h3>
                    <ul>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Press</a></li>
                        <li><a href="#">Partners</a></li>
                        <li><a href="#">Newsletter</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>Copyright © 2025. All rights reserved.</p>
                <div class="footer-links">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Use</a>
                    <a href="#">Cookie Policy</a>
                    <a href="#">Preferences</a>
                    <a href="#">Ethics Line</a>
                    <a href="#">Accessibility</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Function to show event details (Remains unchanged)
        function showEventDetails(eventId) {
            const formData = new FormData();
            formData.append('action', 'get_event_details');
            formData.append('id', eventId);

            fetch('ajax_handler.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayEventDetails(data.event);
                } else {
                    alert('Error loading event details');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while loading event details');
            });
        }

        // Function to display event details in modal (Remains unchanged)
        function displayEventDetails(event) {
            const modal = document.getElementById('eventDetailsModal');
            const content = document.getElementById('eventDetailsContent');
            
            const eventDate = new Date(event.event_date + 'T' + event.event_time);
            const formattedDate = eventDate.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            });
            const formattedTime = eventDate.toLocaleTimeString('en-US', { 
                hour: '2-digit', 
                minute: '2-digit' 
            });
            
            content.innerHTML = `
                <div class="event-details-header" style="background-image: url('${event.image_url}')">
                    <div class="event-details-overlay">
                        <div>
                            <div class="event-details-title">${event.title}</div>
                            <div class="event-details-meta">
                                <span><i class="fas fa-tag"></i> ${event.type.toUpperCase()}</span>
                                <span class="status-indicator status-${event.status}">${event.status}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="event-details-body">
                    <div class="event-info-grid">
                        <div class="event-info-item">
                            <div class="event-info-icon">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <div>
                                <div style="font-weight: 600;">Date</div>
                                <div style="color: #6b7280;">${formattedDate}</div>
                            </div>
                        </div>
                        
                        <div class="event-info-item">
                            <div class="event-info-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <div style="font-weight: 600;">Time</div>
                                <div style="color: #6b7280;">${formattedTime}</div>
                            </div>
                        </div>
                        
                        <div class="event-info-item">
                            <div class="event-info-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <div style="font-weight: 600;">Location</div>
                                <div style="color: #6b7280;">${event.location}</div>
                            </div>
                        </div>
                        
                        <div class="event-info-item">
                            <div class="event-info-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div>
                                <div style="font-weight: 600;">Participants</div>
                                <div style="color: #6b7280;">${event.members_count} members</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="event-stats-row">
                        <div class="stat-box">
                            <div class="number">${event.views}</div>
                            <div class="label">Views</div>
                        </div>
                        <div class="stat-box">
                            <div class="number">${event.likes}</div>
                            <div class="label">Likes</div>
                        </div>
                        <div class="stat-box">
                            <div class="number">${event.members_count}</div>
                            <div class="label">Members</div>
                        </div>
                        <div class="stat-box">
                            <div class="number">${new Date(event.created_at).toLocaleDateString()}</div>
                            <div class="label">Created</div>
                        </div>
                    </div>
                    
                    <div class="event-description">
                        <h3 style="color: #EEA520; margin-bottom: 15px; font-size: 1.3rem;">About This ${event.type}</h3>
                        <p>${event.description}</p>
                    </div>
                    
                    <div class="event-actions">
                        <button class="btn-like" onclick="likeEvent(${event.id})">
                            <i class="fas fa-heart"></i>
                            Like (${event.likes})
                        </button>
                        <button class="btn-share" onclick="shareEvent(${event.id})">
                            <i class="fas fa-share"></i>
                            Share
                        </button>
                        <button class="btn-join" onclick="joinEvent(${event.id})">
                            <i class="fas fa-user-plus"></i>
                            Join ${event.type}
                        </button>
                    </div>
                </div>
            `;
            
            modal.style.display = 'block';
        }

        // Function to close details modal (Remains unchanged)
        function closeDetailsModal() {
            document.getElementById('eventDetailsModal').style.display = 'none';
        }

        // Function to like an event (Remains unchanged)
        function likeEvent(eventId) {
            const formData = new FormData();
            formData.append('action', 'update_likes');
            formData.append('id', eventId);

            fetch('ajax_handler.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showEventDetails(eventId); // Reload modal to show updated like count
                }
            });
        }

        // Function to share an event (Remains unchanged)
        function shareEvent(eventId) {
            if (navigator.share) {
                navigator.share({
                    title: 'Check out this event!',
                    url: window.location.href + '?event=' + eventId
                });
            } else {
                const url = window.location.href + '?event=' + eventId;
                navigator.clipboard.writeText(url).then(() => {
                    alert('Event link copied to clipboard!');
                });
            }
        }

        // Function to join an event (Remains unchanged)
        function joinEvent(eventId) {
            alert('Join functionality would be implemented here. Event ID: ' + eventId);
        }

        // Close modal when clicking outside (Remains unchanged)
        window.onclick = function(event) {
            const modal = document.getElementById('eventDetailsModal');
            if (event.target === modal) {
                closeDetailsModal();
            }
        }

        // Add this to your existing script or modify existing ones
        // This ensures views are updated when the details modal is shown
        const originalShowEventDetails = showEventDetails;
        showEventDetails = function(eventId) {
            updateViews(eventId); // Call updateViews first
            originalShowEventDetails(eventId); // Then proceed with showing details
        };

        // Update Views (Remains unchanged)
        function updateViews(eventId) {
            fetch('ajax_handler.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=update_views&id=' + eventId
            });
        }
    </script>

    <script src="script.js"></script>
</body>
</html>