<script setup>
import { features, iconPaths, steps } from './symbols';

function onMove(event) {
    const rect = event.currentTarget.getBoundingClientRect();
    event.currentTarget.style.setProperty('--mx', `${((event.clientX - rect.left) / rect.width) * 100}%`);
    event.currentTarget.style.setProperty('--my', `${((event.clientY - rect.top) / rect.height) * 100}%`);
}
</script>

<template>
    <section id="features" data-screen-label="03 Features">
        <div class="wrap">
            <div class="section-head reveal">
                <span class="eyebrow">Особенности сервера</span>
                <div style="height: 20px"></div>
                <h2 class="h-display" style="font-size: clamp(36px, 5vw, 60px)">То, чего ты не найдешь у других</h2>
                <div class="divider-ornament">✦</div>
                <p class="lead">Восемь систем, которые делают MoonWell не клоном, а отдельной игрой поверх знакомого мира.</p>
            </div>

            <div class="features-grid">
                <article v-for="feature in features" :key="feature.num" :class="['feature', feature.span, 'reveal']" @mousemove="onMove">
                    <div class="feature-num"><span>{{ feature.num }}</span><span v-if="feature.tag" class="tag">{{ feature.tag }}</span></div>
                    <div class="feature-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" v-html="iconPaths[feature.icon]"></svg>
                    </div>
                    <h3 class="feature-title">{{ feature.title }}</h3>
                    <p class="feature-desc">{{ feature.desc }}</p>
                </article>
            </div>

            <div id="progression" class="progression reveal">
                <div class="progression-title">
                    <h3>Путь через эпохи</h3>
                    <span class="meta">Твой герой · Aranthel, Хранитель рощи · 47 ур.</span>
                </div>
                <div class="progression-track">
                    <div v-for="step in steps" :key="step.name" :class="['progression-step', step.state]">
                        <div class="name">{{ step.name }}<small>{{ step.lvl }}</small></div>
                        <div class="status">{{ step.status }}</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
