import Link from 'next/link'

export default function Footer() {
  return (
    <footer className="bg-slate-900 text-slate-400 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">B</span>
              </div>
              <span className="font-semibold text-xl text-white">BreakPilot</span>
            </div>
            <p className="mt-4 text-sm max-w-md">
              KI-gestuetzte Korrekturhilfe fuer Lehrkraefte.
              Sparen Sie Zeit und konzentrieren Sie sich auf das Wesentliche: Ihre Schueler.
            </p>
          </div>

          {/* Links */}
          <div>
            <h3 className="text-white font-medium mb-4">Produkt</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="#pricing" className="hover:text-white transition-colors">
                  Preise
                </Link>
              </li>
              <li>
                <Link href="#features" className="hover:text-white transition-colors">
                  Funktionen
                </Link>
              </li>
              <li>
                <Link href="/faq" className="hover:text-white transition-colors">
                  FAQ
                </Link>
              </li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h3 className="text-white font-medium mb-4">Rechtliches</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/impressum" className="hover:text-white transition-colors">
                  Impressum
                </Link>
              </li>
              <li>
                <Link href="/datenschutz" className="hover:text-white transition-colors">
                  Datenschutz
                </Link>
              </li>
              <li>
                <Link href="/agb" className="hover:text-white transition-colors">
                  AGB
                </Link>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center">
          <p className="text-sm">
            &copy; {new Date().getFullYear()} BreakPilot. Alle Rechte vorbehalten.
          </p>
          <p className="text-sm mt-2 md:mt-0">
            Made with care in Germany
          </p>
        </div>
      </div>
    </footer>
  )
}
