import { useNavigate } from 'react-router-dom'
import { useAuth } from '../hooks/useAuth'
import { useEffect } from 'react'
import { GameButton } from './common/GameButton'
import { useTranslation } from 'react-i18next'
import './LandingPage.css'

function LandingPage() {
    const navigate = useNavigate()
    const { isAuthenticated } = useAuth()
    const { t } = useTranslation()

    // Redirect authenticated users to characters page
    useEffect(() => {
        if (isAuthenticated) {
            navigate('/characters')
        }
    }, [isAuthenticated, navigate])

    return (
        <div className="landing-page">
            {/* Hero Section */}
            <section className="hero-section">
                <div className="hero-content">
                    <h1 className="hero-title">{t('landing.heroTitle')}</h1>
                    <p className="hero-subtitle">{t('landing.heroSubtitle')}</p>
                    <p className="hero-description">
                        {t('landing.about.description')}
                    </p>
                    <div className="hero-buttons">
                        <GameButton
                            variant="primary"
                            size="lg"
                            className="hero-button"
                            onClick={() => navigate('/register')}
                        >
                            {t('landing.playNow')}
                        </GameButton>
                        <GameButton
                            variant="secondary"
                            size="lg"
                            className="hero-button"
                            onClick={() => navigate('/login')}
                        >
                            {t('landing.login')}
                        </GameButton>
                    </div>
                </div>
                <div className="hero-gradient"></div>
            </section>

            {/* Features Section */}
            <section className="features-section">
                <h2 className="section-title">{t('landing.features')}</h2>
                <div className="features-grid">
                    <div className="feature-card">
                        <div className="feature-icon">⚔️</div>
                        <h3>{t('landing.featureCards.combat.title')}</h3>
                        <p>{t('landing.featureCards.combat.description')}</p>
                    </div>

                    <div className="feature-card">
                        <div className="feature-icon">🎒</div>
                        <h3>{t('landing.featureCards.survival.title')}</h3>
                        <p>{t('landing.featureCards.survival.description')}</p>
                    </div>

                    <div className="feature-card">
                        <div className="feature-icon">🔧</div>
                        <h3>{t('landing.featureCards.crafting.title')}</h3>
                        <p>{t('landing.featureCards.crafting.description')}</p>
                    </div>
                </div>
            </section>

            {/* About Section */}
            <section className="about-section">
                <h2 className="section-title">{t('landing.about.title')}</h2>
                <div className="about-content">
                    <p>
                        {t('landing.about.description')}
                    </p>
                </div>
            </section>

            {/* Footer */}
            <footer className="landing-footer">
                <p>{t('landing.footer.copyright', { year: 2026 })}</p>
                <div className="footer-links">
                    <span onClick={() => navigate('/privacy')}>{t('landing.footer.links.privacy')}</span>
                    <span onClick={() => navigate('/terms')}>{t('landing.footer.links.terms')}</span>
                    <span onClick={() => window.open('https://discord.gg/8QWK9QcNqm', '_blank')}>{t('landing.footer.links.discord')}</span>
                </div>
            </footer>
        </div>
    )
}

export default LandingPage
