/**
 * GdCoverArt — статичная страница с обложкой Geometry Dash 1280×720.
 * Маршрут: /gd/cover-art
 *
 * v2: композиция в SAFE-ZONE 960×720 (центральные 4:3). По краям только
 * декор-bleed, который не страшно отрезать. Это значит обложка одинаково
 * хорошо смотрится и в full-карточке (16:9), и в кропе ленты (4:3).
 *
 * SAFE-зона: x ∈ [160, 1120], y ∈ [0, 720] — отмечена тонкой dashed-рамкой
 * для удобства (не входит в скриншот если кадрировать ровно по 1280×720,
 * рамка внутри сцены и видна; чтобы убрать — закомментируй <SafeFrame/>).
 */
import React from 'react';

const W = 1280;
const H = 720;
const SAFE_X = 160;   // 960px центрального 4:3 окна
const SAFE_W = 960;

export default function GdCoverArt() {
    const [showGuide, setShowGuide] = React.useState(true);
    return (
        <div style={{
            minHeight: '100vh', background: '#000',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            padding: 20, fontFamily: 'system-ui, -apple-system, sans-serif',
        }}>
            <div style={{ color: '#888', fontSize: 14, marginBottom: 12, display: 'flex', gap: 16 }}>
                <span>Скриншот по рамке 1280×720. SAFE-зона 4:3 = центральные 960×720.</span>
                <button onClick={() => setShowGuide(!showGuide)}
                        style={{
                            padding: '4px 10px', background: '#333', color: '#fff',
                            border: '1px solid #555', borderRadius: 4, cursor: 'pointer',
                        }}>
                    {showGuide ? 'Скрыть гайды' : 'Показать гайды'}
                </button>
            </div>

            <div style={{
                position: 'relative',
                width: W, height: H,
                boxShadow: '0 0 0 2px #444, 0 30px 80px rgba(0,0,0,0.7)',
                overflow: 'hidden',
                borderRadius: 16,
            }}>
                <CoverContent />
                {showGuide && <SafeFrame />}
            </div>
        </div>
    );
}

function SafeFrame() {
    return (
        <div style={{
            position: 'absolute', top: 0, bottom: 0,
            left: SAFE_X, width: SAFE_W,
            border: '2px dashed rgba(255,255,255,0.4)',
            pointerEvents: 'none', zIndex: 100,
        }}>
            <div style={{
                position: 'absolute', top: 4, left: 4,
                color: 'rgba(255,255,255,0.5)', fontSize: 11, fontFamily: 'monospace',
            }}>
                SAFE 4:3 (960×720) — должно влезать в ленту
            </div>
        </div>
    );
}

function CoverContent() {
    return (
        <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(135deg, #0a1a3a 0%, #1a0a3a 50%, #3a0a2a 100%)',
            overflow: 'hidden',
        }}>
            {/* Слой 1: диагональные полосы фона */}
            <DiagonalStripes />

            {/* Слой 2: контурная сетка-перспектива (низ) */}
            <PerspectiveGrid />

            {/* Слой 3: парящие шипы — теперь bleed по краям, ключевые в SAFE */}
            <FloatingSpikes />

            {/* Слой 4: главный кубик-герой в SAFE-зоне слева */}
            <HeroCube />

            {/* Слой 5: заголовок и подпись по центру/справа в SAFE-зоне */}
            <TitleBlock />

            {/* Слой 6: иконки внизу — компактно в SAFE-зоне */}
            <BottomIcons />

            {/* Слой 7: лёгкая виньетка */}
            <div style={{
                position: 'absolute', inset: 0,
                background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%)',
                pointerEvents: 'none',
            }} />
        </div>
    );
}

function DiagonalStripes() {
    return (
        <svg width={W} height={H} style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
            <defs>
                <pattern id="stripes" width="60" height="60" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
                    <rect width="30" height="60" fill="#ffffff" />
                </pattern>
            </defs>
            <rect width={W} height={H} fill="url(#stripes)" />
        </svg>
    );
}

