<?php
include 'includes/header.php';

$currencies = [
    ['code' => 'USD', 'name' => 'US Dollar', 'symbol' => '$'],
    ['code' => 'EUR', 'name' => 'Euro', 'symbol' => '€'],
    ['code' => 'CNY', 'name' => 'Chinese Yuan', 'symbol' => '¥'],
];

$cryptos = [
    ['symbol' => 'BTC', 'name' => 'Bitcoin'],
    ['symbol' => 'ETH', 'name' => 'Ethereum'],
    ['symbol' => 'USDT', 'name' => 'Tether'],
];
?>

<style>
    .buy-card {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 40px;
        max-width: 500px;
        margin: 0 auto;
    }
    .buy-tabs .nav-link {
        color: #848e9c;
        border: none;
        font-weight: 600;
        font-size: 1.2rem;
        padding: 0 20px 10px 20px;
    }
    .buy-tabs .nav-link.active {
        color: var(--okx-blue);
        background: transparent;
        border-bottom: 3px solid var(--okx-blue);
    }
    .input-box {
        background-color: #0b0e11;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .input-box label {
        color: #848e9c;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 5px;
    }
    .input-box input {
        background: transparent;
        border: none;
        color: white;
        font-size: 1.5rem;
        font-weight: 600;
        width: 100%;
        outline: none;
    }
    .currency-select {
        background-color: var(--border-color);
        border-radius: 20px;
        padding: 5px 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }
</style>

<main class="container py-5" style="min-height: 70vh;">
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold"><?php echo mt('Buy_Crypto'); ?></h1>
        <p class="text-muted">Buy crypto with credit card, bank transfer, or P2P.</p>
    </div>

    <div class="buy-card">
        <ul class="nav nav-tabs buy-tabs border-0 mb-4 justify-content-center">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#buy">Buy</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sell">Sell</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="buy">
                <div class="input-box">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <label>Pay</label>
                    </div>
                    <div class="d-flex align-items-center">
                        <input type="number" placeholder="100 - 20,000" value="1000">
                        <div class="currency-select">
                            <i class="fas fa-dollar-sign"></i> USD <i class="fas fa-caret-down"></i>
                        </div>
                    </div>
                </div>

                <div class="text-center mb-3">
                    <i class="fas fa-exchange-alt fa-rotate-90 text-muted"></i>
                </div>

                <div class="input-box">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <label>Receive</label>
                    </div>
                    <div class="d-flex align-items-center">
                        <input type="number" placeholder="0.00" value="0.023" readonly>
                        <div class="currency-select">
                            <img src="https://static.okx.com/cdn/oksupport/asset/currency/icon/btc.png" width="20"> BTC <i class="fas fa-caret-down"></i>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between small text-muted mb-4">
                    <span>Reference Price</span>
                    <span>1 BTC ≈ 43,250.50 USD</span>
                </div>

                <button class="btn btn-primary w-100 py-3 fw-bold rounded-pill mb-3">Buy BTC</button>
                <p class="text-center small text-muted">Supported payment methods: Visa, Mastercard, Apple Pay, Google Pay.</p>
            </div>
        </div>
    </div>
</section>

<?php include 'includes/footer.php'; ?>
