<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kamoda Morez - Réservation Click & Collect</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fde9f2;
    color: #2b2b2b;
  }

  /* Header */
  header {
    background: #e6007e;
    color: #fff;
    padding: 14px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .logo h1 {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    letter-spacing: 3px;
    font-weight: 700;
  }
  .logo span {
    display:block;
    font-size: 0.6rem;
    letter-spacing: 4px;
    font-weight: 400;
    opacity: 0.9;
  }
  nav {
    display:flex;
    flex-direction: column;
    align-items:flex-end;
    gap: 6px;
  }
  nav .row {
    display:flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 600;
  }
  nav .row span { cursor: pointer; opacity: 0.95; }
  nav .row span:hover { text-decoration: underline; }
  .panier {
    background: #fff;
    color: #e6007e;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    display:flex;
    align-items:center;
    gap:6px;
  }

  /* Hero */
  .hero {
    text-align: center;
    padding: 40px 20px 20px;
  }
  .hero h2 {
    font-size: 2rem;
    color: #e6007e;
    font-weight: 700;
  }
  .hero p {
    margin-top: 8px;
    color: #555;
    font-size: 0.95rem;
  }

  /* Layout */
  .container {
    max-width: 1100px;
    margin: 0 auto 60px;
    padding: 0 20px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }

  .form-card, .info-card {
    background: #fff;
    border-radius: 14px;
    padding: 30px;
  }
  .form-card {
    flex: 1 1 480px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  }
  .info-card {
    flex: 1 1 320px;
    border: 1px solid #f3b8d8;
  }

  .form-card h3, .info-card h3 {
    color: #e6007e;
    margin-bottom: 20px;
    font-size: 1.2rem;
  }

  .field-group {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .field {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
  }
  .field label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
  }
  .field input,
  .field select,
  .field textarea {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
  }
  .field textarea {
    resize: vertical;
    min-height: 80px;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: 2px solid #e6007e;
    outline-offset: 1px;
  }

  .submit-btn {
    width: 100%;
    background: #e6007e;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s ease;
  }
  .submit-btn:hover { background: #c0006a; }
  .submit-btn:focus-visible { outline: 3px solid #66001f; outline-offset: 2px; }

  /* Info card */
  .info-card .adresse {
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.4;
  }
  .info-card h4 {
    color: #e6007e;
    margin: 18px 0 10px;
    font-size: 1rem;
  }
  .horaire-row {
    display:flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 4px 0;
    color: #444;
  }
  .etapes {
    list-style: none;
    margin-top: 8px;
  }
  .etapes li {
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: #444;
  }
  .etapes li b { color: #e6007e; }

  .footer-icons {
    display:flex;
    justify-content: space-around;
    margin-top: 20px;
    border-top: 1px solid #f3d4e7;
    padding-top: 16px;
    font-size: 0.75rem;
    color: #555;
    text-align:center;
  }

  @media (max-width: 600px) {
    header { flex-direction: column; align-items: flex-start; gap: 10px; }
    nav { align-items: flex-start; }
  }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
</head>
<body>

<section class="hero">
  <h2>🌸 Réservation Click & Collect</h2>
  <p>Kamoda Morez — Réservez vos articles en quelques clics</p>
</section>

<div class="container">

  <form class="form-card" id="reservationForm">
    <h3>Votre réservation</h3>

    <div class="field-group">
      <div class="field">
        <label for="nom">Nom et prénom</label>
        <input type="text" id="nom" name="nom">
      </div>
      <div class="field">
        <label for="tel">Téléphone</label>
        <input type="tel" id="tel" name="tel">
      </div>
    </div>

    <div class="field-group">
      <div class="field">
        <label for="email">E-mail</label>
        <input type="email" id="email" name="email">
      </div>
    </div>

    <div class="field-group">
      <div class="field">
        <label for="article">Article</label>
        <input type="text" id="article" name="article" placeholder="Ex : Robe, Veste, Sac...">
      </div>
    </div>

    <div class="field-group">
      <div class="field">
        <label for="taille">Taille</label>
        <select id="taille" name="taille">
          <option>XS</option>
          <option>S</option>
          <option>M</option>
          <option>L</option>
          <option>XL</option>
        </select>
      </div>
      <div class="field">
        <label for="quantite">Quantité</label>
        <input type="number" id="quantite" name="quantite" value="1" min="1">
      </div>
    </div>

    <div class="field-group">
      <div class="field">
        <label for="date">Date de retrait</label>
        <input type="date" id="date" name="date">
      </div>
      <div class="field">
        <label for="heure">Heure de retrait</label>
        <input type="time" id="heure" name="heure">
      </div>
    </div>

    <div class="field-group">
      <div class="field">
        <label for="infos">Informations complémentaires</label>
        <textarea id="infos" name="infos" placeholder="Couleur souhaitée, question, demande particulière..."></textarea>
      </div>
    </div>

    <button type="submit" class="submit-btn">💌 Envoyer ma réservation</button>
    <p id="statusMsg" style="margin-top:12px;text-align:center;font-size:0.85rem;"></p>
  </form>

  <aside class="info-card">
    <h3>📍 Kamoda Morez</h3>
    <div class="adresse">
      38 Quai Jobez<br>
      39400 Hauts-de-Bienne
    </div>

    <h4>Horaires</h4>
    <div class="horaire-row"><span>Mardi</span><span>09h45-12h00 / 14h15-19h00</span></div>
    <div class="horaire-row"><span>Mercredi</span><span>09h45-12h00 / 14h15-19h00</span></div>
    <div class="horaire-row"><span>Jeudi</span><span>09h45-12h00 / 14h15-19h00</span></div>
    <div class="horaire-row"><span>Vendredi</span><span>09h45-12h00 / 14h15-19h00</span></div>
    <div class="horaire-row"><span>Samedi</span><span>09h30-12h30 / 14h00-18h00</span></div>

    <h4>Comment ça fonctionne ?</h4>
    <ul class="etapes">
      <li><b>1.</b> Je remplis le formulaire.</li>
      <li><b>2.</b> Kamoda reçoit ma demande.</li>
      <li><b>3.</b> Ma réservation est préparée.</li>
      <li><b>4.</b> Je viens récupérer mon article.</li>
    </ul>

    <div class="footer-icons">
      <div>❤️<br>Mode</div>
      <div>🏬<br>Réservation</div>
      <div>📞<br>Conseil</div>
    </div>
  </aside>

</div>

<script>
  // ===== À REMPLIR avec tes infos EmailJS =====
  const EMAILJS_PUBLIC_KEY = "wyB9ga0Js2g4gHvKS";
  const EMAILJS_SERVICE_ID = "service_zbwbqpn";
  const EMAILJS_TEMPLATE_ID = "template_wv89xon";
  const DESTINATAIRE = "Kamoda39@yahoo.fr";
  // =============================================

  emailjs.init(EMAILJS_PUBLIC_KEY);

  const form = document.getElementById('reservationForm');
  const statusMsg = document.getElementById('statusMsg');

  form.addEventListener('submit', function(e){
    e.preventDefault();

    try {
      if (typeof emailjs === 'undefined') {
        statusMsg.style.color = "#c62828";
        statusMsg.textContent = "❌ Erreur : la librairie EmailJS ne s'est pas chargée (vérifie ta connexion internet ou désactive un bloqueur de pub).";
        return;
      }

      statusMsg.style.color = "#555";
      statusMsg.textContent = "Envoi en cours...";

      const params = {
        to_email: DESTINATAIRE,
        from_name: document.getElementById('nom').value,
        telephone: document.getElementById('tel').value,
        email_client: document.getElementById('email').value,
        article: document.getElementById('article').value,
        taille: document.getElementById('taille').value,
        quantite: document.getElementById('quantite').value,
        date_retrait: document.getElementById('date').value,
        heure_retrait: document.getElementById('heure').value,
        infos: document.getElementById('infos').value
      };

      emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, params)
        .then(function() {
          statusMsg.style.color = "#2e7d32";
          statusMsg.textContent = "✅ Votre réservation a été effectuée. Kamoda Morez va vous contacter.";
          form.reset();
        })
        .catch(function(err) {
          statusMsg.style.color = "#c62828";
          statusMsg.textContent = "❌ Erreur lors de l'envoi : " + (err && err.text ? err.text : JSON.stringify(err));
          console.error(err);
        });

    } catch (err) {
      statusMsg.style.color = "#c62828";
      statusMsg.textContent = "❌ Erreur technique : " + (err && err.message ? err.message : String(err));
      console.error(err);
    }
  });
</script>

</body>
</html>