/**
 * GdRules — страница правил Geometry Dash.
 * Маршрут: /gd/rules
 */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
    IconGamepad, IconArrowLeft, IconStar, IconDiamond, IconCoin, IconLock,
    IconBoss, IconTree, IconMountain, IconPortal, IconSpring, IconSpeedpad,
    IconSpike, IconCube, IconShip, IconFinish, IconPartyPopper, IconBook,
} from './GdIcons';

export default function GdRules() {
    const navigate = useNavigate();
    return (
        <div style={pageStyle}>
            <Header onBack={() => navigate('/gd')} />

            <Section title="Что это за игра?" icon={<IconGamepad size={28} color="#22ff66" />}>
                <p>
                    <b>Geometry Dash</b> — динамичный платформер, где ты управляешь кубиком,
                    бегущим вправо. Твоя задача — добежать до финиша, перепрыгивая препятствия,
                    собирая монеты и алмазы. Пробел — прыжок.
                </p>
            </Section>

            <Section title="Уровни и эпохи" icon={<IconBook size={24} color="#88ccff" />}>
                <p>
                    Игра разделена на <b>эпохи</b> по 10 уровней каждая. Каждая эпоха — свой
                    биом и сложность:
                </p>
                <ul>
                    <li><IconTree size={18} /> &nbsp;<b>Эпоха I — Лес</b> (L1–L10) — учимся прыгать, знакомимся с пружинами и ускорителями</li>
                    <li><IconMountain size={18} /> &nbsp;<b>Эпоха II — Горы</b> (L11–L20) — пещеры с порталами, режим корабля, ледяные шахты</li>
                </ul>
                <p>
                    <IconLock size={18} color="#888" /> Каждый следующий уровень открывается
                    только после прохождения предыдущего. Босс эпохи (L10, L20, ...) — длинный
                    уровень с финальным испытанием.
                </p>
            </Section>

            <Section title="Игровые механики" icon={<IconCube size={24} color="#ff8833" />}>
                <Mechanic icon={<IconSpike color="#ff3344" />} title="Шипы">
                    Касание — мгновенная смерть. Бывают на полу, потолке и на платформах.
                </Mechanic>
                <Mechanic icon={<IconSpring color="#ff8833" />} title="Пружины (трамплины)">
                    Прыгая на них, ты получаешь импульс вверх — выше обычного прыжка.
                </Mechanic>
                <Mechanic icon={<IconSpeedpad color="#33aaff" />} title="Ускорители">
                    Дают ускорение по горизонтали на несколько секунд. Используй для перепрыгивания
                    больших пропастей.
                </Mechanic>
                <Mechanic icon={<IconPortal color="#ff8833" />} title="Порталы">
                    Меняют твой <b>гейммод</b>. Сейчас доступны два:
                    <ul style={{ marginTop: 6, marginBottom: 0 }}>
                        <li><IconCube size={16} /> &nbsp;<b>Куб</b> — обычный режим: Пробел = прыжок</li>
                        <li><IconShip size={16} /> &nbsp;<b>Корабль</b> — удержание Пробела даёт тягу вверх, отпустил = плавно падает. Используется в пещерах эпохи II.</li>
                    </ul>
                </Mechanic>
                <Mechanic icon={<IconFinish color="#ffe44a" />} title="Финиш">
                    Жёлтая арка в конце уровня. Касание = победа.
                </Mechanic>
            </Section>

            <Section title="Награды" icon={<IconPartyPopper size={26} color="#ffe44a" />}>
                <Reward icon={<IconStar size={22} color="#ffe44a" />} title="Звёзды">
                    Зарабатываются за пройденные уровни и собранные монеты. <b>+1 звезда</b> за
                    каждое прохождение и <b>+1 звезда</b> за каждую из 3 монет на уровне.
                    Тратятся в магазине на скины, цвета и трейлы.
                </Reward>
                <Reward icon={<IconCoin size={22} color="#ffe44a" />} title="Монеты (на уровне)">
                    На каждом уровне есть <b>3 жёлтые монеты</b>, разбросанные в труднодоступных
                    местах. Собирать необязательно для прохождения, но это даёт звёзды для магазина.
                </Reward>
                <Reward icon={<IconDiamond size={22} color="#44ccff" />} title="Алмазы">
                    Голубые кристаллы в уровнях — премиум-валюта твоего профиля. В эпохе I по
                    1 алмазу на уровень (L1–L10), в эпохе II по 2 алмаза (L11–L20). Каждый алмаз
                    можно собрать только один раз — после смерти или повторного захода он не
                    появится снова.
                </Reward>
                <Reward icon={<IconBoss size={22} color="#ff5566" />} title="Рейтинг">
                    За каждое <b>первое прохождение</b> уровня:
                    <ul style={{ marginTop: 6, marginBottom: 0 }}>
                        <li>Эпоха I (L1–L10): <b>+20 рейтинга</b></li>
                        <li>Эпоха II (L11–L20): <b>+30 рейтинга</b></li>
                    </ul>
                    Повторное прохождение рейтинг не приносит — каждый уровень даёт его только
                    один раз. Рейтинг — общий по профилю, виден в таблице лидеров.
                </Reward>
            </Section>

            <Section title="Скины и магазин" icon={<IconCube size={24} color="#22ff66" />}>
                <p>
                    В магазине можно купить за <b>звёзды</b>:
                </p>
                <ul>
                    <li><b>Скины куба</b> — внешний вид персонажа (улыбка, череп, звезда и др.)</li>
                    <li><b>Цвета</b> — основной цвет кубика</li>
                    <li><b>Трейлы</b> — след за кубиком при прыжке</li>
                </ul>
                <p>
                    Выбранный скин применяется во всех уровнях — и в эпохе I, и в эпохе II.
                </p>
            </Section>

            <Section title="Советы" icon={<IconPartyPopper size={22} color="#22ff66" />}>
                <ul>
                    <li>Если шипы идут плотной серией — используй пружину рядом, чтобы перелететь</li>
                    <li>В пещерах не бойся корабля — гравитация в нём плавная, легко балансировать</li>
                    <li>Алмазы часто стоят в воздухе — иногда нужен прыжок с пружины, чтобы достать</li>
                    <li>После смерти ты возвращаешься в начало уровня. Это нормально, тренируйся!</li>
                </ul>
            </Section>

            <div style={{ height: 40 }} />
        </div>
    );
}

