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

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

    const strategies = [
        {
            id: 1,
            title: 'Content Strategy',
            description: t('brandGrowth.strategies.content.description'),
            icon: '📝',
            stats: {
                reach: '+245%',
                engagement: '+167%',
                conversion: '+89%'
            }
        },
        {
            id: 2,
            title: 'Audience Growth',
            description: t('brandGrowth.strategies.audience.description'),
            icon: '🎯',
            stats: {
                targeting: '95%',
                retention: '87%',
                growth: '+156%'
            }
        },
        {
            id: 3,
            title: 'Brand Identity',
            description: t('brandGrowth.strategies.identity.description'),
            icon: '✨',
            stats: {
                recognition: '+178%',
                loyalty: '+92%',
                awareness: '+134%'
            }
        }
    ];

    const recommendations = [
        {
            title: t('brandGrowth.recommendations.content'),
            score: 92,
            priority: 'High',
            impact: '+127%'
        },
        {
            title: t('brandGrowth.recommendations.timing'),
            score: 88,
            priority: 'Medium',
            impact: '+85%'
        },
        {
            title: t('brandGrowth.recommendations.engagement'),
            score: 95,
            priority: 'High',
            impact: '+156%'
        }
    ];

    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('brandGrowth.title')}
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape hexagon 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('brandGrowth.description')}
                        </p>
                    </div>
                </div>

                {/* Main content */}
                <div className="grid-layout gap-8">
                    {/* Growth Strategies */}
                    <div className="col-span-12">
                        <div className="brutalist-card p-8">
                            <h2 className="text-2xl font-black uppercase mb-8">{t('brandGrowth.strategies.title')}</h2>
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                                {strategies.map((strategy) => (
                                    <div key={strategy.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">{strategy.icon}</span>
                                        </div>
                                        <h3 className="text-xl font-bold mb-4">{strategy.title}</h3>
                                        <p className="monospace mb-6">{strategy.description}</p>
                                        <div className="section-divider"></div>
                                        <div className="grid grid-cols-3 gap-4 mt-4">
                                            {Object.entries(strategy.stats).map(([key, value]) => (
                                                <div key={key}>
                                                    <span className="monospace text-sm block capitalize">{key}</span>
                                                    <span className="font-bold">{value}</span>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* AI Recommendations */}
                    <div className="col-span-12 md:col-span-8">
                        <div className="brutalist-card p-8">
                            <h2 className="text-2xl font-black uppercase mb-8">{t('brandGrowth.recommendations.title')}</h2>
                            <div className="space-y-6">
                                {recommendations.map((rec) => (
                                    <div key={rec.title} className="brutalist-card p-6 relative hover:-translate-y-1 transition-transform">
                                        <div className="flex justify-between items-center mb-4">
                                            <h3 className="text-xl font-bold">{rec.title}</h3>
                                            <div className="flex items-center gap-2">
                                                <span className="monospace text-sm">Score:</span>
                                                <span className="font-bold text-xl">{rec.score}</span>
                                            </div>
                                        </div>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div>
                                                <span className="monospace text-sm block">Priority</span>
                                                <span className="font-bold">{rec.priority}</span>
                                            </div>
                                            <div>
                                                <span className="monospace text-sm block">Potential Impact</span>
                                                <span className="font-bold">{rec.impact}</span>
                                            </div>
                                        </div>
                                        <div className="mt-4 w-full h-2 bg-gray-200">
                                            <div className="h-full bg-black" style={{ width: `${rec.score}%` }}></div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Growth Tools */}
                    <div className="col-span-12 md:col-span-4">
                        <div className="brutalist-card p-6">
                            <h3 className="text-xl font-bold mb-6">{t('brandGrowth.tools.title')}</h3>
                            <div className="space-y-4">
                                {[
                                    'Content Calendar',
                                    'Audience Insights',
                                    'Competitor Analysis',
                                    'Performance Tracking',
                                    'Brand Guidelines'
                                ].map((tool) => (
                                    <div key={tool} className="brutalist-card p-3 hover:-translate-x-2 transition-transform cursor-pointer">
                                        <span className="monospace">{tool}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default BrandGrowth; 