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

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

    // 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">Echoes of the Ash</h1>
                    <p className="hero-subtitle">Survive the Wasteland. Forge Your Legend.</p>
                    <p className="hero-description">
                        A post-apocalyptic survival RPG where every decision matters.
                        Explore desolate wastelands, battle mutated creatures, craft essential gear,
                        and compete with other survivors in a world consumed by ash.
                    </p>
                    <div className="hero-buttons">
                        <button
                            className="button-primary hero-button"
                            onClick={() => navigate('/register')}
                        >
                            Start Your Journey
                        </button>
                        <button
                            className="button-secondary hero-button"
                            onClick={() => navigate('/login')}
                        >
                            Login
                        </button>
                    </div>
                </div>
                <div className="hero-gradient"></div>
            </section>

            {/* Features Section */}
            <section className="features-section">
                <h2 className="section-title">Game Features</h2>
                <div className="features-grid">
                    <div className="feature-card">
                        <div className="feature-icon">⚔️</div>
                        <h3>Tactical Combat</h3>
                        <p>Engage in turn-based battles against mutated creatures and hostile survivors. Choose your actions wisely!</p>
                        <img src="/game-combat.png" alt="Combat gameplay" className="feature-screenshot" />
                    </div>

                    <div className="feature-card">
                        <div className="feature-icon">🎒</div>
                        <h3>Deep Inventory System</h3>
                        <p>Manage your equipment, craft items, and optimize your loadout for survival in the harsh wasteland.</p>
                        <img src="/game-inventory.png" alt="Inventory system" className="feature-screenshot" />
                    </div>

                    <div className="feature-card">
                        <div className="feature-icon">🗺️</div>
                        <h3>Explore the Wasteland</h3>
                        <p>Navigate through dangerous locations, discover hidden treasures, and encounter other players in real-time.</p>
                        <img src="/game-exploration.png" alt="Exploration gameplay" className="feature-screenshot" />
                    </div>

                    <div className="feature-card">
                        <div className="feature-icon">🔧</div>
                        <h3>Crafting & Salvage</h3>
                        <p>Scavenge materials, repair equipment, and craft powerful items to gain an edge in the wasteland.</p>
                    </div>

                    <div className="feature-card">
                        <div className="feature-icon">📊</div>
                        <h3>Character Progression</h3>
                        <p>Level up your character, allocate stat points, and customize your build to match your playstyle.</p>
                    </div>

                    <div className="feature-card">
                        <div className="feature-icon">👥</div>
                        <h3>Multiplayer Interactions</h3>
                        <p>Trade with other players, engage in PvP combat, or cooperate to survive in the harsh world.</p>
                    </div>
                </div>
            </section>

            {/* About Section */}
            <section className="about-section">
                <h2 className="section-title">About the Game</h2>
                <div className="about-content">
                    <p>
                        In the aftermath of a catastrophic event that covered the world in ash,
                        humanity struggles to survive. Resources are scarce, dangers lurk around
                        every corner, and only the strongest and smartest will endure.
                    </p>
                    <p>
                        Create your character, explore the wasteland, battle mutated creatures,
                        and compete with other survivors. Will you become a legendary scavenger,
                        a feared warrior, or a cunning trader? The choice is yours.
                    </p>
                    <p>
                        Join thousands of players in this persistent online world where your
                        actions have consequences and your reputation matters.
                    </p>
                </div>
            </section>

            {/* Footer */}
            <footer className="landing-footer">
                <p>&copy; 2025 Echoes of the Ash. All rights reserved.</p>
            </footer>
        </div>
    )
}

export default LandingPage
