import React, { useState, useEffect, useRef } from 'react';
import { motion, useInView, useAnimation } from 'framer-motion';
import { Github, Linkedin, Mail, ArrowDown } from 'lucide-react';

// HINWEIS: Für dieses Beispiel werden 'lucide-react' und 'framer-motion' als Abhängigkeiten angenommen.
// Sie müssten diese mit `npm install lucide-react framer-motion` installieren.

// Hilfskomponente für Text mit Farbverlauf
const GradientText = ({ children, className }) => {
  return (
    <span className={`bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent ${className}`}>
      {children}
    </span>
  );
};

// Hilfskomponente für Abschnitte mit "In-View"-Animation
const AnimatedSection = ({ children }) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.2 });
  const controls = useAnimation();

  useEffect(() => {
    if (isInView) {
      controls.start("visible");
    }
  }, [isInView, controls]);

  return (
    <motion.section
      ref={ref}
      variants={{
        hidden: { opacity: 0, y: 75 },
        visible: { opacity: 1, y: 0 },
      }}
      initial="hidden"
      animate={controls}
      transition={{ duration: 0.6, delay: 0.1 }}
      className="w-full max-w-5xl mx-auto px-6 py-20 md:py-28"
    >
      {children}
    </motion.section>
  );
};


// Profilkarten-Komponente
const ProfileCard = () => {
  const socialLinks = [
    { icon: <Linkedin size={24} />, href: "#", label: "LinkedIn" },
    { icon: <Github size={24} />, href: "#", label: "GitHub" },
    { icon: <Mail size={24} />, href: "#", label: "Email" },
  ];

  return (
    <div className="bg-gray-900/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-8 md:p-12 shadow-2xl shadow-blue-500/10">
      <div className="flex flex-col md:flex-row items-center gap-8">
        <motion.div
          whileHover={{ scale: 1.05 }}
          transition={{ type: "spring", stiffness: 300 }}
        >
          <img
            src="https://placehold.co/150x150/1a202c/ffffff?text=DE"
            alt="Profilbild"
            className="rounded-full w-32 h-32 md:w-40 md:h-40 border-4 border-gray-700 object-cover"
          />
        </motion.div>
        <div className="text-center md:text-left">
          <h2 className="text-4xl font-bold text-white">Dein Name</h2>
          <p className="text-xl text-blue-400 mt-1">Senior Security Engineer</p>
          <p className="text-gray-300 mt-4 max-w-lg">
            Spezialisiert auf Cloud-Sicherheit, Penetrationstests und die Entwicklung robuster Sicherheitsarchitekturen. Meine Mission ist es, digitale Festungen in einer Welt voller Bedrohungen zu errichten.
          </p>
          <div className="flex justify-center md:justify-start space-x-4 mt-6">
            {socialLinks.map((link, index) => (
              <motion.a
                key={index}
                href={link.href}
                aria-label={link.label}
                whileHover={{ y: -4, scale: 1.1 }}
                className="text-gray-400 hover:text-blue-400 transition-colors duration-300"
              >
                {link.icon}
              </motion.a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// Fähigkeits-Karten Komponente
const SkillCard = ({ title, description, icon }) => (
  <motion.div
    className="bg-gray-900 border border-gray-800 rounded-xl p-6 h-full"
    whileHover={{ y: -5, boxShadow: "0px 10px 20px rgba(79, 70, 229, 0.2)" }}
    transition={{ duration: 0.3 }}
  >
    <div className="text-blue-400 mb-4">{icon}</div>
    <h3 className="text-xl font-bold text-white mb-2">{title}</h3>
    <p className="text-gray-400">{description}</p>
  </motion.div>
);

export default function App() {
  const skills = [
    { title: "Cloud Security (AWS, Azure)", description: "Absicherung von Cloud-Infrastrukturen und Implementierung von Best Practices.", icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg> },
    { title: "Penetration Testing", description: "Identifizierung von Schwachstellen in Netzwerken, Systemen und Anwendungen.", icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 12V8H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v4"/><path d="m18.5 14.5-4 4-4-4"/><path d="M12 12v9"/><path d="M4 6v4a2 2 0 0 0 2 2h2"/></svg> },
    { title: "Incident Response", description: "Effektive Reaktion auf Sicherheitsvorfälle zur Minimierung von Schäden.", icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg> },
    { title: "DevSecOps", description: "Integration von Sicherheitspraktiken in den gesamten DevOps-Lebenszyklus.", icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-4.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.44.25a2 2 0 0 1-2 1.73V20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.29a2 2 0 0 1-2-1.73l-.44-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2h-4.44"/><path d="M7 18a5 5 0 1 0 10 0"/></svg> },
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    },
  };

  return (
    <div className="bg-black text-gray-200 font-sans leading-relaxed min-h-screen antialiased">
      {/* Hero Section */}
      <div className="relative h-screen flex flex-col items-center justify-center text-center px-4">
         <div className="absolute inset-0 bg-grid-gray-900/40 [mask-image:linear-gradient(to_bottom,white_5%,transparent_100%)]"></div>
         <div className="absolute inset-0 bg-gradient-to-b from-black via-black/80 to-transparent"></div>
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          className="z-10"
        >
          <motion.p variants={itemVariants} className="text-lg md:text-xl text-gray-400 mb-4">
            "Es gibt nur zwei Arten von Unternehmen: Die, die gehackt wurden, und die, die es noch nicht wissen."
          </motion.p>
          <motion.h1 variants={itemVariants} className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white tracking-tighter">
            Sicherheit durch <br />
            <GradientText>Zero Trust</GradientText>
          </motion.h1>
        </motion.div>
        <motion.div
          className="absolute bottom-10"
          animate={{ y: [0, 10, 0] }}
          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
        >
          <ArrowDown className="text-gray-500" size={24} />
        </motion.div>
      </div>

      {/* About Me Section */}
      <AnimatedSection>
        <ProfileCard />
      </AnimatedSection>

      {/* Skills Section */}
      <AnimatedSection>
        <h2 className="text-4xl font-bold text-center text-white mb-12">Meine Expertise</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {skills.map((skill, index) => (
            <SkillCard key={index} title={skill.title} description={skill.description} icon={skill.icon} />
          ))}
        </div>
      </AnimatedSection>

      {/* Contact Section */}
      <AnimatedSection>
        <div className="text-center">
          <h2 className="text-4xl font-bold text-white mb-4">Kontakt aufnehmen</h2>
          <p className="text-gray-400 max-w-2xl mx-auto mb-8">
            Ich bin immer offen für neue Herausforderungen und spannende Projekte. Schreiben Sie mir eine Nachricht, und lassen Sie uns die digitale Welt gemeinsam sicherer machen.
          </p>
          <motion.a
            href="mailto:deine.email@example.com"
            className="inline-block bg-blue-500 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-blue-600 transition-colors duration-300"
            whileHover={{ scale: 1.05 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
          >
            Nachricht senden
          </motion.a>
        </div>
      </AnimatedSection>

      {/* Footer */}
      <footer className="text-center py-8 px-6 border-t border-gray-900">
        <p className="text-gray-500">&copy; {new Date().getFullYear()} Dein Name. Alle Rechte vorbehalten.</p>
      </footer>
       <style jsx global>{`
        .bg-grid-gray-900\\/40 {
          background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
          background-size: 30px 30px;
        }
      `}</style>
    </div>
  );
}