---
import Base from '../layouts/Base.astro';
const credits = [
  {use:'Startseite – Hero', author:'Kevin Woblick', handle:'@kovah', authorUrl:'https://unsplash.com/@kovah',
   photoUrl:'https://unsplash.com/photos/a-white-wall-with-three-air-conditioners-on-it-JkHSdaYRiUI', title:'Air Conditioning'},
  {use:'Startseite – Alarm-Sektion', author:'Andrey Matveev', handle:'@zelebb', authorUrl:'https://unsplash.com/@zelebb',
   photoUrl:'https://unsplash.com/photos/a-hand-holds-a-smartphone-showing-notifications-QGKCe8C3D8g', title:'Smartphone mit Benachrichtigungen'},
];
---
<Base title="Bildnachweis – Kühlfinder" description="Fotonachweise und Lizenzangaben für die auf Kühlfinder verwendeten Bilder.">
  <section class="wrap" style="max-width:780px;margin-top:2rem">
    <span class="kicker"><span class="u"></span>Credits</span>
    <h1 style="margin:.3rem 0 .6rem">Bildnachweis</h1>
    <p class="muted">Die verwendeten Fotos stammen von <a href="https://unsplash.com/license" rel="noopener" target="_blank">Unsplash</a> und stehen unter der kostenlosen Unsplash-Lizenz. Eine Nennung ist nicht verpflichtend – wir tun es trotzdem, um die Fotograf:innen zu würdigen.</p>
    <div class="creditlist">
      {credits.map(c => (
        <div class="card creditrow">
          <div><strong>{c.title}</strong><div class="muted" style="font-size:.85rem">Verwendung: {c.use}</div></div>
          <div class="muted" style="font-size:.9rem">Foto: <a href={c.authorUrl} rel="noopener" target="_blank">{c.author} ({c.handle})</a> · <a href={c.photoUrl} rel="noopener" target="_blank">Original auf Unsplash ↗</a></div>
        </div>
      ))}
    </div>
    <p class="note" style="margin-top:1.2rem">Hinweis: Aktuell werden die Bilder über das Unsplash-CDN eingebunden. Für eine vollständig DSGVO-konforme, selbst gehostete Variante können die Dateien lokal unter <code>/public/img/</code> abgelegt und von dort ausgeliefert werden.</p>
  </section>
</Base>
<style>
  .creditlist{display:flex;flex-direction:column;gap:.8rem;margin-top:1rem}
  .creditrow{display:flex;flex-direction:column;gap:.4rem}
</style>