app.js

const destinations = {
  paris: {
    title: "Paris 1889",
    period: "Belle Epoque",
    image: "assets/paris-1889.webp",
    fallback: "assets/paris-1889.png",
    alt: "Paris en 1889 avec la Tour Eiffel et les visiteurs de l'Exposition Universelle",
    price: 4200,
    duration: "3 jours",
    mood: "Elegance urbaine",
    tags: ["Exposition Universelle", "Tour Eiffel", "Belle Epoque"],
    summary:
      "Vivez l'ouverture de la Tour Eiffel, les pavillons internationaux et les salons de la Belle Epoque.",
    details:
      "Le programme inclut une arrivee au Champ-de-Mars, une promenade guidee dans l'Exposition Universelle et une soiree dans un salon parisien reserve aux voyageurs discrets.",
    bestFor: "clients qui aiment les monuments, l'innovation et le raffinement social.",
    safety: "Zone urbaine stable, protocole vestimentaire strict.",
  },
  cretace: {
    title: "Cretace -65M",
    period: "Prehistoire",
    image: "assets/cretace.webp",
    fallback: "assets/cretace.png",
    alt: "Paysage du Cretace avec dinosaures, jungle et volcan",
    price: 6800,
    duration: "36 heures",
    mood: "Aventure et nature",
    tags: ["Dinosaures", "Jungle", "Observation"],
    summary:
      "Observez la faune prehistorique depuis une plateforme securisee, au coeur d'un monde intact.",
    details:
      "L'expedition se deroule dans un couloir d'observation balise avec guide paleontologique, combinaison climatique et extraction prioritaire en cas d'activite volcanique.",
    bestFor: "explorateurs curieux, amateurs de nature sauvage et profils scientifiques.",
    safety: "Risque naturel eleve, deplacements encadres sans contact avec la faune.",
  },
  florence: {
    title: "Florence 1504",
    period: "Renaissance",
    image: "assets/florence-1504.webp",
    fallback: "assets/florence-1504.png",
    alt: "Florence en 1504 avec ateliers d'artistes, sculptures et dome de la cathedrale",
    price: 5100,
    duration: "4 jours",
    mood: "Art et architecture",
    tags: ["Michel-Ange", "Ateliers", "Renaissance"],
    summary:
      "Entrez dans les ateliers de la Renaissance, entre marbre, perspective et debats d'artistes.",
    details:
      "Le sejour privilegie les ateliers, les chantiers d'art et les cercles de mecenes, avec un focus sur l'annee du David de Michel-Ange.",
    bestFor: "passionnes d'art, d'architecture, de sculpture et d'histoire des idees.",
    safety: "Epoque sensible aux codes sociaux, accompagnement culturel recommande.",
  },
};

const money = new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
});

const grid = document.querySelector("[data-destination-grid]");
const dialog = document.querySelector("[data-destination-dialog]");
const dialogContent = document.querySelector("[data-dialog-content]");
const bookingForm = document.querySelector("[data-booking-form]");
const bookingResult = document.querySelector("[data-booking-result]");
const quiz = document.querySelector("[data-quiz]");
const quizResult = document.querySelector("[data-quiz-result]");
const chat = document.querySelector("[data-chatbot]");
const chatWindow = document.querySelector("[data-chat-window]");
const chatMessages = document.querySelector("[data-chat-messages]");
const chatForm = document.querySelector("[data-chat-form]");

function renderDestinations() {
  grid.innerHTML = Object.entries(destinations)
    .map(([id, item]) => {
      const tags = item.tags.map((tag) => `<span class="tag">${tag}</span>`).join("");
      return `
        <article class="destination-card reveal">
          <picture>
            <source srcset="${item.image}" type="image/webp">
            <img src="${item.fallback}" alt="${item.alt}" loading="lazy">
          </picture>
          <div class="destination-content">
            <div class="tag-row">${tags}</div>
            <h3>${item.title}</h3>
            <p>${item.summary}</p>
            <ul class="meta-list">
              <li><strong>Duree:</strong> ${item.duration}</li>
              <li><strong>Ambiance:</strong> ${item.mood}</li>
              <li><strong>A partir de:</strong> ${money.format(item.price)}</li>
            </ul>
            <div class="card-actions">
              <button class="button button-primary" type="button" data-open-destination="${id}">Programme</button>
              <a class="button button-secondary" href="#planner" data-book-destination="${id}">Reserver</a>
            </div>
          </div>
        </article>
      `;
    })
    .join("");
}