function PerspectiveGrid() {
    const lines = [];
    const horizon = H * 0.55;
    for (let i = 0; i < 12; i++) {
        const y = horizon + (i * i) * 4.5;
        if (y > H) break;
        lines.push(
            <line key={`h${i}`} x1={0} y1={y} x2={W} y2={y}
                  stroke="#44ccff" strokeWidth={1.2} opacity={0.35} />
        );
    }
    const cx = W / 2;
    for (let i = -12; i <= 12; i++) {
        const xBottom = cx + i * 110;
        lines.push(
            <line key={`v${i}`} x1={cx} y1={horizon} x2={xBottom} y2={H}
                  stroke="#44ccff" strokeWidth={1.2} opacity={0.35} />
        );
    }
    return (
        <svg width={W} height={H} style={{ position: 'absolute', inset: 0 }}>
            {lines}
        </svg>
    );
}

function FloatingSpikes() {
    // Декор — допустимо обрезать. Ключевые шипы внутри SAFE-зоны.
    const spikes = [
        // BLEED (за SAFE-зоной, обрежется в ленте — это ок)
        { x: 20,   y: 90,  size: 70,  rot: -15, color: '#ff3344' },
        { x: 1190, y: 110, size: 60,  rot: 20,  color: '#ff3344' },
        { x: 1200, y: 540, size: 80,  rot: 10,  color: '#ff3344' },
        { x: 30,   y: 380, size: 50,  rot: -25, color: '#ff8833' },
        // SAFE (внутри центральных 960px — будут видны и в ленте)
        { x: 220,  y: 60,  size: 50,  rot: -10, color: '#ff8833' },
        { x: 1020, y: 50,  size: 45,  rot: 30,  color: '#ff8833' },
        { x: 240,  y: 600, size: 60,  rot: 5,   color: '#ff3344' },
        { x: 1030, y: 600, size: 60,  rot: -8,  color: '#ff3344' },
    ];
    return (
        <>
            {spikes.map((s, i) => (
                <svg key={i} width={s.size} height={s.size}
                     style={{
                         position: 'absolute', left: s.x, top: s.y,
                         transform: `rotate(${s.rot}deg)`,
                         filter: `drop-shadow(0 0 12px ${s.color})`,
                     }}>
                    <polygon points={`${s.size/2},4 ${s.size-4},${s.size-4} 4,${s.size-4}`}
                             fill={s.color} stroke="#fff" strokeWidth={2} />
                </svg>
            ))}
        </>
    );
}

function HeroCube() {
    // Кубик в SAFE-зоне слева: cx=340 (SAFE_X+180)
    const cx = 340;
    const cy = 380;
    const size = 180;
    return (
        <div style={{
            position: 'absolute', left: cx - size / 2, top: cy - size / 2,
            width: size, height: size,
            transform: 'rotate(-12deg)',
            filter: 'drop-shadow(0 0 40px #22ff66) drop-shadow(0 0 20px #44ccff)',
        }}>
            <div style={{
                width: '100%', height: '100%',
                background: 'linear-gradient(135deg, #22ff66 0%, #44ccff 100%)',
                borderRadius: 22,
                border: '6px solid #fff',
                position: 'relative',
                boxShadow: 'inset 0 -20px 40px rgba(0,0,0,0.3), inset 0 20px 40px rgba(255,255,255,0.2)',
            }}>
                <div style={{
                    position: 'absolute', top: '30%', left: '25%',
                    width: 22, height: 22, background: '#0a1428', borderRadius: 4,
                }} />
                <div style={{
                    position: 'absolute', top: '30%', right: '25%',
                    width: 22, height: 22, background: '#0a1428', borderRadius: 4,
                }} />
                <div style={{
                    position: 'absolute', bottom: '22%', left: '28%',
                    width: '44%', height: 12, background: '#0a1428', borderRadius: 8,
                }} />
            </div>
            {/* Трейл за кубиком — короче, чтобы не выйти за SAFE */}
            <div style={{
                position: 'absolute', top: '40%', left: -140,
                width: 160, height: 26,
                background: 'linear-gradient(90deg, transparent 0%, #22ff66 60%, #44ccff 100%)',
                opacity: 0.7, borderRadius: 13,
                filter: 'blur(8px)',
            }} />
        </div>
    );
}