function Header({ onBack }) {
    return (
        <div style={{
            display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
            marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid #2a3a5a',
        }}>
            <button onClick={onBack} style={btnSecondary}>
                <IconArrowLeft size={18} color="#cdd4e0" />&nbsp; Назад
            </button>
            <h1 style={{
                margin: 0, fontSize: 32, color: '#88ccff', flex: 1, fontWeight: 800,
                display: 'flex', alignItems: 'center', gap: 12,
            }}>
                <IconBook size={32} color="#88ccff" />
                Правила игры
            </h1>
        </div>
    );
}

function Section({ title, icon, children }) {
    return (
        <div style={{
            background: '#0e1525', borderRadius: 12, padding: '18px 22px',
            marginBottom: 18, border: '1px solid #2a3a5a',
        }}>
            <h2 style={{
                margin: 0, fontSize: 22, color: '#fff', fontWeight: 700,
                marginBottom: 12, display: 'flex', alignItems: 'center', gap: 10,
            }}>
                {icon}{title}
            </h2>
            <div style={{ color: '#cdd4e0', fontSize: 15, lineHeight: 1.6 }}>
                {children}
            </div>
        </div>
    );
}

function Mechanic({ icon, title, children }) {
    return (
        <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
            padding: '10px 0', borderBottom: '1px dashed #2a3a5a',
        }}>
            <div style={{ flex: '0 0 32px', paddingTop: 2 }}>{icon}</div>
            <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, color: '#fff', marginBottom: 3 }}>{title}</div>
                <div style={{ color: '#aab' }}>{children}</div>
            </div>
        </div>
    );
}

function Reward({ icon, title, children }) {
    return (
        <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
            padding: '12px 14px', marginBottom: 8,
            background: '#161e30', borderRadius: 8,
        }}>
            <div style={{ flex: '0 0 32px', paddingTop: 2 }}>{icon}</div>
            <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, color: '#fff', marginBottom: 3 }}>{title}</div>
                <div style={{ color: '#cdd4e0' }}>{children}</div>
            </div>
        </div>
    );
}

const pageStyle = {
    minHeight: '100vh',
    background: 'linear-gradient(180deg, #0a1428 0%, #1a2a4a 100%)',
    color: '#fff', padding: '24px 28px',
    fontFamily: 'system-ui, -apple-system, sans-serif',
    maxWidth: 900, margin: '0 auto',
};

const btnSecondary = {
    padding: '10px 18px', background: '#2a3146', color: '#cdd4e0',
    border: 'none', borderRadius: 8, cursor: 'pointer', fontWeight: 600, fontSize: 14,
    display: 'flex', alignItems: 'center', gap: 4,
};
