---
import Base from '../layouts/Base.astro';
import { allProducts } from '../lib/pricing';
const products = allProducts.map(p=>({slug:p.slug,name:p.name,type:p.type,badge:p.badge,uvp:p.uvp,apartment:p.apartmentSuitable}));
---
<Base title="Klima-Finder: welche mobile Klimaanlage passt zu dir? | Kühlfinder" description="Beantworte wenige Fragen und finde heraus, ob mobile Split oder Monoblock passt – mit Verfügbarkeits-Check.">
  <section class="wrap" style="margin-top:1.6rem;max-width:720px">
    <p class="kicker"><span class="u"></span>60-Sekunden-Finder</p>
    <h1>Welches portable Klimagerät passt zu dir?</h1>
    <div id="finder" class="card"></div>
  </section>
</Base>
<script define:vars={{ products }}>
  const Q = [
    {k:'room',q:'Welcher Raum?',a:['Schlafzimmer','Homeoffice','Wohnzimmer','Dachgeschoss','Kinderzimmer']},
    {k:'size',q:'Wie groß ist der Raum?',a:['bis 15 m²','15–25 m²','25–40 m²','über 40 m²']},
    {k:'outdoor',q:'Außengerät möglich (Balkon/Fensterbank)?',a:['Ja','Nein','Unsicher']},
    {k:'window',q:'Welche Fensterart?',a:['Dreh-Kipp','Balkontür','Dachfenster','Schiebefenster','keine gute Möglichkeit']},
    {k:'noise',q:'Wie wichtig ist Leise?',a:['Sehr','Mittel','Egal']},
    {k:'budget',q:'Budget?',a:['unter 500 €','500–800 €','800–1300 €','über 1300 €']},
    {k:'urgency',q:'Wie dringend?',a:['Heute','Diese Woche','Nur informieren']}
  ];
  const ans={}; let i=0;
  const el=document.getElementById('finder');
  const find=s=>products.find(p=>p.slug===s);
  function pick(){
    const out=find('midea-portasplit-12000'); let primary, alt, budget, warn='';
    const outdoor=ans.outdoor==='Ja';
    const noOutlet=ans.window==='keine gute Möglichkeit';
    const hiBudget=(ans.budget==='800–1300 €'||ans.budget==='über 1300 €');
    const smallRoom=(ans.size==='bis 15 m²'||ans.size==='15–25 m²');
    if(noOutlet){warn='Ohne Abluft-/Außenmöglichkeit kann kein echtes Klimagerät die Wärme abführen. Prüfe Dreh-Kipp-Fenster oder Balkontür – sonst hilft nur Verschattung und Lüften.';}
    if(ans.room==='Schlafzimmer'&&outdoor&&smallRoom) primary='midea-portasplit-cool-8000';
    else if(outdoor&&hiBudget) primary='midea-portasplit-12000';
    else if(!outdoor&&hiBudget) primary='delonghi-pac-ex105';
    else if(!outdoor&&ans.budget==='500–800 €') primary='midea-silent-cool-26-pro-wf';
    else if(ans.budget==='unter 500 €') primary='comfee-mobile-12000';
    else primary='delonghi-pac-ex105';
    alt = (find(primary).type==='mobile_split')?'delonghi-pac-ex105':'midea-portasplit-cool-8000';
    budget = 'comfee-mobile-12000';
    if(find(primary).type==='monoblock') warn = warn || 'Tipp: Monoblock braucht eine gute Fensterabdichtung, sonst sinkt die Kühlleistung.';
    return {primary:find(primary),alt:find(alt),budget:find(budget),warn};
  }
  function result(){
    const r=pick(); window.track&&window.track("finder_ergebnis",{modell:r.primary&&r.primary.slug});
    const card=p=>`<a class="rc" href="/geraete/${p.slug}"><strong>${p.name}</strong><span class="note">${p.badge}</span></a>`;
    el.innerHTML=`<h2>Deine Empfehlung</h2>
      <div class="reco"><span class="badge">Beste Wahl</span>${card(r.primary)}</div>
      <div class="reco"><span class="badge">Wenn ausverkauft</span>${card(r.alt)}</div>
      <div class="reco"><span class="badge">Budget</span>${card(r.budget)}</div>
      ${r.warn?`<p class="warn">${r.warn}</p>`:''}
      <div class="rcta">
        <a class="btn" href="/karte?produkt=${r.primary.slug}">Verfügbarkeit auf Karte</a>
        <a class="btn ghost" href="/alarm?produkt=${r.primary.slug}">Alarm setzen</a>
        <button class="btn ghost" id="again">Nochmal</button>
      </div>`;
    document.getElementById('again').onclick=()=>{i=0;step();};
  }
  function step(){
    if(i>=Q.length) return result();
    const q=Q[i];
    el.innerHTML=`<div class="prog">Frage ${i+1} / ${Q.length}</div><h2>${q.q}</h2>
      <div class="opts">${q.a.map(a=>`<button class="opt" data-v="${a}">${a}</button>`).join('')}</div>`;
    el.querySelectorAll('.opt').forEach(b=>b.onclick=()=>{ans[q.k]=b.dataset.v;i++;step();});
  }
  step();
</script>
<style is:global>
  #finder .prog{font-size:.85rem;color:var(--slate);margin-bottom:.3rem}
  #finder .opts{display:grid;gap:.6rem;margin-top:1rem}
  #finder .opt{font-family:var(--font-body);font-size:1rem;text-align:left;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);cursor:pointer;transition:border-color .15s,background .15s}
  #finder .opt:hover{border-color:var(--petrol);background:var(--petrol-soft)}
  #finder .reco{display:flex;align-items:center;gap:.8rem;margin:.6rem 0}
  #finder .rc{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);flex:1;border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .9rem}
  #finder .rc:hover{border-color:var(--petrol)}
  #finder .warn{background:var(--warm-bg);color:oklch(0.42 0.11 47);padding:.8rem 1rem;border-radius:var(--radius);margin-top:.8rem}
  #finder .rcta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
</style>