'use client';

import Image from 'next/image';
import {motion} from 'framer-motion';
import {techStack} from "@/constant/TechStack";

const TechStack = () => {
    return (
        <section className="w-full py-20 bg-background text-foreground transition-colors duration-700 ease-in-out">
            <div className="w-full max-w-6xl px-6 md:px-10 mx-auto">
                <motion.h2
                    className="text-3xl md:text-4xl font-bold mb-1 text-left"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4}}
                >
                    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-muted-foreground"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.3, delay: 0.2}}
                >
                    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}/>
                    ))}
                </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}/>
                    ))}
                </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 bg-muted shadow-md text-foreground"
        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 text-muted-foreground">{label}</span>
                </div>
            ))}
        </div>
    </motion.div>
);

export default TechStack;