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

'use client';

import Image from 'next/image';
import {motion} from 'framer-motion';

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 = () => {
    return (
        <section className="w-full py-20 bg-[var(--secondary-bg)] transition-theme">
            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
                <motion.h2
                    className="text-2xl md:text-3xl font-bold mb-1 text-left text-[var(--primary-text)]"
                    initial={{opacity: 0, y: 20}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.5}}
                >
                    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 text-[var(--secondary-text)]"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4, delay: 0.2}}
                >
                    Mit diesen Technologien realisieren wir moderne, leistungsstarke Softwarelösungen.
                </motion.p>

                {/* Row 1 */}
                <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}/>
                    ))}
                </div>

                {/* Row 2 */}
                <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}
                        />
                    ))}
                </div>
            </div>
        </section>
    );
};

const TechCard = ({
                      group,
                      delay,
                  }: {
    group: { category: string; items: { id: string; label: string }[] };
    delay: number;
}) => (
    <motion.div
        className="p-4 rounded-lg border border-[var(--primary-bg)] bg-[var(--primary-bg)] shadow-md transition-theme"
        initial={{opacity: 0, y: 20}}
        whileInView={{opacity: 1, y: 0}}
        whileHover={{
            scale: 1.03,
            boxShadow: '0px 10px 20px rgba(0,0,0,0.1)',
        }}
        viewport={{once: true}}
        transition={{duration: 0.4, delay, ease: 'easeOut'}}
    >
        <h3 className="text-base font-semibold mb-4 text-[var(--primary-text)]">
            {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 text-[var(--secondary-text)]">
            {label}
          </span>
                </div>
            ))}
        </div>
    </motion.div>
);

export default TechStack;