interface TeamSectionProps {
    data: {
        title: string;
        description: string;
        stats: Array<{
            number: string;
            label: string;
        }>;
        departments: Array<{
            name: string;
            description: string;
            icon: string;
        }>;
    };
}

export default function TeamSection({ data }: TeamSectionProps) {
    return (
        <section className="py-20 px-4 sm:px-6 lg:px-8">
            <div className="max-w-6xl mx-auto">
                <div className="text-center mb-16">
                    <h2 className="text-3xl md:text-4xl font-light mb-4 text-gray-900">
                        {data.title}
                    </h2>
                    <p className="text-xl text-gray-600 font-light max-w-3xl mx-auto">
                        {data.description}
                    </p>
                </div>

                {/* Team Stats */}
                <div className="bg-white rounded-lg shadow-sm p-8 mb-16">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
                        {data.stats.map((stat, index) => (
                            <div key={index} className="text-center">
                                <div className="text-4xl md:text-5xl font-light text-blue-600 mb-2">
                                    {stat.number}
                                </div>
                                <div className="text-gray-600 font-light">{stat.label}</div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Departments */}
                <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {data.departments.map((department, index) => (
                        <div
                            key={index}
                            className="text-center p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1"
                        >
                            <div className="text-5xl mb-4">{department.icon}</div>
                            <h3 className="text-lg font-light mb-3 text-gray-900">
                                {department.name}
                            </h3>
                            <p className="text-gray-600 font-light text-sm leading-relaxed">
                                {department.description}
                            </p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}