import Link from 'next/link'

import { Container } from '@/components/Container'
import { Logo } from '@/components/partner/Logo'

const navigation = [
  { label: 'Was ist UVI?', href: '#was-ist-uvi' },
  { label: 'So funktioniert es', href: '#so-funktioniert-es' },
  { label: 'Aufgabenteilung', href: '#aufgabenteilung' },
  { label: 'Einnahmemodell', href: '#einnahmemodell' },
  { label: 'Partner werden', href: '#partner-werden' },
]

const legal = [
  { label: 'Impressum', href: '#' },
  { label: 'Datenschutz', href: '#' },
  { label: 'AGB', href: '#' },
]

export function Footer() {
  return (
    <footer className="bg-slate-50">
      <Container>
        <div className="grid grid-cols-1 gap-10 py-16 md:grid-cols-2 lg:grid-cols-4">
          <div className="max-w-sm lg:col-span-2">
            <Logo className="h-10 w-auto" />
            <p className="mt-4 text-sm leading-6 text-slate-600">
              GebOS stellt die digitale Infrastruktur für UVI- und
              Verbrauchserfassungsservices bereit – damit Elektro- und
              Sanitärbetriebe Ansprechpartner vor Ort bleiben.
            </p>
          </div>

          <div>
            <h3 className="font-display text-sm font-semibold text-slate-900">
              Navigation
            </h3>
            <ul role="list" className="mt-4 space-y-3 text-sm">
              {navigation.map((item) => (
                <li key={item.label}>
                  <Link
                    href={item.href}
                    className="text-slate-600 transition hover:text-slate-900"
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="font-display text-sm font-semibold text-slate-900">
              Kontakt
            </h3>
            <address className="mt-4 space-y-3 text-sm not-italic leading-6 text-slate-600">
              <p>
                GebOS GmbH
                <br />
                Musterstraße 12
                <br />
                12345 Musterstadt
                <br />
                Deutschland
              </p>
              <p className="space-y-1">
                <a
                  href="tel:+49301234567"
                  className="block transition hover:text-slate-900"
                >
                  +49 (0)30 123 456 7
                </a>
                <a
                  href="mailto:partner@gebos.example"
                  className="block transition hover:text-slate-900"
                >
                  partner@gebos.example
                </a>
              </p>
            </address>
          </div>
        </div>

        <div className="flex flex-col items-center gap-y-4 border-t border-slate-400/10 py-8 sm:flex-row-reverse sm:justify-between sm:gap-y-0">
          <div className="flex gap-x-6 text-sm">
            {legal.map((item) => (
              <Link
                key={item.label}
                href={item.href}
                className="text-slate-500 transition hover:text-slate-700"
              >
                {item.label}
              </Link>
            ))}
          </div>
          <p className="text-sm text-slate-500">
            Copyright &copy; {new Date().getFullYear()} GebOS GmbH. Alle Rechte
            vorbehalten.
          </p>
        </div>
      </Container>
    </footer>
  )
}