{include file="sections/header.tpl"}

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
    .sr-card { background:#1e2240; border:1px solid rgba(255,255,255,0.1); border-radius:16px; overflow:hidden; transition:transform 0.18s, box-shadow 0.18s; margin-bottom:0; }
    .sr-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.4); }
    .sr-header { padding:18px 22px; font-size:0.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; display:flex; align-items:center; gap:10px; color:#fff; }
    .sr-body { padding:18px 22px; font-size:0.9rem; color:#c4cde8; line-height:1.75; }
    .sr-body b { color:#fff; }
    .sr-footer { padding:14px 22px; border-top:1px solid rgba(255,255,255,0.1); display:flex; flex-wrap:wrap; gap:10px; background:#151932; }
    .sr-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:10px; font-size:0.82rem; font-weight:600; text-decoration:none !important; transition:transform 0.15s, opacity 0.15s; white-space:nowrap; }
    .sr-btn:hover { transform:translateY(-2px); opacity:0.88; }
    .sr-btn-ghost { background:#263050; color:#a5b4d4 !important; border:1px solid rgba(255,255,255,0.12); }
    .sr-btn-ghost:hover { background:#2e3a60; color:#fff !important; opacity:1; }
    .sr-table td { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.07); font-size:0.88rem; }
    .sr-table td:first-child { color:#7e95c4; width:130px; font-weight:600; }
    .sr-table td:last-child { color:#e2e8f8; }
    .sr-ver-label { font-size:0.65rem; color:#7e95c4; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
    .hero-sub { color:#7e95c4; font-size:0.85rem; }
    .sr-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
    @media(min-width:768px){ .sr-grid { grid-template-columns:1fr 1fr; } }
    .sr-full { grid-column:1 / -1; }
</style>

<div style="max-width:1060px;margin:0 auto;padding:24px 16px;">

    <!-- Hero -->
    <div style="text-align:center;margin-bottom:28px;padding:24px 16px;background:#1e2240;border-radius:16px;border:1px solid rgba(255,255,255,0.08);">
        <div style="display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#6a11cb,#2575fc);font-size:1.5rem;margin-bottom:12px;">&#x1F680;</div>
        <h2 style="font-size:1.4rem;font-weight:800;color:#fff;margin:0 0 6px;letter-spacing:-0.5px;">SpeedRadius</h2>
        <p class="hero-sub" style="margin:0;">Community &amp; Resources &mdash; <a href="https://speedcomwifi.xyz" target="_blank" style="color:#818cf8;text-decoration:underline;">speedcomwifi.xyz</a></p>
    </div>

    <div class="sr-grid">

        <!-- SpeedRadius Card -->
        <div class="sr-card" id="update">
            <div class="sr-header" style="background:linear-gradient(135deg,#6a11cb,#2575fc);">
                <span>&#x1F680;</span> SpeedRadius
            </div>
            <div class="sr-body">
                <b>SpeedRadius</b> is a complete billing system for Hotspot, Static IP and PPPoE on MikroTik &mdash; powered by PHP and the MikroTik API.<br><br>
                Watch the project on <a href="https://chat.whatsapp.com/HjnLYIEN6h0A0KMXbfNYP5" target="_blank" style="color:#818cf8;text-decoration:underline;">WhatsApp Group</a>.
            </div>
            <div style="padding:14px 22px;display:flex;gap:28px;border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);background:#151932;">
                <div>
                    <div class="sr-ver-label">Current Version</div>
                    <div id="currentVersion" style="font-size:1rem;font-weight:700;color:#a78bfa;">v<?= $version ?></div>
                </div>
                <div>
                    <div class="sr-ver-label">Latest Version</div>
                    <div id="latestVersion" style="font-size:1rem;font-weight:700;color:#34d399;">Checking&hellip;</div>
                </div>
            </div>
            <div class="sr-footer">
                <a href="/update.php?step=4" class="sr-btn" style="background:linear-gradient(135deg,#11998e,#38ef7d);color:#0a2e20;box-shadow:0 4px 14px rgba(56,239,125,0.25);">&#x1F5C4; Update Database</a>
                <a href="./update.php" target="_blank" class="sr-btn" style="background:linear-gradient(135deg,#f7971e,#ffd200);color:#1a1a1a;box-shadow:0 4px 14px rgba(255,210,0,0.2);">&#x2B06; Install Latest</a>
                <a href="./CHANGELOG.md" target="_blank" class="sr-btn sr-btn-ghost">&#x1F4C4; Changelog</a>
                <a href="https://github.com/shabran01/SpeedRadius_Advanced/blob/main/CHANGELOG.md" target="_blank" class="sr-btn sr-btn-ghost">&#x1F419; Repo Changelog</a>
            </div>
        </div>

        <!-- WhatsApp Gateway Card -->
        <div class="sr-card">
            <div class="sr-header" style="background:linear-gradient(135deg,#25d366,#128c7e);">
                <span>&#x1F4AC;</span> WhatsApp Gateway
            </div>
            <div class="sr-body">
                WhatsApp API gateway service for sending and receiving messages, notifications, schedulers, reminders, and more &mdash; for your business or ISP automation.
            </div>
            <div class="sr-footer">
                <a href="https://wa.nux.my.id/login" target="_blank" class="sr-btn" style="background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;box-shadow:0 4px 14px rgba(37,211,102,0.25);">&#x1F4AC; WA Gateway</a>
                <a href="https://chat.whatsapp.com/HjnLYIEN6h0A0KMXbfNYP5" target="_blank" class="sr-btn sr-btn-ghost">&#x1F465; Join Group</a>
            </div>
        </div>

        <!-- Donations Card -->
        <div class="sr-card sr-full">
            <div class="sr-header" style="background:linear-gradient(135deg,#f953c6,#b91d73);">
                <span>&#x2764;&#xFE0F;</span> Support &amp; Donations
            </div>
            <div class="sr-body">
                Donations help keep SpeedRadius development going. Any contribution is deeply appreciated!
            </div>
            <div style="padding:0 22px 16px;">
                <table class="sr-table" style="width:100%;">
                    <tbody>
                        <tr><td>PayPal</td><td style="color:#e2e8f8;">Pay1@cloudpoa.co.ke</td></tr>
                        <tr><td>M-Pesa Kenya</td><td style="color:#e2e8f8;">0718167262</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="sr-footer">
                <a href="https://www.paypal.com/ncp/payment/P9N25YSCKMVAS" target="_blank" class="sr-btn" style="background:linear-gradient(135deg,#003087,#009cde);color:#fff;box-shadow:0 4px 14px rgba(0,156,222,0.25);">&#x1F4B3; PayPal Donate</a>
                <a href="https://www.paypal.com/ncp/payment/Y9JS7KVJ5PZJG" target="_blank" class="sr-btn" style="background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;box-shadow:0 4px 14px rgba(101,17,203,0.25);">&#x1F6D2; Buy License</a>
            </div>
        </div>

    </div>
</div>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        $.getJSON("./version.json?" + Math.random(), function(data) {
            $('#currentVersion').text('v' + data.version);
        });
        $.getJSON("https://raw.githubusercontent.com/shabran01/SpeedRadius_Advanced/main/version.json?" + Math.random(), function(data) {
            $('#latestVersion').text('v' + data.version);
        }).fail(function() {
            $('#latestVersion').text('N/A');
        });
    });
</script>

{include file="sections/footer.tpl"}