<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Realms Network</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Ubuntu:wght@700&display=swap');

        :root {
            --mc-green: #55ff55;
            --mc-blue: #5c7cff;
            --portal-purple: #a800ff; /* Culoarea particulelor de portal */
            --bg-dark: #0f0f0f;
            --discord-color: #5865F2;
            --transition-smooth: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-dark);
            color: #ffffff;
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        /* --- BACKGROUND & PORTAL EFFECT --- */
        .bg-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
            z-index: -2;
        }

        .portal-particles {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            pointer-events: none;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            background: var(--portal-purple);
            width: 6px;
            height: 6px;
            border-radius: 1px;
            box-shadow: 0 0 10px var(--portal-purple), 0 0 20px var(--portal-purple);
            opacity: 0;
            animation: portalMove 4s linear infinite;
        }

        @keyframes portalMove {
            0% { transform: translateY(100vh) scale(0) rotate(0deg); opacity: 0; }
            20% { opacity: 0.8; }
            80% { opacity: 0.6; }
            100% { transform: translateY(-10vh) scale(1.5) rotate(360deg); opacity: 0; }
        }

        /* --- HERO SECTION --- */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            position: relative;
        }

        .brand-unit {
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: floatGroup 4s ease-in-out infinite;
            margin-bottom: 20px;
            position: relative;
        }

        .server-logo {
            width: 450px;
            max-width: 90%;
            height: auto;
            display: block;
            filter: drop-shadow(0 0 25px rgba(92, 124, 255, 0.2));
            z-index: 2;
        }

        .est-text {
            color: #555;
            letter-spacing: 10px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-top: -150px; 
            padding-left: 10px;
            line-height: 1;
            z-index: 1;
            position: relative;
        }

        @keyframes floatGroup { 
            0%, 100% { transform: translateY(0); } 
            50% { transform: translateY(-15px); } 
        }

        /* --- FANCY IP BOX --- */
        .ip-container-wrapper {
            margin: 20px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .ip-container {
            position: relative;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 2px solid #222;
            padding: 25px 70px;
            cursor: pointer;
            overflow: hidden;
            transition: var(--transition-smooth);
        }

        .ip-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(92, 124, 255, 0.1), transparent);
            transition: 0.6s ease-in-out;
        }

        .ip-container:hover::before { left: 100%; }

        .ip-container:hover {
            transform: scale(1.03);
            border-color: var(--mc-blue);
            box-shadow: 0 0 30px rgba(92, 124, 255, 0.2);
            background: rgba(92, 124, 255, 0.05);
        }

        .ip-text { 
            font-size: 2.4rem; 
            font-weight: 700; 
            display: block; 
            color: #fff; 
            letter-spacing: 3px;
        }

        .copy-hint {
            font-size: 0.75rem;
            color: #444;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 700;
            transition: 0.3s;
        }

        .ip-container:hover + .copy-hint {
            color: var(--mc-blue);
            letter-spacing: 4px;
        }

        #player-count { 
            font-size: 1rem; 
            color: #888; 
            text-transform: uppercase;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 5px;
        }

        .status-dot {
            width: 10px; height: 10px;
            background-color: var(--mc-green);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--mc-green);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* --- FANCY BUTTONS --- */
        .btn-group {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .nav-btn {
            position: relative;
            padding: 18px 35px;
            text-decoration: none;
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 1px;
            background: #111;
            border: 2px solid #222;
            overflow: hidden;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            z-index: 1;
        }

        .nav-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: 0.5s;
            z-index: -1;
        }

        .nav-btn:hover::before { left: 100%; }

        .nav-btn:hover {
            transform: translateY(-5px);
            border-color: var(--mc-blue);
            box-shadow: 0 10px 20px rgba(92, 124, 255, 0.2);
        }

        .nav-btn i { color: var(--mc-blue); transition: 0.3s; }
        .nav-btn:hover i { transform: scale(1.2); color: #fff; }

        .nav-btn.store:hover { border-color: var(--mc-green); box-shadow: 0 10px 20px rgba(85, 255, 85, 0.15); }
        .nav-btn.store i { color: var(--mc-green); }

        /* --- COMMUNITY SECTION --- */
        .community-section {
            padding: 100px 10%;
            border-top: 5px solid #151515;
            position: relative;
            z-index: 1;
        }

        .community-grid {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 50px;
            align-items: center;
        }

        .about-text h2 {
            color: var(--mc-blue);
            font-size: 2rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .about-text p { color: #aaa; line-height: 1.8; font-size: 1.1rem; }

        .discord-card {
            background: linear-gradient(135deg, #5865F2 0%, #313338 100%);
            padding: 40px;
            border: 4px solid #000;
            text-align: center;
            transition: var(--transition-smooth);
        }

        .discord-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(88, 101, 242, 0.3); }
        .discord-card i { font-size: 4rem; margin-bottom: 20px; }
        .discord-link {
            display: inline-block;
            margin-top: 20px;
            background: #fff;
            color: #5865F2;
            padding: 12px 30px;
            text-decoration: none;
            font-weight: 700;
            text-transform: uppercase;
            transition: 0.3s;
        }

        .reveal { opacity: 0; transform: translateY(50px); transition: 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* --- NEW CUSTOM FOOTER STYLES --- */
        .custom-footer-container {
            max-width: 1200px; /* Aliniat la dimensiunea standard a forumului pe PC */
            margin: 60px auto 0 auto;
            padding: 40px 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            box-sizing: border-box;
            position: relative;
            z-index: 1;
        }

        .custom-footer-row {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 40px;
        }

        .custom-footer-col {
            flex: 1;
            min-width: 200px;
        }

        .col-brand {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .col-brand .footer-logo img {
            width: 50px;
            height: auto;
            filter: grayscale(100%);
            opacity: 0.5;
            transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
        }

        .col-brand .footer-logo img:hover {
            filter: grayscale(0%);
            opacity: 0.9;
            transform: scale(1.1);
        }

        .col-brand .footer-copyright-text {
            font-weight: bold;
            color: #aeaeae;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .col-brand .footer-description {
            color: #626262;
            font-size: 12px;
            line-height: 1.6;
        }

        .footer-socials {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .footer-socials .social-icon {
            color: #626262;
            font-size: 18px;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .footer-socials .social-icon:hover {
            color: var(--mc-blue);
            transform: translateY(-3px);
        }

        .col-links .footer-links-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .col-links .footer-links-list li a {
            color: #8c8c8c;
            font-size: 14px;
            text-decoration: none;
            transition: color 0.2s ease, padding 0.2s ease;
            font-weight: 500;
        }

        .col-links .footer-links-list li a:hover {
            color: var(--mc-blue);
            padding-left: 4px;
        }

        /* --- MODAL --- */
        .modal-overlay { 
            position: fixed; 
            top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.9); 
            display: none; 
            align-items: center; 
            justify-content: center; 
            z-index: 1000;
            backdrop-filter: blur(8px);
        }

        .modal-content { 
            background: #111; 
            padding: 40px; 
            border: 4px solid #000; 
            text-align: center; 
            transform: translateY(20px);
            opacity: 0;
            transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
            max-width: 350px;
            width: 90%;
        }

        .modal-overlay.active { display: flex; }
        .modal-overlay.active .modal-content { transform: translateY(0); opacity: 1; }

        .checkmark-wrapper { width: 80px; height: 80px; margin: 0 auto 20px; }
        .checkmark { width: 100%; height: 100%; border-radius: 50%; stroke-width: 4; stroke: var(--mc-green); fill: none; }
        .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; animation: stroke 0.6s forwards; }
        .checkmark__check { stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s 0.8s forwards; }

        @keyframes stroke { 100% { stroke-dashoffset: 0; } }

        @media (max-width: 768px) {
            .ip-text { font-size: 1.8rem; }
            .ip-container { padding: 20px 40px; }
            .btn-group { flex-direction: column; width: 100%; padding: 0 20px; }
            .nav-btn { justify-content: center; }
            .community-grid { grid-template-columns: 1fr; text-align: center; }
            .custom-footer-row { flex-direction: column; text-align: center; gap: 30px; }
            .col-brand { align-items: center; }
            .footer-socials { justify-content: center; }
            .col-links .footer-links-list li a:hover { padding-left: 0; }
        }
    </style>
</head>
<body>
    <div class="bg-overlay"></div>
    <div class="portal-particles" id="portal-particles"></div>

    <section class="hero">
        <div class="brand-unit">
            <img src="https://realms.ro/images/realmslogo.png" alt="Realms Logo" class="server-logo">
            <p class="est-text">EST. 2026</p>
        </div>
        
        <div class="ip-container-wrapper">
            <div class="ip-container" onclick="copyToClipboard()">
                <span class="ip-text">MC.REALMS.RO</span>
                <span id="player-count"><span class="status-dot"></span> SE ÎNCARCĂ...</span>
            </div>
            <span class="copy-hint">APASĂ PENTRU A COPIA IP-UL</span>
        </div>

        <div class="btn-group">
            <a href="#" class="nav-btn store"><i class="fas fa-shopping-cart"></i> MAGAZIN</a>
            <a href="https://forum.realms.ro/" class="nav-btn"><i class="fas fa-comments"></i> FORUM</a>
            <a href="#" class="nav-btn"><i class="fas fa-blog"></i> BLOG</a>
            <a href="https://sanctiuni.realms.ro/" class="nav-btn"><i class="fas fa-gavel"></i> LISTĂ SANCȚIUNI</a>
        </div>
    </section>

    <section class="community-section">
        <div class="community-grid">
            <div class="about-text reveal">
                <h2><i class="fas fa-users"></i> DESPRE NOI</h2>
                <p>Realms Network s-a născut din dorința de a oferi o experiență Minecraft premium în România.</p>
                <p>Misiunea noastră este să construim un spațiu sigur și competitiv pentru toți jucătorii.</p>
            </div>
            <div class="discord-card reveal">
                <i class="fab fa-discord"></i>
                <h3>HAIDE PE DISCORD!</h3>
                <p id="discord-status" style="font-weight: bold; text-transform: uppercase;">SE ÎNCARCĂ MEMBRII...</p>
                <a href="https://discord.gg/axJm5csmEr" target="_blank" class="discord-link">INSTANT JOIN</a>
            </div>
        </div>
    </section>

    <footer class="custom-footer-container">
        <div class="custom-footer-row">
            
            <div class="custom-footer-col col-brand">
                <div class="footer-logo">
                    <img src="https://realms.ro/images/logo.PNG" alt="Logo">
                </div>
                <div class="footer-copyright-text">
                    2026 &copy; Realms Network.
                </div>
                <div class="footer-description">
                    Realms Network este o rețea multiplayer pentru Minecraft.<br>
                    Nu este un serviciu oficial Minecraft și nu are nicio asociere cu Mojang.
                </div>
                <div class="footer-socials">
                    <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-icon"><i class="fab fa-discord"></i></a>
                </div>
            </div>

            <div class="custom-footer-col col-links">
                <ul class="footer-links-list">
                    <li><a href="#">Rules</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Updates</a></li>
                    <li><a href="#">Public API</a></li>
                    <li><a href="#">Bug Bounty</a></li>
                    <li><a href="#">Suggestions</a></li>
                </ul>
            </div>

            <div class="custom-footer-col col-links">
                <ul class="footer-links-list">
                    <li><a href="#">Staff</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Wiki</a></li>
                    <li><a href="#">Play</a></li>
                    <li><a href="#">Stats</a></li>
                    <li><a href="#">Bans</a></li>
                </ul>
            </div>

        </div>
    </footer>

    <div class="modal-overlay" id="modal">
        <div class="modal-content">
            <div class="checkmark-wrapper">
                <svg class="checkmark" viewBox="0 0 52 52">
                    <circle class="checkmark__circle" cx="26" cy="26" r="25" />
                    <path class="checkmark__check" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                </svg>
            </div>
            <h2 style="color: var(--mc-green); margin-top: 0;">IP COPIAT!</h2>
            <button class="nav-btn" style="width: 100%; justify-content: center; margin-top: 10px;" onclick="closeModal()">SĂ JUCĂM!</button>
        </div>
    </div>

    <script>
        // --- GENERARE PARTICULE PORTAL ---
        function createParticle() {
            const container = document.getElementById('portal-particles');
            const particle = document.createElement('span');
            particle.classList.add('particle');
            
            // Poziție random pe orizontală
            const posX = Math.floor(Math.random() * window.innerWidth);
            const duration = Math.random() * 3 + 2; // Între 2 și 5 secunde
            const size = Math.random() * 6 + 2; // Între 2px și 8px
            
            particle.style.left = posX + 'px';
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            particle.style.animationDuration = duration + 's';
            
            container.appendChild(particle);
            
            // Ștergem particula după ce termină animația pentru a nu încărca browser-ul
            setTimeout(() => {
                particle.remove();
            }, duration * 1000);
        }

        // Creăm o particulă nouă la fiecare 150ms
        setInterval(createParticle, 150);

        function copyToClipboard() {
            navigator.clipboard.writeText("MC.REALMS.RO").then(() => {
                const modal = document.getElementById('modal');
                modal.style.display = 'flex';
                setTimeout(() => modal.classList.add('active'), 10);
            });
        }

        function closeModal() {
            const modal = document.getElementById('modal');
            modal.classList.remove('active');
            setTimeout(() => modal.style.display = 'none', 300);
        }

        function reveal() {
            const reveals = document.querySelectorAll(".reveal");
            reveals.forEach(el => {
                if (el.getBoundingClientRect().top < window.innerHeight - 50) {
                    el.classList.add("active");
                }
            });
        }

        window.addEventListener("scroll", reveal);
        window.addEventListener("load", reveal);

        // --- ACTUALIZARE JUCĂTORI MINECRAFT ---
        async function updatePlayers() {
            const countEl = document.getElementById('player-count');
            try {
                const res = await fetch('https://api.mcsrvstat.us/2/mc.realms.ro?t=' + Math.random());
                const data = await res.json();
                
                if (data.online === true) {
                    var online = (data.players && data.players.online !== undefined) ? data.players.online : 0;
                    countEl.innerHTML = '<span class="status-dot"></span> ' + online + ' JUCĂTORI ONLINE';
                } else {
                    countEl.innerHTML = '<span class="status-dot" style="background:#f55; box-shadow: 0 0 10px #f55;"></span> SERVER OFFLINE';
                }
            } catch (e) { 
                countEl.innerHTML = "EROARE CONEXIUNE"; 
            }
        }

        // --- ACTUALIZARE MEMBRI DISCORD ---
        async function updateDiscord() {
            const discordEl = document.getElementById('discord-status');
            const serverID = "1442947085665046721"; // Server ID-ul tău
            try {
                const res = await fetch('https://discord.com/api/guilds/' + serverID + '/widget.json');
                const data = await res.json();
                
                if (data.presence_count !== undefined) {
                    discordEl.innerHTML = data.presence_count + ' MEMBRII ONLINE';
                } else {
                    discordEl.innerHTML = 'COMUNITATE ACTIVĂ';
                }
            } catch (e) {
                discordEl.innerHTML = 'HAIDE ÎN COMUNITATE!';
            }
        }
        
        updatePlayers();
        updateDiscord();
        setInterval(updatePlayers, 30000);
        setInterval(updateDiscord, 60000);
    </script>
</body>
</html>