// HeroFoto.jsx — Foto-Hintergrund-Wrapper für Unterseiten-Heroes
// Jede Route bekommt ein zugeordnetes Foto + Overlay aus diesem Config-Objekt.
// Nutzung: <HeroFoto page="trauerfall" style={{padding:'56px var(--page-x)'}}>…</HeroFoto>

const HERO_PHOTOS = {
  trauerfall: {
    photo: window._r('assets/photos/candle-hands.jpg'),
    overlay: 'linear-gradient(90deg, rgba(31,29,28,.90) 0%, rgba(31,29,28,.74) 35%, rgba(31,29,28,.45) 60%, rgba(31,29,28,.78) 100%)',
  },
  vorsorge: {
    photo: window._r('assets/photos/meer-abend.jpg'),
    overlay: 'linear-gradient(100deg, rgba(244,240,237,.96) 0%, rgba(244,240,237,.84) 30%, rgba(244,240,237,.50) 55%, rgba(244,240,237,.20) 80%, rgba(244,240,237,.05) 100%)',
  },
  leistungen: {
    photo: window._r('assets/photos/coffin-flowers.jpg'),
    overlay: 'linear-gradient(100deg, rgba(244,240,237,.96) 0%, rgba(244,240,237,.84) 30%, rgba(244,240,237,.50) 55%, rgba(244,240,237,.20) 80%, rgba(244,240,237,.05) 100%)',
  },
  ueberuns: {
    photo: window._r('assets/photos/friedhof-kirschblueten.jpg'),
    overlay: 'linear-gradient(100deg, rgba(244,240,237,.96) 0%, rgba(244,240,237,.84) 30%, rgba(244,240,237,.50) 55%, rgba(244,240,237,.20) 80%, rgba(244,240,237,.05) 100%)',
  },
  kontakt: {
    photo: window._r('assets/photos/kerze-bokeh.jpg'),
    overlay: 'linear-gradient(100deg, rgba(244,240,237,.96) 0%, rgba(244,240,237,.84) 30%, rgba(244,240,237,.50) 55%, rgba(244,240,237,.20) 80%, rgba(244,240,237,.05) 100%)',
  },
  kostenplaner: {
    photo: window._r('assets/photos/beerdigungskosten.jpg'),
    overlay: 'linear-gradient(100deg, rgba(244,240,237,.96) 0%, rgba(244,240,237,.84) 30%, rgba(244,240,237,.50) 55%, rgba(244,240,237,.20) 80%, rgba(244,240,237,.05) 100%)',
  },
  faq: {
    photo: window._r('assets/photos/lily-grave.jpg'),
    overlay: 'linear-gradient(100deg, rgba(251,249,247,.96) 0%, rgba(251,249,247,.84) 30%, rgba(251,249,247,.50) 55%, rgba(251,249,247,.20) 80%, rgba(251,249,247,.05) 100%)',
  },
};

function HeroFoto({ page, children, style = {}, className = '' }) {
  const cfg = HERO_PHOTOS[page] || {};
  return (
    <section className={className} style={{
      position:'relative', overflow:'hidden',
      minHeight:'var(--hero-page-h, 520px)',
      padding:'72px var(--page-x) 64px',
      display:'flex', alignItems:'center',
      ...style,
    }}>
      {cfg.photo && (
        <div style={{ position:'absolute', inset:0, backgroundImage:`url('${cfg.photo}')`, backgroundSize:'cover', backgroundPosition:'center', pointerEvents:'none' }}/>
      )}
      {cfg.overlay && (
        <div style={{ position:'absolute', inset:0, background: cfg.overlay, pointerEvents:'none' }}/>
      )}
      <div style={{ position:'relative', width:'100%', maxWidth:'var(--page-max-w)', margin:'0 auto' }}>
        {children}
      </div>
    </section>
  );
}

Object.assign(window, { HeroFoto, HERO_PHOTOS });