rhein-sw-website/components/Services/Section/overview/Development.tsx

'use client';

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

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 TechCard = ({group}: {
    group: { category: string; items: { id: string; label: string }[] };
}) => {
    const colors = useThemeColors();

    return (
        <motion.div
            initial={{opacity: 0, y: 20}}
            animate={{opacity: 1, y: 0}}
            transition={{duration: 0.4}}
            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,
            }}
        >
            <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>
    );
};

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

    return (
        <div
            className="w-[95%] sm:w-[80%] mx-auto grid grid-cols-1 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}}
                >
                    💻 Full-Stack Entwicklung
                </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 entwickeln individuelle Softwarelösungen – von der nativen Mobile-App über moderne Webseiten bis
                    hin zu internen Tools.
                    Unser Fokus liegt auf skalierbaren Architekturen, performanten Frontends und wartbaren Backends.
                    <br/><br/>
                    Egal ob API-Entwicklung, Admin-Dashboard oder komplexe Plattform – wir setzen moderne Technologien
                    gezielt ein, um robuste, zukunftssichere Anwendungen zu realisieren.
                </motion.p>

                <motion.div
                    className="mt-6 text-sm font-medium space-y-3 pl-2"
                    style={{color: colors.secondaryText}}
                    initial={{opacity: 0, y: 10}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.5, delay: 0.3}}
                >
                    <div className="flex items-center gap-2">
                        <span className="text-xs">🚀</span>
                        <p>Native Mobile-Apps mit Flutter</p>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-xs">🌐</span>
                        <p>Webseiten & Web-Portale mit Next.js</p>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-xs">🧩</span>
                        <p>Skalierbare Backends mit Spring Boot</p>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-xs">📊</span>
                        <p>Individuelle Dashboards & Admin-Panels</p>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-xs">🔌</span>
                        <p>API-Entwicklung (REST & GraphQL)</p>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-xs">⚙️</span>
                        <p>Automatisierte interne Tools</p>
                    </div>
                    <div className="flex items-center gap-2">
                        <span className="text-xs">📦</span>
                        <p>CI/CD & Container mit GitLab CI & Docker</p>
                    </div>
                </motion.div>

                <motion.h3
                    className="mt-10 text-lg font-semibold"
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    transition={{duration: 0.4, delay: 0.2}}
                >
                    🔧 Unser Tech Stack im Überblick
                </motion.h3>

                <motion.p
                    className="text-sm font-medium mb-4"
                    style={{color: colors.secondaryText}}
                    initial={{opacity: 0, y: 10}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 0.5, delay: 0.2}}
                >
                    Mit diesem Stack entwickeln wir robuste, moderne Softwarelösungen – abgestimmt auf deine
                    Anforderungen.
                </motion.p>

                <motion.div
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    transition={{duration: 0.5, delay: 0.1}}
                >
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        {techStack.row1.map((group) => (
                            <TechCard key={group.category} group={group}/>
                        ))}
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        {techStack.row2.map((group) => (
                            <TechCard key={group.category} group={group}/>
                        ))}
                    </div>
                </motion.div>
            </div>
        </div>
    );
};

export default Development;