moonwell-web/resources/js/moonwell/Features.jsx

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

const items = [
    {
        icon: Icons.path,
        num: 'I',
        tag: 'Сигнатурная фича',
        title: 'Индивидуальный прогресс по эпохам',
        desc: 'Пока твой герой не увидел финал Классики — Outland закрыт. Пока не закрыт Illidan — Нортренд в тумане. Каждый идёт в своём темпе, без скипов.',
        span: 'span-6',
    },
    {
        icon: Icons.solo,
        num: 'II',
        tag: '',
        title: 'Соло-данжи',
        desc: 'Любое подземелье проходимо в одиночку: мы скейлим боссов и механики под размер отряда — от 1 до 5.',
        span: 'span-3',
    },
    {
        icon: Icons.mask,
        num: 'III',
        tag: '',
        title: 'Режим «Предатель»',
        desc: 'При создании персонаж Альянса может встать на сторону Орды (и наоборот). Отдельные сюжеты, NPC, репутации.',
        span: 'span-3',
    },
    {
        icon: Icons.wolf,
        num: 'IV',
        tag: 'В разработке',
        title: 'Ликантропия',
        desc: 'Воргены как болезнь: заражайся, сопротивляйся, или прими форму. Твой выбор — твой путь.',
        span: 'span-4',
    },
    {
        icon: Icons.mythic,
        num: 'V',
        tag: '',
        title: 'Mythic+ без потолка',
        desc: 'Бесконечное масштабирование уровня ключа. Каждую неделю — новые аффиксы.',
        span: 'span-4',
    },
    {
        icon: Icons.pass,
        num: 'VI',
        tag: 'В разработке',
        title: 'Боевой пропуск · магазин наград',
        desc: 'Ежедневные и еженедельные задания, ежедневные награды за вход, косметика в магазине.',
        span: 'span-4',
    },
    {
        icon: Icons.collection,
        num: 'VII',
        tag: 'В разработке',
        title: 'Коллекции',
        desc: 'Питомцы, ездовые животные, трансмогрификация — всё в одном журнале, с фильтрами и прогрессом.',
        span: 'span-6',
    },
    {
        icon: Icons.kart,
        num: 'VIII',
        tag: 'Side Project',
        title: 'MoonWell Karts',
        desc: 'Отдельная мини-игра в нашей инфраструктуре — аркадные гонки с персонажами сервера. В разработке.',
        span: 'span-6',
    },
];

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

function FeatureCard({ icon, num, tag, title, desc, span }) {
    const ref = useReveal();
    return (
        <article
            className={`feature ${span} reveal`}
            ref={ref}
            onMouseMove={onMove}
            style={{ transitionDelay: '0ms' }}
        >
            <div className="feature-num">
                <span>{num}</span>
                {tag && <span className="tag">{tag}</span>}
            </div>
            <div className="feature-icon">{icon}</div>
            <h3 className="feature-title">{title}</h3>
            <p className="feature-desc">{desc}</p>
        </article>
    );
}

function Progression() {
    const ref = useReveal();
    const steps = [
        { name: 'Classic', lvl: '1–60', status: 'Активно', state: 'live' },
        { name: 'The Burning Crusade', lvl: '60–70', status: 'Следующая эпоха', state: 'current' },
        { name: 'Wrath of the Lich King', lvl: '70–80', status: 'Закрыто за туманом', state: 'locked' },
    ];
    return (
        <div id="progression" className="progression reveal" ref={ref}>
            <div className="progression-title">
                <h3>Путь через эпохи</h3>
                <span className="meta">Твой герой · Aranthel, Хранитель рощи · 47 ур.</span>
            </div>
            <div className="progression-track">
                {steps.map((s, i) => (
                    <div key={i} className={`progression-step ${s.state}`}>
                        <div className="name">
                            {s.name}
                            <small>{s.lvl}</small>
                        </div>
                        <div className="status">{s.status}</div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default function Features() {
    const ref = useReveal();
    return (
        <section id="features" data-screen-label="03 Features">
            <div className="wrap">
                <div className="section-head reveal" ref={ref}>
                    <span className="eyebrow">Особенности сервера</span>
                    <div style={{ height: 20 }} />
                    <h2 className="h-display" style={{ fontSize: 'clamp(36px, 5vw, 60px)' }}>
                        То, чего ты не найдёшь у других
                    </h2>
                    <div className="divider-ornament">✦</div>
                    <p className="lead">
                        Восемь систем, которые делают MoonWell не клоном, а отдельной игрой поверх знакомого мира.
                    </p>
                </div>

                <div className="features-grid">
                    {items.map((f, i) => (
                        <FeatureCard key={i} {...f} />
                    ))}
                </div>

                <Progression />
            </div>
        </section>
    );
}