import { Github, Twitter, Mail, Heart } from "lucide-react"

export default function Footer() {
  return (
    <footer className="bg-black border-t border-gray-800 py-12 px-4">
      <div className="container mx-auto">
        <div className="grid md:grid-cols-4 gap-8 mb-8">
          <div>
            <div className="flex items-center space-x-2 mb-4">
              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-sm">MN</span>
              </div>
              <span className="text-xl font-bold">Meetingnotes</span>
            </div>
            <p className="text-gray-400 mb-4">Free Open-Source AI Notetaker for macOS</p>
            <div className="flex space-x-4">
              <a
                href="https://github.com/meetingnotes/meetingnotes"
                className="text-gray-400 hover:text-white transition-colors"
              >
                <Github className="w-5 h-5" />
              </a>
              <a href="https://twitter.com/meetingnotes" className="text-gray-400 hover:text-white transition-colors">
                <Twitter className="w-5 h-5" />
              </a>
              <a href="mailto:hello@meetingnotes.dev" className="text-gray-400 hover:text-white transition-colors">
                <Mail className="w-5 h-5" />
              </a>
            </div>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Product</h4>
            <ul className="space-y-2 text-gray-400">
              <li>
                <a href="#features" className="hover:text-white transition-colors">
                  Features
                </a>
              </li>
              <li>
                <a href="#how-it-works" className="hover:text-white transition-colors">
                  How it Works
                </a>
              </li>
              <li>
                <a href="/download" className="hover:text-white transition-colors">
                  Download
                </a>
              </li>
              <li>
                <a href="/changelog" className="hover:text-white transition-colors">
                  Changelog
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Community</h4>
            <ul className="space-y-2 text-gray-400">
              <li>
                <a href="https://github.com/meetingnotes/meetingnotes" className="hover:text-white transition-colors">
                  GitHub Repo
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/meetingnotes/meetingnotes/blob/main/README.md"
                  className="hover:text-white transition-colors"
                >
                  Documentation
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/meetingnotes/meetingnotes/blob/main/CONTRIBUTING.md"
                  className="hover:text-white transition-colors"
                >
                  Contribute
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/meetingnotes/meetingnotes/issues"
                  className="hover:text-white transition-colors"
                >
                  Report Issues
                </a>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Legal</h4>
            <ul className="space-y-2 text-gray-400">
              <li>
                <a href="/privacy" className="hover:text-white transition-colors">
                  Privacy Policy
                </a>
              </li>
              <li>
                <a href="/terms" className="hover:text-white transition-colors">
                  Terms of Service
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/meetingnotes/meetingnotes/blob/main/LICENSE"
                  className="hover:text-white transition-colors"
                >
                  LGPL-3.0 License
                </a>
              </li>
              <li>
                <a href="/contact" className="hover:text-white transition-colors">
                  Contact
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-400 text-sm mb-4 md:mb-0">
            Copyright © Owen Gretzinger {new Date().getFullYear()}. Licensed under LGPL-3.0 License. All rights
            reserved.
          </p>
          <div className="flex items-center space-x-2 text-gray-400 text-sm">
            <span>Created by Owen Gretzinger with</span>
            <Heart className="w-4 h-4 text-red-500" />
            <span>for the community</span>
          </div>
        </div>
      </div>
    </footer>
  )
}