Tijdloos
Mooi

<button id="bloems-toggle" onclick="toggleChat()">Bloems 💬</button>

<div id="bloems-chatbot">
  <button id="bloems-close" onclick="toggleChat()">−</button>
  <h3>👋 Hallo! Ik ben het Bloems-hulpje</h3>
  <p>Stel gerust je vraag — of kies een categorie:</p>
  <div id="bloems-buttons">
    <button class="bloems-accordion">💰 Prijs & Bestellen</button>
    <div class="bloems-panel">
      <button class="bloems-btn" onclick="showAnswer(0)">Wat kost een gemiddeld boeket?</button>
      <button class="bloems-btn" onclick="showAnswer(1)">Hebben jullie budgetvriendelijke opties?</button>
      <button class="bloems-btn" onclick="showAnswer(12)">Kan ik online bestellen?</button>
      <button class="bloems-btn" onclick="showAnswer(22)">Doen jullie ook cadeaubonnen?</button>
    </div>

    <button class="bloems-accordion">🎨 Stijl & Personalisatie</button>
    <div class="bloems-panel">
      <button class="bloems-btn" onclick="showAnswer(2)">Kan ik zelf een stijl of kleur kiezen?</button>
      <button class="bloems-btn" onclick="showAnswer(15)">Kunnen jullie iets maken dat past bij mijn interieur?</button>
      <button class="bloems-btn" onclick="showAnswer(16)">Werken jullie met lokale of eigen ontwerpen?</button>
      <button class="bloems-btn" onclick="showAnswer(17)">Veranderen jullie collecties per seizoen?</button>
    </div>

    <button class="bloems-accordion">📦 Levering & Service</button>
    <div class="bloems-panel">
      <button class="bloems-btn" onclick="showAnswer(5)">Hoe worden jullie boeketten geleverd?</button>
      <button class="bloems-btn" onclick="showAnswer(13)">Leveren jullie ook aan huis?</button>
      <button class="bloems-btn" onclick="showAnswer(14)">Wat zijn de verzendkosten?</button>
      <button class="bloems-btn" onclick="showAnswer(20)">Kan ik anoniem iemand verrassen?</button>
    </div>

    <button class="bloems-accordion">🌼 Droogbloemen & Onderhoud</button>
    <div class="bloems-panel">
      <button class="bloems-btn" onclick="showAnswer(6)">Hoe lang blijven droogbloemen mooi?</button>
      <button class="bloems-btn" onclick="showAnswer(7)">Moet ik droogbloemen onderhouden?</button>
      <button class="bloems-btn" onclick="showAnswer(8)">Wat is het verschil met kunstbloemen?</button>
      <button class="bloems-btn" onclick="showAnswer(18)">Zijn droogbloemen geurloos?</button>
    </div>

    <button class="bloems-accordion">📍 Praktisch</button>
    <div class="bloems-panel">
      <button class="bloems-btn" onclick="showAnswer(10)">Waar is jullie winkel gevestigd?</button>
      <button class="bloems-btn" onclick="showAnswer(11)">Wat zijn jullie openingsuren?</button>
      <button class="bloems-btn" onclick="showAnswer(21)">Moet ik op voorhand bestellen?</button>
      <button class="bloems-btn" onclick="showAnswer(23)">Kunnen jullie helpen met seizoensdecoratie?</button>
    </div>
  </div>

  <div class="bloems-response" id="bloems-answer"></div>
</div>

#bloems-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #6a4c93; /* dieppaars */
  color: white;
  padding: 10px 16px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  z-index: 10000;
  font-size: 16px;
}

#bloems-chatbot {
  display: none;
  position: fixed;
    overflow-y: auto; /* zorgt dat de chatbot zelf scrollbaar is */

  bottom: auto;
  right: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 90vw;
  max-width: 320px;
  max-height: 80vh;
  overflow-y: auto;

  background: #f3e8ff; /* lichtpaars */
  border: 2px solid #6a4c93; /* dieppaars */
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(106, 76, 147, 0.5);
  font-family: sans-serif;
  padding: 16px;
  z-index: 9999;
  scroll-behavior: smooth;
}

@media (min-width: 600px) {
  #bloems-chatbot {
    bottom: 70px;
    right: 20px;
    top: auto;
    left: auto;
    transform: none;

    width: 320px;
    max-height: 500px;
  }
}

#bloems-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #6a4c93;
  cursor: pointer;
  line-height: 1;
  font-weight: bold;
  padding: 0;
}

#bloems-close:hover {
  color: #9c81d3; /* lichtere paars */
}

#bloems-chatbot h3 {
  margin-top: 0;
  color: #4b317d;
}

.bloems-btn {
  display: block;
  margin: 6px 0;
  background: #6a4c93;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.3s ease;
}

.bloems-btn:hover {
  background: #8a6ecb; /* lichtere paars */
}

.bloems-response {
  margin-top: 12px;
  padding: 10px;
  background: #ede0ff; /* zachte lichtpaarse achtergrond */
  border-left: 4px solid #6a4c93;
  border-radius: 8px;
  color: #4b317d;
}

/* Paarse kleur voor categorieën */
.bloems-accordion {
  margin-top: 8px;
  background: #4b317d; /* donkerpaars */
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  user-select: none;
  transition: background-color 0.3s ease;
}

