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

'use client';

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

const techStack = {
    row1: [
        {
            category: 'Programmiersprachen & Frameworks – Backend',
            items: [
                {id: 'java', label: 'Java'},
                {id: 'dart', label: 'Dart'},
                {id: 'kotlin', label: 'Kotlin'},
                {id: 'spring', label: 'Spring'},
            ],
        },
        {
            category: 'Programmiersprachen & Frameworks – Frontend',
            items: [
                {id: 'html', label: 'HTML'},
                {id: 'css', label: 'CSS'},
                {id: 'bootstrap', label: 'Bootstrap'},
                {id: 'nextjs', label: 'Next.js'},
                {id: 'typescript', label: 'TypeScript'},
                {id: 'flutter', label: 'Flutter'},
            ],
        },
    ],
    row2: [
        {
            category: 'Betriebssysteme',
            items: [
                {id: 'macos', label: 'macOS'},
                {id: 'debian', label: 'Debian'},
                {id: 'ubuntu', label: 'Ubuntu'},
            ],
        },
        {
            category: 'Version Control & Collaboration',
            items: [
                {id: 'gitlab', label: 'GitLab'},
                {id: 'outline', label: 'Outline'},
            ],
        },
        {
            category: 'DevOps & Infrastruktur',
            items: [
                {id: 'gitlab-ci', label: 'GitLab CI'},
                {id: 'docker', label: 'Docker'},
                {id: 'proxmox', label: 'Proxmox'},
            ],
        },
    ],
};

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

    return (
        <section
            className="w-full py-20 transition-colors duration-700 ease-in-out"
            style={{backgroundColor: colors.secondaryBg}}
        >
            <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"
                >
                    Technologien
                </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}}
                />

                <motion.p
                    className="text-sm md:text-base mb-10 transition-colors duration-700 ease-in-out"
                    style={{color: colors.secondaryText}}
                >
                    Mit diesen Technologien realisieren wir moderne, leistungsstarke Softwarelösungen.
                </motion.p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    {techStack.row1.map((group, index) => (
                        <TechCard key={group.category} group={group} delay={index * 0.2} colors={colors}/>
                    ))}
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                    {techStack.row2.map((group, index) => (
                        <TechCard key={group.category} group={group} delay={index * 0.2 + 0.4} colors={colors}/>
                    ))}
                </div>
            </div>
        </section>
    );
};

const TechCard = ({
                      group,
                      delay,
                      colors,
                  }: {
    group: { category: string; items: { id: string; label: string }[] };
    delay: number;
    colors: ReturnType<typeof useThemeColors>;
}) => (
    <motion.div
        className="p-4 rounded-lg border shadow-md transition-colors duration-700 ease-in-out"
        style={{
            backgroundColor: colors.primaryBg,
            borderColor: colors.primaryBg,
            color: colors.primaryText,
        }}
        initial={{opacity: 0, y: 20}}
        whileInView={{opacity: 1, y: 0}}
        whileHover={{scale: 1.03, boxShadow: '0 10px 20px rgba(0,0,0,0.1)'}}
        viewport={{once: true}}
        transition={{duration: 0.4, delay}}
    >
        <h3 className="text-base font-semibold mb-4">{group.category}</h3>
        <div className="grid grid-cols-3 gap-3">
            {group.items.map(({id, label}) => (
                <div key={id} className="flex flex-col items-center text-center">
                    <Image src={`/images/svg/${id}.svg`} alt={label} width={32} height={32} className="object-contain"/>
                    <span className="text-[10px] mt-1 transition-colors duration-700 ease-in-out"
                          style={{color: colors.secondaryText}}>
            {label}
          </span>
                </div>
            ))}
        </div>
    </motion.div>
);

export default TechStack;