<div id="berlebach-configurator">
  <h2 style="text-align:center;">Configurez votre Trépied Berlebach Planet</h2>
  <p style="font-size:0.9rem;text-align:center;">
    Après votre sélection, copiez le code pour obtenir votre devis personnalisé.
  </p>

  <label>Double collier de serrage :
    <select id="opt-collier">
      <option value="0"   data-code="DCN">Non (0 CHF)</option>
      <option value="45"  data-code="DCY">Oui (+45 CHF)</option>
    </select>
  </label>

  <label>Type de monture :
    <select id="opt-mount">
      <option value="0"   data-code="10MICRONGM1000HPS">10 micron GM 1000 HPS (0 CHF)</option>
      <option value="220" data-code="10MICRONGM2000HPS">10 micron GM 2000 HPS (+220 CHF)</option>
      <option value="0"   data-code="ASADDM60">ASA DDM 60 (0 CHF)</option>
      <option value="200" data-code="AP1100GTO">AP 1100 GTO (+200 CHF)</option>
      <option value="110" data-code="AP400600MACH1">AP 400/600/MACH1 (+110 CHF)</option>
      <option value="210" data-code="AP900">AP900 (+210 CHF)</option>
      <option value="0"   data-code="AVALONLINEAR">Avalon Linear (0 CHF)</option>
      <option value="0"   data-code="AVALONMUNO">Avalon M-Uno (0 CHF)</option>
      <option value="0"   data-code="AVALONMZERO">Avalon M-Zero (0 CHF)</option>
      <option value="0"   data-code="AZEQ5">AZEQ 5 (0 CHF)</option>
      <option value="0"   data-code="CELESTRONADVANCEDVX">Celestron Advanced VX (0 CHF)</option>
      <option value="110" data-code="CELESTRONCGE">Celestron CGE (+110 CHF)</option>
      <option value="180" data-code="CELESTRONCGEPRO">Celestron CGE PRO (+180 CHF)</option>
      <option value="0"   data-code="CELESTRONCGEM">Celestron CGEM (0 CHF)</option>
      <option value="180" data-code="CELESTRONCGXL">Celestron CGX-L/CGX (+180 CHF)</option>
      <option value="180" data-code="CELESTRONNEXSTAREVOLUTION">Celestron Nexstar Evolution (+180 CHF)</option>
      <option value="0"   data-code="DM43814MM">DM4 (3/8"×14 mm) (0 CHF)</option>
      <option value="0"   data-code="DM63816MM">DM6 (3/8"×16 mm) (0 CHF)</option>
      <option value="0"   data-code="EQ6AZEQ6EQ6PROEQ6R">EQ 6/AZEQ6/EQ6-Pro/EQ6-R (0 CHF)</option>
      <option value="110" data-code="EQ8">EQ8 (+110 CHF)</option>
      <option value="0"   data-code="FUJINON25X150MTSX">Fujinon 25×150 MT-SX (0 CHF)</option>
      <option value="0"   data-code="FUJINON15X80">Fujinon 15×80 (0 CHF)</option>
      <option value="110" data-code="GEMINI4142">Gemini 41/42 (+110 CHF)</option>
      <option value="110" data-code="GEMINI53F">Gemini 53 F (+110 CHF)</option>
      <option value="110" data-code="GEMINIEFRIC">Gemini É.-fric (+110 CHF)</option>
      <option value="0"   data-code="HEQ5">HEQ5 (0 CHF)</option>
      <option value="0"   data-code="IOPTRONIEQ45CEM6070HAE69">iOptron IEQ45/CEM60-70/HAE69 (0 CHF)</option>
      <option value="0"   data-code="IOPTRONIEQ30CEM40GEM45HEM44">iOptron IEQ30/CEM40/GEM45/HEM44 (0 CHF)</option>
      <option value="150" data-code="IOPTRONCEM120">iOptron CEM120 (+150 CHF)</option>
      <option value="0"   data-code="IOPTRONCEM25ZEQ25">iOptron CEM25/ZEQ25 (0 CHF)</option>
      <option value="0"   data-code="IOPTRONCEM26GEM28HEM27HAE29">iOptron CEM26/GEM28/HEM27/HAE29 (0 CHF)</option>
      <option value="0"   data-code="IOPTRONHAE43">iOptron HAE 43 (0 CHF)</option>
      <option value="260" data-code="LOSMANDYG11TITAN">Losmandy G11 Titan (+260 CHF)</option>
      <option value="220" data-code="LOSMANDYG8G11">Losmandy G8/G11 (+220 CHF)</option>
      <option value="0"   data-code="MESU200">MESU 200 (0 CHF)</option>
      <option value="0"   data-code="NOVAHITCH">Nova Hitch (0 CHF)</option>
      <option value="150" data-code="PARAMOUNTME">Paramount ME (+150 CHF)</option>
      <option value="150" data-code="PARAMOUNTMX">Paramount MX+ (+150 CHF)</option>
      <option value="150" data-code="PARAMOUNTMYT">Paramount MyT (+150 CHF)</option>
      <option value="300" data-code="PEGASUSNYX101">Pegasus NYX-101 (+300 CHF)</option>
      <option value="110" data-code="SKYWATCHERCQ350">Sky-watcher CQ350 (+110 CHF)</option>
      <option value="90"  data-code="SKYWATCHERWAVE100I">SkyWatcher wave 100i (+90 CHF)</option>
      <option value="90"  data-code="SKYWATCHER150I">SkyWatcher 150i (+90 CHF)</option>
      <option value="200" data-code="TAKAHASHIEM400">Takahashi EM-400 (+200 CHF)</option>
      <option value="0"   data-code="TAKAHASHIEM200">Takahashi EM200 (0 CHF)</option>
      <option value="45"  data-code="ZWOAM5">ZWO AM5 (+45 CHF)</option>
      <option value="140" data-code="ZWOAM5AVECPLAQUEDATABASE">ZWO AM5 avec plaque de base (+140 CHF)</option>
    </select>
  </label>

  <label>Couleur :
    <select id="opt-color">
      <option value="0"  data-code="NAT">Nature (0 CHF)</option>
      <option value="50" data-code="NOY">Noyer (+50 CHF)</option>
      <option value="50" data-code="NOI">Noir (+50 CHF)</option>
      <option value="50" data-code="GRI">Gris (+50 CHF)</option>
    </select>
  </label>

  <label>Embout :
    <select id="opt-tip">
      <option value="0"  data-code="AI">Acier Inox (0 CHF)</option>
      <option value="12" data-code="PL">Plastique (+12 CHF)</option>
      <option value="27" data-code="IP">Inox+Plastique (+27 CHF)</option>
    </select>
  </label>

  <label>Plateforme :
    <select id="opt-plate">
      <option value="0"   data-code="ST">Standard (0 CHF)</option>
      <option value="150" data-code="TR">Triangulaire (+150 CHF)</option>
    </select>
  </label>

  <div class="result">
    <p><strong>Supplément total :</strong> <span id="total-price">0</span> CHF</p>
    <p><strong>Code configuration :</strong> <span id="config-code">-</span></p>
  </div>

  <button id="copy-code">Copier le code</button>
  <p id="copy-msg">Code copié !</p>
</div>

body {
  font-family: Arial, Helvetica, sans-serif;
}

#berlebach-configurator {
  max-width: 480px;
  margin: 1rem auto;
  padding: 1rem;
  border: 2px solid #ccc;
  border-radius: 12px;
}

#berlebach-configurator h2 {
  text-align: center;
  margin-bottom: 0.5rem;
}