.bloems-accordion.active {
  background-color: #39265d; /* nog donkerder paars als actief */
}

.bloems-accordion:hover {
  background-color: #39265d;
}

.bloems-panel {
  padding: 0 0 8px 0;
  display: none;
  flex-direction: column;
}

const questions = [
  "Wat kost een gemiddeld boeket?",
  "Hebben jullie budgetvriendelijke opties?",
  "Kan ik zelf een stijl of kleur kiezen?",
  "Kan ik een kaartje laten toevoegen?",
  "Doen jullie ook bloemen voor huwelijken of events?",
  "Hoe worden jullie boeketten geleverd?",
  "Hoe lang blijven droogbloemen mooi?",
  "Moet ik droogbloemen onderhouden?",
  "Wat is het verschil tussen droogbloemen en kunstbloemen?",
  "Kan ik voorbeelden van boeketten zien?",
  "Waar is jullie winkel gevestigd?",
  "Wat zijn jullie openingsuren?",
  "Kan ik online bestellen?",
  "Leveren jullie ook aan huis?",
  "Wat zijn de verzendkosten?",
  "Kunnen jullie iets maken dat past bij mijn interieur?",
  "Werken jullie met lokale of eigen ontwerpen?",
  "Veranderen jullie collecties per seizoen?",
  "Zijn droogbloemen geurloos?",
  "Kan ik een boeket combineren met accessoires?",
  "Kan ik anoniem iemand verrassen?",
  "Moet ik op voorhand bestellen?",
  "Doen jullie ook cadeaubonnen?",
  "Kunnen jullie helpen met seizoensdecoratie of feestdagen?"
];

const answers = [
  "Je vindt bij ons al een stijlvol boeket vanaf €25...",
  "Zeker. Ook met een kleiner budget (€20 à €30)...",
  "Graag zelfs. Hou je van zacht en neutraal...",
  "Ja! Je kiest een kaartje uit ons aanbod...",
  "Absoluut. We maken bruidsboeketten, tafeldecoratie...",
  "Onze boeketten worden stevig verpakt...",
  "Droogbloemen blijven gemiddeld 6 tot 12 maanden mooi...",
  "Heel weinig! Je hoeft ze enkel af en toe af te stoffen...",
  "Droogbloemen zijn natuurlijk gedroogd...",
  "Zeker. Op onze website en Instagram delen we veel foto's...",
  "Je vindt onze winkel in Gent, België...",
  "Maandag gesloten, dinsdag t.e.m. zaterdag open...",
  "Ja hoor. Je kan via onze website bestellen...",
  "Binnen Gent leveren we zelf. Buiten Gent met koerier...",
  "Binnen Gent rekenen we €5 leveringskost...",
  "Zeker. We luisteren naar jouw wensen...",
  "Ja! Onze ontwerpen zijn eigen creaties...",
  "Jazeker. In de lente zachte tinten, herfst warme kleuren...",
  "De meeste droogbloemen zijn geurloos...",
  "Zeker. Denk aan een vaasje, krans of houten standaard...",
  "Ja, dat kan. Geef ons het adres en we doen de rest...",
  "Voor grotere of op maat gemaakte stukken...",
  "Jazeker. Je bepaalt het bedrag en de ontvanger kiest...",
  "Graag! We maken ook decoratie voor kerst, Pasen, enzovoort."
];

function showAnswer(index) {
  const answerDiv = document.getElementById('bloems-answer');
  answerDiv.innerText = answers[index];
  
  // Scroll naar onder in chatbot
  const chatbot = document.getElementById('bloems-chatbot');
  setTimeout(() => {
    chatbot.scrollTop = chatbot.scrollHeight;
  }, 100);
}

function toggleChat() {
  const chatbot = document.getElementById("bloems-chatbot");
  const toggleBtn = document.getElementById("bloems-toggle");
  if (chatbot.style.display === "block") {
    chatbot.style.display = "none";
    toggleBtn.style.display = "block";
    resetChat();
    document.body.style.overflow = "auto"; // achtergrond scrollen aan
  } else {
    chatbot.style.display = "block";
    toggleBtn.style.display = "none";
    document.body.style.overflow = "hidden"; // achtergrond scrollen uit
  }
}


function resetChat() {
  // Antwoord leegmaken
  document.getElementById('bloems-answer').innerText = "";
  
  // Alle accordeons sluiten en active status weg
  const acc = document.getElementsByClassName("bloems-accordion");
  for (let i = 0; i < acc.length; i++) {
    acc[i].classList.remove("active");
    acc[i].nextElementSibling.style.display = "none";
  }
}

// Accordion functionaliteit
const acc = document.getElementsByClassName("bloems-accordion");
for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    // Sluit andere geopende panels
    for (let j = 0; j < acc.length; j++) {
      if (j !== i) {
        acc[j].classList.remove("active");
        acc[j].nextElementSibling.style.display = "none";
      }
    }
    
    // Toggle deze
    this.classList.toggle("active");
    const panel = this.nextElementSibling;
    if (panel.style.display === "flex") {
      panel.style.display = "none";
    } else {
      panel.style.display = "flex";
      panel.style.flexDirection = "column";
    }
  });
}