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

const badges = [
  "30+ Jahre IT-Erfahrung",
  "ITIL & BSI-Grundschutz",
  "Vibe-Coding mit KI",
  "On-Premise & DSGVO",
];

export function Hero() {
  return (
    <div className="min-h-[92vh] flex flex-col justify-center items-center text-center relative pt-20">
      <div className="absolute inset-0 hero-gradient pointer-events-none" />
      <div className="absolute inset-0 dot-pattern opacity-40 pointer-events-none" />

      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease: "easeOut" }}
        className="relative z-10 max-w-4xl mx-auto px-4"
      >
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-accent text-accent-foreground text-sm font-medium mb-8 border border-primary/20"
          data-testid="badge-availability"
        >
          <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
          Verfügbar für neue Projekte
        </motion.div>

        <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-foreground mb-6 leading-tight" data-testid="text-hero-name">
          Joachim{" "}
          <span className="text-primary">Hummel</span>
        </h1>

        <p className="text-base md:text-lg font-medium text-muted-foreground mb-4 tracking-wide leading-relaxed" data-testid="text-hero-title">
          Senior IT-Consultant &middot; Service Manager &middot; Technical Writer
          <br className="hidden sm:block" />
          KI-Automation Experte &middot; IT-Systems Engineer &middot; Vibe-Coder
        </p>

        <p className="text-base md:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed mb-10" data-testid="text-hero-description">
          Über 30 Jahre IT-Betrieb in Behörden und Konzernen. Heute verbinde ich klassische
          Infrastruktur-Expertise mit KI-gestützter Softwareentwicklung — von der Idee bis zum
          produktiven System.
        </p>

        <div className="flex flex-wrap justify-center gap-3 mb-12">
          {badges.map((badge) => (
            <span
              key={badge}
              className="px-3 py-1 text-sm font-medium bg-secondary text-secondary-foreground rounded-full border border-border"
              data-testid={`badge-skill-${badge.replace(/\s/g, '-').toLowerCase()}`}
            >
              {badge}
            </span>
          ))}
        </div>

        <div className="flex flex-wrap justify-center gap-4">
          <a
            href="#contact"
            className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-semibold rounded-xl hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 hover:shadow-primary/30"
            data-testid="button-hero-contact"
          >
            Kontakt aufnehmen
            <ArrowRight className="w-4 h-4" />
          </a>
          <a
            href="#projects"
            className="inline-flex items-center gap-2 px-6 py-3 bg-white text-foreground font-semibold rounded-xl border border-border hover:bg-secondary transition-all"
            data-testid="button-hero-projects"
          >
            Projekte ansehen
          </a>
        </div>
      </motion.div>

      <motion.a
        href="#competencies"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.2, duration: 0.6 }}
        className="absolute bottom-10 text-muted-foreground hover:text-primary transition-colors"
        data-testid="link-scroll-down"
      >
        <ChevronDown className="w-6 h-6 animate-bounce" />
      </motion.a>
    </div>
  );
}