#berlebach-configurator p {
  font-size: 0.9rem;
  text-align: center;
  margin: 0 0 1rem;
}

#berlebach-configurator label {
  display: block;
  margin-top: 0.5rem;
}

#berlebach-configurator select {
  width: 100%;
  padding: 0.4rem;
  margin-top: 0.2rem;
}

#berlebach-configurator .result {
  margin-top: 1rem;
  background: #f7f7f7;
  padding: 0.8rem;
  border-radius: 8px;
}

#berlebach-configurator button {
  margin-top: 0.8rem;
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: #0066cc;
  color: #fff;
  cursor: pointer;
}

#berlebach-configurator #copy-msg {
  display: none;
  text-align: center;
  color: green;
  margin-top: 0.4rem;
}

document.addEventListener('DOMContentLoaded', function() {
  var c = document.getElementById('berlebach-configurator');
  if (!c) return;

  var selects = c.querySelectorAll('select');
  var priceEl = document.getElementById('total-price');
  var codeEl  = document.getElementById('config-code');
  var copyBtn = document.getElementById('copy-code');
  var copyMsg = document.getElementById('copy-msg');

  function updateConfig() {
    var total = 0, codes = [];
    selects.forEach(function(sel) {
      total += parseFloat(sel.value) || 0;
      codes.push(sel.selectedOptions[0].dataset.code);
    });
    priceEl.textContent = total;
    codeEl.textContent  = codes.join('-');
  }

  selects.forEach(function(sel) {
    sel.addEventListener('change', updateConfig);
  });

  copyBtn.addEventListener('click', function() {
    var t = codeEl.textContent;
    if (t && t !== '-') {
      navigator.clipboard.writeText(t).then(function() {
        copyMsg.style.display = 'block';
        setTimeout(function() {
          copyMsg.style.display = 'none';
        }, 2000);
      });
    }
  });

  updateConfig();
});