me-joachimhummel-de/artifacts/joachim-portfolio/src/components/contact.tsx

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

const emailAddresses = [
  { address: "jh@unixweb.de", label: "jh@unixweb.de" },
  { address: "kontakt@joachimhummel.de", label: "kontakt@joachimhummel.de" },
];

const links = [
  {
    label: "n8n Automation",
    url: "https://n8n.io/creators/jhummel/",
    desc: "Workflows & Automatisierungen auf n8n.io",
  },
  {
    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">
            <div className="flex flex-col gap-3">
              {emailAddresses.map((email, i) => (
                <motion.a
                  key={email.address}
                  href={`mailto:${email.address}`}
                  whileHover={{ scale: 1.01 }}
                  className={`flex items-center gap-5 p-5 rounded-2xl border card-hover group ${
                    i === 0
                      ? "bg-primary text-white border-primary"
                      : "bg-white text-foreground border-border"
                  }`}
                  data-testid={`link-contact-email-${i}`}
                >
                  <div className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 ${
                    i === 0 ? "bg-white/20" : "bg-secondary"
                  }`}>
                    <Mail className={`w-5 h-5 ${i === 0 ? "text-white" : "text-primary"}`} />
                  </div>
                  <div className="flex-grow min-w-0">
                    <p className={`text-xs font-medium mb-0.5 ${i === 0 ? "text-white/70" : "text-muted-foreground"}`}>
                      {i === 0 ? "Hauptadresse" : "Alternativ"}
                    </p>
                    <p className={`text-sm font-semibold truncate ${i === 0 ? "text-white" : "text-foreground"}`}>
                      {email.label}
                    </p>
                  </div>
                  <ArrowRight className={`w-4 h-4 shrink-0 group-hover:translate-x-1 transition-all ${
                    i === 0 ? "text-white/60" : "text-muted-foreground/40 group-hover:text-primary"
                  }`} />
                </motion.a>
              ))}
            </div>

            <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>
  );
}