'use client';

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

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

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

const TeamSection = () => {
    return (
        <section
            className="w-full px-6 sm:px-12 py-24 bg-background text-foreground transition-colors duration-700 ease-in-out">
            <motion.h2
                className="text-2xl sm:text-3xl font-bold text-left"
                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-2 md:grid-cols-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-border shadow-md hover:shadow-lg transition-all p-6 bg-muted"
                        >
                            <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-border my-4"/>

                            <div className="text-lg font-semibold">{member.name}</div>
                            <div className="text-sm mt-1 text-muted-foreground">
                                {member.role}
                            </div>
                        </motion.div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default TeamSection;