'use client';

import Link from 'next/link';
import { Github, Heart, ExternalLink } from 'lucide-react';

export function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="border-t bg-card/50 backdrop-blur-sm">
      <div className="max-w-7xl mx-auto px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* About */}
          <div className="space-y-3">
            <h3 className="font-semibold text-lg">Pastel UI</h3>
            <p className="text-sm text-muted-foreground">
              A modern, interactive web application for color manipulation, palette generation,
              and accessibility analysis.
            </p>
          </div>

          {/* Resources */}
          <div className="space-y-3">
            <h3 className="font-semibold">Resources</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <Link href="/playground" className="text-muted-foreground hover:text-foreground transition-colors">
                  Color Playground
                </Link>
              </li>
              <li>
                <Link href="/palettes" className="text-muted-foreground hover:text-foreground transition-colors">
                  Palette Generator
                </Link>
              </li>
              <li>
                <Link href="/accessibility" className="text-muted-foreground hover:text-foreground transition-colors">
                  Accessibility Tools
                </Link>
              </li>
              <li>
                <Link href="/batch" className="text-muted-foreground hover:text-foreground transition-colors">
                  Batch Operations
                </Link>
              </li>
            </ul>
          </div>

          {/* Documentation */}
          <div className="space-y-3">
            <h3 className="font-semibold">Documentation</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="https://github.com/valknarness/pastel-ui#readme"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
                >
                  Getting Started
                  <ExternalLink className="h-3 w-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/valknarness/pastel-api#readme"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
                >
                  API Documentation
                  <ExternalLink className="h-3 w-3" />
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/sharkdp/pastel"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
                >
                  Pastel CLI
                  <ExternalLink className="h-3 w-3" />
                </a>
              </li>
            </ul>
          </div>

          {/* Community */}
          <div className="space-y-3">
            <h3 className="font-semibold">Community</h3>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href="https://github.com/valknarness/pastel-ui"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
                >
                  <Github className="h-4 w-4" />
                  Pastel UI
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/valknarness/pastel-api"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
                >
                  <Github className="h-4 w-4" />
                  Pastel API
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/valknarness/pastel-ui/issues"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Report an Issue
                </a>
              </li>
              <li>
                <a
                  href="https://github.com/valknarness/pastel-ui/discussions"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  Discussions
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-12 pt-8 border-t">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="text-sm text-muted-foreground">
              <p className="inline-flex items-center gap-1">
                © {currentYear} Pastel UI. Built with
                <Heart className="h-4 w-4 text-red-500 fill-red-500" />
                using
                <a
                  href="https://nextjs.org"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition-colors underline"
                >
                  Next.js
                </a>
                and
                <a
                  href="https://tailwindcss.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition-colors underline"
                >
                  Tailwind CSS
                </a>
              </p>
            </div>

            <div className="flex items-center gap-6 text-sm text-muted-foreground">
              <p>
                Based on{' '}
                <a
                  href="https://github.com/sharkdp/pastel"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition-colors underline"
                >
                  Pastel
                </a>
                {' '}by{' '}
                <a
                  href="https://github.com/sharkdp"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-foreground transition-colors underline"
                >
                  David Peter
                </a>
              </p>
              <span>•</span>
              <a
                href="https://github.com/valknarness/pastel-ui/blob/main/LICENSE"
                target="_blank"
                rel="noopener noreferrer"
                className="hover:text-foreground transition-colors"
              >
                MIT License
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}