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

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

    const features = [
        { id: 'aiTrends', icon: 'ai', pattern: 'pattern-ai' },
        { id: 'imageGen', icon: 'image', pattern: 'pattern-image' },
        { id: 'analytics', icon: 'analytics', pattern: 'pattern-analytics' },
        { id: 'brandGrowth', icon: 'growth', pattern: 'pattern-growth' }
    ];

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

                <div className="geometric-divider"></div>

                {/* Feature grid */}
                {/* <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-32">
                    <div className="brutalist-card">
                        <div className="relative">
                            <div className="icon-ai mb-6"></div>
                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.aiTrends')}</h3>
                            <div className="hover-line"></div>
                        </div>
                    </div>
                    <div className="brutalist-card">
                        <div className="relative">
                            <div className="icon-image mb-6"></div>
                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.imageGen')}</h3>
                            <div className="hover-line"></div>
                        </div>
                    </div>
                    <div className="brutalist-card">
                        <div className="relative">
                            <div className="icon-analytics mb-6"></div>
                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.analytics')}</h3>
                            <div className="hover-line"></div>
                        </div>
                    </div>
                    <div className="brutalist-card">
                        <div className="relative">
                            <div className="icon-growth mb-6"></div>
                            <h3 className="text-xl font-black uppercase mb-4">{t('home.features.brandGrowth')}</h3>
                            <div className="hover-line"></div>
                        </div>
                    </div>
                </div> */}

                {/* Main content grid */}
                <div className="grid-layout gap-8">
                    {/* Left column - Single video */}
                    <div className="col-span-12 md:col-span-7 brutalist-card p-0 overflow-hidden">
                        <div className="relative aspect-[4/3] overflow-hidden">
                            <video
                                className="w-full h-full object-cover grayscale contrast-125 brightness-125"
                                autoPlay
                                loop
                                muted
                                playsInline
                            >
                                <source src="/video.mp4" type="video/mp4" />
                            </video>
                            <div className="video-overlay"></div>
                            <div className="absolute inset-0 diagonal-lines"></div>
                        </div>
                        <div className="p-6">
                            <div className="section-divider"></div>
                            <h2 className="brutalist-subheading mb-4">Build Your Own Model</h2>
                            <Link to="/about" className="brutalist-button inline-block">
                                About Us →
                            </Link>
                        </div>
                    </div>

                    {/* Right column - Feature grid */}
                    <div className="col-span-12 md:col-span-5">
                        <div className="grid grid-cols-2 gap-3 h-full">
                            <Link to="/ai-trends" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
                                <div className="relative h-full flex flex-col justify-between">
                                    <div className="icon-ai mb-4"></div>
                                    <h3 className="text-sm font-black uppercase">{t('home.features.aiTrends')}</h3>
                                    <div className="hover-line mt-2"></div>
                                </div>
                            </Link>
                            <Link to="/image-generation" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
                                <div className="relative h-full flex flex-col justify-between">
                                    <div className="icon-image mb-4"></div>
                                    <h3 className="text-sm font-black uppercase">{t('home.features.imageGen')}</h3>
                                    <div className="hover-line mt-2"></div>
                                </div>
                            </Link>
                            <Link to="/analytics" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
                                <div className="relative h-full flex flex-col justify-between">
                                    <div className="icon-analytics mb-4"></div>
                                    <h3 className="text-sm font-black uppercase">{t('home.features.analytics')}</h3>
                                    <div className="hover-line mt-2"></div>
                                </div>
                            </Link>
                            <Link to="/brand-growth" className="brutalist-card p-4 hover:-translate-y-1 transition-transform">
                                <div className="relative h-full flex flex-col justify-between">
                                    <div className="icon-growth mb-4"></div>
                                    <h3 className="text-sm font-black uppercase">{t('home.features.brandGrowth')}</h3>
                                    <div className="hover-line mt-2"></div>
                                </div>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />

        </div>
    );
}

export default Home; 