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

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

    return (
        <div className="relative min-h-screen bg-black text-white">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-20 pointer-events-none"></div>

            {/* Hero Section */}
            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                <div className="grid-layout mb-24">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading text-6xl md:text-7xl lg:text-8xl font-bold mb-6">
                            Build Your Own Model.
                        </h1>
                        <p className="monospace text-xl md:text-2xl text-gray-400 max-w-2xl mb-12">
                            BYOM is an AI-powered platform focusing on helping influencers grow their brand through advanced analytics and creative tools.
                            </p>
                        <div className="flex gap-4">
                            <Link to="/register" className="brutalist-button">
                                Start building →
                            </Link>
                        </div>
                    </div>
                                    </div>

                {/* Feature Grid */}
                <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-24">
                    <div className="brutalist-card p-6">
                        <div className="icon-ai mb-6"></div>
                        <h3 className="text-xl font-bold mb-4">AI Trends</h3>
                        <p className="text-gray-400">Stay ahead with AI-powered trend analysis and insights for brand growth.</p>
                                    </div>
                    <div className="brutalist-card p-6">
                        <div className="icon-image mb-6"></div>
                        <h3 className="text-xl font-bold mb-4">Image Generation</h3>
                        <p className="text-gray-400">Create stunning visuals with our AI image generation tools.</p>
                                    </div>
                    <div className="brutalist-card p-6">
                        <div className="icon-analytics mb-6"></div>
                        <h3 className="text-xl font-bold mb-4">Analytics</h3>
                        <p className="text-gray-400">Deep insights into your brand's performance and audience engagement.</p>
                                    </div>
                    <div className="brutalist-card p-6">
                        <div className="icon-growth mb-6"></div>
                        <h3 className="text-xl font-bold mb-4">Brand Growth</h3>
                        <p className="text-gray-400">Strategic tools to accelerate your brand's growth and reach.</p>
                                </div>
                            </div>

                {/* Platform Overview */}
                <div className="grid-layout gap-12 mb-24">
                    <div className="col-span-12 md:col-span-6">
                        <h2 className="brutalist-subheading text-4xl mb-6">Your AI Brand Partner</h2>
                        <p className="text-gray-400 mb-6">
                            BYOM empowers creators with AI-driven solutions that transform how you build and grow your brand. 
                            Our platform combines advanced analytics, trend analysis, and creative tools to give you a competitive edge.
                        </p>
                                </div>
                    <div className="col-span-12 md:col-span-6">
                        <div className="brutalist-card p-6">
                            <div className="relative aspect-[4/3] overflow-hidden mb-4">
                                <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="absolute inset-0 diagonal-lines"></div>
                            </div>
                            <h3 className="text-xl font-bold mb-2">Advanced Analytics Dashboard</h3>
                            <p className="text-gray-200">Real-time insights and performance metrics for data-driven decisions</p>
                        </div>
                    </div>
                </div>

                {/* Enterprise Features */}
                        <div className="mb-24">
                    <h2 className="brutalist-subheading text-4xl mb-12">Built for Growth</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div className="brutalist-card p-6">
                            <div className="mb-4">
                                <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                                </svg>
                                    </div>
                            <h3 className="text-xl font-bold mb-4">AI-Powered Insights</h3>
                            <p className="text-gray-400">Advanced algorithms analyze trends and provide actionable recommendations for your brand.</p>
                                </div>
                        <div className="brutalist-card p-6">
                            <div className="mb-4">
                                <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                                </svg>
                                    </div>
                            <h3 className="text-xl font-bold mb-4">Creative Tools</h3>
                            <p className="text-gray-400">Generate and optimize content with our suite of AI-powered creative tools.</p>
                                </div>
                        <div className="brutalist-card p-6">
                            <div className="mb-4">
                                <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                </svg>
                            </div>
                            <h3 className="text-xl font-bold mb-4">Performance Tracking</h3>
                            <p className="text-gray-400">Monitor your brand's growth with comprehensive analytics and reporting.</p>
                        </div>
                    </div>
                </div>

                {/* Newsletter Section */}
                <div className="mb-24">
                    <h2 className="brutalist-heading text-4xl mb-12">Join the future of brand building.</h2>
                    <div className="max-w-xl">
                        <div className="flex gap-4">
                            <input type="email" placeholder="Email address" className="brutalist-card bg-gray-900 p-4 flex-grow" />
                            <button className="brutalist-button">Get early access</button>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default Home; export default Home; 
