import { useReveal, Icons, MoonMark, getBootstrap } from './atoms.jsx';

export default function Footer() {
    const ref = useReveal();
    const playUrl = getBootstrap().play_url || '#join';
    return (
        <footer className="footer" data-screen-label="05 Footer">
            <div className="wrap">
                <div className="footer-cta reveal" ref={ref}>
                    <span className="eyebrow">Свет лунного колодца зовёт</span>
                    <div style={{ height: 20 }} />
                    <h2 className="h-display">Один лаунчер — и ты у ворот Тельдрассила.</h2>
                    <p>
                        Наш лаунчер сам поставит игровой клиент, пропишет realmlist и будет держать всё в актуальном
                        состоянии. Без ручных патчей и копирования файлов.
                    </p>
                    <div className="launcher-steps">
                        <div className="launcher-step">
                            <span className="n">01</span>
                            <span className="t">Скачай лаунчер</span>
                        </div>
                        <div className="launcher-step">
                            <span className="n">02</span>
                            <span className="t">Войди или создай аккаунт</span>
                        </div>
                        <div className="launcher-step">
                            <span className="n">03</span>
                            <span className="t">Нажми «Играть» — остальное автоматически</span>
                        </div>
                    </div>
                    <div className="hero-cta" style={{ justifyContent: 'center', marginTop: 40 }}>
                        <a href={playUrl} className="btn btn-primary">
                            Скачать лаунчер для Windows {Icons.arrow}
                        </a>
                        <a href="#" className="btn btn-ghost is-disabled" aria-disabled="true">
                            macOS — в разработке
                        </a>
                    </div>
                    <div style={{ marginTop: 20, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--text-mute)', textTransform: 'uppercase' }}>
                        v 1.4.2 · ~180 MB · автообновление
                    </div>
                </div>

                <div className="footer-grid">
                    <div className="footer-col footer-brand">
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--moon)' }}>
                            <MoonMark size={28} />
                            <span style={{ fontFamily: 'var(--f-display)', letterSpacing: '0.18em', fontSize: 16, color: 'var(--ivory)' }}>
                                MOONWELL
                            </span>
                        </div>
                        <p>
                            Приватный сервер World of Warcraft 3.3.5a с индивидуальным прогрессом, соло-данжами и
                            режимом «Предатель». Бесплатно и без pay-to-win.
                        </p>
                    </div>
                    <div className="footer-col">
                        <h4>Сервер</h4>
                        <a href="#">Статус реалмов</a>
                        <a href="#">Скачать клиент</a>
                        <a href="#">Правила</a>
                        <a href="#">Дорожная карта</a>
                    </div>
                    <div className="footer-col">
                        <h4>Сообщество</h4>
                        <a href="#">Discord</a>
                        <a href="#">Форум</a>
                        <a href="#">Поддержка</a>
                        <a href="#">Вакансии</a>
                    </div>
                    <div className="footer-col">
                        <h4>База знаний</h4>
                        <a href="#">Гайды</a>
                        <a href="#">База данных</a>
                        <a href="#">Рейтинги</a>
                        <a href="#">API</a>
                    </div>
                </div>

                <div className="footer-bottom">
                    <span>© 2026 MoonWell · fan project · не связан с Blizzard Entertainment</span>
                    <span>Сделано с лунным светом</span>
                </div>
            </div>
        </footer>
    );
}
