<?php
if (session_status() !== PHP_SESSION_ACTIVE) session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Contact - Esa's Fashion</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<?php include __DIR__ . '/header.php'; ?>
<main class="container">
  <h2>Contact Us</h2>
  <p class="muted" style="margin-top:8px;">We'd love to hear from you! Send us a message and we'll respond as soon as possible.</p>

  <!-- Contact Form -->
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px;">
    <div>
      <h3 style="margin-bottom: 24px; color: #F07E2D; font-size: 20px; font-weight: 600;">Send us a Message</h3>
      <form action="api_contact_submit.php" method="POST" style="display:flex; flex-direction:column; gap:16px;">
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Your Name</label>
          <input type="text" name="name" placeholder="Full name" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
        </div>
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Email Address</label>
          <input type="email" name="email" placeholder="your@email.com" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
        </div>
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Subject</label>
          <input type="text" name="subject" placeholder="Message subject" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
        </div>
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Message</label>
          <textarea name="message" placeholder="Your message here..." rows="6" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit;"></textarea>
        </div>
        <button class="btn" type="submit" style="background: #F07E2D; color: white; padding: 12px 24px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;" onmouseover="this.style.background='#e06815';" onmouseout="this.style.background='#F07E2D';">
          Send Message
        </button>
      </form>
    </div>

    <!-- Contact Info & Feedback Section -->
    <div>
      <h3 style="margin-bottom: 24px; color: #F07E2D; font-size: 20px; font-weight: 600;">Get in Touch</h3>
      
      <!-- Contact Info Cards -->
      <div style="display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px;">
        <div style="background: #f9f9f9; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
          <h4 style="margin: 0 0 8px 0; color: #333; font-weight: 600;">📧 Email</h4>
          <p style="margin: 0; color: #666; font-size: 14px;">info@empirosport.it</p>
        </div>
        <div style="background: #f9f9f9; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
          <h4 style="margin: 0 0 8px 0; color: #333; font-weight: 600;">📞 Phone</h4>
          <p style="margin: 0; color: #666; font-size: 14px;">(+39) 049 8724114</p>
        </div>
        <div style="background: #f9f9f9; padding: 20px; border-radius: 8px; border-left: 4px solid #F07E2D;">
          <h4 style="margin: 0 0 8px 0; color: #333; font-weight: 600;">📍 Address</h4>
          <p style="margin: 0; color: #666; font-size: 14px;">Via Marco Polo 19/A - Albignasego (PD)</p>
        </div>
      </div>

      <!-- Customer Feedback Section -->
      <div style="background: linear-gradient(135deg, #F07E2D 0%, #e06815 100%); padding: 24px; border-radius: 8px; margin: 10px; color: white;">
        <h4 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">⭐ Share Your Feedback</h4>
        <p style="margin: 0 0 16px 0; font-size: 13px; opacity: 0.95;">Help us improve! Tell us about your experience with our products and service.</p>
        <button onclick="openFeedbackForm()" style="background: white; color: #F07E2D; padding: 10px 20px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)';" onmouseout="this.style.transform='scale(1)';">
          Leave Feedback
        </button>
      </div>
    </div>
  </div>

  <!-- Feedback Modal -->
  <div id="feedbackModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: white; padding: 32px; border-radius: 8px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 style="margin: 0; color: #F07E2D; font-size: 20px;">Customer Feedback</h3>
        <button onclick="closeFeedbackForm()" style="background: none; border: none; font-size: 28px; cursor: pointer; color: #999;">×</button>
      </div>
      
      <form action="api_feedback_submit.php" method="POST" style="display: flex; flex-direction: column; gap: 16px;">
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Rating</label>
          <div style="display: flex; gap: 8px; font-size: 28px;">
            <span style="cursor: pointer;" onclick="setRating(1)">☆</span>
            <span style="cursor: pointer;" onclick="setRating(2)">☆</span>
            <span style="cursor: pointer;" onclick="setRating(3)">☆</span>
            <span style="cursor: pointer;" onclick="setRating(4)">☆</span>
            <span style="cursor: pointer;" onclick="setRating(5)">☆</span>
          </div>
          <input type="hidden" name="rating" id="ratingValue" value="5">
        </div>
        
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Your Name</label>
          <input type="text" name="feedback_name" placeholder="Name" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
        </div>
        
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Email</label>
          <input type="email" name="feedback_email" placeholder="your@email.com" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
        </div>
        
        <div>
          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: #333;">Your Feedback</label>
          <textarea name="feedback_text" placeholder="Tell us what you think..." rows="5" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; font-family: inherit;"></textarea>
        </div>
        
        <button type="submit" style="background: #F07E2D; color: white; padding: 12px 24px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;" onmouseover="this.style.background='#e06815';" onmouseout="this.style.background='#F07E2D';">
          Submit Feedback
        </button>
      </form>
    </div>
  </div>

</main>
<?php include __DIR__ . '/footer.php'; ?>

<script>
function openFeedbackForm() {
  document.getElementById('feedbackModal').style.display = 'flex';
  document.body.style.overflow = 'hidden';
}

function closeFeedbackForm() {
  document.getElementById('feedbackModal').style.display = 'none';
  document.body.style.overflow = 'auto';
}

function setRating(rating) {
  document.getElementById('ratingValue').value = rating;
  const stars = document.querySelectorAll('#feedbackModal span[onclick*="setRating"]');
  stars.forEach((star, idx) => {
    star.textContent = idx < rating ? '★' : '☆';
    star.style.color = idx < rating ? '#F07E2D' : '#ddd';
  });
}

// Close modal on outside click
document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('feedbackModal');
  modal.addEventListener('click', function(e) {
    if (e.target === modal) {
      closeFeedbackForm();
    }
  });
});
</script>
</body>
</html>
