import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Logo } from '@/components/Logo/Logo'
import styles from "./styles.module.scss"
import { Row } from '@/components/Flex/Row'
import { Col } from '@/components/Flex/Col'
import { RandomPrayer } from '@/components/RandomPrayer/RandomPrayer'
import Link from 'next/link'


export const Footer = () => {
  return (
    <div className={styles.container}>
      <Section backgroundColor="soft">
        <Container>
          <Row alignItems={"center"}>
            <Col>
              <Logo
                color={"#ffffff"}
                textColor={"#426156"}
                withText={true}
                height={100}
              />
            </Col>

            <Col>
              <Row>
                <Col>
                  <p>
                    <strong>Navigation</strong>
                  </p>
                  <ul className={styles.list}>
                    <li><Link href={"/kontakt"}>Kontakt</Link></li>
                    <li><Link href={"/gottesdiensten"}>Gottesdiensten</Link></li>
                    <li><Link href={"/datenschutz"}>Datenschutz</Link></li>
                    <li><Link href={"/schutzkonzept"}>Schutzkonzept</Link></li>
                    <li><Link href={"/impressum"}>Impressum</Link></li>
                  </ul>
                </Col>
                <Col>
                  <p>
                    <strong>Stoßgebet</strong>
                  </p>
                  <RandomPrayer />
                </Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </Section>
    </div>
  );
}