function TitleBlock() {
    // Заголовок в правой части SAFE-зоны.
    // SAFE правый край = 1120. Делаем блок right=180 (от viewport) → правый край блока = 1100.
    return (
        <div style={{
            position: 'absolute', right: 180, top: 110,
            width: 540,
            textAlign: 'right',
            color: '#fff',
        }}>
            <div style={{
                fontSize: 26, fontWeight: 800, letterSpacing: 6,
                color: '#44ccff',
                textShadow: '0 0 14px #44ccff, 0 0 28px #44ccff',
                marginBottom: 6,
            }}>
                MINECRAFTIA  ·  АРКАДА
            </div>
            <div style={{
                fontSize: 92, fontWeight: 900, letterSpacing: 3,
                background: 'linear-gradient(180deg, #ffffff 0%, #22ff66 60%, #44ccff 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
                lineHeight: 0.95,
                textShadow: '0 6px 0 rgba(0,0,0,0.4)',
                filter: 'drop-shadow(0 0 20px rgba(34,255,102,0.6))',
                fontFamily: '"Impact","Oswald","Arial Black",sans-serif',
            }}>
                GEOMETRY
            </div>
            <div style={{
                fontSize: 92, fontWeight: 900, letterSpacing: 3,
                background: 'linear-gradient(180deg, #ffe44a 0%, #ff8833 60%, #ff44aa 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                backgroundClip: 'text',
                lineHeight: 0.95,
                textShadow: '0 6px 0 rgba(0,0,0,0.4)',
                filter: 'drop-shadow(0 0 20px rgba(255,136,51,0.6))',
                fontFamily: '"Impact","Oswald","Arial Black",sans-serif',
            }}>
                DASH
            </div>
            <div style={{
                fontSize: 22, fontWeight: 700, color: '#cdd4e0',
                marginTop: 14, letterSpacing: 1.5,
                textShadow: '0 2px 8px rgba(0,0,0,0.8)',
            }}>
                20 УРОВНЕЙ · 2 ЭПОХИ · НЕОН-АРКАДА
            </div>
        </div>
    );
}

function BottomIcons() {
    // Центрировано по горизонтали в SAFE-зоне.
    const items = [
        { color: '#ffe44a', label: '★', sub: 'Звёзды' },
        { color: '#44ccff', label: '◆', sub: 'Алмазы' },
        { color: '#ffe44a', label: '$', sub: 'Монеты' },
        { color: '#ff8833', label: '⇧', sub: 'Корабль' },
    ];
    return (
        <div style={{
            position: 'absolute', bottom: 30,
            left: SAFE_X + 30,
            right: W - (SAFE_X + SAFE_W) + 30,
            display: 'flex', gap: 16, justifyContent: 'center',
        }}>
            {items.map((it, i) => (
                <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 8,
                    background: 'rgba(0,0,0,0.55)',
                    border: `2px solid ${it.color}`,
                    borderRadius: 12, padding: '8px 14px',
                    boxShadow: `0 0 18px ${it.color}55`,
                }}>
                    <div style={{
                        fontSize: 26, color: it.color, fontWeight: 900,
                        textShadow: `0 0 10px ${it.color}`,
                        lineHeight: 1,
                    }}>
                        {it.label}
                    </div>
                    <div style={{ fontSize: 15, color: '#fff', fontWeight: 700, letterSpacing: 1 }}>
                        {it.sub}
                    </div>
                </div>
            ))}
        </div>
    );
}
