import { Container } from '@/components/Container'
import { Logo } from '@/components/Logo'
import { NavLink } from '@/components/NavLink'
import Link from 'next/link'

export function Footer() {
  return (
    <footer className="bg-slate-50">
      <Container>
        <div className="py-16">
          <Link href="/" aria-label="Startseite">
            <Logo className="mx-auto h-10 w-auto" />
          </Link>
          <nav className="mt-10 text-center text-sm" aria-label="quick links">
            <div className="-my-1 flex flex-col justify-center gap-x-6 sm:flex-row">
              <NavLink href="#features">Funktionen</NavLink>
              <NavLink href="#pricing">Preise</NavLink>
            </div>
          </nav>
        </div>
        <div className="flex flex-col items-center border-t border-slate-400/10 pt-10">
          <p className="mt-6 text-sm text-slate-500 sm:mt-0">NaviLearn</p>
        </div>
        <nav
          className="pb-10 pt-2 text-center text-sm"
          aria-label="quick links"
        >
          <div className="-my-1 flex flex-col justify-center gap-x-6 sm:flex-row">
            <NavLink href="/impressum">Impressum</NavLink>
            <NavLink href="/datenschutz">Datenschutzerklärung</NavLink>
          </div>
        </nav>
      </Container>
    </footer>
  )
}