function openDestination(id) {
  const item = destinations[id];
  if (!item) return;

  dialogContent.innerHTML = `
    <picture class="dialog-visual">
      <source srcset="${item.image}" type="image/webp">
      <img src="${item.fallback}" alt="${item.alt}">
    </picture>
    <div class="dialog-body">
      <p class="eyebrow">${item.period}</p>
      <h2>${item.title}</h2>
      <p>${item.details}</p>
      <div class="dialog-columns">
        <div class="dialog-fact"><span>Ideal pour</span>${item.bestFor}</div>
        <div class="dialog-fact"><span>Securite</span>${item.safety}</div>
        <div class="dialog-fact"><span>Budget</span>${money.format(item.price)} par voyageur</div>
      </div>
    </div>
  `;

  if (typeof dialog.showModal === "function") {
    dialog.showModal();
  } else {
    dialog.setAttribute("open", "");
  }
}

function setupRevealAnimation() {
  const elements = document.querySelectorAll(".reveal");
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.16 },
  );

  elements.forEach((element) => observer.observe(element));
}

function setupHeader() {
  const header = document.querySelector("[data-header]");
  const update = () => header.classList.toggle("is-scrolled", window.scrollY > 16);
  update();
  window.addEventListener("scroll", update, { passive: true });
}

function setupDestinationActions() {
  document.addEventListener("click", (event) => {
    const openButton = event.target.closest("[data-open-destination]");
    if (openButton) {
      openDestination(openButton.dataset.openDestination);
    }

    const bookButton = event.target.closest("[data-book-destination]");
    if (bookButton) {
      const select = bookingForm.elements.destination;
      select.value = bookButton.dataset.bookDestination;
    }
  });

  document.querySelector("[data-dialog-close]").addEventListener("click", () => dialog.close());
  dialog.addEventListener("click", (event) => {
    if (event.target === dialog) dialog.close();
  });
}

function setupBooking() {
  const dateInput = bookingForm.elements.date;
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  dateInput.min = tomorrow.toISOString().slice(0, 10);

  bookingForm.addEventListener("submit", (event) => {
    event.preventDefault();
    const form = new FormData(bookingForm);
    const destinationId = form.get("destination");
    const item = destinations[destinationId];
    const travelers = Number(form.get("travelers"));
    const date = form.get("date");
    const email = String(form.get("email")).trim();

    if (!item || !date || travelers < 1 || travelers > 8 || !email.includes("@")) {
      bookingResult.textContent =
        "Merci de verifier la destination, la date, le nombre de voyageurs et l'email.";
      bookingResult.classList.add("is-visible");
      return;
    }

    const total = item.price * travelers;
    bookingResult.innerHTML = `
      Demande validee pour <strong>${travelers}</strong> voyageur(s) vers
      <strong>${item.title}</strong>, depart le <strong>${formatDate(date)}</strong>.
      Estimation: <strong>${money.format(total)}</strong>. Un agent confirmera le protocole a ${email}.
    `;
    bookingResult.classList.add("is-visible");
  });
}

function setupQuiz() {
  const scores = { paris: 0, cretace: 0, florence: 0 };

  quiz.addEventListener("click", (event) => {
    const button = event.target.closest("[data-score]");
    if (!button) return;

    const fieldset = button.closest("fieldset");
    fieldset.querySelectorAll("button").forEach((item) => item.classList.remove("is-selected"));
    button.classList.add("is-selected");

    Object.keys(scores).forEach((key) => {
      scores[key] = quiz.querySelectorAll(`[data-score="${key}"].is-selected`).length;
    });

    const answered = quiz.querySelectorAll("fieldset .is-selected").length;
    if (answered === 4) {
      const winner = Object.entries(scores).sort((a, b) => b[1] - a[1])[0][0];
      const item = destinations[winner];
      quizResult.innerHTML = `
        Destination recommandee: <strong>${item.title}</strong>.
        Votre profil correspond a ${item.bestFor} ${item.summary}
      `;
      quizResult.classList.add("is-visible");
    }
  });
}

function formatDate(value) {
  return new Intl.DateTimeFormat("fr-FR", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  }).format(new Date(`${value}T12:00:00`));
}

