---
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,btuh:p.btuh,uvp:p.uvp,badge:p.badge,apartment:p.apartmentSuitable,room:p.roomSizeM2}));
---
<Base title="Klima-Rechner: Welche Leistung & welches Gerät brauche ich? | Kühlfinder" description="Sag uns Raumgröße, Typ und wie du kühlen willst – der Klima-Rechner zeigt die nötige Leistung (kW/BTU), ob mobil oder fest sinnvoll ist, und passende Geräte mit Preis-/Verfügbarkeits-Link.">
  <section class="wrap" style="margin-top:1.6rem;max-width:920px">
    <span class="eyebrow"><span class="dot ok live"></span>Klima-Rechner</span>
    <h1>Was brauche ich für meinen Raum?</h1>
    <p class="muted" style="max-width:48rem">Drei Eingaben – sofort die nötige Kühlleistung, eine ehrliche Empfehlung (mobil als Brücke oder feste Anlage als Lösung) und passende Geräte mit direktem Link zu Verfügbarkeit/Preis oder Monteur.</p>

    <div class="calc">
      <div class="ctrl card">
        <label class="big">Raumgröße <span class="num" id="m2-out">25 m²</span></label>
        <input type="range" id="m2" min="8" max="80" step="1" value="25" />

        <label>Raumtyp</label>
        <div class="seg" id="room">
          <button class="segbtn on" data-v="schlafzimmer">Schlafzimmer</button>
          <button class="segbtn" data-v="wohnzimmer">Wohnzimmer</button>
          <button class="segbtn" data-v="homeoffice">Homeoffice</button>
          <button class="segbtn" data-v="dachgeschoss">Dachgeschoss</button>
        </div>

        <label>Sonne / Lage</label>
        <div class="seg" id="sun">
          <button class="segbtn" data-v="wenig">wenig</button>
          <button class="segbtn on" data-v="mittel">mittel</button>
          <button class="segbtn" data-v="viel">viel Sonne</button>
        </div>

        <label>Wie willst du kühlen?</label>
        <div class="seg col" id="mode">
          <button class="segbtn on" data-v="abends">Nur abends / nachts (Schlafen)</button>
          <button class="segbtn" data-v="tag">Den ganzen Tag</button>
          <button class="segbtn" data-v="mehr">Mehrere Räume gleichzeitig</button>
        </div>
      </div>

      <div class="result card" id="result"></div>
    </div>
  </section>
