---
import Base from '../layouts/Base.astro';
import ProductCard from '../components/ProductCard.astro';
import { allProducts } from '../lib/pricing';
import WeatherBanner from '../components/WeatherBanner.astro';
const top = allProducts.filter(p => p.tier === 'A').slice(0,3);
const jsonld = {'@context':'https://schema.org','@type':'WebSite',name:'Kühlfinder',url:'https://kuehlfinder.de',
  description:'Finde live, wo es Klimageräte gibt – Baumärkte & Elektromärkte in DE, AT, CH, NL, PL, DK, plus Online/eBay – mit Prognose, Preis-Check und Alarm.'};
const Pin='<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg>';
const Compass='<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="m15.5 8.5-2 5-5 2 2-5 5-2Z"/></svg>';
const Bell='<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z"/><path d="M10 19a2 2 0 0 0 4 0"/></svg>';
// Unsplash (kostenlose Lizenz) – Credits unter /bildnachweis
const IMG_HERO='https://images.unsplash.com/photo-1649711895336-20ff39db62f8?w=1680&q=70&auto=format&fit=crop';
const IMG_PHONE='https://images.unsplash.com/photo-1752218804012-3e7db92274ec?w=1000&q=70&auto=format&fit=crop';
---
<Base title="Kühlfinder – Wo gibt es gerade ein Klimagerät? Live-Verfügbarkeit (DE/AT/CH/NL/PL/DK)" description="Live-Bestand von Klimageräten in Baumärkten & Elektromärkten in Deutschland und Nachbarländern, plus Online, Amazon & eBay – mit Prognose, Preis-Check gegen Wucher und Alarm.">
  <section class="wrap herowrap">
    <WeatherBanner />
    <div class="hero-card reveal">
      <div class="hero-photo" style={`background-image:url('${IMG_HERO}')`}></div>
      <div class="hero-veil"></div>
      <div class="hero-inner">
        <div class="hero-left">
          <span class="eyebrow"><span class="dot ok live"></span><strong class="livetag">LIVE</strong>&nbsp;<span><b class="num" id="p-ac">…</b>&nbsp;Preise direkt bei Händlern geprüft</span></span>
          <h1>Die nächste Hitze&shy;welle kommt bestimmt.</h1>
          <p class="lead">Wir helfen dir, in Hitzephasen schnellstmöglich an ein <strong>verfügbares, gutes</strong> Klimagerät zu kommen – mit Live-Preisen, Preis-Check gegen Wucher und Alarm.</p>
          <form class="herobar" action="/karte" method="get">
            <input name="plz" inputmode="numeric" placeholder="PLZ oder Ort …" aria-label="PLZ oder Ort" />
            <button class="btn" type="submit" data-umami-event="hero_plz_suche">Geräte finden</button>
            <a class="btn ghost" href="/karte" id="locbtn" data-umami-event="hero_naehe">In meiner Nähe</a>
          </form>
          <div class="herofeat">
            <span><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> Echtzeit-Verfügbarkeit</span>
            <span><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"/></svg> 6 Länder</span>
            <span><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6 9 17l-5-5"/></svg> Preis-Check gegen Wucher</span>
            <span><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg> Alarm &amp; Preiswecker</span>
          </div>
        </div>
        <aside class="hero-live card">
          <div class="lc-head"><strong>Gerade live geprüft</strong><span class="dot ok live"></span></div>
          <ul class="livelist" id="livelist"><li class="skel" style="height:44px"></li><li class="skel" style="height:44px"></li><li class="skel" style="height:44px"></li></ul>
          <a class="btn sm ghost" href="/karte">Alle Live-Funde ansehen →</a>
        </aside>
      </div>
    </div>
    <div class="stat-tiles reveal">
      <div class="stile"><div class="st-l">Live-Preise geprüft</div><div class="num st-n" id="p-ac2">…</div><div class="st-s">direkt bei Händlern</div></div>
      <div class="stile"><div class="st-l">Märkte (Abdeckung)</div><div class="num st-n" id="p-total" data-count="0">…</div><div class="st-s">Demo-Datensatz</div></div>
      <div class="stile"><div class="st-l">Ketten</div><div class="num st-n" id="p-chains">…</div><div class="st-s">Bau- &amp; Elektromärkte</div></div>
      <div class="stile"><div class="st-l">Länder</div><div class="num st-n">6</div><div class="st-s">DE·AT·CH·NL·PL·DK</div></div>
    </div>
  </section>

  <section class="wrap">
    <div class="features">
      <a class="feature reveal" href="/karte"><div class="ic" set:html={Pin}></div><h3>Live-Karte</h3><p class="muted">Alle Märkte mit Bestand auf einen Blick – Modell, Kette, Land &amp; Umkreis filtern.</p></a>
      <a class="feature reveal" data-d="1" href="/finder"><div class="ic" set:html={Compass}></div><h3>60-Sekunden-Finder</h3><p class="muted">Welches Gerät passt zu deinem Raum? Nur echte Kompressorgeräte.</p></a>
      <a class="feature reveal" data-d="2" href="/alarm"><div class="ic" set:html={Bell}></div><h3>Prognose &amp; Alarm</h3><p class="muted">Wir schätzen, wo die Chance in 7 Tagen am höchsten ist – Mail &amp; Telegram.</p></a>
    </div>
  </section>

  <section class="wrap"><div class="alarmband reveal">
    <div class="ab-photo" style={`background-image:url('${IMG_PHONE}')`} role="img" aria-label="Smartphone mit Push-Benachrichtigung"></div>
    <div class="ab-text">
      <span class="kicker"><span class="u"></span>Sei der Erste</span>
      <h2 style="margin:.3rem 0 .4rem">Wir sagen Bescheid, sobald es verfügbar ist.</h2>
      <p class="muted" style="max-width:34rem">Verfügbarkeits-Alarm und Preiswecker für ein oder mehrere Wunsch­geräte – per Mail oder Telegram. So musst du nicht ständig selbst nachschauen.</p>
      <div class="bandcta"><a class="btn" href="/alarm" data-umami-event="alarm_cta_home">Alarm einrichten</a><a class="btn ghost" href="/pro">Pro: Echtzeit ohne Verzögerung</a></div>
    </div>
  </div></section>

  <section class="wrap"><div class="band reveal">
    <div>
      <h2>Vergriffen? Wir warnen vor Wucher.</h2>
      <p class="muted" style="max-width:42rem">Bei Knappheit verlangen Drittanbieter auf Amazon &amp; eBay schnell das Mehrfache. Kühlfinder kennt den üblichen Preis, zeigt <strong>günstigsten und teuersten</strong> Anbieter, prüft die <strong>Seriosität der Shops</strong> – und markiert Wucher.</p>
      <div class="bandcta"><a class="btn" href="/karte">Zur Live-Karte</a><a class="btn ghost" href="/portasplit">PortaSplit &amp; Alternativen</a></div>
    </div>
    <div class="band-card card">
      <div class="bc-row ok"><span>eBay günstigster</span><b class="num">607 €</b></div>
      <div class="bc-row"><span>Üblicher Preis</span><b class="num">799 €</b></div>
      <div class="bc-row danger"><span>⚠ eBay/Marketplace-Wucher</span><b class="num">2.999 €</b></div>
    </div>
  </div></section>

  <section class="wrap">
    <div class="section-head"><div><span class="kicker"><span class="u"></span>Grenzregionen</span><h2 style="margin:.2rem 0 0">Auch im Nachbarland verfügbar</h2></div></div>
    <div class="countries reveal">
      <span class="cflag"><span class="flag">🇩🇪</span> Deutschland</span>
      <span class="cflag"><span class="flag">🇦🇹</span> Österreich</span>
      <span class="cflag"><span class="flag">🇨🇭</span> Schweiz</span>
      <span class="cflag"><span class="flag">🇳🇱</span> Niederlande</span>
      <span class="cflag"><span class="flag">🇵🇱</span> Polen</span>
      <span class="cflag"><span class="flag">🇩🇰</span> Dänemark</span>
    </div>
  </section>

  <section class="wrap">
    <div class="section-head"><div><span class="kicker"><span class="u"></span>Kuratiert</span><h2 style="margin:.2rem 0 0">Beliebte Geräte – und wo es sie gibt</h2></div><a class="btn ghost sm" href="/geraete">Alle Geräte</a></div>
    <div class="grid cards3">{top.map((p,i) => <div class="reveal" data-d={String(i)}><ProductCard product={p} /></div>)}</div>
  </section>

  <section class="wrap">
    <div class="section-head"><div><span class="kicker"><span class="u"></span>Sachlich entscheiden</span><h2 style="margin:.2rem 0 0">Nicht in Panik – clever</h2></div></div>
    <div class="features">
      <a class="feature reveal" href="/rechner"><h3>Klima-Rechner</h3><p class="muted">Raumgröße + Nutzung eingeben → nötige Leistung &amp; passende Geräte mit Link zu Preis/Verfügbarkeit oder Monteur.</p></a>
      <a class="feature reveal" data-d="1" href="/soforthilfe"><h3>Hitze-Soforthilfe</h3><p class="muted">Was JETZT kühlt – auch ohne Gerät. Spezial-Tipps für Dachgeschoss &amp; Haus, sauber recherchiert.</p></a>
      <a class="feature reveal" data-d="2" href="/klimaanlage-installieren"><h3>Fest installieren?</h3><p class="muted">Mobil als Brücke, Split/Wärmepumpe als Lösung – Optionen, Preise (1.800–12.000 €) &amp; wann es sich lohnt.</p></a>
    </div>
  </section>

  <section class="wrap"><div class="split">
    <div class="card reveal"><h2>So funktioniert's</h2><ol class="steps"><li>PLZ eingeben oder Standort nutzen.</li><li>Karte zeigt Märkte mit Bestand + Prognose.</li><li>Hingehen – oder Alarm/Preiswecker setzen.</li></ol></div>
    <div class="card warm reveal" data-d="1"><h2>Hitzeschutz statt Panik</h2><p class="muted">Hitzewellen nehmen zu. Gute, effiziente Kühlung kann Hitzeschutz sein – mit Quellen statt Alarmismus.</p><a class="btn ghost" href="/hitzeschutz">Klima &amp; Hitzeschutz</a></div>
  </div></section>
