import React from 'react';
import DocIcon from './docsIcons';

/**
 * learnArticles.jsx — статьи блока «Изучай Студию» Рублокс Студии.
 *
 * Каждая статья — { id, icon, color, title, summary, cover, body }:
 *  - id      — ключ для роута /learn/<id>
 *  - icon    — имя SVG-иконки (docsIcons), для запасного фона карточки
 *  - color   — акцентный цвет карточки
 *  - cover   — файл превью из public/assets/kubikon-learn/<cover>
 *  - summary — краткое описание для карточки
 *  - body    — готовый JSX статьи
 *
 * Рендерит KubikonLearn.jsx.
 */

// ── Хелперы разметки (своя плашка-стилистика, классы в KubikonLearn) ──

const Tip = ({ children }) => (
    <div className="lrnBox lrnBox--tip">
        <span className="lrnBox__ico"><DocIcon name="lightbulb" size={18} /></span>
        <div>{children}</div>
    </div>
);
const Warn = ({ children }) => (
    <div className="lrnBox lrnBox--warn">
        <span className="lrnBox__ico"><DocIcon name="warning" size={18} /></span>
        <div>{children}</div>
    </div>
);
const Ok = ({ children }) => (
    <div className="lrnBox lrnBox--ok">
        <span className="lrnBox__ico"><DocIcon name="flag" size={18} /></span>
        <div>{children}</div>
    </div>
);
// Шаг инструкции с номером
const Step = ({ n, children }) => (
    <div className="lrnStep">
        <span className="lrnStep__n">{n}</span>
        <div className="lrnStep__body">{children}</div>
    </div>
);
// Подзаголовок внутри статьи
const H = ({ children }) => <h3 className="lrnH">{children}</h3>;

