'use client';

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

const team = [
    {
        name: "Thatsaphorn",
        role: "Gründer & Entwickler",
        picture: "",
    },
    {
        name: "Anonym",
        role: "Vertrieb",
        picture: "",
    },
];

const fallbackImage = "/images/team/default-avatar.jpg";

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

    return (
        <section className="w-full px-6 sm:px-12 py-16 max-w-6xl mx-auto">
            <motion.h2
                className="text-2xl sm:text-3xl font-bold text-left"
                style={{color: colors.primaryText}}
                initial={{opacity: 0, y: 20}}
                whileInView={{opacity: 1, y: 0}}
                viewport={{once: true}}
                transition={{duration: 0.5}}
            >
                Das Team
            </motion.h2>
            <motion.div
                className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
                initial={{opacity: 0, x: -20}}
                whileInView={{opacity: 1, x: 0}}
                viewport={{once: true}}
                transition={{duration: 0.4, delay: 0.1}}
            />

            <div className="flex justify-center">
                <div
                    className={`grid gap-8 
                      grid-cols-1 
                      sm:grid-cols-${Math.min(team.length, 2)} 
                      md:grid-cols-${Math.min(team.length, 3)} 
                      lg:grid-cols-${Math.min(team.length, 4)}`}
                >
                    {team.map((member, idx) => (
                        <motion.div
                            key={member.name}
                            initial={{opacity: 0, y: 20}}
                            whileInView={{opacity: 1, y: 0}}
                            viewport={{once: true}}
                            transition={{duration: 0.4, delay: idx * 0.1}}
                            whileHover={{scale: 1.015}}
                            className="flex flex-col items-center text-center
    rounded-xl border border-gray-200 dark:border-gray-700
    shadow-md hover:shadow-lg transition-all p-6"
                            style={{backgroundColor: colors.secondaryBg}}
                        >
                            <motion.div
                                whileHover={{scale: 1.05}}
                                transition={{type: "spring", stiffness: 300, damping: 20}}
                                className="w-28 h-28 relative mb-4"
                            >
                                <Image
                                    src={member.picture || fallbackImage}
                                    alt={member.name}
                                    fill
                                    sizes="112px"
                                    className="rounded-full object-cover shadow"
                                />
                            </motion.div>

                            <div className="h-px w-8 bg-gray-300 dark:bg-gray-600 my-4"/>

                            <div className="text-lg font-semibold" style={{color: colors.primaryText}}>
                                {member.name}
                            </div>
                            <div className="text-sm mt-1" style={{color: colors.secondaryText}}>
                                {member.role}
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default TeamSection;