<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rate and Review Us - Inscipe</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore-compat.js"></script>
</head>
<link rel="stylesheet" href="reviewandrating.css">
<body class="bg-gray-50 font-sans">
  
  <header>
    <h1>
      <span class="In">Ins</span><span class="scipe">cipe</span>
    </h1>
  </header>


  
  <div class="flex items-center justify-center min-h-screen">
    <div class="bg-white rounded-xl shadow-lg w-full container border border-gray-100">
      
      <div class="sidebar hidden lg:block">
        <h2 class="font-bold text-white">Share Your Feedback</h2>
        <p>Your review helps us improve! If you have any questions, feel free to reach out to our support team.</p>
        <a href="mailto:inscipe@gmail.com" class="support-link">Contact Support</a>
      </div>

      
      <div class="form-section">
        <h1 class="text-xl sm:text-2xl lg:text-3xl xl:text-3xl font-bold mb-4 sm:mb-6 text-center text-gray-900 tracking-tight">Rate and Review Us</h1>
        <div id="loading" class="hidden text-center text-gray-600 text-sm sm:text-base lg:text-lg">Loading...</div>
        <div id="form-container" class="hidden">
          <div class="mb-4 sm:mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-1">User Info</label>
            <p id="user-info" class="text-gray-600 text-sm sm:text-base lg:text-lg bg-gray-50 p-3 rounded-lg border border-gray-200">Loading user info...</p>
          </div>
          <form id="review-form" class="mb-4">
            <div class="mb-4 sm:mb-6">
              <label for="rating" class="block text-sm font-medium text-gray-700 mb-1">Rating</label>
              <select id="rating" aria-label="Rating" class="hidden">
                <option value="" disabled selected>Select a rating</option>
                <option value="1">1 Star</option>
                <option value="2">2 Stars</option>
                <option value="3">3 Stars</option>
                <option value="4">4 Stars</option>
                <option value="5">5 Stars</option>
              </select>
              <div class="star-rating" aria-label="Star rating">
                <i class="fas fa-star" data-value="1"></i>
                <i class="fas fa-star" data-value="2"></i>
                <i class="fas fa-star" data-value="3"></i>
                <i class="fas fa-star" data-value="4"></i>
                <i class="fas fa-star" data-value="5"></i>
              </div>
            </div>
            <label for="review" class="block text-sm font-medium text-gray-700 mb-1">Review</label>
            <textarea id="review" rows="4" aria-label="Review" class="mt-1 p-3 w-full border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base lg:text-lg shadow-sm resize-y" placeholder="Share your experience with us..." required></textarea>
            <button type="submit" id="submit-btn" class="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 transition text-sm sm:text-base lg:text-lg mt-4 sm:mt-6 font-medium">Submit Review</button>
          </form>
        </div>
        <div id="login-message" class="text-center">
          <p class="text-gray-600 text-sm sm:text-base lg:text-lg mb-2">Please log in to submit a review.</p>
          <a href="login" class="text-blue-500 hover:underline text-sm sm:text-base lg:text-lg font-medium">Go to Login</a>
        </div>
        <div id="success-message" aria-live="polite" class="hidden text-green-600 text-center mt-4 text-sm sm:text-base lg:text-lg bg-green-50 p-2 rounded-lg">Review submitted successfully!</div>
        <div id="error-message" aria-live="polite" class="hidden text-red-600 text-center mt-4 text-sm sm:text-base lg:text-lg bg-red-50 p-2 rounded-lg"></div>
      </div>
    </div>
  </div>

  
  <div class="bottom-navigation">
    <a href="/" class="nav-item" aria-label="Home">
      <i class="fas fa-home"></i>
      <span>Home</span>
    </a>
    <a href="account" class="nav-item" aria-label="Your Account">
      <i class="fas fa-user"></i>
      <span>You</span>
    </a>
    <a href="MY-order" class="nav-item" aria-label="My Orders">
      <i class="fas fa-shopping-bag"></i>
      <span>My Orders</span>
    </a>
    <a href="inscipecoines" class="nav-item" aria-label="Redeem">
      <i class="fas fa-gift"></i>
      <span>Redeem</span>
    </a>
    <a href="bot" class="nav-item" aria-label="Nova">
      <i class="fas fa-headset"></i>
      <span>Nova</span>
    </a>
  </div>

  
  <footer>
    <div class="footer-container">
      <p>© 2025 Inscipe. All rights reserved.</p>
    </div>
  </footer>
  <script src="reviewandrating.js"></script>
</body>
</html>
    <script>
      console.clear();
    </script>