portfolio-selfmade/apps/web/src/features/contact/components/ContactSection.tsx

import React from 'react';
import { motion } from 'framer-motion';
import { Mail, MapPin } from 'lucide-react';
import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
import Button from '../../../shared/components/Button';
import AnimatedSection from '../../../shared/components/AnimatedSection';

export const ContactSection: React.FC = () => {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2,
        delayChildren: 0.3,
      },
    },
  };

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

  return (
    <AnimatedSection id="contact" className="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto">
        {/* Section Header */}
        <div className="text-center mb-16">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="inline-block px-4 py-2 rounded-full border border-green-500/50 bg-green-500/10 mb-6"
          >
            <span className="text-green-400 text-sm font-medium">Kontakt aufnehmen</span>
          </motion.div>

          <h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">
            Lass uns zusammenarbeiten
          </h2>
          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
            Hast du ein Projekt? Lass uns besprechen, wie wir deine Idee umsetzen.
          </p>
        </div>

        {/* Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Contact Form */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            className="space-y-6"
          >
            <motion.div variants={itemVariants}>
              <label className="block text-white font-medium mb-3">Name</label>
              <input
                type="text"
                placeholder="Dein Name"
                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
              />
            </motion.div>

            <motion.div variants={itemVariants}>
              <label className="block text-white font-medium mb-3">E-Mail</label>
              <input
                type="email"
                placeholder="deine.email@example.com"
                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
              />
            </motion.div>

            <motion.div variants={itemVariants}>
              <label className="block text-white font-medium mb-3">Nachricht</label>
              <textarea
                placeholder="Erzähle mir von deinem Projekt"
                rows={5}
                className="w-full px-4 py-3 rounded-lg bg-gray-900 border border-green-500/30 text-white placeholder-gray-500 focus:border-green-500 focus:outline-none resize-none"
              />
            </motion.div>

            <motion.div variants={itemVariants}>
              <Button variant="primary" size="lg" className="w-full">
                Nachricht senden
              </Button>
            </motion.div>
          </motion.div>

          {/* Contact Info */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            className="space-y-6"
          >
            <motion.div variants={itemVariants}>
              <h3 className="text-2xl font-bold text-white mb-4">Kontakt</h3>
              <p className="text-gray-400">
                Ich freue mich auf neue Projekte, kreative Ideen und spannende Kooperationen.
                Schreibe mir gerne eine Nachricht!
              </p>
            </motion.div>

            {/* Contact Items */}
            <motion.div variants={itemVariants}>
              <div className="space-y-4">
                <div className="flex items-center gap-4 p-4 rounded-lg border border-green-500/30 bg-green-500/5">
                  <div className="p-3 rounded-lg bg-green-500/20">
                    <Mail className="text-green-500" size={24} />
                  </div>
                  <div>
                    <p className="text-gray-400 text-sm">E-Mail</p>
                    <p className="text-white font-medium">robert@bretz.dev</p>
                  </div>
                </div>

                <div className="flex items-center gap-4 p-4 rounded-lg border border-green-500/30 bg-green-500/5">
                  <div className="p-3 rounded-lg bg-green-500/20">
                    <MapPin className="text-green-500" size={24} />
                  </div>
                  <div>
                    <p className="text-gray-400 text-sm">Standort</p>
                    <p className="text-white font-medium">Deutschland</p>
                  </div>
                </div>
              </div>
            </motion.div>

            {/* Social Links */}
            <motion.div variants={itemVariants}>
              <p className="text-white font-medium mb-4">Folge mir</p>
              <div className="flex gap-4">
                <motion.a
                  href="#"
                  whileHover={{ scale: 1.1, backgroundColor: 'rgba(34,197,94,0.2)' }}
                  whileTap={{ scale: 0.95 }}
                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 text-green-500"
                >
                  <FaGithub size={24} />
                </motion.a>
                <motion.a
                  href="#"
                  whileHover={{ scale: 1.1, backgroundColor: 'rgba(34,197,94,0.2)' }}
                  whileTap={{ scale: 0.95 }}
                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 text-green-500"
                >
                  <FaLinkedin size={24} />
                </motion.a>
                <motion.a
                  href="#"
                  whileHover={{ scale: 1.1, backgroundColor: 'rgba(34,197,94,0.2)' }}
                  whileTap={{ scale: 0.95 }}
                  className="p-3 rounded-lg border border-green-500/30 bg-green-500/5 text-green-500"
                >
                  <FaTwitter size={24} />
                </motion.a>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </AnimatedSection>
  );
};