import { PageHeader } from '@/compositions/PageHeader/PageHeader'
import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { ContactSection } from '@/compositions/ContactSection/ContactSection'
import { Title } from '@/components/Title/Title'
import { P } from '@/components/Text/Paragraph'
import { Row } from '@/components/Flex/Row'
import { Col } from '@/components/Flex/Col'
import Logo from '@/components/Logo/Logo'
import { siteConfig } from '@/config/site'

export default function ContactPage() {
  return (
    <>
      <PageHeader
        title={"Kontakt"}
        description={"Haben Sie Fragen, Anregungen oder möchten Sie mit uns in Kontakt treten? Dann sind Sie hier genau richtig."}
      />

      <Section padding={"small"}>
        <Container>
          <Title title={siteConfig.shortName} size="md"></Title>
          <Row>
            <Col>
              <P width={"1/2"}>
                {siteConfig.address}<br/>
                {siteConfig.postalCode} {siteConfig.city}<br/>
                {siteConfig.phone}<br/>
                {siteConfig.email}
              </P>
              <P width={"1/2"}>
                <strong>Geöffnet:</strong><br/>
                Montag: 12:30 – 14:30 Uhr <br/>
                Mittwoch: 09:00 – 12:00 Uhr
              </P>
            </Col>
            <Col>
              <Logo
                withText={true}
                color={siteConfig.baseColor}
                textColor={siteConfig.shade1}
                height={140}
              />
            </Col>
          </Row>

        </Container>
      </Section>

      <ContactSection
        title={"Kontaktformular"}
        description={`Füllen Sie einfach unser Kontaktformular aus und wir werden uns umgehend mit Ihnen in Verbindung setzen. Oder senden Sie uns eine Nachricht auf ${siteConfig.email}`}
        toEmail={siteConfig.email}
      />
    </>
  )
}