79 lines
5.1 KiB
Plaintext
79 lines
5.1 KiB
Plaintext
---
|
||
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>
|