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

export default function Hero() {
    const playUrl = getBootstrap().play_url || '#join';
    return (
        <section className="hero" data-screen-label="01 Hero">
            <div className="wrap hero-inner">
                <div className="hero-pretitle">
                    <span className="dot"></span>
                    <span>Открытая бета · Wrath of the Lich King</span>
                </div>
                <h1 className="h-display hero-title">
                    MoonWell
                    <span className="ornament">— Лунный Колодец —</span>
                </h1>
                <p className="hero-tagline">
                    Приватный сервер World of Warcraft, где ты проходишь эпоху за эпохой —
                    от Классики до Короля-лича — в своём темпе, один или в отряде.
                </p>
                <div className="hero-meta">
                    <span>Индивидуальный прогресс</span>
                    <span>Соло-данжи</span>
                    <span>Режим «Предатель»</span>
                    <span>Mythic+ без потолка</span>
                </div>
                <div className="hero-cta">
                    <a href={playUrl} className="btn btn-primary">
                        Скачать лаунчер {Icons.arrow}
                    </a>
                    <a href="#about" className="btn btn-ghost">
                        Узнать больше
                    </a>
                </div>
                <div className="hero-launcher-note">
                    <span className="os">Windows 10/11</span>
                    <span className="sep">·</span>
                    <span>macOS — в разработке</span>
                    <span className="sep">·</span>
                    <span>~180 MB · автообновление · клиент ставится сам</span>
                </div>
            </div>
            <div className="hero-scroll">Прокрути вниз</div>
        </section>
    );
}