const zoneMessage = document.getElementById("contacter");
const compteur = document.getElementById("restant");
const motCaractere = document.getElementById("mot");
const boutonEffacer = document.getElementById("effacer");
const formulaire = document.querySelector("form");
const badge = document.getElementById("statut_horaires");

const nom = document.getElementById("prenom");
const MAX = 500;

function rafraichir_badge() {
  const heure = new Date().getHours();

  if (heure >= 9 && heure < 18) {
    badge.textContent = "✅ Nous sommes ouverts (9h–18h)";
    badge.style.color = "green";
  } else {
    badge.textContent = "🔴 Fermé — écrivez-nous, on répond dès l'ouverture !";
    badge.style.color = "red";
  }
}
setInterval(rafraichir_badge, 60);

function rafraichirCompteur() {
  const restant = MAX - zoneMessage.value.length;
  compteur.textContent = restant;
  compteur.style.color = restant < 50 ? "red" : "black";
  motCaractere.textContent = restant <= 1 ? "caractère" : "caractères";
  localStorage.setItem("brouillon", zoneMessage.value);
}

zoneMessage.addEventListener("input", rafraichirCompteur);

boutonEffacer.addEventListener("click", function () {
  zoneMessage.value = "";
  rafraichirCompteur();
});

formulaire.addEventListener("submit", function (evenement) {
  evenement.preventDefault();
  if (zoneMessage.value.trim() === "") {
    alert("Merci d'écrire un message avant d'envoyer !");
  } else {
    const greeting = `merci ${nom.value}, ton message de ${zoneMessage.value.length} caractères a été pris en compte`;
    alert(`${greeting}`);
  }
});

function creerNavbar(pageActive) {
  return `
        <div id="nav_barre" class="shadow">
            <h1>FleetZen</h1>
            <div id="buttons">
                <button class="${pageActive === "contact" ? "instyled" : "styled"}">contact</button>
                <a href="services.html"><button class="${pageActive === "services" ? "instyled" : "styled"}">services</button></a>
                <a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
            </div>
        </div>`;
}

document.body.insertAdjacentHTML("afterbegin", creerNavbar("contact"));

document.getElementById("theme").addEventListener("click", function () {
  document.body.classList.toggle("sombre");
});

const titres = document.querySelectorAll(".q-titre");

titres.forEach(function (titre) {
  titre.addEventListener("click", function () {
    const reponse = titre.nextElementSibling;
    reponse.classList.toggle("ouverte");
  });
});

const horloge = document.getElementById("horloge");

function afficherHeure() {
  const maintenant = new Date();
  horloge.textContent = maintenant.toLocaleTimeString();
}

afficherHeure();
setInterval(afficherHeure, 1000);

zoneMessage.addEventListener("keydown", function (event) {
  if (event.key === "Enter" && event.ctrlKey) {
    formulaire.requestSubmit();
  }
  preventDefault();
  if (event.key === "Escape") {
    zoneMessage.value = "";
    rafraichirCompteur();
  }
});