'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { FiArrowRight } from 'react-icons/fi';

const ContactCTA = () => {
    return (
        <section
            className="relative w-full py-24 transition-theme overflow-hidden"
            style={{
                background: 'linear-gradient(135deg, var(--secondary-bg), var(--primary-bg))',
            }}
        >
            <div className="w-full max-w-4xl px-6 md:px-10 mx-auto text-center">
                {/* Headline */}
                <motion.h2
                    className="text-3xl md:text-4xl font-bold text-[var(--primary-text)]"
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5 }}
                >
                    Interesse geweckt?
                </motion.h2>

                {/* Description */}
                <motion.p
                    className="mt-4 text-sm md:text-base text-[var(--secondary-text)] max-w-xl mx-auto"
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: 0.2 }}
                >
                    Lass uns über dein Projekt sprechen. Wir freuen uns darauf, deine Ideen in die Realität umzusetzen.
                </motion.p>

                {/* CTA Button */}
                <motion.div
                    className="mt-8 flex justify-center"
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: 0.3 }}
                >
                    <Link href="/contact">
                        <button className="inline-flex items-center gap-2 px-6 py-3 text-sm md:text-base font-semibold rounded-full bg-blue-700 hover:bg-blue-900 text-white shadow-md transition-all duration-300">
                            Jetzt Kontakt aufnehmen <FiArrowRight size={18} />
                        </button>
                    </Link>
                </motion.div>
            </div>
        </section>
    );
};

export default ContactCTA;