import React from "react";
import Image from "next/image";
import {TiChevronRightOutline} from "react-icons/ti";

const ManagedServices = () => {
    return (
        <div
            className="w-[95%] sm:w-[80%] mx-auto items-center grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
            data-aos="fade-up"
            data-aos-delay="200"
        >
            {/* Image Section */}
            <div
                data-aos="fade-up"
                data-aos-anchor-placement="top-center"
                className="justify-self-center"
            >
                <Image
                    src="/images/software_dev.jpg"
                    alt="image"
                    width={200}
                    height={200}
                    className="object-contain"
                />
            </div>
            {/* Text Content */}
            <div className="p-0">
                <h1
                    className="mt-4 text-xl sm:text-2xl md:text-3xl font-bold transition-theme"
                    style={{color: "var(--primary-text)"}}>
                    ☁️ Managed Services
                </h1>
                <p
                    className="mt-4 text-sm font-medium leading-[2rem] transition-theme"
                    style={{color: "var(--secondary-text)"}}>
                    Wir übernehmen das Hosting und Management deiner Server, damit du dich auf dein
                    Business konzentrieren kannst. Egal ob Cloud-Hosting, dedizierte Server oder hybride Lösungen – wir
                    sorgen für eine sichere, performante und skalierbare Infrastruktur.
                </p>
                <ul className="mt-7 space-y-2">
                    {[
                        "Web- & Cloud-Hosting",
                        "Mailserver-Management",
                        "Webserver-Administration",
                    ].map((item, index) => (
                        <li key={index} className="flex items-center font-semibold transition-theme">
                            <TiChevronRightOutline className="text-blue-500 mr-2"/>
                            <span style={{color: "var(--primary-text)"}}>{item}</span>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
};

export default ManagedServices;