import { Button } from '@/components/Button/Button'
import styles from './styles.module.scss'
import image1 from './Spenden_Beduerftige-1.png'
import image2 from './Spenden_Asyl-1.png'
import image3 from './Spenden_Zukunft-1.png'
import image4 from './Spenden_Christophorus.png'
import Image from 'next/image'
import { Title } from '@/components/Title/Title'

const data = [
  {
    id: '1',
    title: 'Bedürftige',
    image: image1,
    text: 'Auf vielfältige Weise bemühen wir uns, Bedürftige zu stärken. Bei „Essen ist fertig!“ gibt es monatlich bis zu 800 Mahlzeiten – mit Nachtisch! 25 Ehrenamtliche sind im Einsatz! „Gebt Ihr ihnen zu essen“ (Mk 6,37).',
    url: '/spenden/b7e42f42-3d78-4dc8-8b37-529df71c3f06'
  },
  {
    id: '2',
    title: 'Asyl',
    image: image2,
    text: 'Unser Einsatz mit und für Geflüchtete hat schon vielen geholfen. Oft bleiben sie mit uns in Kontakt und unterstützen uns. So umstritten das Kirchenasyl ist, dass wir als ultima ratio gewähren, wir haben dafür schon mehrere Preise bekommen und vielen richtig geholfen. „Ich war fremd, und ihr habt mich aufgenommen“ (Mt 25, 35).',
    url: '/spenden/9adda877-30a1-49ef-8400-165dda401d19'
  },
  {
    id: '3',
    title: 'Zukunft',
    image: image3,
    text: 'Auf den Stellenabbau der Erzdiözese haben wir mit unserem „Projekt Zukunft“ reagiert. Wir refinanzieren notwendige Stellenanteile von Büro bis Kirchenmusik durch Spenden und sichern so die Basis unseres Wirkens. Wir mussten niemanden entlassen und konnten Arbeitsplätze sichern. Ein wesentlicher Grundstein, um Gemeinde vor Ort zu stärken und Zukunft zu ermöglichen! „Ich will euch Zukunft und Hoffnung geben“ (Jer 29,11).',
    url: '/spenden/4d06e88f-01b3-4176-9242-de39402b49a2'
  },
  {
    id: '4',
    title: 'Christophorus',
    image: image4,
    text: 'Unsere Kirche ist fast immer offen als „Haus des Gebetes für alle Völker“ (Mk 11,17). Viele unterstützen gern ein konkretes Projekt, andere ganz allgemein unser Wirken. Sie überlassen es uns, wo wir es gerade für nötig erachten. Unser Traum ist weiter Wachsen nach innen (Qualität) und Wachsen nach außen (Quantität) zum ganzheitlichen Heil von uns Menschen.',
    url: '/spenden/f25a9a4c-ae2d-493c-84fa-fc5479fc0eac'
  }
]

export const DonationAppeal = () => {
  return (
    <>
      <div>
        <Title
          title={"Unser vielfältiges Wirken lebt von der tatkräftigen und auch finanziellen Unterstützung vieler – wir staunen dankbar!"}
          subtitle={"Wir freuen uns über jede Spende und wissen: „Wer gibt, empfängt!“ (Lk 6,38)"}
          size={"md"}
          align={"center"}
        />

      </div>
      <div className={styles.row}>

        { data.map(appeal =>
          <div key={appeal.id} className={styles.col}>
            <h3>{appeal.title}</h3>
            <Image src={appeal.image} alt={""} width={200} height={200} unoptimized={false} />

            <p>
              {appeal.text}
            </p>

            <p>
              <Button size={"md"} href={appeal.url}>Jetzt spenden</Button>
            </p>
          </div>
        )}

      </div>
    </>

  )
}