<?php
include 'config.php';
checkLogin(); 

$page_title = "Escobar Ecosystem";
$active_page = "about";
include 'layout.php';
?>

<!-- Google Font Futuristic -->
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&display=swap" rel="stylesheet">

<style>
    :root {
        --glass: rgba(30, 41, 59, 0.7);
        --border: rgba(255, 255, 255, 0.08);
        --cyan: #06b6d4;
        --purple: #8b5cf6;
        --pink: #ec4899;
        --orange: #f97316;
        --indigo: #6366f1;
        --green: #22c55e;
    }

    .about-header {
        text-align: center;
        margin-bottom: 50px;
        animation: fadeInDown 0.8s ease;
    }
    .about-header h2 {
        font-family: 'Chakra Petch', sans-serif;
        font-size: 2.5rem;
        background: linear-gradient(to right, var(--cyan), var(--purple), var(--pink));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 10px;
    }
    .about-header p { color: #94a3b8; font-size: 1.1rem; }

    /* Grid System */
    .eco-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 25px;
        perspective: 1000px;
    }

    /* Card Design */
    .eco-card {
        background: var(--glass);
        backdrop-filter: blur(15px);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 35px 25px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .eco-card:hover {
        transform: translateY(-12px);
        border-color: rgba(255,255,255,0.2);
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    /* Floating Icons */
    .eco-icon {
        width: 70px; height: 70px;
        border-radius: 18px;
        display: flex; align-items: center; justify-content: center;
        font-size: 2.5rem;
        margin-bottom: 20px;
        position: relative; z-index: 2;
    }

    .eco-card.game .eco-icon { background: rgba(6, 182, 212, 0.1); color: var(--cyan); }
    .eco-card.rental .eco-icon { background: rgba(139, 92, 246, 0.1); color: var(--purple); }
    .eco-card.digital .eco-icon { background: rgba(236, 72, 153, 0.1); color: var(--pink); }
    .eco-card.billiard .eco-icon { background: rgba(249, 115, 22, 0.1); color: var(--orange); }
    .eco-card.billing .eco-icon { background: rgba(99, 102, 241, 0.1); color: var(--indigo); }

    .eco-card h3 {
        font-family: 'Chakra Petch', sans-serif;
        color: #fff; font-size: 1.3rem; margin-bottom: 12px;
    }

    .eco-card p {
        color: #94a3b8; font-size: 0.9rem; line-height: 1.6;
        margin-bottom: 25px; flex-grow: 1;
    }

    /* Action Button */
    .eco-link {
        text-decoration: none; padding: 12px 20px; border-radius: 12px;
        font-weight: 800; font-size: 0.8rem; text-transform: uppercase;
        letter-spacing: 1px; transition: 0.3s; width: 100%;
    }

    .game .eco-link { background: var(--cyan); color: #000; }
    .rental .eco-link { background: var(--purple); color: #fff; }
    .digital .eco-link { background: var(--pink); color: #fff; }
    .billiard .eco-link { background: var(--orange); color: #fff; }
    .billing .eco-link { background: var(--indigo); color: #fff; }

    .eco-link:hover { transform: scale(1.03); filter: brightness(1.1); }

    /* Decorative Background Circle */
    .circle-deco {
        position: absolute; width: 120px; height: 120px; border-radius: 50%;
        filter: blur(40px); opacity: 0.1; top: -40px; right: -40px; z-index: 1;
    }
    .game .circle-deco { background: var(--cyan); }
    .rental .circle-deco { background: var(--purple); }
    .digital .circle-deco { background: var(--pink); }
    .billiard .circle-deco { background: var(--orange); }
    .billing .circle-deco { background: var(--indigo); }

    /* Contact Banner */
    .contact-banner {
        margin-top: 50px;
        background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), rgba(6, 182, 212, 0.1));
        border: 1px solid rgba(34, 197, 94, 0.2);
        border-radius: 24px;
        padding: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }
    .contact-info h4 { color: #fff; margin-bottom: 5px; font-size: 1.2rem; }
    .contact-info p { color: #94a3b8; font-size: 0.9rem; }
    
    .btn-wa {
        background: #22c55e; color: #fff; text-decoration: none;
        padding: 15px 30px; border-radius: 15px; font-weight: 800;
        display: flex; align-items: center; gap: 10px; transition: 0.3s;
    }
    .btn-wa:hover { background: #16a34a; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3); }

    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>

<div class="about-container">
    <div class="about-header">
        <h2>ESCOBAR ECOSYSTEM</h2>
        <p>Your Ultimate Gaming & Management Solutions Partner</p>
    </div>

    <div class="eco-grid">
        <!-- 1. DOWNLOAD GAME -->
        <div class="eco-card game">
            <div class="circle-deco"></div>
            <div class="eco-icon"><i class='bx bxs-download'></i></div>
            <h3>Escobar Game</h3>
            <p>Pusat download game terlengkap. Akses ribuan koleksi game terbaru dengan server berkecepatan tinggi.</p>
            <a href="https://escobargame.fun" target="_blank" class="eco-link">Download Game</a>
        </div>

        <!-- 2. BILLIARD SYSTEM -->
        <div class="eco-card billiard">
            <div class="circle-deco"></div>
            <div class="eco-icon"><i class='bx bx-target-lock'></i></div>
            <h3>Escobar Billiar</h3>
            <p>Sistem manajemen meja billiar modern. Kendali lampu otomatis dan billing akurat untuk usaha billiar Anda.</p>
            <a href="https://escobargame.fun/escobarbilliar/" target="_blank" class="eco-link">Cek Billing Billiar</a>
        </div>

        <!-- 3. RENTAL PS -->
        <div class="eco-card rental">
            <div class="circle-deco"></div>
            <div class="eco-icon"><i class='bx bxs-joystick'></i></div>
            <h3>Sewa Konsol</h3>
            <p>Layanan sewa PlayStation profesional. Unit berkualitas tinggi siap diantar ke lokasi Anda kapan saja.</p>
            <a href="https://sewakonsol.com" target="_blank" class="eco-link">Sewa Sekarang</a>
        </div>

        <!-- 4. PEMBELIAN APLIKASI -->
        <div class="eco-card billing">
            <div class="circle-deco"></div>
            <div class="eco-icon"><i class='bx bxs-cart-add'></i></div>
            <h3>Escobar Billing</h3>
            <p>Miliki lisensi aplikasi billing PlayStation terbaik untuk rental Anda. Tingkatkan kontrol dan cegah kecurangan.</p>
            <a href="https://escobargame.fun/escobarbilling/" target="_blank" class="eco-link">Beli Aplikasi</a>
        </div>

        <!-- 5. CUSTOM DEVELOPMENT -->
        <div class="eco-card digital">
            <div class="circle-deco"></div>
            <div class="eco-icon"><i class='bx bxs-terminal'></i></div>
            <h3>Esco Digital</h3>
            <p>Butuh aplikasi custom atau software khusus bisnis? Tim developer kami siap membantu mewujudkan ide digital Anda.</p>
            <a href="https://escobargame.fun/escodigital/" target="_blank" class="eco-link">Custom Project</a>
        </div>
    </div>

    <!-- CONTACT BANNER -->
    <div class="contact-banner">
        <div class="contact-info">
            <h4>Butuh Bantuan atau Kerjasama?</h4>
            <p>Hubungi tim support kami langsung melalui WhatsApp untuk respon cepat.</p>
        </div>
        <a href="https://wa.me/62818110242" target="_blank" class="btn-wa">
            <i class='bx bxl-whatsapp' style="font-size: 1.8rem;"></i>
            HUBUNGI: 0818-110-242
        </a>
    </div>

    <div style="margin-top: 50px; text-align: center; color: #475569; font-size: 0.85rem; padding-bottom: 40px;">
        &copy; 2026 ESCOBAR SYSTEM • BUILT FOR PROFESSIONAL RENTALS
    </div>
</div>

<?php echo "</div></body></html>"; ?>