import { motion } from "framer-motion";
import { Mail, ExternalLink, ArrowRight } from "lucide-react";

const links = [
  {
    label: "Tech-Blog",
    url: "https://blog.unixweb.de",
    desc: "300+ Fachartikel rund um Linux, Server & IT",
  },
  {
    label: "KI-Blog",
    url: "https://ki-blog.unixweb.de",
    desc: "KI, Automation, n8n & KI-gestützte Entwicklung",
  },
  {
    label: "Website",
    url: "https://joachimhummel.de",
    desc: "joachimhummel.de",
  },
];

export function Contact() {
  return (
    <div className="py-24">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.6 }}
      >
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <p className="section-number mb-3" data-testid="text-section-label-contact">Kontakt</p>
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4" data-testid="text-section-title-contact">
              Bereit für das nächste Projekt?
            </h2>
            <p className="text-muted-foreground text-lg max-w-xl mx-auto">
              Ob Infrastruktur-Modernisierung, KI-Automation oder technische Dokumentation — ich freue mich auf Ihre Anfrage.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <motion.a
              href="mailto:jh@unixweb.de"
              whileHover={{ scale: 1.01 }}
              className="flex items-center gap-5 p-6 rounded-2xl bg-primary text-white border border-primary card-hover group"
              data-testid="link-contact-email"
            >
              <div className="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center shrink-0">
                <Mail className="w-6 h-6" />
              </div>
              <div className="flex-grow">
                <p className="font-semibold text-white">E-Mail schreiben</p>
                <p className="text-sm text-white/70">jh@unixweb.de</p>
              </div>
              <ArrowRight className="w-5 h-5 text-white/60 group-hover:translate-x-1 transition-transform" />
            </motion.a>

            <div className="flex flex-col gap-3">
              {links.map((link) => (
                <motion.a
                  key={link.label}
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ scale: 1.01 }}
                  className="flex items-center gap-4 px-5 py-4 rounded-xl bg-white border border-border card-hover group"
                  data-testid={`link-contact-${link.label.toLowerCase().replace(/\s/g, '-')}`}
                >
                  <div className="w-9 h-9 rounded-lg bg-secondary flex items-center justify-center shrink-0">
                    <ExternalLink className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
                  </div>
                  <div className="flex-grow min-w-0">
                    <p className="text-sm font-semibold text-foreground">{link.label}</p>
                    <p className="text-xs text-muted-foreground truncate">{link.desc}</p>
                  </div>
                  <ArrowRight className="w-4 h-4 text-muted-foreground/40 group-hover:text-primary group-hover:translate-x-1 transition-all shrink-0" />
                </motion.a>
              ))}
            </div>
          </div>

          <div className="mt-12 pt-8 border-t border-border text-center text-sm text-muted-foreground">
            Joachim Hummel &mdash; Senior IT-Consultant &middot; München
          </div>
        </div>
      </motion.div>
    </div>
  );
}
