'use client'

import Link from 'next/link'
import { motion } from 'framer-motion'
import { Github, Mail, ArrowUpRight } from 'lucide-react'

const footerLinks = [
  { label: 'Projekte', href: '#projekte' },
  { label: 'Über', href: '#ueber' },
  { label: 'Fokus', href: '#fokus' },
  { label: 'Philosophie', href: '#philosophie' },
]

const legalLinks = [
  { label: 'Impressum', href: '/impressum' },
  { label: 'Datenschutz', href: '/datenschutz' },
]

const socialLinks = [
  { label: 'GitHub', href: 'https://github.com', icon: Github },
  { label: 'E-Mail', href: 'mailto:kontakt@jamulix.de', icon: Mail },
]

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

  return (
    <footer id="kontakt" className="py-16 lg:py-20 border-t border-border">
      <div className="max-w-6xl mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          {/* Main footer content */}
          <div className="grid lg:grid-cols-12 gap-12 lg:gap-8">
            {/* Brand section */}
            <div className="lg:col-span-5">
              <Link 
                href="/" 
                className="inline-block font-mono text-xl tracking-tight text-foreground hover:text-accent transition-colors"
              >
                Jamulix
              </Link>
              <p className="mt-4 text-muted-foreground max-w-sm leading-relaxed">
                50 Jahre Programmierung. Von Fortran bis KI. 
                Linux-Enthusiast seit 1994. Aktuell Python und Rust.
              </p>
              
              {/* Social links */}
              <div className="flex gap-4 mt-6">
                {socialLinks.map((link) => {
                  const Icon = link.icon
                  return (
                    <Link
                      key={link.label}
                      href={link.href}
                      target={link.href.startsWith('http') ? '_blank' : undefined}
                      rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
                      className="group flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
                      aria-label={link.label}
                    >
                      <Icon className="size-5" />
                      <span className="text-sm">{link.label}</span>
                      {link.href.startsWith('http') && (
                        <ArrowUpRight className="size-3 opacity-0 group-hover:opacity-100 transition-opacity" />
                      )}
                    </Link>
                  )
                })}
              </div>
            </div>

            {/* Navigation */}
            <div className="lg:col-span-3 lg:col-start-7">
              <h3 className="font-mono text-sm text-accent mb-4">Navigation</h3>
              <ul className="space-y-3">
                {footerLinks.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Legal */}
            <div className="lg:col-span-3">
              <h3 className="font-mono text-sm text-accent mb-4">Rechtliches</h3>
              <ul className="space-y-3">
                {legalLinks.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
                <li>
                  <span className="text-muted-foreground/60 text-sm">
                    Blog (bald)
                  </span>
                </li>
              </ul>
            </div>
          </div>

          {/* Bottom bar */}
          <div className="mt-16 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4">
            <p className="text-sm text-muted-foreground">
              &copy; {currentYear} Jamulix. Alle Rechte vorbehalten.
            </p>
            <p className="font-mono text-xs text-muted-foreground/60">
              Gebaut mit Next.js, Tailwind, und viel Kaffee.
            </p>
          </div>
        </motion.div>
      </div>
    </footer>
  )
}