<?php
if (session_status() !== PHP_SESSION_ACTIVE) session_start();
require_once __DIR__ . '/config/image_config.php';
require_once __DIR__ . '/helpers/database_helper.php';

// Load awards
$awards = DatabaseHelper::loadJson('awards.json', ['enabled' => true, 'images' => []]);
$awardsEnabled = !empty($awards['enabled']);
$awardImages = $awards['images'] ?? [];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Awards & Trophies - Emporio Sport</title>
  <meta name="description" content="Customizable awards, trophies, and medals for sports events and competitions.">
  <meta name="keywords" content="awards, trophies, medals, customizable awards, sports awards">
  <link rel="stylesheet" href="styles.css">
  <style>
    .awards-slider-container {
      position: relative;
      background: linear-gradient(135deg, #F07E2D 0%, #f5a85c 100%);
      padding: 60px 20px;
      margin-bottom: 40px;
      border-radius: 8px;
      min-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .awards-slider-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }

    .awards-slider-title {
      color: white;
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      max-width: 600px;
      line-height: 1.4;
      padding: 20px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .awards-slider-wrapper {
      position: relative;
      width: 100%;
      max-width: 900px;
      margin: 0 auto 40px;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .awards-carousel {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: #f5f5f5;
    }

    .awards-carousel-image {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .awards-carousel-image.active {
      opacity: 1;
    }

    .awards-nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      width: 50px;
      height: 50px;
      border: none;
      background: rgba(240, 126, 45, 0.8);
      color: white;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .awards-nav-button:hover {
      background: rgba(240, 126, 45, 1);
    }

    .awards-nav-button.prev {
      left: 10px;
    }

    .awards-nav-button.next {
      right: 10px;
    }

    .awards-info-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 60px;
    }

    .award-info-card {
      text-align: center;
      padding: 30px;
      background: #f9f9f9;
      border-radius: 8px;
      border-top: 4px solid #F07E2D;
      transition: all 0.3s ease;
    }

    .award-info-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }

    .award-card-icon {
      font-size: 48px;
      margin-bottom: 20px;
    }

    .award-card-title {
      font-size: 20px;
      font-weight: 700;
      color: #333;
      margin-bottom: 12px;
    }

    .award-card-description {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .awards-slider-title {
        font-size: 20px;
      }

      .awards-info-cards {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .awards-nav-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
      }

      .awards-slider-container {
        padding: 40px 20px;
        min-height: 300px;
      }
    }
  </style>
</head>
<body>
<?php include __DIR__ . '/header.php'; ?>

<main class="container">
  <div style="text-align: center; margin: 40px 0;">
    <h1>Awards & Trophies</h1>
    <p style="color: #666; font-size: 16px;">Celebrate excellence with our customizable awards, trophies, and medals</p>
  </div>

  <!-- Awards Slider Section -->
  <?php if ($awardsEnabled && !empty($awardImages)): ?>
  <div style="max-width: 1000px; margin: 0 auto 60px;">
    <div class="awards-slider-container">
      <div class="awards-slider-overlay">
        <h2 class="awards-slider-title">🏆 CELEBRATE SPORTING EVENT AWARDS WITH HIGH-QUALITY PERSONALIZED CUPS, PLAQUES, AND MEDALS</h2>
      </div>
    </div>

    <div class="awards-slider-wrapper">
      <div class="awards-carousel" id="awardsCarousel">
        <?php foreach ($awardImages as $index => $award): ?>
          <img 
            src="<?php echo htmlspecialchars($award['image']); ?>" 
            alt="Award <?php echo $index + 1; ?>"
            class="awards-carousel-image <?php echo $index === 0 ? 'active' : ''; ?>"
          >
        <?php endforeach; ?>
      </div>
      
      <?php if (count($awardImages) > 1): ?>
      <button class="awards-nav-button prev" onclick="previousAwardImage()">❮</button>
      <button class="awards-nav-button next" onclick="nextAwardImage()">❯</button>
      <?php endif; ?>
    </div>

    <div class="awards-info-cards">
      <div class="award-info-card">
        <div class="award-card-icon">🥇</div>
        <div class="award-card-title">Medals</div>
        <p class="award-card-description">Premium quality medals for championship winners and outstanding achievements. Customize with your event details and branding.</p>
      </div>
      <div class="award-info-card">
        <div class="award-card-icon">🎖️</div>
        <div class="award-card-title">License Plates</div>
        <p class="award-card-description">Durable personalized license plates perfect for sports events, competitions, and corporate awards. Made to last.</p>
      </div>
      <div class="award-info-card">
        <div class="award-card-icon">🏆</div>
        <div class="award-card-title">Cups & Trophies</div>
        <p class="award-card-description">Elegant trophy cups in various sizes, perfect for recognizing excellence and celebrating your top performers.</p>
      </div>
    </div>
  </div>
  <?php endif; ?>

  <!-- Award Collections -->
  <section style="margin: 50px 0;">
    <h2 style="text-align: center; margin-bottom: 30px;">Award Collections</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
      <div style="text-align: center; padding: 25px; border: 1px solid #e6e6e6; border-radius: 8px; transition: all 0.3s ease;" onmouseover="this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow='none'">
        <div style="font-size: 50px; margin-bottom: 15px;">🏆</div>
        <h3>Sports Trophies</h3>
        <p style="color: #666; margin: 15px 0;">Premium trophies for athletic achievements and championships.</p>
        <ul style="color: #666; text-align: left; font-size: 14px; margin: 15px 0;">
          <li>✓ Gold, Silver, and Bronze options</li>
          <li>✓ Custom engraving available</li>
          <li>✓ Various sizes and designs</li>
          <li>✓ Fast turnaround</li>
        </ul>
        <a href="contact.php" style="color: #F07E2D; text-decoration: none; font-weight: 600;">View Collection →</a>
      </div>

      <div style="text-align: center; padding: 25px; border: 1px solid #e6e6e6; border-radius: 8px; transition: all 0.3s ease;" onmouseover="this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow='none'">
        <div style="font-size: 50px; margin-bottom: 15px;">🥇</div>
        <h3>Medals & Ribbons</h3>
        <p style="color: #666; margin: 15px 0;">Stylish medals and ribbons for competitions and events.</p>
        <ul style="color: #666; text-align: left; font-size: 14px; margin: 15px 0;">
          <li>✓ Customizable designs</li>
          <li>✓ Multiple finish options</li>
          <li>✓ Premium ribbons included</li>
          <li>✓ Bulk pricing available</li>
        </ul>
        <a href="contact.php" style="color: #F07E2D; text-decoration: none; font-weight: 600;">View Collection →</a>
      </div>

      <div style="text-align: center; padding: 25px; border: 1px solid #e6e6e6; border-radius: 8px; transition: all 0.3s ease;" onmouseover="this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow='none'">
        <div style="font-size: 50px; margin-bottom: 15px;">🎖️</div>
        <h3>Badges & Pins</h3>
        <p style="color: #666; margin: 15px 0;">Custom badges and pins for recognition and achievement.</p>
        <ul style="color: #666; text-align: left; font-size: 14px; margin: 15px 0;">
          <li>✓ Custom logo design</li>
          <li>✓ High-quality materials</li>
          <li>✓ Perfect for events</li>
          <li>✓ Competitive pricing</li>
        </ul>
        <a href="contact.php" style="color: #F07E2D; text-decoration: none; font-weight: 600;">View Collection →</a>
      </div>

      <div style="text-align: center; padding: 25px; border: 1px solid #e6e6e6; border-radius: 8px; transition: all 0.3s ease;" onmouseover="this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow='none'">
        <div style="font-size: 50px; margin-bottom: 15px;">🏅</div>
        <h3>Commemorative Medals</h3>
        <p style="color: #666; margin: 15px 0;">Special medals for memorable events and celebrations.</p>
        <ul style="color: #666; text-align: left; font-size: 14px; margin: 15px 0;">
          <li>✓ Event date engraving</li>
          <li>✓ Premium materials</li>
          <li>✓ Custom designs</li>
          <li>✓ Keepsake quality</li>
        </ul>
        <a href="contact.php" style="color: #F07E2D; text-decoration: none; font-weight: 600;">View Collection →</a>
      </div>

      <div style="text-align: center; padding: 25px; border: 1px solid #e6e6e6; border-radius: 8px; transition: all 0.3s ease;" onmouseover="this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow='none'">
        <div style="font-size: 50px; margin-bottom: 15px;">⭐</div>
        <h3>Premium Awards</h3>
        <p style="color: #666; margin: 15px 0;">Luxury awards for VIP recognition and elite achievements.</p>
        <ul style="color: #666; text-align: left; font-size: 14px; margin: 15px 0;">
          <li>✓ Luxury materials & finishes</li>
          <li>✓ Bespoke designs</li>
          <li>✓ Premium presentation box</li>
          <li>✓ Certificate included</li>
        </ul>
        <a href="contact.php" style="color: #F07E2D; text-decoration: none; font-weight: 600;">View Collection →</a>
      </div>

      <div style="text-align: center; padding: 25px; border: 1px solid #e6e6e6; border-radius: 8px; transition: all 0.3s ease;" onmouseover="this.style.boxShadow='0 5px 15px rgba(0,0,0,0.1)'" onmouseout="this.style.boxShadow='none'">
        <div style="font-size: 50px; margin-bottom: 15px;">🎁</div>
        <h3>Gift Sets</h3>
        <p style="color: #666; margin: 15px 0;">Complete award gift sets for special occasions.</p>
        <ul style="color: #666; text-align: left; font-size: 14px; margin: 15px 0;">
          <li>✓ Combination packages</li>
          <li>✓ Elegant presentation</li>
          <li>✓ Customizable sets</li>
          <li>✓ Corporate gifting</li>
        </ul>
        <a href="contact.php" style="color: #F07E2D; text-decoration: none; font-weight: 600;">View Collection →</a>
      </div>
    </div>
  </section>

  <!-- Customization Options -->
  <section style="margin: 50px 0; background: #f5f5f5; padding: 40px; border-radius: 8px;">
    <h2 style="text-align: center; margin-bottom: 30px;">Customization Options</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
      <div style="background: white; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
        <h4>🎨 Custom Design</h4>
        <p style="color: #666; font-size: 14px;">Create unique award designs tailored to your event or organization.</p>
      </div>
      <div style="background: white; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
        <h4>✏️ Engraving & Printing</h4>
        <p style="color: #666; font-size: 14px;">Professional engraving and printing for names, dates, and logos.</p>
      </div>
      <div style="background: white; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
        <h4>🎀 Ribbon Selection</h4>
        <p style="color: #666; font-size: 14px;">Choose from premium ribbon colors and materials to match your brand.</p>
      </div>
      <div style="background: white; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
        <h4>🏷️ Custom Packaging</h4>
        <p style="color: #666; font-size: 14px;">Premium presentation boxes and gift packaging available.</p>
      </div>
      <div style="background: white; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
        <h4>📦 Bulk Orders</h4>
        <p style="color: #666; font-size: 14px;">Special pricing for large orders with dedicated support.</p>
      </div>
      <div style="background: white; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
        <h4>⚡ Rush Production</h4>
        <p style="color: #666; font-size: 14px;">Fast turnaround times available for urgent events.</p>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <!-- <section style="margin: 50px 0; text-align: center; background: #F07E2D; color: white; padding: 40px; border-radius: 8px;">
    <h2>Create Your Custom Award</h2>
    <p style="margin: 15px 0; font-size: 16px;">Contact us for design consultation and custom quotes.</p>
    <a href="contact.php" style="display: inline-block; background: white; color: #F07E2D; padding: 12px 30px; text-decoration: none; border-radius: 4px; font-weight: 600; margin-top: 15px;">Contact Us Now</a>
  </section> -->
</main>

<script>
let currentAwardIndex = 0;
const awardImages = document.querySelectorAll('.awards-carousel-image');
const totalAwards = awardImages.length;

function showAwardImage(index) {
  if (totalAwards === 0) return;
  
  // Normalize index
  if (index < 0) {
    currentAwardIndex = totalAwards - 1;
  } else if (index >= totalAwards) {
    currentAwardIndex = 0;
  } else {
    currentAwardIndex = index;
  }
  
  // Update all images
  awardImages.forEach((img, i) => {
    img.classList.remove('active');
    if (i === currentAwardIndex) {
      img.classList.add('active');
    }
  });
}

function nextAwardImage() {
  showAwardImage(currentAwardIndex + 1);
}

function previousAwardImage() {
  showAwardImage(currentAwardIndex - 1);
}
</script>

<?php include __DIR__ . '/footer.php'; ?>
</body>
</html>

