rhein-sw-website/components/Home/Sections/HomeServices.tsx

'use client';

import {FiServer, FiTool, FiMonitor, FiZap, FiArrowRight} from 'react-icons/fi';
import {motion} from 'framer-motion';
import {useThemeColors} from '@/utils/useThemeColors';

const services = [
    {
        title: 'Beratung',
        icon: <FiMonitor size={24}/>,
        description:
            'Strategische und technische Beratung rund um digitale Produkte und Prozesse. Wir analysieren bestehende Systeme, identifizieren Potenziale und helfen dir, die passende Architektur für dein Projekt zu finden.',
    },
    {
        title: 'Entwicklung',
        icon: <FiZap size={24}/>,
        description:
            'Individuelle Softwareentwicklung – skalierbar, wartbar, zukunftssicher. Ob Web-App, API oder internes Tool: Wir setzen moderne Technologien ein, um genau die Lösung zu bauen, die du brauchst.',
    },
    {
        title: 'Managed Services',
        icon: <FiServer size={24}/>,
        description:
            'Wir betreuen Infrastruktur, Server und Systeme – verlässlich und performant. Unser Team kümmert sich um Hosting, Monitoring, Backups und sorgt für einen reibungslosen Betrieb deiner Plattform.',
    },
    {
        title: 'Fehlerbehebung',
        icon: <FiTool size={24}/>,
        description:
            'Schnelle Hilfe bei Bugs, Performance-Problemen oder Sicherheitslücken. Wir analysieren Probleme, beheben sie gezielt und sorgen dafür, dass dein System wieder stabil läuft – langfristig und zuverlässig.',
    },
];

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

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

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

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {services.map((service, index) => (
                        <motion.div
                            key={service.title}
                            className="p-6 rounded-xl border shadow-md transition-colors duration-700 ease-in-out"
                            style={{
                                backgroundColor: colors.secondaryBg,
                                borderColor: colors.secondaryBg,
                                color: colors.primaryText,
                            }}
                            whileHover={{
                                scale: 1.03,
                                boxShadow: '0px 10px 20px rgba(0,0,0,0.1)',
                            }}
                            initial={{opacity: 0, y: 30}}
                            whileInView={{opacity: 1, y: 0}}
                            viewport={{once: true}}
                            transition={{duration: 0.4, delay: index * 0.1}}
                        >
                            <div className="mb-3 text-blue-600">{service.icon}</div>
                            <h3 className="text-xl font-semibold mb-2">{service.title}</h3>
                            <p className="text-sm leading-relaxed transition-colors duration-700 ease-in-out"
                               style={{color: colors.secondaryText}}>
                                {service.description}
                            </p>
                        </motion.div>
                    ))}
                </div>

                <motion.div
                    className="mt-10 flex justify-end"
                    initial={{opacity: 0}}
                    whileInView={{opacity: 1}}
                    viewport={{once: true}}
                    transition={{duration: 0.4, delay: 0.3}}
                >
                    <a
                        href="/services"
                        className="text-sm font-semibold text-blue-600 hover:underline flex items-center gap-1"
                    >
                        Weitere Leistungen <FiArrowRight size={16}/>
                    </a>
                </motion.div>
            </div>
        </section>
    );
};

export default HomeServices;