import { Link } from 'react-router-dom';
import { useLanguage } from '../context/LanguageContext';
import Footer from '../components/Footer';

function About() {
    const { t } = useLanguage();

    const teamMembers = [
        {
            name: 'Sarah Chen',
            role: t('about.roles.ceo'),
            image: '/team/sarah.jpg', // Add actual image paths
            description: t('about.team.sarah')
        },
        {
            name: 'Marcus Rodriguez',
            role: t('about.roles.cto'),
            image: '/team/marcus.jpg',
            description: t('about.team.marcus')
        },
        {
            name: 'Emma Laurent',
            role: t('about.roles.design'),
            image: '/team/emma.jpg',
            description: t('about.team.emma')
        }
    ];

    const milestones = [
        {
            year: '2021',
            title: t('about.milestones.founding'),
            description: t('about.milestones.founding_desc')
        },
        {
            year: '2022',
            title: t('about.milestones.launch'),
            description: t('about.milestones.launch_desc')
        },
        {
            year: '2023',
            title: t('about.milestones.growth'),
            description: t('about.milestones.growth_desc')
        }
    ];

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Header section */}
                <div className="text-center mb-16">
                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
                        {t('about.title')}
                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                    </h1>
                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
                        {t('about.description')}
                    </p>
                </div>

                {/* Mission Section */}
                <div className="bg-white rounded-2xl shadow-lg p-8 mb-16">
                    <h2 className="text-2xl font-medium text-gray-900 mb-6">{t('about.mission.title')}</h2>
                    <p className="text-lg text-gray-600">
                        {t('about.mission.description')}
                    </p>
                </div>

                {/* Timeline Section */}
                <div className="mb-16">
                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('about.timeline')}</h2>
                    <div className="space-y-8">
                        {milestones.map((milestone) => (
                            <div key={milestone.year} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-shadow">
                                <div className="absolute -left-3 top-1/2 -translate-y-1/2 w-6 h-6 bg-brand-purple rounded-full flex items-center justify-center text-white text-sm">
                                    <span className="font-medium">{milestone.year}</span>
                                </div>
                                <div className="ml-6">
                                    <h3 className="text-xl font-medium text-gray-900 mb-2">{milestone.title}</h3>
                                    <p className="text-gray-600">{milestone.description}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Team Section */}
                <div className="mb-16">
                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('about.team.title')}</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {teamMembers.map((member) => (
                            <div key={member.name} className="bg-white rounded-2xl shadow-lg p-6 group hover:shadow-xl transition-shadow">
                                <div className="w-full aspect-square mb-4 overflow-hidden rounded-xl bg-gray-100 relative">
                                    <div className="absolute inset-0 bg-gradient-to-br from-brand-purple/5 to-brand-pink/5"></div>
                                    <div className="w-full h-full flex items-center justify-center">
                                        <span className="text-4xl">👤</span>
                                    </div>
                                </div>
                                <h3 className="text-xl font-medium text-gray-900 mb-1">{member.name}</h3>
                                <p className="text-sm text-brand-purple mb-3">{member.role}</p>
                                <p className="text-gray-600">{member.description}</p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Contact Section */}
                <div className="bg-white rounded-2xl shadow-lg p-8 mb-16 text-center">
                    <h2 className="text-2xl font-medium text-gray-900 mb-6">{t('about.contact.title')}</h2>
                    <p className="text-lg text-gray-600 mb-8">
                        {t('about.contact.description')}
                    </p>
                    <Link 
                        to="/contact" 
                        className="inline-flex items-center gap-2 bg-black text-white rounded-full px-6 py-3 text-sm group hover:bg-brand-purple transition-colors duration-300"
                    >
                        <span>{t('about.contact.cta')}</span>
                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                    </Link>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default About;
