<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Coming Soon | Wear the Art</title>
  <style>
    /* --- RESET & LAYOUT --- */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      background: url('assets/duder.jpg') center center / cover no-repeat fixed;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      padding: 40px 20px;
    }

    /* --- LOGO --- */
    .logo {
      max-width: 350px;
      margin-top: 20px;
    }

    /* --- CONTENT --- */
    .content {
      max-width: 800px;
      margin: auto;
      background: rgba(0, 0, 0, 0.5);
      padding: 40px;
      border-radius: 16px;
      backdrop-filter: blur(4px);
    }

    h1 {
      font-size: 3.5rem;
      font-weight: 700;
      margin-bottom: 20px;
    }

    p {
      font-size: 1.1rem;
      margin-bottom: 25px;
      line-height: 1.5;
    }

    /* --- FORM --- */
    form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    input[type="email"] {
      padding: 12px;
      border-radius: 8px;
      border: none;
      font-size: 1rem;
      text-align: center;
    }

    button {
      background-color: #ffb400;
      color: #000;
      font-weight: bold;
      font-size: 1rem;
      border: none;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    button:hover {
      background-color: #ffd700;
    }

    /* --- CONFIRMATION & ERROR --- */
    .confirmation, .error {
      display: none;
      margin-top: 20px;
      font-size: 1.1rem;
    }

    .confirmation {
      color: #a6ff9b;
    }

    .error {
      color: #ff6b6b;
    }

    footer {
      font-size: 0.8rem;
      opacity: 0.6;
      margin-bottom: 10px;
    }

    @media (max-width: 600px) {
      h1 { font-size: 2rem; }
      .content { padding: 25px; }
    }
  </style>
</head>
<body>

  <!-- LOGO -->
  <img src="assets/67f7dd91d44fd9415a6f1483_logg-wht.png" alt="Custom Graffiti Logo" class="logo" />

  <!-- MAIN CONTENT -->
  <div class="content">
    <h1>Wear the Art.
      <br>Join the Movement.</h1>
    <p>Be the first to discover limited-edition tees and prints featuring bold new works.
      <br><br>  
       Join our list — exclusive drops, early access, and more.</p>

    <form id="signup-form">
      <input type="email" name="EMAIL" placeholder="Enter your email" required />
      <button type="submit">Submit</button>
    </form>

    <div class="confirmation" id="confirmation-message">
      ✅ Thank you for joining!
    </div>
    <div class="error" id="error-message">
      ❌ Something went wrong. Please try again.
    </div>
  </div>

  <footer>© 2025 Custom Graffiti. All rights reserved.</footer>

  <script>
  const form = document.getElementById('signup-form');
  const confirmationMessage = document.getElementById('confirmation-message');
  const errorMessage = document.getElementById('error-message');

  form.addEventListener('submit', async function(event) {
    event.preventDefault(); // Prevent default form submission

    const email = form.querySelector('input[name="EMAIL"]').value;

    try {
      const response = await fetch('/subscribe.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
      });

      const result = await response.json();

      if (response.ok && result.status === 'subscribed') {
        confirmationMessage.style.display = 'block';
        errorMessage.style.display = 'none';
        form.reset(); // Clear the form
      } else {
        throw new Error(result.error || 'Failed to subscribe');
      }
    } catch (error) {
      console.error('Error:', error);
      confirmationMessage.style.display = 'none';
      errorMessage.textContent = `❌ ${error.message}`; // Display specific error
      errorMessage.style.display = 'block';
    }
  });
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a0c0384d299ffc38',t:'MTc4MTUxMjMwMQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>