v3: eigener Scraper (OBI live verifiziert) statt braucheklima-Daten; Elektromärkte (MediaMarkt/Saturn/expert/Euronics)+Amazon; Startseite reframed 'wo gibt es Klimageräte'; SaaS-Design; Monitor any-AC + Modell-Filter

src/pages/index.astro

@@ -1,88 +1,103 @@
 ---
 import Base from '../layouts/Base.astro';
 import ProductCard from '../components/ProductCard.astro';
-import { allProducts, priceIntel, euro, getProduct, dataUpdatedAt } from '../lib/pricing';
-const top = allProducts.filter(p => p.tier === 'A');
-const ps = getProduct('midea-portasplit-12000')!;
-const psi = priceIntel(ps);
-const updated = new Date(dataUpdatedAt).toLocaleString('de-DE',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'});
-const jsonld = {
-  '@context':'https://schema.org','@type':'WebSite',name:'Kühlfinder',url:'https://kuehlfinder.de',
-  description:'Portable Klimageräte finden und Live-Verfügbarkeit in Baumärkten sehen.'
-};
+import { allProducts } from '../lib/pricing';
+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, wo es gerade Klimageräte in Baumärkten und Elektromärkten gibt – mit Prognose, Preis-Check und Alarm.'};
 ---
-<Base title="Kühlfinder – gutes portables Klimagerät finden & Verfügbarkeit sehen" jsonld={jsonld}>
+<Base title="Kühlfinder – Wo gibt es gerade ein Klimagerät? Live-Verfügbarkeit in DE" description="Live-Bestand von Klimageräten in Baumärkten (OBI, Toom, Bauhaus …) und Elektromärkten (MediaMarkt, Saturn …) plus Amazon/idealo – mit Verfügbarkeits-Prognose, Preis-Check und Alarm." jsonld={jsonld}>
   <section class="hero"><div class="wrap">
-    <p class="kicker"><span class="u"></span>Ehrlicher Klima-Finder für Mietwohnungen</p>
-    <h1>Finde ein gutes portables Klimagerät – und sieh, wo es heute verfügbar ist.</h1>
-    <p class="lead">Nur echte Kompressorgeräte, keine Fake-Kühler. Mit Live-Verfügbarkeit in Baumärkten, Preis-Check gegen Wucher und Alarm, sobald dein Gerät wieder da ist.</p>
-    <div class="modes">
-      <a class="mode" href="/finder"><strong>Ich filtere</strong><span>Welches Gerät passt zu meinem Raum?</span></a>
-      <a class="mode" href="/karte"><strong>Ich sehe die Karte</strong><span>Alle Märkte mit aktuellem Bestand</span></a>
-      <a class="mode" href="/alarm"><strong>Ich lasse mich benachrichtigen</strong><span>Alarm bei Verfügbarkeit in der Nähe</span></a>
-    </div>
-  </div></section>
-
-  <section class="wrap"><div class="status card">
-    <div class="status-head">
-      <h2 style="margin:0">Midea PortaSplit – aktueller Status</h2>
-      <span class="note">Stand: {updated}</span>
-    </div>
-    <div class="status-grid">
-      <div><span class="note">Üblicher Preis (UVP)</span><br /><strong>{euro(psi.fairPrice)}</strong></div>
-      <div><span class="note">Seriös aktuell ab</span><br /><strong>{euro(psi.lowestLegit)}</strong></div>
-      <div><span class="note">Märkte mit Bestand</span><br /><strong>{psi.storesAvailable}</strong></div>
-    </div>
-    {psi.wucher && (
-      <p class="wucher">⚠ <strong>Wucher-Warnung:</strong> Einzelne Drittanbieter verlangen aktuell bis {euro(psi.wucher.price)} – das ist deutlich über dem üblichen Preis von {euro(psi.fairPrice)}. Nicht in Panik überteuert kaufen. Besser: Alarm setzen oder eine gute Alternative wählen.</p>
-    )}
-    <div class="status-cta">
-      <a class="btn sm" href="/karte?produkt=midea-portasplit-12000">PortaSplit auf der Karte</a>
-      <a class="btn sm ghost" href="/alarm?produkt=midea-portasplit-12000">Verfügbarkeits-Alarm</a>
-      <a class="btn sm ghost" href="/portasplit">Alternativen ansehen</a>
+    <span class="eyebrow"><span class="dot ok"></span>Live-Verfügbarkeit · eigener Scraper</span>
+    <h1>Wo gibt es gerade ein&nbsp;Klimagerät?</h1>
+    <p class="lead">Klimageräte sind bei Hitze überall vergriffen. Kühlfinder zeigt dir <strong>live, welcher Markt in deiner Nähe eins auf Lager hat</strong> – Baumärkte und Elektromärkte – mit Verfügbarkeits-Prognose, Preis-Check gegen Wucher und Alarm, sobald wieder was da ist.</p>
+    <form class="herobar" action="/karte" method="get">
+      <input name="plz" inputmode="numeric" placeholder="PLZ oder Ort eingeben …" aria-label="PLZ oder Ort" />
+      <button class="btn" type="submit">Verfügbarkeit zeigen</button>
+    </form>
+    <div class="pills" id="livepills">
+      <span class="pill-stat"><b id="p-ac">…</b> Märkte mit Klimagerät jetzt</span>
+      <span class="pill-stat"><b id="p-total">…</b> Märkte überwacht</span>
+      <span class="pill-stat"><b id="p-chains">10</b> Ketten · Baumarkt + Elektro</span>
     </div>
   </div></section>
 
   <section class="wrap">
-    <h2><span class="u"></span>Top-Empfehlungen</h2>
-    <p class="muted">Kuratiert nach Bauart, Kühlleistung, Effizienz, Nutzungsfall und glaubwürdigen Quellen.</p>
-    <div class="grid cards3">
-      {top.map(p => <ProductCard product={p} />)}
+    <div class="features">
+      <a class="feature" href="/karte">
+        <div class="ic"><i class="ti">◎</i></div>
+        <h3>Live-Karte</h3>
+        <p class="muted">Alle Märkte mit aktuellem Bestand auf einen Blick – filterbar nach Modell, Kette und Umkreis.</p>
+      </a>
+      <a class="feature" href="/finder">
+        <div class="ic">◆</div>
+        <h3>60-Sekunden-Finder</h3>
+        <p class="muted">Welches Gerät passt zu deinem Raum? Ehrliche Empfehlung – nur echte Kompressorgeräte.</p>
+      </a>
+      <a class="feature" href="/alarm">
+        <div class="ic">◔</div>
+        <h3>Prognose &amp; Alarm</h3>
+        <p class="muted">Wir schätzen, wo die Chance in 7 Tagen am höchsten ist – und melden uns per Mail/Telegram.</p>
+      </a>
     </div>
-    <p style="margin-top:1rem"><a class="btn ghost" href="/geraete">Alle Geräte &amp; Vergleich</a></p>
   </section>
 
-  <section class="wrap"><div class="split">
-    <div class="card">
-      <h2>PortaSplit ausverkauft?</h2>
-      <p>Die Midea PortaSplit ist bei Hitze regelmäßig vergriffen. Wir zeigen dir wohnungstaugliche Alternativen, die wirklich kühlen – statt dich teuer hängen zu lassen.</p>
-      <a class="btn ghost" href="/portasplit">Sinnvolle Alternativen</a>
+  <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 &amp; Vergleich</a>
     </div>
-    <div class="card warm">
-      <h2>Warum Kühlung wichtiger wird</h2>
-      <p>Hitzewellen treten in Deutschland früher und intensiver auf. Gute, effiziente Kühlung kann Hitzeschutz sein – mit Quellen statt Panik.</p>
-      <a class="btn ghost" href="/hitzeschutz">Hitzeschutz &amp; Klima</a>
+    <div class="grid cards3">{top.map(p => <ProductCard product={p} />)}</div>
+  </section>
+
+  <section class="wrap"><div class="band">
+    <div>
+      <h2>Vergriffen? Wir warnen vor Wucher.</h2>
+      <p class="muted" style="max-width:42rem">Bei Knappheit verlangen Drittanbieter (z. B. Amazon-Marketplace) schnell das Mehrfache. Kühlfinder kennt den üblichen Preis und markiert Wucher – und schlägt dir wohnungstaugliche Alternativen vor, die wirklich kühlen.</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"><span>Üblicher Preis</span><b class="num">799 €</b></div>
+      <div class="bc-row danger"><span>⚠ Marketplace-Wucher</span><b class="num">2.999 €</b></div>
+      <div class="bc-row ok"><span>Fair ab</span><b class="num">699 €</b></div>
+    </div>
+  </div></section>
+
+  <section class="wrap"><div class="split">
+    <div class="card"><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 setzen für später.</li></ol>
+    </div>
+    <div class="card warm"><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>
-  .hero{background:linear-gradient(180deg,var(--petrol-soft),var(--light));padding:3rem 0 2.5rem}
-  .kicker{font-weight:600;color:var(--petrol-deep);margin:0 0 .4rem;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}
-  .lead{font-size:1.15rem;max-width:46rem;color:var(--slate)}
-  .modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
-  .mode{display:flex;flex-direction:column;gap:.2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .08s}
-  .mode:hover{border-color:var(--petrol);transform:translateY(-2px)}
-  .mode strong{font-size:1.05rem;color:var(--petrol-deep)}
-  .mode span{font-size:.9rem;color:var(--slate)}
-  section.wrap{margin-top:2.5rem}
-  .status{border-left:4px solid var(--warm)}
-  .status-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem}
-  .status-grid{display:flex;gap:2rem;margin:.8rem 0;flex-wrap:wrap}
-  .status-grid strong{font-size:1.3rem}
-  .wucher{background:var(--danger-bg);color:var(--danger);padding:.8rem 1rem;border-radius:var(--radius);font-size:.95rem}
-  .status-cta{display:flex;gap:.5rem;flex-wrap:wrap}
+  .hero{background:var(--grad-hero);padding:3.4rem 0 2.6rem}
+  .hero h1{font-size:clamp(2.3rem,6vw,4rem);max-width:18ch;margin-top:.6rem}
+  .hero .lead{font-size:1.18rem;max-width:46rem;color:var(--ink-2)}
+  .herobar{display:flex;gap:.6rem;margin:1.4rem 0 1rem;max-width:520px}
+  .herobar input{flex:1;font-family:var(--font-body);font-size:1rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--shadow-card)}
+  .herobar input:focus{border-color:var(--petrol)}
+  .pills{display:flex;gap:.6rem;flex-wrap:wrap}
+  section.wrap{margin-top:2.6rem}
+  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
+  .features .feature{text-decoration:none;color:var(--ink)} .features h3{margin:.2rem 0}
   .cards3{grid-template-columns:repeat(3,1fr)}
-  .split{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
-  .card.warm{background:var(--warm-bg)}
-  @media(max-width:820px){.modes,.cards3,.split{grid-template-columns: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:.5rem}
+  .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)}
+  .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}
+  .ic i{font-style:normal}
+  @media(max-width:820px){.features,.cards3,.split{grid-template-columns:1fr}.band{grid-template-columns:1fr}}
 </style>
+<script>
+  fetch('/data/monitor.json').then(r=>r.json()).then(d=>{
+    document.getElementById('p-ac').textContent=(d.stats.withAC??'–').toLocaleString('de-DE');
+    document.getElementById('p-total').textContent=(d.stats.storesTotal??'–').toLocaleString('de-DE');
+  }).catch(()=>{});
+</script>