</Base>
<style>
  .herowrap{margin-top:1.4rem}
  .hero-card{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(20,40,60,.05),0 18px 48px rgba(20,40,60,.10);min-height:480px}
  .hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
  .hero-veil{position:absolute;inset:0;background:linear-gradient(100deg,var(--light) 0%,color-mix(in oklab,var(--light) 94%,transparent) 34%,color-mix(in oklab,var(--light) 55%,transparent) 56%,transparent 80%)}
  .hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;padding:2.4rem 2.4rem 2.4rem;align-items:start}
  .hero-left h1{font-size:clamp(2.2rem,5.2vw,3.7rem);line-height:1.05;letter-spacing:-.02em;max-width:14ch;margin:.7rem 0 0}
  .hero-left .lead{font-size:1.12rem;max-width:30rem;color:var(--ink-2);margin-top:.9rem}
  .livetag{color:var(--ok-dot);font-size:.7rem;letter-spacing:.08em;font-weight:700}
  .herobar{display:flex;gap:.6rem;margin:1.3rem 0 1.1rem;max-width:560px;flex-wrap:wrap}
  .herobar input{flex:1;min-width:180px;font-family:var(--font-body);font-size:1rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-card)}
  .herobar input:focus{border-color:var(--petrol)}
  .herofeat{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;font-size:.86rem;color:var(--ink-2)}
  .herofeat span{display:inline-flex;align-items:center;gap:.45rem}.herofeat svg{color:var(--petrol-deep)}
  .hero-live{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem;justify-self:end;width:100%;max-width:340px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px)}
  .lc-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.95rem}
  .livelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .livelist li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem .1rem;border-top:1px solid var(--line);font-size:.88rem}
  .livelist li:first-child{border-top:none}
  .livelist .lm{font-weight:600}.livelist .lc{font-size:.78rem;color:var(--slate)}
  .livelist .lp{font-family:var(--mono);font-size:.82rem;color:var(--petrol-deep);font-weight:600}
  .stat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1rem}
  .stile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--shadow-card)}
  .st-l{font-size:.82rem;color:var(--slate)}
  .st-n{font-size:1.9rem;letter-spacing:-.02em;margin-top:.35rem;font-variant-numeric:tabular-nums}
  .st-s{font-size:.76rem;color:var(--slate);margin-top:.2rem}
  .alarmband{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.5rem;align-items:center;background:var(--petrol-soft);border-radius:20px;overflow:hidden}
  .ab-photo{min-height:260px;background-size:cover;background-position:center}
  .ab-text{padding:1.8rem 1.8rem 1.8rem 0}
  section.wrap{margin-top:2.8rem}
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
  .features .feature{text-decoration:none;color:var(--ink)}.features h3{margin:.2rem 0}
  .features .ic{color:var(--petrol-deep)}
  .cards3{grid-template-columns:repeat(3,1fr)}
  .band{display:grid;grid-template-columns:1.6fr 1fr;gap:1.5rem;align-items:center;background:var(--petrol-soft);border-radius:20px;padding:1.8rem}
  .bandcta{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
  .band-card{display:flex;flex-direction:column;gap:.4rem}
  .bc-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem .2rem;border-bottom:1px solid var(--line)}
  .bc-row b{font-size:1.1rem}.bc-row.danger b{color:var(--danger)}.bc-row.ok b{color:var(--ok-dot)}
  .countries{display:flex;gap:.6rem;flex-wrap:wrap}
  .cflag{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;box-shadow:var(--shadow-card);font-size:.9rem;font-weight:500}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.card.warm{background:var(--warm-bg)}
  .steps{margin:.4rem 0 0;padding-left:1.2rem}.steps li{margin:.3rem 0}
  @media(max-width:960px){.stat-tiles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:860px){.hero-inner{grid-template-columns:1fr}.hero-live{max-width:none;justify-self:stretch}.hero-veil{background:linear-gradient(180deg,color-mix(in oklab,var(--light) 90%,transparent),color-mix(in oklab,var(--light) 96%,transparent))}.features,.cards3,.split{grid-template-columns:1fr}.band{grid-template-columns:1fr}.alarmband{grid-template-columns:1fr}.ab-text{padding:0 1.5rem 1.6rem}.ab-photo{min-height:200px}}
