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

// Load all settings from database
$settings = [];
$stmt = $pdo->query("SELECT setting_key, setting_value FROM site_settings");
while ($row = $stmt->fetch()) {
    $settings[$row['setting_key']] = $row['setting_value'];
}

// Default fallbacks if not set
$defaults = [
    'welcome_title' => 'Welcome To The Only Official Reckon Store!',
    'welcome_text' => 'Enter the only reliable marketplace to improve your Reckon experience. Ranks, Crate Keys, ReckonCoins, Gift Cards, and Seasonal Tags are among the exclusive offerings available here, and new content and premium additions are frequently released.<br><br>In addition to opening up exciting in-game options, every purchase directly contributes to the Reckon community\'s ongoing development and innovation.',
    'top_customer_name' => 'Abhikoinhikia',
    'top_customer_amount' => '12',
    'server_ip' => 'play.reckonsoul.fun',
    'hero_image' => 'media/sss.png',
    'logo_small' => 'media/logo_small.png',
    'background_image' => 'media/bg.png',
    'discord_widget_id' => 'YOUR_DISCORD_ID',
    'discord_invite' => 'https://discord.gg/YOURINVITE'
];
foreach ($defaults as $key => $value) {
    if (!isset($settings[$key])) $settings[$key] = $value;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reckon Store • <?=htmlspecialchars($settings['server_ip'])?></title>
    <link rel="icon" type="image/png" href="media/favicon.png">
    <link rel="stylesheet" href="media/style.css">
    <link href="https://fonts.bunny.net/css?family=Space+Grotesk:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <style>
        :root {
            --purple: #e879f9;
            --green: #00ff88;
            --bg: #0a0a1a;
            --card: #161625;
            --card2: #1e1e2e;
        }
        body { background: var(--bg); color: #e0e0e0; margin:0; font-family: 'Space Grotesk', sans-serif; }
        .mainflex { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
        .desktop_navbar { background: rgba(0,0,0,0.8); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top: 0; z-index: 1000; backdrop-filter: blur(10px); }
        .desktop_navbar img { height: 50px; }
        .desktop_navbar_link { color: white; margin: 0 1.5rem; font-size: 1.1rem; text-decoration: none; }
        .desktop_navbar_link2_div a { background: var(--green); color: black; padding: 0.7rem 1.5rem; border-radius: 10px; text-decoration: none; margin-left: 1rem; font-weight: bold; }
        .mobile_navbar { display: none; background: #000; padding: 1rem; position: fixed; width: 100%; top: 0; z-index: 1000; justify-content: space-between; align-items: center; }
        .mobile_navbar img { height: 40px; }
        .icon { font-size: 1.8rem; cursor: pointer; color: white; }
        #mobile_navbar_links { display: none; flex-direction: column; background: #000; position: absolute; top: 60px; left: 0; width: 100%; padding: 1rem; }
        #mobile_navbar_links a { padding: 1rem; color: white; text-align: center; }
        .main1 { background: url('<?=htmlspecialchars($settings['background_image'])?>') center/cover no-repeat; min-height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 80px; }
        .main1 img { max-width: 600px; width: 90%; }
        .main1_ipcopier { background: rgba(0,0,0,0.7); color: white; padding: 1.5rem 3rem; border-radius: 15px; font-size: 1.3rem; cursor: pointer; border: 2px solid var(--green); }
        .welcome-box { background: var(--card); max-width: 1000px; margin: 4rem auto; padding: 3rem; border-radius: 20px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
        .welcome-box h1 { color: var(--green); font-size: 2.4rem; }
        .top-customer, .giftcard { background: var(--card2); padding: 1.5rem; border-radius: 15px; display: inline-block; margin: 1rem; min-width: 240px; }
        .links a { color: #888; margin: 0 1.5rem; text-decoration: underline; }
        .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; padding: 2rem; margin: 2rem auto; max-width: 1400px; }
        .category-card { background: var(--card); border-radius: 20px; overflow: hidden; cursor: pointer; transition: 0.4s; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .category-card:hover { transform: translateY(-15px); box-shadow: 0 25px 50px rgba(232,121,249,0.5); }
        .category-card img { width: 100%; height: 220px; object-fit: cover; }
        .category-title h3 { margin: 0; padding: 1.5rem 1.5rem 0; color: white; font-size: 1.7rem; }
        .category-title span { color: var(--purple); padding: 0 1.5rem 1.5rem; font-size: 1.1rem; }
        .packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; padding: 3rem; background: var(--card); border-radius: 20px; margin: 3rem auto; max-width: 1200px; }
        .pkg { background: #16213e; border: 3px solid #333; border-radius: 20px; padding: 2rem; text-align: center; transition: 0.4s; }
        .pkg:hover { border-color: var(--purple); transform: scale(1.05); box-shadow: 0 0 40px rgba(232,121,249,0.4); }
        .pkg img { width: 120px; height: 120px; border-radius: 50%; border: 5px solid var(--purple); }
        .buy-btn { background: var(--green); color: black; font-weight: bold; padding: 16px 40px; border-radius: 15px; border: none; cursor: pointer; font-size: 1.2rem; margin-top: 1rem; }
        .mcfleet-footer { background: #000; color: #666; text-align: center; padding: 4rem 1rem 2rem; font-size: 0.95rem; line-height: 2; }
        .mcfleet-footer a { color: #888; text-decoration: underline; margin: 0 12px; }
        .disclaimer { color: #555; font-size: 0.9rem; margin-top: 1rem; }
        @media (max-width: 768px) {
            .desktop_navbar { display: none; }
            .mobile_navbar { display: flex; }
            .main1 { min-height: 70vh; }
        }
    </style>
</head>
<body>

<!-- Desktop Navbar -->
<nav class="desktop_navbar">
    <a href="#"><img src="<?=htmlspecialchars($settings['logo_small'])?>" alt="Reckon"></a>
    <div>
        <a href="index.php" class="desktop_navbar_link">Store</a>
        <a href="#discord" class="desktop_navbar_link">Discord</a>
    </div>
    <div class="desktop_navbar_link2_div">
        <?php if(isset($_SESSION['mc_username'])): ?>
            <a href="?logout=1" class="desktop_navbar_link2">Logout (<?=htmlspecialchars($_SESSION['mc_username'])?>)</a>
        <?php else: ?>
            <a href="login.php" class="desktop_navbar_link2">Login</a>
        <?php endif; ?>

        <!-- DROPDOWN CART STARTS HERE -->
       <div class="cart-dropdown">
    <a href="cart.php" class="desktop_navbar_link2">
        Cart <span id="cart-count">0</span>
    </a>
    <div class="cart-dropdown-content" id="cart-dropdown">
        <div class="cart-items"></div>
        <div class="cart-footer">
            <div class="cart-total">Total: $<span id="cart-total">0.00</span></div>
            <a href="cart.php" class="view-cart-btn">View Full Cart</a>
            <button class="checkout-btn" onclick="location.href='checkout.php'">Checkout</button>
        </div>
    </div>
</div>
        <!-- DROPDOWN CART ENDS -->
    </div>
</nav>

<!-- Mobile Navbar -->
<div class="mobile_navbar">
    <a href="#"><img src="<?=htmlspecialchars($settings['logo_small'])?>" alt="Reckon"></a>
    <div class="icon" onclick="mobile_navbar_link_hider()"><i class="fa fa-bars"></i></div>
    
</div>
<div id="mobile_navbar_links">
    <a href="index.php">Store</a>
    <a href="#discord">Discord</a>
</div>

<div class="mainflex">

    <!-- HERO -->
    <div class="main1">
        <img src="<?=htmlspecialchars($settings['hero_image'])?>" alt="Reckon">
        <button class="main1_ipcopier" onclick="copyText()">
            <span class="main1_ipcopier_text1"><?=htmlspecialchars($settings['server_ip'])?></span><br>
            <span class="main1_ipcopier_text2">Click to copy server IP</span>
        </button>
    </div>

    <!-- WELCOME BOX -->
    <div class="welcome-box">
        <h1><?=htmlspecialchars($settings['welcome_title'])?></h1>
        <p style="font-size:1.2rem; line-height:1.9;">
            <?=$settings['welcome_text']?>
        </p>
        <div style="margin:2rem 0;">
            <div class="top-customer">
                <strong>Top Customer daily</strong><br>
                <span style="color:var(--green);"><?=htmlspecialchars($settings['top_customer_name'])?></span><br>
                Paid <?=htmlspecialchars($settings['top_customer_amount'])?> USD
            </div>
            <div class="giftcard"><strong>Giftcard Balance</strong><br><span style="color:var(--green);">Check</span></div>
        </div>
        <div class="links">
            <a href="#">Terms of service</a>
            <a href="#">Refund policy</a>
            <a href="#">Support</a>
        </div>
    </div>

    <!-- CATEGORIES & PACKAGES (same as before) -->
    <?php if(!isset($_GET['cat'])): ?>
        <div class="category-grid">
            <?php
            $stmt = $pdo->query("SELECT DISTINCT category FROM packages ORDER BY category");
            while($row = $stmt->fetch()) {
                $cat = $row['category'];
                $imgStmt = $pdo->prepare("SELECT image FROM packages WHERE category = ? LIMIT 1");
                $imgStmt->execute([$cat]);
                $img = $imgStmt->fetchColumn();
            ?>
            <div class="category-card" onclick="location.href='?cat=<?=urlencode($cat)?>'">
                <img src="<?=htmlspecialchars($img ?: 'media/default-cat.jpg')?>" alt="<?=$cat?>">
                <div class="category-title">
                    <h3><?=$cat?></h3>
                    <span>Click to view ></span>
                </div>
            </div>
            <?php } ?>
        </div>
    <?php else: ?>
        <div style="text-align:center; margin:2rem;">
            <a href="index.php" style="color:var(--purple); font-size:1.4rem; text-decoration:underline;">Back to Categories</a>
        </div>
        <div class="packages-grid">
            <?php
            $stmt = $pdo->prepare("SELECT * FROM packages WHERE category = ? ORDER BY price ASC");
            $stmt->execute([$_GET['cat']]);
            while($p = $stmt->fetch()):
                $price = $p['sale_price'] ?: $p['price'];
            ?>
            <div class="pkg">
                <img src="<?=htmlspecialchars($p['image'])?>" alt="<?=htmlspecialchars($p['name'])?>">
                <?php if($p['sale_price']): ?><div style="background:#ff0044;color:white;padding:8px 16px;border-radius:30px;font-size:0.9rem;margin:0.5rem auto;width:fit-content;">SALE!</div><?php endif; ?>
                <h3 style="color:var(--green);margin:1rem 0;font-size:1.6rem;"><?=htmlspecialchars($p['name'])?></h3>
                <p style="color:#ccc;"><?=htmlspecialchars($p['description'])?></p>
                <h2 style="color:var(--green);font-size:2.2rem;margin:1rem 0;">$<?=number_format($price,2)?></h2>
                <?php if($p['sale_price']): ?><del style="color:#666;">$<?=number_format($p['price'],2)?></del><?php endif; ?>
                <ul style="text-align:left;margin:1.5rem 0;">
                    <?php foreach(json_decode($p['perks'] ?? '[]', true) as $perk): ?>
                        <li style="color:var(--green);margin:0.5rem 0;">Checkmark <?=htmlspecialchars($perk)?></li>
                    <?php endforeach; ?>
                </ul>
                <button class="buy-btn" onclick="addToCart(<?=$p['id']?>, '<?=addslashes($p['name'])?>', <?=$price?>)">
                    Add to Cart
                </button>
            </div>
            <?php endwhile; ?>
        </div>
    <?php endif; ?>

    <!-- DISCORD -->
    <div id="discord" style="text-align:center; padding:4rem 1rem;">
        <h2 style="font-size:2.5rem;color:var(--green);margin-bottom:2rem;">Join Discord</h2>
        <div style="display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;">
            <iframe src="https://discord.com/widget?id=<?=htmlspecialchars($settings['discord_widget_id'])?>&theme=dark" 
                    width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
            <div style="text-align:left;max-width:400px;">
                <h3 style="color:white;font-size:1.8rem;">Join the Community!</h3>
                <p style="font-size:1.1rem;line-height:1.8;">
                    • Chat with players<br>• Get support<br>• Events & updates
                </p>
                <a href="<?=htmlspecialchars($settings['discord_invite'])?>" target="_blank" 
                   style="display:inline-block;background:var(--green);color:black;padding:1rem 2rem;border-radius:15px;font-weight:bold;text-decoration:none;margin-top:1rem;">
                    Join Now
                </a>
            </div>
        </div>
    </div>

</div>

<footer class="mcfleet-footer">
    <div><strong><?=htmlspecialchars($settings['server_ip'])?></strong></div>
    <div>
        <a href="#">Privacy Policy</a>
        <a href="#">Community Guidelines</a>
        <a href="#">Legal Disclaimer & Risk Notice</a>
        <a href="#">Cookie Policy</a>
        <a href="#">User-Generated Content Policy</a>
    </div>
    <div class="disclaimer">WE ARE NOT AFFILIATED WITH MOJANG, MINECRAFT OR MICROSOFT</div>
    <div style="margin-top:1rem;color:#888;">Copyright © 2025 Reckon Store. All Rights Reserved.</div>
</footer>

<script>
// GLOBAL CART SYSTEM — WORKS EVERYWHERE
window.reckonCart = JSON.parse(localStorage.getItem('reckon_cart') || '[]');

// Add to cart function — called from package buttons
function addToCart(id, name, price) {
    const existing = window.reckonCart.find(item => item.id === id);
    if (existing) {
        existing.qty += 1;
    } else {
        window.reckonCart.push({ id, name, price, qty: 1 });
    }
    localStorage.setItem('reckon_cart', JSON.stringify(window.reckonCart));
    updateCartDisplay();
    alert(name + " added to cart!");
}

// Remove item from dropdown
function removeFromCart(index) {
    window.reckonCart.splice(index, 1);
    localStorage.setItem('reckon_cart', JSON.stringify(window.reckonCart));
    updateCartDisplay();
}

// Update cart count + dropdown
function updateCartDisplay() {
    const count = window.reckonCart.reduce((sum, i) => sum + i.qty, 0);
    const total = window.reckonCart.reduce((sum, i) => sum + (i.price * i.qty), 0).toFixed(2);

    // Update all cart count elements
    document.querySelectorAll('#cart-count').forEach(el => el.textContent = count);
    const totalEl = document.getElementById('cart-total');
    if (totalEl) totalEl.textContent = total;

    // Update dropdown
    const itemsDiv = document.querySelector('#cart-dropdown .cart-items');
    const footer = document.querySelector('#cart-dropdown .cart-footer');
    if (!itemsDiv) return;

    if (window.reckonCart.length === 0) {
        itemsDiv.innerHTML = '<div class="empty-cart-msg">Your cart is empty</div>';
        if (footer) footer.style.display = 'none';
        return;
    }

    if (footer) footer.style.display = 'block';

    let html = '';
    window.reckonCart.forEach((item, i) => {
        html += `
            <div class="cart-item">
                <div>
                    <div class="cart-item-name">${item.name}</div>
                    <small>${item.qty} × $${item.price.toFixed(2)}</small>
                </div>
                <div>
                    $${(item.price * item.qty).toFixed(2)}
                    <button class="cart-item-remove" onclick="removeFromCart(${i})">×</button>
                </div>
            </div>`;
    });
    itemsDiv.innerHTML = html;
}

// Run on page load
updateCartDisplay();
</script>

<?php
if(isset($_GET['logout'])) {
    session_destroy();
    header("Location: index.php");
    exit;
}
?>
</body>
</html>
<style>
.cart-dropdown { position: relative; display: inline-block; }
.cart-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 65px;
    background: #111;
    min-width: 380px;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0,255,136,0.5);
    border: 2px solid var(--green);
    border-radius: 15px;
    z-index: 9999;
    overflow: hidden;
}
.cart-dropdown:hover .cart-dropdown-content,
.cart-dropdown-content:hover { display: block !important; }

.cart-items { max-height: 400px; overflow-y: auto; padding: 15px; }
.cart-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #333;
    color: #ccc;
}
.cart-item-name { font-weight: bold; color: white; font-size: 0.95rem; }
.cart-item-price { color: var(--green); white-space: nowrap; }
.cart-item-remove {
    background: #ff0044;
    color: white;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
}
.cart-footer {
    padding: 15px;
    background: #000;
    text-align: center;
    display: none;
}
.cart-total { font-size: 1.4rem; color: var(--green); margin-bottom: 12px; }
.view-cart-btn, .checkout-btn {
    background: var(--green);
    color: black;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    font-size: 0.95rem;
}

/* Add 10px invisible bridge so mouse doesn't lose hover */
.cart-dropdown::before {
    content: '';
    position: absolute;
    top: 50px;
    right: 0;
    width: 100%;
    height: 20px;
    background: transparent;
    z-index: 9998;
}
.checkout-btn { background: #00ff88; }
.empty-cart-msg { padding: 40px 20px; text-align: center; color: #666; font-size: 1.1rem; }
</style>