'use client';

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

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

    return (
        <div
            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16"
            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}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.5}}
                >
                    🐞 Fehlerbehebung & Optimierung
                </motion.h2>
                <motion.p
                    className="text-sm font-medium leading-7"
                    style={{color: colors.secondaryText}}
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.5, delay: 0.2}}
                >
                    Wir analysieren und beheben Fehler in bestehenden Systemen, optimieren die Performance und sorgen
                    dafür, dass deine Software stabil und zuverlässig läuft.
                </motion.p>

                <motion.h3
                    className="mt-8 text-lg font-semibold"
                    initial={{opacity: 0}}
                    whileInView={{opacity: 1}}
                    transition={{duration: 0.4, delay: 0.2}}
                >
                    🔎 Fokusbereiche
                </motion.h3>
                <ul className="list-disc list-inside text-sm mt-4 space-y-1" style={{color: colors.secondaryText}}>
                    <li>Debugging & Troubleshooting</li>
                    <li>Performance-Analyse</li>
                    <li>Refactoring von Legacy-Code</li>
                    <li>Stabilitäts- und Sicherheitsupdates</li>
                </ul>
            </div>
            <div className="justify-self-center">
                <motion.div
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    transition={{duration: 0.5, delay: 0.3}}
                >
                    <Image
                        src="/images/bug_fixing.jpg"
                        alt="Bug fixing illustration"
                        width={300}
                        height={300}
                        className="object-contain"
                    />
                </motion.div>
            </div>
        </div>
    );
};

export default BugFixing;