<script setup>
import { arrowSvg } from './symbols';

defineProps({ playUrl: { type: String, required: true } });
</script>

<template>
    <section class="hero" data-screen-label="01 Hero">
        <div class="wrap hero-inner">
            <div class="hero-pretitle"><span class="dot"></span><span>Открытая бета · Wrath of the Lich King</span></div>
            <h1 class="h-display hero-title">MoonWell<span class="ornament">- Лунный Колодец -</span></h1>
            <p class="hero-tagline">Приватный сервер World of Warcraft, где ты проходишь эпоху за эпохой - от Классики до Короля-лича - в своем темпе, один или в отряде.</p>
            <div class="hero-meta">
                <span>Индивидуальный прогресс</span><span>Соло-данжи</span><span>Режим «Предатель»</span><span>Mythic+ без потолка</span>
            </div>
            <div class="hero-cta">
                <a :href="playUrl" class="btn btn-primary">Скачать лаунчер <span v-html="arrowSvg"></span></a>
                <a href="#about" class="btn btn-ghost">Узнать больше</a>
            </div>
            <div class="hero-launcher-note">
                <span class="os">Windows 10/11</span><span class="sep">·</span><span>macOS - в разработке</span><span class="sep">·</span><span>~180 MB · автообновление · клиент ставится сам</span>
            </div>
        </div>
        <div class="hero-scroll">Прокрути вниз</div>
    </section>
</template>
