import { useLanguage } from '../context/LanguageContext';
import Footer from '../components/Footer';

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

    const metrics = [
        {
            id: 1,
            title: 'Engagement Analytics',
            description: t('analytics.metrics.engagement.description'),
            icon: '📊',
            stats: {
                metrics: '15+',
                update: 'Real-time',
                export: 'CSV/PDF'
            }
        },
        {
            id: 2,
            title: 'Audience Insights',
            description: t('analytics.metrics.audience.description'),
            icon: '👥',
            stats: {
                segments: '8+',
                reach: 'Global',
                tracking: '24/7'
            }
        },
        {
            id: 3,
            title: 'Performance Tracking',
            description: t('analytics.metrics.performance.description'),
            icon: '📈',
            stats: {
                kpis: '20+',
                reports: 'Custom',
                history: '12 months'
            }
        }
    ];

    const dashboardSections = [
        {
            title: t('analytics.dashboard.growth'),
            percentage: '+127%',
            trend: 'up'
        },
        {
            title: t('analytics.dashboard.engagement'),
            percentage: '+85%',
            trend: 'up'
        },
        {
            title: t('analytics.dashboard.conversion'),
            percentage: '+45%',
            trend: 'up'
        }
    ];

    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('analytics.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('analytics.description')}
                    </p>
                </div>

                {/* Dashboard Preview */}
                <div className="mb-16">
                    <h2 className="text-2xl font-medium text-gray-900 mb-8 text-center">{t('analytics.dashboard.title')}</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {dashboardSections.map((section) => (
                            <div key={section.title} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                                <h3 className="text-xl font-medium text-gray-900 mb-4">{section.title}</h3>
                                <div className="flex items-center gap-4">
                                    <span className="text-4xl font-light text-brand-purple">{section.percentage}</span>
                                    <div className={`w-8 h-8 text-brand-purple transform transition-transform ${section.trend === 'up' ? 'rotate-0' : 'rotate-180'}`}>
                                        ↑
                                    </div>
                                </div>
                                <div className="mt-4 w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                                    <div className="h-full bg-brand-purple rounded-full" style={{ width: section.percentage }}></div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Metrics and Actions */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
                    {/* Metrics Overview */}
                    <div className="lg:col-span-2">
                        <div className="space-y-8">
                            {metrics.map((metric) => (
                                <div key={metric.id} className="bg-white rounded-2xl shadow-lg p-6 relative group hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                                    <div className="absolute -right-2 -top-2 w-10 h-10 bg-brand-purple text-white rounded-full flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform">
                                        <span className="text-xl">{metric.icon}</span>
                                    </div>
                                    <h3 className="text-xl font-medium text-gray-900 mb-4">{metric.title}</h3>
                                    <p className="text-gray-600 mb-6">{metric.description}</p>
                                    <div className="h-px bg-gray-100 mb-6"></div>
                                    <div className="grid grid-cols-3 gap-4">
                                        {Object.entries(metric.stats).map(([key, value]) => (
                                            <div key={key}>
                                                <span className="text-sm text-gray-500 block capitalize">{key}</span>
                                                <span className="font-medium text-brand-purple">{value}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Quick Actions */}
                    <div className="lg:col-span-1">
                        <div className="bg-white rounded-2xl shadow-lg p-8">
                            <h3 className="text-xl font-medium text-gray-900 mb-6">{t('analytics.actions.title')}</h3>
                            <div className="space-y-3">
                                {[
                                    'Generate Report',
                                    'Export Data',
                                    'Set Alerts',
                                    'Share Dashboard',
                                    'Configure KPIs'
                                ].map((action) => (
                                    <div 
                                        key={action} 
                                        className="p-4 rounded-xl hover:bg-gray-50 transition-colors duration-300 cursor-pointer group"
                                    >
                                        <span className="text-gray-600 group-hover:text-brand-purple transition-colors">{action}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default Analytics;