function PressPhotos() {
  const photos = [
    { web: 'assets/press-photos/philipp-portrait-web.jpg', full: 'assets/press-photos/philipp-portrait.jpg',
      name: 'Porträt (Hochformat)', dim: '2181 × 2726 px', land: false },
    { web: 'assets/press-photos/philipp-headshot-web.jpg', full: 'assets/press-photos/philipp-headshot.jpg',
      name: 'Headshot (Querformat)', dim: '4096 × 2726 px', land: true },
    { web: 'assets/press-photos/philipp-business-web.jpg', full: 'assets/press-photos/philipp-business.jpg',
      name: 'Business (Querformat)', dim: '4000 × 2663 px', land: true },
  ];
  return (
    <section className="section press-photos" id="pressefotos">
      <div className="container-narrow">
        <div className="section-eyebrow"><span className="kicker-line"></span>Pressefotos</div>
        <h2 className="section-title">Fotos zum Download</h2>
        <p className="section-lede">Druckauflösung, direkt verwendbar. Ein Klick lädt die volle Auflösung.</p>
        <div className="photos-grid">
          {photos.map((p, i) => (
            <figure key={i} className={`photo-card${p.land ? ' is-landscape' : ''}`}>
              <img className="photo-thumb" src={p.web} alt={`Philipp Raasch, ${p.name}`} loading="lazy" />
              <figcaption className="photo-meta">
                <span className="photo-name">{p.name}</span>
                <a className="photo-dl" href={p.full} download>Download · JPG · {p.dim} ↓</a>
              </figcaption>
            </figure>
          ))}
        </div>
        <p className="photos-usage">
          Honorarfreie Verwendung im redaktionellen Zusammenhang. Bitte als Quelle angeben:
          Der Autopreneur / Philipp Raasch. Das Logo gibt es <a href="assets/logo-der-autopreneur.svg" download>hier als SVG</a>.
        </p>
      </div>
    </section>
  );
}
window.PressPhotos = PressPhotos;