'use client';

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

const About = () => {
    const colors = useThemeColors();

    return (
        <section
            className="relative w-full py-24 transition-colors duration-700 ease-in-out"
            style={{backgroundColor: colors.secondaryBg, color: colors.primaryText}}
        >
            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
                <div className="flex flex-col">
                    {/* Title */}
                    <motion.h2
                        className="text-3xl md:text-4xl font-bold mb-1 text-left transition-colors duration-700 ease-in-out"
                    >
                        Über uns
                    </motion.h2>

                    <motion.div
                        className="w-12 h-[2px] mt-2 mb-6 bg-amber-500"
                        initial={{opacity: 0, x: -20}}
                        whileInView={{opacity: 1, x: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.4, delay: 0.1}}
                    />

                    {/* Text */}
                    <div className="p-0 max-w-4xl">
                        <motion.p
                            className="text-base md:text-lg leading-relaxed transition-colors duration-700 ease-in-out"
                            style={{color: colors.secondaryText}}
                            initial={{opacity: 0, y: 20}}
                            whileInView={{opacity: 1, y: 0}}
                            viewport={{once: true}}
                            transition={{duration: 0.5, delay: 0.2}}
                        >
                            Wir sind Rhein-Software – ein Team, das sich auf individuelle Softwarelösungen und digitale
                            Services spezialisiert hat. Unsere Anwendungen sind technisch solide, skalierbar und
                            durchdacht – gebaut für langfristigen Erfolg.
                        </motion.p>

                        <motion.p
                            className="mt-6 text-base md:text-lg leading-relaxed transition-colors duration-700 ease-in-out"
                            style={{color: colors.secondaryText}}
                            initial={{opacity: 0, y: 20}}
                            whileInView={{opacity: 1, y: 0}}
                            viewport={{once: true}}
                            transition={{duration: 0.5, delay: 0.3}}
                        >
                            Von der ersten Idee bis zum Go-Live begleiten wir Unternehmen und Startups mit einem
                            flexiblen Netzwerk, klarer Kommunikation und einem hohen Anspruch an Qualität.
                            Unsere Lösungen sind intuitiv, effizient – und genau auf deine Anforderungen zugeschnitten.
                        </motion.p>
                    </div>

                    {/* CTA Button */}
                    <motion.div
                        className="mt-10 flex justify-end"
                        initial={{opacity: 0, y: 10}}
                        whileInView={{opacity: 1, y: 0}}
                        viewport={{once: true}}
                        transition={{duration: 0.5, delay: 0.5}}
                    >
                        {/*<Link href="/about">*/}
                        {/*    <button*/}
                        {/*        className="flex items-center gap-2 bg-blue-700 hover:bg-blue-900 text-white font-semibold px-5 py-2 rounded-full shadow-lg transition-all"*/}
                        {/*    >*/}
                        {/*        Mehr über uns <FiArrowRight size={18}/>*/}
                        {/*    </button>*/}
                        {/*</Link>*/}
                    </motion.div>
                </div>
            </div>
        </section>
    );
};

export default About;