function setupChatbot() {
  const toggle = document.querySelector("[data-chat-toggle]");
  const close = document.querySelector("[data-chat-close]");
  const quickPrompts = document.querySelectorAll(".quick-prompts button");

  const open = () => {
    chatWindow.hidden = false;
    toggle.setAttribute("aria-label", "Fermer le chat");
    if (!chatMessages.children.length) {
      addMessage(
        "bot",
        "Bonjour, je suis l'assistant virtuel de TimeTravel Agency. Je peux vous conseiller sur Paris 1889, le Cretace, Florence 1504, les prix et la reservation.",
      );
    }
  };

  const closeChat = () => {
    chatWindow.hidden = true;
    toggle.setAttribute("aria-label", "Ouvrir le chat");
  };

  toggle.addEventListener("click", () => {
    if (chatWindow.hidden) open();
    else closeChat();
  });

  close.addEventListener("click", closeChat);

  quickPrompts.forEach((button) => {
    button.addEventListener("click", () => {
      open();
      submitChatMessage(button.textContent);
    });
  });

  chatForm.addEventListener("submit", (event) => {
    event.preventDefault();
    const input = chatForm.elements.message;
    submitChatMessage(input.value);
    input.value = "";
  });
}

function submitChatMessage(text) {
  const cleanText = String(text).trim();
  if (!cleanText) return;

  addMessage("user", cleanText);
  const thinking = addMessage("bot", "...");
  setTimeout(() => {
    thinking.textContent = buildBotAnswer(cleanText);
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }, 420);
}

function addMessage(type, text) {
  const message = document.createElement("p");
  message.className = `message ${type}`;
  message.textContent = text;
  chatMessages.append(message);
  chatMessages.scrollTop = chatMessages.scrollHeight;
  return message;
}

function buildBotAnswer(input) {
  const text = normalize(input);

  if (hasAny(text, ["prix", "tarif", "budget", "cout", "combien"])) {
    return `Nos tarifs commencent a ${money.format(destinations.paris.price)} pour Paris 1889, ${money.format(destinations.florence.price)} pour Florence 1504 et ${money.format(destinations.cretace.price)} pour le Cretace. Le prix inclut briefing, tenue, guide et extraction.`;
  }

  if (hasAny(text, ["danger", "securite", "risque", "cretace", "dinosaure"])) {
    if (hasAny(text, ["cretace", "dinosaure", "prehistoire"])) {
      return "Le Cretace est notre voyage le plus spectaculaire mais le plus encadre: plateforme d'observation, guide paleontologique, aucune sortie hors zone balisee et extraction prioritaire.";
    }
    return "Chaque destination a un protocole specifique: Paris est la plus accessible, Florence demande de respecter les codes sociaux, le Cretace impose un encadrement strict.";
  }

  if (hasAny(text, ["paris", "eiffel", "1889", "belle epoque"])) {
    return "Paris 1889 convient aux clients qui veulent monuments, elegance et innovation. Le moment fort est l'Exposition Universelle avec la Tour Eiffel tout juste inauguree.";
  }

  if (hasAny(text, ["florence", "renaissance", "michel", "art", "architecture", "atelier"])) {
    return "Florence 1504 est le meilleur choix pour l'art: ateliers, sculpture, architecture et atmosphere Renaissance autour du David de Michel-Ange.";
  }

  if (hasAny(text, ["nature", "aventure", "faune", "science", "jungle"])) {
    return "Pour la nature et l'observation scientifique, je recommande le Cretace. Vous verrez la faune prehistorique depuis une zone securisee, sans perturber l'ecosysteme.";
  }

  if (hasAny(text, ["choisir", "conseille", "recommande", "hesite", "preference"])) {
    return "Si vous cherchez l'elegance, choisissez Paris 1889. Pour l'art, Florence 1504. Pour l'aventure et la nature, le Cretace. Donnez-moi vos centres d'interet et je peux affiner.";
  }

  if (hasAny(text, ["reserver", "date", "depart", "formulaire", "place"])) {
    return "Vous pouvez reserver dans la section Planifier: choisissez la destination, une date de depart, le nombre de voyageurs et votre preference. L'estimation se calcule automatiquement.";
  }

  if (hasAny(text, ["bonjour", "salut", "hello", "aide"])) {
    return "Bonjour. Je peux comparer les destinations, expliquer les prix, proposer un voyage selon vos envies ou repondre aux questions de securite.";
  }

  return "Je vous conseille selon vos envies: art et architecture pour Florence 1504, elegance urbaine pour Paris 1889, nature et aventure pour le Cretace. Vous pouvez aussi me demander les prix ou le niveau de securite.";
}

function normalize(value) {
  return value
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "");
}

function hasAny(text, words) {
  return words.some((word) => text.includes(word));
}

renderDestinations();
setupHeader();
setupDestinationActions();
setupBooking();
setupQuiz();
setupChatbot();
setupRevealAnimation();