</Base>
<style>
  .calc{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem;align-items:start}
  .ctrl{display:flex;flex-direction:column;gap:.5rem}
  .ctrl label{font-weight:600;font-size:.9rem;margin-top:.6rem}
  .ctrl label.big{display:flex;justify-content:space-between;align-items:baseline;font-size:1rem}
  .ctrl label.big .num{font-size:1.2rem;color:var(--petrol-deep)}
  .seg{display:flex;gap:.35rem;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px}
  .seg.col{flex-direction:column}
  .segbtn{font-family:var(--font-body);font-weight:500;font-size:.85rem;border:0;background:transparent;color:var(--slate);padding:.45rem .8rem;border-radius:9px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
  .segbtn.on{background:var(--petrol);color:#fff}
  .result{min-height:300px}
  .rkw{display:flex;gap:1.4rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:.8rem}
  .rkw .v{font-size:1.7rem;font-weight:600;font-family:var(--mono);color:var(--petrol-deep)}
  .rkw small{color:var(--slate);font-size:.78rem}
  .verdict{background:var(--petrol-soft);border-radius:12px;padding:.8rem 1rem;margin:.4rem 0 .8rem;font-size:.95rem}
  .verdict.warm{background:var(--warm-bg)}
  .rec{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
  .rec .rn{font-weight:600}.rec .rb{font-size:.78rem;color:var(--slate)}
  .rcta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
  @media(max-width:820px){.calc{grid-template-columns:1fr}}
</style>
<script define:vars={{ products }}>
  const euro=n=>new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR',maximumFractionDigits:0}).format(n);
  const S={m2:25,room:'schlafzimmer',sun:'mittel',mode:'abends'};
  const $=s=>document.querySelector(s),$$=s=>Array.from(document.querySelectorAll(s));
  function calc(){
    let f=0.06; // kW pro m² Grundlast
    if(S.room==='dachgeschoss')f+=0.025; if(S.room==='wohnzimmer')f+=0.01;
    if(S.sun==='viel')f+=0.02; if(S.sun==='wenig')f-=0.01;
    let kw=S.m2*f;
    const btu=Math.round(kw*3412/100)*100;
    kw=Math.round(kw*10)/10;
    // recommendation logic
    let verdict, warm=false, picks=[], ctaPrimary, ctaSec;
    const fit=products.filter(p=>p.btuh>=btu-1500).sort((a,b)=>a.btuh-b.btuh);
    const apt=fit.filter(p=>p.apartment);
    if(S.mode==='mehr'){
      warm=true;
      verdict='Mehrere Räume gleichzeitig kühlst du am sinnvollsten mit einer <strong>fest installierten Multisplit-Anlage</strong> (ein Außengerät, mehrere leise Innengeräte). Mobil bräuchtest du pro Raum ein Gerät.';
      picks=apt.filter(p=>p.type==='mobile_split').slice(0,2);
      ctaPrimary={t:'Feste Anlage / Monteur',href:'/klimaanlage-installieren'};
      ctaSec={t:'Mobile Brücke ansehen',href:'/karte'};
    } else if(S.mode==='tag'){
      verdict='Für den <strong>Ganztagsbetrieb</strong> lohnt sich Effizienz und Leise: eine <strong>fest installierte Split-/Wärmepumpenanlage</strong> ist langfristig am besten (heizt auch im Winter). Als Sofort-Brücke geht ein gutes mobiles Gerät.';
      picks=apt.slice(0,2);
      ctaPrimary={t:'Feste Anlage / Monteur',href:'/klimaanlage-installieren'};
      ctaSec={t:'Jetzt verfügbar (mobil)',href:'/karte?modell='+(picks[0]?.slug||'')};
    } else {
      verdict='Für <strong>abends/nachts</strong> reicht meist ein gutes mobiles Gerät – mobile Split ist leiser, Monoblock flexibler. Sieh direkt, wo es verfügbar ist.';
      picks=apt.slice(0,2);
      ctaPrimary={t:'Preise & Verfügbarkeit',href:'/karte?modell='+(picks[0]?.slug||'')};
      ctaSec={t:'Oder fest installieren',href:'/klimaanlage-installieren'};
    }
    if(!picks.length)picks=fit.slice(0,2);
    const recHtml=picks.map(p=>`<div class="rec"><div><div class="rn">${p.name}</div><div class="rb">${p.badge} · ${p.btuh.toLocaleString('de-DE')} BTU · ab ${euro(Math.round(p.uvp*0.92))}</div></div><a class="btn sm ghost" href="/karte?modell=${p.slug}">prüfen</a></div>`).join('');
    $('#result').innerHTML=`
      <div class="rkw"><div><div class="v">${kw.toLocaleString('de-DE')} kW</div><small>empfohlene Kühlleistung</small></div>
        <div><div class="v">${btu.toLocaleString('de-DE')}</div><small>BTU/h (Richtwert)</small></div>
        <div><div class="v">${S.m2} m²</div><small>${S.room}</small></div></div>
      <div class="verdict ${warm?'warm':''}">${verdict}</div>
      <div class="recs"><strong>Passende Geräte</strong>${recHtml}</div>
      <div class="rcta"><a class="btn" href="${ctaPrimary.href}">${ctaPrimary.t}</a><a class="btn ghost" href="${ctaSec.href}">${ctaSec.t}</a></div>
      <p class="note" style="margin-top:.8rem">Richtwert nach Faustformel (Raumgröße, Lage, Sonne). Genaue Auslegung macht der Fachbetrieb. <a href="/finder">Lieber Schritt-für-Schritt? Zum Finder</a></p>`;
  }
  $('#m2').addEventListener('input',e=>{S.m2=+e.target.value;$('#m2-out').textContent=S.m2+' m²';calc();});
  ['room','sun','mode'].forEach(g=>$$('#'+g+' .segbtn').forEach(b=>b.addEventListener('click',()=>{
    $$('#'+g+' .segbtn').forEach(x=>x.classList.remove('on'));b.classList.add('on');S[g]=b.dataset.v;window.track&&window.track('rechner_input',{feld:g,wert:b.dataset.v});calc();})));
  calc();
</script>