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

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

    const trends = [
        {
            id: 1,
            title: 'Natural Language Processing',
            description: t('aiTrends.trends.nlp.description'),
            icon: '🤖',
            stats: {
                growth: '+127%',
                adoption: '78%',
                impact: 'High'
            }
        },
        {
            id: 2,
            title: 'Computer Vision',
            description: t('aiTrends.trends.vision.description'),
            icon: '👁️',
            stats: {
                growth: '+85%',
                adoption: '64%',
                impact: 'High'
            }
        },
        {
            id: 3,
            title: 'Generative AI',
            description: t('aiTrends.trends.generative.description'),
            icon: '🎨',
            stats: {
                growth: '+245%',
                adoption: '52%',
                impact: 'Very High'
            }
        }
    ];

    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('aiTrends.title')}
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape square w-full h-full bg-black rotate-45"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            {t('aiTrends.description')}
                        </p>
                    </div>
                </div>

                {/* Main content */}
                <div className="grid-layout gap-8">
                    {/* Trends Overview */}
                    <div className="col-span-12">
                        <div className="brutalist-card p-8">
                            <h2 className="text-2xl font-black uppercase mb-8">{t('aiTrends.overview.title')}</h2>
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                                {trends.map((trend) => (
                                    <div key={trend.id} className="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
                                        <div className="absolute -right-2 -top-2 w-8 h-8 bg-black text-white flex items-center justify-center">
                                            <span className="text-xl">{trend.icon}</span>
                                        </div>
                                        <h3 className="text-xl font-bold mb-4">{trend.title}</h3>
                                        <p className="monospace mb-6">{trend.description}</p>
                                        <div className="section-divider"></div>
                                        <div className="grid grid-cols-3 gap-4 mt-4">
                                            <div>
                                                <span className="monospace text-sm block">Growth</span>
                                                <span className="font-bold">{trend.stats.growth}</span>
                                            </div>
                                            <div>
                                                <span className="monospace text-sm block">Adoption</span>
                                                <span className="font-bold">{trend.stats.adoption}</span>
                                            </div>
                                            <div>
                                                <span className="monospace text-sm block">Impact</span>
                                                <span className="font-bold">{trend.stats.impact}</span>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Interactive Demo Section */}
                    <div className="col-span-12 md:col-span-8">
                        <div className="brutalist-card p-0 overflow-hidden">
                            <div className="relative aspect-video">
                                <video
                                    className="w-full h-full object-cover grayscale contrast-125 brightness-125"
                                    autoPlay
                                    loop
                                    muted
                                    playsInline
                                >
                                    <source src="/ai-demo.mp4" type="video/mp4" />
                                </video>
                                <div className="video-overlay"></div>
                                <div className="absolute inset-0 diagonal-lines"></div>
                            </div>
                            <div className="p-6">
                                <h3 className="text-xl font-bold mb-4">{t('aiTrends.demo.title')}</h3>
                                <p className="monospace mb-4">{t('aiTrends.demo.description')}</p>
                                <Link to="/register" className="brutalist-button inline-block">
                                    {t('aiTrends.demo.cta')} →
                                </Link>
                            </div>
                        </div>
                    </div>

                    {/* Stats Section */}
                    <div className="col-span-12 md:col-span-4">
                        <div className="brutalist-card p-6">
                            <h3 className="text-xl font-bold mb-6">{t('aiTrends.stats.title')}</h3>
                            <div className="space-y-6">
                                <div>
                                    <div className="flex justify-between mb-2">
                                        <span className="monospace">Market Growth</span>
                                        <span className="font-bold">+156%</span>
                                    </div>
                                    <div className="w-full h-2 bg-gray-200">
                                        <div className="h-full bg-black" style={{ width: '75%' }}></div>
                                    </div>
                                </div>
                                <div>
                                    <div className="flex justify-between mb-2">
                                        <span className="monospace">AI Adoption</span>
                                        <span className="font-bold">68%</span>
                                    </div>
                                    <div className="w-full h-2 bg-gray-200">
                                        <div className="h-full bg-black" style={{ width: '68%' }}></div>
                                    </div>
                                </div>
                                <div>
                                    <div className="flex justify-between mb-2">
                                        <span className="monospace">ROI Impact</span>
                                        <span className="font-bold">+234%</span>
                                    </div>
                                    <div className="w-full h-2 bg-gray-200">
                                        <div className="h-full bg-black" style={{ width: '85%' }}></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default AiTrends; 