'use client';

import React from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";

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

    return (
        <div
            className="w-[95%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 text-left"
            style={{color: colors.primaryText}}
        >
            <div>
                <motion.h2
                    className="text-xl sm:text-2xl md:text-3xl font-bold mb-4"
                    initial={{opacity: 0, y: 20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.5}}
                >
                    🛠️ Managed Services
                </motion.h2>

                <motion.p
                    className="text-sm font-medium leading-7"
                    style={{color: colors.secondaryText}}
                    initial={{opacity: 0, y: 10}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.5, delay: 0.2}}
                >
                    Wir übernehmen den Betrieb und die Wartung deiner Anwendungen – zuverlässig, sicher und skalierbar.
                    So kannst du dich voll auf dein Geschäft konzentrieren.
                </motion.p>

                <motion.h3
                    className="mt-8 text-lg font-semibold"
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    transition={{duration: 0.4, delay: 0.2}}
                >
                    🧰 Leistungen
                </motion.h3>

                <motion.ul
                    className="list-disc list-inside text-sm mt-4 space-y-1"
                    style={{color: colors.secondaryText}}
                    initial={{opacity: 0, y: 10}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.5, delay: 0.3}}
                >
                    <li>Monitoring & Logging</li>
                    <li>Security Updates & Wartung</li>
                    <li>Cloud Deployment & Hosting</li>
                    <li>24/7 Systemüberwachung</li>
                </motion.ul>
            </div>
        </div>
    );
};

export default ManagedServices;