---
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.'
};
---
<Base title="Kühlfinder – gutes portables Klimagerät finden & Verfügbarkeit sehen" 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>
    </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>
    <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>
    </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>
  </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}
  .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}}
</style>