// ── Статьи ──────────────────────────────────────────────────────────
export const ARTICLES = [
    // ═══ 1. С чего начать ═══
    {
        id: 'start',
        icon: 'rocket',
        color: '#3357ff',
        cover: 'start.jpg',
        title: 'С чего начать',
        summary: 'Что такое Рублокс Студия и как сделать свою первую игру за пару минут.',
        body: (
            <>
                <p>
                    <b>Рублокс Студия</b> — это редактор, в котором ты создаёшь
                    свои 3D-игры: строишь мир, ставишь объекты, пишешь логику и
                    публикуешь игру, чтобы в неё играли другие.
                </p>
                <H>Первая игра за 1 минуту</H>
                <Step n="1">
                    На главной Студии нажми <b>«Новая игра»</b> или выбери
                    готовый шаблон в блоке «Открой шаблон».
                </Step>
                <Step n="2">
                    Откроется редактор. Шаблон уже содержит ландшафт — можно
                    сразу ходить по нему и достраивать.
                </Step>
                <Step n="3">
                    Нажми <b>«Запустить»</b> — попробуй игру так, как её увидят
                    игроки.
                </Step>
                <Step n="4">
                    Когда игра готова — нажми <b>«Опубликовать»</b>, и она
                    появится в общей ленте Рублокса.
                </Step>
                <H>Что дальше</H>
                <p>
                    Изучи остальные статьи этого раздела: как добавлять свои
                    модели и текстуры, как писать скрипты, чем отличаются плееры
                    и как правильно тестировать игру. А подробный учебник по
                    всем механикам — в разделе <b>ВИКИ</b>.
                </p>
                <Tip>
                    Лучший способ научиться — открыть готовый шаблон или
                    игру-урок из вики и разобраться, как она устроена.
                </Tip>
            </>
        ),
    },

    // ═══ 2. Свои текстуры и 3D-модели (ОБЯЗАТЕЛЬНАЯ) ═══
    {
        id: 'assets',
        icon: 'cube',
        color: '#8b5cf6',
        cover: 'assets.jpg',
        title: 'Свои текстуры и 3D-модели',
        summary: 'Как загрузить свои картинки и 3D-модели .glb в игру. Про лимиты на загрузку.',
        body: (
            <>
                <p>
                    В Рублокс Студию можно добавлять <b>свои картинки</b> (для
                    текстур и интерфейса) и <b>свои 3D-модели</b> в формате{' '}
                    <b>.glb</b> (или .gltf). Это позволяет наполнять игру
                    уникальным контентом, а не только встроенными объектами.
                </p>

                <H>Как загрузить 3D-модель (.glb)</H>
                <Step n="1">
                    Открой свою игру в редакторе.
                </Step>
                <Step n="2">
                    В панели объектов найди раздел загрузки моделей и нажми
                    кнопку <b>«Загрузить .glb»</b>.
                </Step>
                <Step n="3">
                    Выбери файл <b>.glb</b> или <b>.gltf</b> на компьютере.
                    Модель появится в палитре — её можно ставить в сцену как
                    обычный объект.
                </Step>
                <p>
                    Где взять .glb-модели: бесплатные библиотеки (например
                    Sketchfab, Poly Pizza, Quaternius), или сделай свою в
                    Blender и экспортируй в .glb.
                </p>

                <H>Как загрузить картинку (текстуру)</H>
                <p>
                    В редакторе есть библиотека картинок — туда можно загрузить
                    свои изображения и использовать их как текстуры объектов
                    или картинки в интерфейсе игры. Картинка автоматически
                    ужимается до 512 пикселей, чтобы не раздувать игру.
                </p>

                <H>Лимиты на загрузку — важно</H>
                <p>
                    Рублокс Студия — веб-платформа: вся твоя игра вместе с
                    моделями, текстурами и звуками <b>хранится на сервере</b>.
                    Место на сервере не бесконечно, поэтому действуют лимиты:
                </p>
                <ul>
                    <li><b>3D-модели .glb:</b> до 6 штук на одну игру, каждая — не больше 4 МБ.</li>
                    <li><b>Картинки:</b> до 24 штук на одну игру.</li>
                    <li><b>Звуки:</b> ограничены по числу и размеру на игру.</li>
                    <li><b>Игры:</b> до 40 игр на один аккаунт.</li>
                </ul>
                <Warn>
                    Лимиты — не придирка, а забота о платформе. Рублокс делает
                    один человек, и сервер пока небольшой. Если каждый зальёт
                    сотни тяжёлых моделей — место кончится у всех. Поэтому:
                    удаляй ненужные игры и не загружай огромные модели без
                    необходимости.
                </Warn>
                <Tip>
                    Чтобы модель весила меньше: уменьши количество полигонов в
                    Blender, сожми текстуры модели, убирай лишние материалы.
                    Лёгкая модель и грузится быстрее у игроков.
                </Tip>
                <Ok>
                    Достиг лимита игр на аккаунт? Удали те, что не нужны —
                    освободится место для новых. Старые наработки лучше держать
                    компактными.
                </Ok>
            </>
        ),
    },

    // ═══ 3. Плееры (ОБЯЗАТЕЛЬНАЯ) ═══
    {
        id: 'players',
        icon: 'window',
        color: '#06b6d4',
        cover: 'players.jpg',
        title: 'Плееры: веб, Windows, мобильный',
        summary: 'Где играют в твою игру и почему её обязательно нужно тестировать в плеере.',
        body: (
            <>
                <p>
                    Игру ты создаёшь <b>здесь</b>, в Рублокс Студии на сайте
                    Майнкрафтии — в браузере. Но играют в твою игру на разных
                    устройствах, и у каждого — свой «плеер» (программа, которая
                    запускает игру).
                </p>

                <H>Три плеера Рублокса</H>
                <ul>
                    <li>
                        <b>Веб-плеер</b> — прямо в браузере на сайте. На нём же
                        ты тестируешь игру кнопкой «Запустить» в редакторе.
                    </li>
                    <li>
                        <b>Windows-приложение</b> — отдельная программа для ПК.
                        Работает на движке <b>Godot</b>.
                    </li>
                    <li>
                        <b>Мобильное приложение</b> — для телефонов. Работает на
                        отдельном движке, написанном специально для Рублокса.
                    </li>
                </ul>

                <H>Почему это важно</H>
                <p>
                    Редактор и три плеера используют <b>разные движки</b>. Мы
                    стараемся, чтобы игра везде выглядела и работала одинаково,
                    но <b>небольшие различия возможны</b>: где-то иначе ляжет
                    свет, чуть по-другому сработает физика или эффект.
                </p>
                <Warn>
                    <b>Всегда проверяй свою игру в плеере, а не только в
                    редакторе.</b> То, что хорошо смотрится в редакторе, на
                    Windows или телефоне может выглядеть немного иначе. Прошёл
                    игру сам в плеере — значит, в неё точно можно играть.
                </Warn>
                <Tip>
                    Если заметил, что в плеере что-то работает не так, как в
                    редакторе, — это ценная находка. Отправь баг-репорт (см.
                    статью «Бета-версия и баг-репорты»), и расхождение починят.
                </Tip>
            </>
        ),
    },

    // ═══ 4. Бета-версия и баг-репорты (ОБЯЗАТЕЛЬНАЯ) ═══
    {
        id: 'beta',
        icon: 'bug',
        color: '#ec4899',
        cover: 'beta.jpg',
        title: 'Бета-версия и баг-репорты',
        summary: 'Почему сейчас бета, как сообщить об ошибке и помочь сделать Рублокс лучше.',
        body: (
            <>
                <p>
                    Рублокс — большая платформа: редактор, три плеера,
                    мультиплеер, лента игр, чат, система скинов. И всё это
                    делает <b>один человек — МИН</b>.
                </p>
                <H>Сейчас Рублокс — это бета-версия</H>
                <p>
                    Работы очень много, и причесать каждую мелочь к идеалу
                    одному человеку пока не получилось. Поэтому текущая версия
                    Рублокса — <b>бета</b>: всё основное работает, но кое-где
                    могут встречаться баги и шероховатости.
                </p>
                <p>
                    Когда платформа станет стабильной и отполированной — будет
                    полноценный <b>релиз</b>. А пока — помоги её до него
                    довести.
                </p>

                <H>Нашёл баг — отправь репорт</H>
                <p>
                    Если что-то сломалось, работает странно или вылетает —
                    <b> отправь баг-репорт</b>. МИН видит все репорты и
                    исправляет ошибки. Каждый репорт реально помогает.
                </p>
                <Step n="1">
                    Заметил проблему — в редакторе или плеере найди кнопку
                    <b> «Сообщить о баге»</b>.
                </Step>
                <Step n="2">
                    Опиши, что случилось: что ты делал, что ожидал и что
                    получилось вместо этого. Чем подробнее — тем быстрее
                    починят.
                </Step>
                <Step n="3">
                    Если можно — приложи скриншот. Картинка часто объясняет
                    баг лучше слов.
                </Step>
                <Ok>
                    Хороший баг-репорт: «Открыл игру в Windows-плеере, нажал
                    прыжок на платформе №3 — персонаж провалился сквозь
                    платформу. В редакторе всё нормально». Понятно, что, где и
                    при каких условиях.
                </Ok>
                <Warn>
                    Не нужно: репорты вроде «всё плохо», «не работает» без
                    подробностей. По ним невозможно понять, что чинить.
                </Warn>
                <Tip>
                    Спасибо, что пользуешься Рублоксом на стадии беты. Каждый
                    твой репорт приближает релиз — и платформа станет лучше для
                    всех.
                </Tip>
            </>
        ),
    },

    // ═══ 5. Скрипты и логика ═══
    {
        id: 'scripts',
        icon: 'code',
        color: '#16a34a',
        cover: 'scripts.jpg',
        title: 'Скрипты: оживи свою игру',
        summary: 'Как с помощью скриптов сделать так, чтобы в игре что-то происходило.',
        body: (
            <>
                <p>
                    Построить красивый мир — половина дела. Чтобы игра была
                    <b> игрой</b>, в ней должно что-то происходить: считаться
                    очки, появляться враги, открываться двери. За это отвечают
                    <b> скрипты</b>.
                </p>
                <H>Что такое скрипт</H>
                <p>
                    Скрипт — это небольшая программа на JavaScript. Её можно
                    повесить на весь мир или на конкретный объект. Через объект
                    {' '}<code>game</code> скрипт управляет игрой: игроком,
                    объектами, интерфейсом, звуками.
                </p>
                <H>Что умеют скрипты</H>
                <ul>
                    <li>реагировать на касание объекта, клик, нажатие клавиши;</li>
                    <li>двигать и создавать объекты, менять их цвет;</li>
                    <li>считать очки, таймер, здоровье игрока;</li>
                    <li>показывать текст и интерфейс, проигрывать звуки;</li>
                    <li>телепортировать игрока, спавнить врагов и эффекты.</li>
                </ul>
                <Tip>
                    Не нужно писать всё с нуля. Открой готовый шаблон
                    (Платформер, Шутер, Гонки) или игру-урок из вики —
                    посмотри, как там написаны скрипты, и переделай под себя.
                </Tip>
                <p>
                    Полный справочник по скриптам — что доступно через{' '}
                    <code>game.*</code>, какие есть события и команды — в
                    разделе <b>ВИКИ</b>.
                </p>
            </>
        ),
    },

    // ═══ 6. Публикация ═══
    {
        id: 'publish',
        icon: 'globeIcon',
        color: '#f59e0b',
        cover: 'publish.jpg',
        title: 'Как опубликовать игру',
        summary: 'Что происходит при публикации и как попасть в ленту Рублокса.',
        body: (
            <>
                <p>
                    Когда игра готова — её можно <b>опубликовать</b>, и она
                    появится в общей ленте Рублокса, где её увидят и запустят
                    другие игроки.
                </p>
                <H>Как опубликовать</H>
                <Step n="1">
                    Проверь игру: пройди её сам в плеере от начала до конца.
                </Step>
                <Step n="2">
                    В редакторе нажми <b>«Опубликовать»</b>.
                </Step>
                <Step n="3">
                    Скрипты автоматически проверятся на безопасность. Если всё
                    чисто — игра сразу попадёт в ленту.
                </Step>
                <H>Как игру заметят</H>
                <p>
                    Лента показывает игры по «рейтингу интереса»: чем больше
                    игроки лайкают игру и проводят в ней времени — тем выше она
                    в рекомендациях. Новым играм лента какое-то время даёт
                    «фору», чтобы их успели заметить.
                </p>
                <Tip>
                    Понятная цель, честная обложка, звук и проверенный геймплей
                    — вот что делает игру популярной. Подробно — в разделе
                    «Правила создания игр».
                </Tip>
                <Ok>
                    Опубликовал — не бросай: чини баги, добавляй уровни. Лента
                    любит игры, которые развиваются.
                </Ok>
            </>
        ),
    },
];

export const getArticle = (id) => ARTICLES.find((a) => a.id === id) || null;