<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Request a Product - 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="request-product.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">Request a Product</h2>
        <p>Can't find what you're looking for? Submit a product link, and we'll do our best to source it for you!</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">Request a Product</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="request-form" class="mb-4">
            <div class="mb-4 sm:mb-6">
              <label for="link-source" class="block text-sm font-medium text-gray-700 mb-1">Link Source</label>
              <select id="link-source" aria-label="Link source" 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 bg-white shadow-sm" required>
                <option value="" disabled selected>Select link source</option>
                <option value="Instagram">Instagram</option>
                <option value="Other Social Media">Other Social Media</option>
                <option value="E-commerce">E-commerce</option>
                <option value="Other">Other</option>
              </select>
            </div>
            <div id="other-source-container" class="mb-4 sm:mb-6 hidden">
              <label for="other-source" class="block text-sm font-medium text-gray-700 mb-1">Other Source</label>
              <input type="text" id="other-source" aria-label="Other source" 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" placeholder="Specify the source">
            </div>
            <div class="mb-4 sm:mb-6">
              <label for="product-link" class="block text-sm font-medium text-gray-700 mb-1">Product Link</label>
              <div class="input-wrapper">
                <input type="url" id="product-link" aria-label="Product link" 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" placeholder="https://example.com/product" required>
              </div>
            </div>
            <div class="mb-4 sm:mb-6">
              <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
              <textarea id="description" rows="4" aria-label="Description" 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="Describe the product you'd like us to source..." required maxlength="500"></textarea>
              <div class="char-counter" id="char-counter">0/500 characters</div>
            </div>
            <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 Request</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 request a product.</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">Product request 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.</a></p>
    </div>
  </footer>
<script src="request-product.js"></script>
</body>
</html>
    <script>
      console.clear();
    </script>