interface CompanyOverviewProps {
    data: {
        title: string;
        description: string;
        mission: {
            title: string;
            content: string;
        };
        vision: {
            title: string;
            content: string;
        };
        values: {
            title: string;
            items: Array<{
                name: string;
                description: string;
            }>;
        };
    };
}

export default function CompanyOverview({ data }: CompanyOverviewProps) {
    const getValueIcon = (index: number) => {
        const icons = ['💡', '🎯', '🤝', '🌟'];
        return icons[index] || '⭐';
    };

    return (
        <section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="778f74o">
            <div className="max-w-6xl mx-auto" data-oid="q-ohudw">
                <div className="text-center mb-16" data-oid="c1:a026">
                    <h2
                        className="text-3xl md:text-4xl font-light mb-6 text-gray-900"
                        data-oid="2qfsl5_"
                    >
                        {data.title}
                    </h2>
                    <p
                        className="text-lg text-gray-600 font-light leading-relaxed max-w-4xl mx-auto"
                        data-oid="m88jlxe"
                    >
                        {data.description}
                    </p>
                </div>

                {/* Mission & Vision */}
                <div className="grid md:grid-cols-2 gap-12 mb-20" data-oid="t.3l_2w">
                    <div
                        className="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"
                        data-oid="909qo8m"
                    >
                        <div className="text-center" data-oid="47d0qdo">
                            <div
                                className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6"
                                data-oid="hynyq5c"
                            >
                                <span className="text-2xl" data-oid="g9fipps">
                                    🎯
                                </span>
                            </div>
                            <h3
                                className="text-xl font-light mb-4 text-gray-900"
                                data-oid=".ocipcn"
                            >
                                {data.mission.title}
                            </h3>
                            <p
                                className="text-gray-600 font-light leading-relaxed"
                                data-oid="nkfsl1s"
                            >
                                {data.mission.content}
                            </p>
                        </div>
                    </div>
                    <div
                        className="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow"
                        data-oid="3fftkw6"
                    >
                        <div className="text-center" data-oid="4oqt-b9">
                            <div
                                className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"
                                data-oid="zazpp6s"
                            >
                                <span className="text-2xl" data-oid="2uu_92e">
                                    🚀
                                </span>
                            </div>
                            <h3
                                className="text-xl font-light mb-4 text-gray-900"
                                data-oid=":kmcck4"
                            >
                                {data.vision.title}
                            </h3>
                            <p
                                className="text-gray-600 font-light leading-relaxed"
                                data-oid="hyh_bth"
                            >
                                {data.vision.content}
                            </p>
                        </div>
                    </div>
                </div>

                {/* Core Values */}
                <div className="text-center" data-oid="fpfopj4">
                    <h3
                        className="text-2xl md:text-3xl font-light mb-12 text-gray-900"
                        data-oid="sdrp81y"
                    >
                        {data.values.title}
                    </h3>
                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8" data-oid="7a:fm47">
                        {data.values.items.map((value, index) => (
                            <div
                                key={index}
                                className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"
                                data-oid="c.t9z6:"
                            >
                                <div
                                    className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"
                                    data-oid="kxf2tqa"
                                >
                                    <span className="text-2xl" data-oid="c.4uoyu">
                                        {getValueIcon(index)}
                                    </span>
                                </div>
                                <h4
                                    className="text-lg font-light mb-3 text-gray-900"
                                    data-oid="ij-6led"
                                >
                                    {value.name}
                                </h4>
                                <p
                                    className="text-gray-600 font-light text-sm leading-relaxed"
                                    data-oid="qk9i:oi"
                                >
                                    {value.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}