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">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            {t('about.title')}
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape triangle w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            {t('about.description')}
                        </p>
                    </div>
                </div>

                {/* Mission Section */}
                <div className="brutalist-card p-8 mb-16">
                    <h2 className="text-2xl font-black uppercase mb-6">{t('about.mission.title')}</h2>
                    <p className="monospace text-lg">
                        {t('about.mission.description')}
                    </p>
                </div>

                {/* Timeline Section */}
                <div className="mb-16">
                    <h2 className="text-2xl font-black uppercase mb-8">{t('about.timeline')}</h2>
                    <div className="space-y-8">
                        {milestones.map((milestone, index) => (
                            <div key={milestone.year} className="brutalist-card p-6 relative">
                                <div className="absolute -left-4 -top-4 w-12 h-12 bg-black text-white flex items-center justify-center">
                                    <span className="monospace font-bold">{milestone.year}</span>
                                </div>
                                <h3 className="text-xl font-bold mb-2 mt-2">{milestone.title}</h3>
                                <p className="monospace">{milestone.description}</p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Team Section */}
                <div className="mb-16">
                    <h2 className="text-2xl font-black uppercase mb-8">{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="brutalist-card p-6">
                                <div className="w-full aspect-square mb-4 overflow-hidden">
                                    <div className="w-full h-full bg-gray-200">
                                        {/* Add actual images later */}
                                        <div className="w-full h-full flex items-center justify-center">
                                            <span className="text-4xl">👤</span>
                                        </div>
                                    </div>
                                </div>
                                <h3 className="text-xl font-bold mb-1">{member.name}</h3>
                                <p className="monospace text-sm mb-3">{member.role}</p>
                                <p className="monospace">{member.description}</p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Contact Section */}
                <div className="brutalist-card p-8 mb-16">
                    <h2 className="text-2xl font-black uppercase mb-6">{t('about.contact.title')}</h2>
                    <p className="monospace text-lg mb-6">
                        {t('about.contact.description')}
                    </p>
                    <Link to="/contact" className="brutalist-button inline-block">
                        {t('about.contact.cta')} →
                    </Link>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default About; 