<?php
session_start();
require_once 'admin-panal/includes/db.php';

// Fetch active testimonials
$stmt = $pdo->query("SELECT * FROM testimonials WHERE is_active = 1 ORDER BY sort_order ASC, created_at DESC");
$testimonials = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Calculate stats
$totalReviews = count($testimonials);
$avgRating = 0;
if ($totalReviews > 0) {
    $sum = 0;
    foreach ($testimonials as $t) {
        $sum += $t['rating'];
    }
    $avgRating = round($sum / $totalReviews, 1);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
       <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-Z2X2T395KZ');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Customer Testimonials — Elegance of India</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />
  <style>
    .testi-header {
      background: #fdfbf8;
      padding: 60px 0;
      text-align: center;
      border-bottom: 1px solid #ede8df;
    }
    .testi-header h1 {
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      color: #111;
      margin-bottom: 10px;
      font-weight: 400;
    }
    .testi-header p {
      color: #c9a96e;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-size: 0.85rem;
      font-weight: 600;
    }
    
    .testi-stats-container {
      max-width: 1200px;
      margin: -30px auto 40px;
      padding: 0 20px;
      position: relative;
      z-index: 10;
    }
    .testi-stats-card {
      background: #fff;
      border: 1px solid #ede8df;
      padding: 24px 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 10px 30px rgba(0,0,0,0.04);
      border-radius: 4px;
      text-align: center;
    }
    .testi-stat-item {
      flex: 1;
    }
    .testi-stat-item:not(:last-child) {
      border-right: 1px solid #ede8df;
    }
    .testi-stat-value {
      font-family: 'Playfair Display', serif;
      font-size: 2.2rem;
      color: #111;
      font-weight: 600;
      line-height: 1.2;
    }
    .testi-stat-label {
      font-size: 11px;
      color: #888;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-top: 6px;
    }
    .testi-stars-avg {
      color: #c9a96e;
      font-size: 14px;
      margin-top: 4px;
    }

    .testi-section {
      padding: 40px 0 80px;
      background: #faf8f5;
    }
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
    .testi-card {
      background: #fff;
      border: 1px solid #ede8df;
      padding: 35px;
      border-radius: 4px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.02);
      transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
    }
    .testi-card::before {
      content: '“';
      position: absolute;
      top: 15px;
      left: 20px;
      font-family: 'Playfair Display', serif;
      font-size: 5rem;
      color: rgba(201, 169, 110, 0.08);
      line-height: 1;
    }
    .testi-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(201,169,110,0.08);
      border-color: #c9a96e;
    }
    .testi-rating {
      color: #c9a96e;
      font-size: 12px;
      margin-bottom: 20px;
      position: relative;
      z-index: 2;
    }
    .testi-content {
      font-size: 14px;
      line-height: 1.8;
      color: #555;
      margin-bottom: 25px;
      font-style: italic;
      position: relative;
      z-index: 2;
      flex-grow: 1;
    }
    .testi-user {
      display: flex;
      align-items: center;
      gap: 15px;
      border-top: 1px solid #f9f6f0;
      padding-top: 20px;
    }
    .testi-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #ede8df;
      background: #faf8f5;
    }
    .testi-avatar-placeholder {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(201,169,110,0.1);
      color: #c9a96e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Playfair Display', serif;
      font-weight: 600;
      font-size: 1.2rem;
      border: 2px solid #ede8df;
    }
    .testi-meta h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      color: #111;
      margin-bottom: 2px;
      font-weight: 500;
    }
    .testi-meta p {
      font-size: 10px;
      color: #999;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .testi-product-badge {
      display: inline-block;
      font-size: 9px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #c9a96e;
      border: 1px solid rgba(201,169,110,0.3);
      padding: 3px 8px;
      border-radius: 2px;
      margin-top: 8px;
      background: rgba(201,169,110,0.02);
    }
    
    @media (max-width: 991px) {
      .testi-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 768px) {
      .testi-header h1 {
        font-size: 2.3rem;
      }
      .testi-stats-card {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
      }
      .testi-stat-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #ede8df;
        padding-bottom: 20px;
        width: 100%;
      }
      .testi-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .testi-card {
        padding: 25px;
      }
    }
  </style>
</head>
<body>
<?php include 'inc/header.php'; ?>

<div class="testi-header">
  <div class="container">
    <h1>Words of Appreciation</h1>
    <p>Real stories from our global patrons</p>
  </div>
</div>

<div class="testi-stats-container">
  <div class="testi-stats-card">
    <div class="testi-stat-item">
      <div class="testi-stat-value"><?= $avgRating > 0 ? $avgRating : '5.0' ?></div>
      <div class="testi-stars-avg">
        <?php 
        $roundedAvg = round($avgRating > 0 ? $avgRating : 5);
        for ($r = 1; $r <= 5; $r++): ?>
          <i class="<?= $r <= $roundedAvg ? 'fas' : 'far' ?> fa-star"></i>
        <?php endfor; ?>
      </div>
      <div class="testi-stat-label">Average Patron Rating</div>
    </div>
    <div class="testi-stat-item">
      <div class="testi-stat-value"><?= $totalReviews ?></div>
      <div class="testi-stat-label">Verified Reviews</div>
    </div>
    <div class="testi-stat-item">
      <div class="testi-stat-value">100%</div>
      <div class="testi-stat-label">Satisfaction Guarantee</div>
    </div>
  </div>
</div>

<div class="testi-section">
  <div class="container">
    <?php if ($totalReviews === 0): ?>
      <div style="text-align: center; padding: 60px 20px; background: #fff; border: 1px solid #ede8df;">
        <i class="far fa-comment-dots" style="font-size: 3rem; color: #c9a96e; margin-bottom: 20px;"></i>
        <h2 style="font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.8rem; margin-bottom: 10px;">No reviews shared yet</h2>
        <p style="color: #666; font-size: 0.95rem;">We'd love to hear from you soon!</p>
      </div>
    <?php else: ?>
      <div class="testi-grid">
        <?php foreach ($testimonials as $t): ?>
          <div class="testi-card">
            <div>
              <div class="testi-rating">
                <?php for ($r = 1; $r <= 5; $r++): ?>
                  <i class="<?= $r <= $t['rating'] ? 'fas' : 'far' ?> fa-star"></i>
                <?php endfor; ?>
              </div>
              <div class="testi-content">
                "<?= nl2br(htmlspecialchars($t['review'])) ?>"
              </div>
            </div>
            <div class="testi-user">
              <?php if ($t['avatar']): ?>
                <img class="testi-avatar" src="<?= htmlspecialchars($t['avatar']) ?>" alt="<?= htmlspecialchars($t['customer_name']) ?>" />
              <?php else: ?>
                <div class="testi-avatar-placeholder">
                  <?= strtoupper(substr($t['customer_name'], 0, 1)) ?>
                </div>
              <?php endif; ?>
              <div class="testi-meta">
                <h3><?= htmlspecialchars($t['customer_name']) ?></h3>
                <p><?= htmlspecialchars($t['location'] ?: 'Verified Buyer') ?></p>
                <?php if ($t['product_tag']): ?>
                  <div class="testi-product-badge">
                    <i class="fas fa-tag" style="font-size: 8px; margin-right: 4px;"></i><?= htmlspecialchars($t['product_tag']) ?>
                  </div>
                <?php endif; ?>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</div>

<?php include 'inc/footer.php'; ?>
</body>
</html>