</style>
<script>
  const euro=(n,c)=>n==null?'–':new Intl.NumberFormat('de-DE',{style:'currency',currency:c||'EUR',maximumFractionDigits:0}).format(n);
  document.getElementById('locbtn')?.addEventListener('click',e=>{ if(navigator.geolocation){ /* Karte hat eigene Standortfunktion */ } });
  const CRAWLER=(import.meta.env.PUBLIC_CRAWLER_URL)||'http://vnqwgi4gq520hs1p4bsgi4w6.46.224.49.66.sslip.io';
  fetch('/data/monitor.json').then(r=>r.json()).then(d=>{
    const tot=document.getElementById('p-total');
    tot.setAttribute('data-count', d.stats.storesTotal); tot.removeAttribute('data-done');
    document.getElementById('p-chains').textContent=new Set(d.stores.map(s=>s.c)).size;
    window.kfAnim && window.kfAnim();
  }).catch(()=>{});
  fetch(CRAWLER+'/api/live').then(r=>r.json()).then(d=>{
    const offers=(d.offers||[]).filter(o=>o.price);
    document.getElementById('p-ac').textContent=offers.length;
    const ac2=document.getElementById('p-ac2'); if(ac2) ac2.textContent=offers.length;
    document.getElementById('livelist').innerHTML = offers.slice(0,6).map(o=>`<li><span><span class="lm">${o.chain}</span> <span class="lc">${o.name}</span></span><span class="lp">${euro(o.price)}</span></li>`).join('') || '<li class="lc">Crawler startet – gleich wieder reinschauen.</li>';
  }).catch(()=>{document.getElementById('p-ac').textContent='–';document.getElementById('livelist').innerHTML='<li class="lc">Live-Preise gerade nicht erreichbar.</li>';});
</script>