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

export default function About() {
    const ref = useReveal();
    return (
        <section id="about" data-screen-label="02 About">
            <div className="wrap about-grid reveal" ref={ref}>
                <div className="about-copy">
                    <span className="eyebrow">Что такое MoonWell</span>
                    <div style={{ height: 18 }} />
                    <h2 className="h-display">Ночной колодец, где эпохи ждут тебя.</h2>
                    <div style={{ height: 28 }} />
                    <p>
                        MoonWell — это не очередной «1x серверный клон». Мы переосмыслили Wrath of the Lich King как
                        длинный путь: сначала Классика, затем Burning Crusade, потом Лич — но каждый герой идёт по нему
                        сам. Никаких скачков на 80-й уровень и автоматических буст-паков.
                    </p>
                    <p>
                        Мы хотим вернуть ощущение, которое многие из нас помнят с 2005-го: когда незнакомый лес опасен,
                        а первый рейд — событие года. И при этом добавить то, чего тогда не хватало — возможность
                        играть, когда у тебя есть только час после работы.
                    </p>
                    <blockquote className="about-quote">
                        «Мы строим мир, в котором ты можешь пройти всё в одиночку — или собрать отряд из трёх верных друзей и свергнуть короля-лича. Оба пути честные.»
                        <cite>— команда MoonWell</cite>
                    </blockquote>
                </div>

                <div className="about-visual corners">
                    <div className="about-stats">
                        <span>Est. 2026</span>
                    </div>
                    <img src="landing.png" alt="концепт-арт: вход в Лунный Колодец, туман, силуэт ночного эльфа" />
                </div>
            </div>
        </section>
    );
}