{% extends "base.html" %}

{% block body_class %}mb-v2{% endblock %}

{% block title %}Buy MBITE — not listed yet; mine it today{% endblock %}
{% block meta_description %}MBITE is not on any exchange and has no price. The only way to get MoonBite right now is to mine it. Find out what will change when a listing happens.{% endblock %}

{% block content %}
<section class="mb-hero">
    <div class="mb-hero-glow"></div>
    <div class="mb-container">
        <div class="mb-hero-inner">
            <span class="mb-badge"><span class="mb-dot"></span> Pre-listing</span>
            <h1 class="mb-hero-title">There's no buy button. <span class="mb-gradient-text">Only work.</span></h1>
            <p class="mb-hero-sub">MoonBite isn't listed anywhere. No price, no order book, no way to buy MBITE with another currency today. The one way in right now is to earn it — by mining. And that's open to everyone.</p>
            <div class="mb-cta-row">
                <a href="/mine" class="btn btn-primary mb-btn-xl">Mine MBITE</a>
                <a href="/take-a-bite" class="btn btn-secondary mb-btn-xl">Get Started</a>
            </div>
        </div>
    </div>
</section>

<section class="mb-section">
    <div class="mb-container">
        <div class="mb-banner mb-reveal">
            <span>MBITE has <strong>no market price</strong> and isn't trading on any exchange yet. MoonBite is <strong>not an investment or a security</strong>, and nothing on this page is financial advice.</span>
        </div>
    </div>
</section>

<section class="mb-section" style="background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);">
    <div class="mb-container">
        <div class="mb-section-head mb-reveal">
            <span class="mb-eyebrow">The honest situation</span>
            <h2 class="mb-section-title">What you can and can't do today</h2>
        </div>
        <div class="mb-grid mb-grid-2">
            <div class="mb-card mb-reveal">
                <h3 class="mb-card-title">What you can do today</h3>
                <p class="mb-card-text">Mine MBITE on your own hardware and get the block reward straight to an address you control. Grab a self-custody wallet. Run a full node and check the chain yourself. Browse confirmed transactions in the explorer.</p>
                <a href="/mine" class="mb-card-link">Start mining →</a>
            </div>
            <div class="mb-card mb-reveal">
                <h3 class="mb-card-title">What has to wait for a listing</h3>
                <p class="mb-card-text">Buying MBITE with another currency, selling it for one, or any kind of price discovery — none of that exists yet. All of it depends on an exchange listing that's on the roadmap with no confirmed date. We won't pretend otherwise.</p>
                <a href="/about#roadmap" class="mb-card-link">See the roadmap →</a>
            </div>
        </div>
    </div>
</section>

<section class="mb-section">
    <div class="mb-container">
        <div class="mb-section-head mb-reveal">
            <span class="mb-eyebrow">How to get MBITE</span>
            <h2 class="mb-section-title">Mine it — step by step</h2>
            <p class="mb-section-sub">Mining is the fair way in. The block reward lands straight in your wallet. No middleman, no purchase, no one to trust.</p>
        </div>
        <div class="mb-grid mb-grid-3">
            <div class="mb-card mb-reveal">
                <div class="mb-card-icon">①</div>
                <h3 class="mb-card-title">Create an address</h3>
                <p class="mb-card-text">Get a self-custody wallet and generate a MoonBite address (<code>moon1…</code>). That's where block rewards land — and the keys never leave your device.</p>
                <a href="/get-wallet" class="mb-card-link">Get a wallet →</a>
            </div>
            <div class="mb-card mb-reveal">
                <div class="mb-card-icon">②</div>
                <h3 class="mb-card-title">Choose a miner</h3>
                <p class="mb-card-text">Download the miner for Windows, macOS or Linux and run it. It pays rewards straight to your own address. Nothing ever mines in your browser.</p>
                <a href="/mine" class="mb-card-link">See miner options →</a>
            </div>
            <div class="mb-card mb-reveal">
                <div class="mb-card-icon">③</div>
                <h3 class="mb-card-title">Earn the block reward</h3>
                <p class="mb-card-text">Find a valid block and the subsidy — currently 10 MBITE — is paid to your address. Don't take our word for it; watch it show up in the explorer.</p>
                <a href="/mining" class="mb-card-link">Open the live reactor →</a>
            </div>
        </div>
    </div>
</section>

<section class="mb-section" style="background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);">
    <div class="mb-container">
        <div class="mb-section-head mb-reveal">
            <span class="mb-eyebrow">Exchange listing — coming soon</span>
            <h2 class="mb-section-title">Where MBITE might trade one day</h2>
            <p class="mb-section-sub">No exchange has confirmed a listing. These are placeholder categories showing the kinds of venues being explored — not a deal, not a promise, not a partnership. If that changes, you'll see real names here.</p>
        </div>
        <div class="mb-exchange-grid mb-reveal">
            <div class="mb-exchange-card">
                <div class="mb-exchange-logo"></div>
                <div class="mb-exchange-name">Spot Exchange A</div>
                <span class="mb-soon-chip">Coming soon</span>
            </div>
            <div class="mb-exchange-card">
                <div class="mb-exchange-logo"></div>
                <div class="mb-exchange-name">Spot Exchange B</div>
                <span class="mb-soon-chip">Coming soon</span>
            </div>
            <div class="mb-exchange-card">
                <div class="mb-exchange-logo"></div>
                <div class="mb-exchange-name">DEX / AMM</div>
                <span class="mb-soon-chip">Coming soon</span>
            </div>
            <div class="mb-exchange-card">
                <div class="mb-exchange-logo"></div>
                <div class="mb-exchange-name">P2P Marketplace</div>
                <span class="mb-soon-chip">Coming soon</span>
            </div>
        </div>
        <div class="mb-banner mb-reveal" style="margin-top: var(--spacing-2xl);">
            <span>No listing is live or confirmed. The grid above is placeholder categories, nothing more. <strong>Don't read them as real partnerships or price guarantees.</strong></span>
        </div>
    </div>
</section>

<section class="mb-section">
    <div class="mb-container">
        <div class="mb-section-head mb-reveal">
            <span class="mb-eyebrow">What changes at listing</span>
            <h2 class="mb-section-title">What a listing actually means</h2>
            <p class="mb-section-sub">A listing makes MBITE tradable. It doesn't hand it a value, and it doesn't turn it into an investment. Here's the honest difference.</p>
        </div>
        <div class="mb-grid mb-grid-3">
            <div class="mb-feature mb-reveal">
                <h3>Price discovery begins</h3>
                <p>For the first time, buyers and sellers hash out a price in an open order book. We don't set it. Nobody sets it. The market does.</p>
            </div>
            <div class="mb-feature mb-reveal">
                <h3>Trading becomes possible</h3>
                <p>Miners who want to swap rewards for another currency get a venue. People who want MBITE but don't mine finally get a way in.</p>
            </div>
            <div class="mb-feature mb-reveal">
                <h3>Self-custody still matters</h3>
                <p>An exchange holds coins for you — which means it can lose them for you. Keep your MBITE in a wallet you control and exchange risk never touches you, before or after any listing.</p>
            </div>
        </div>
    </div>
</section>

<section class="mb-section" style="background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);">
    <div class="mb-container">
        {% set notify_title = "We'll tell you the moment it lists" %}
        {% set notify_text = "Drop your email and we'll ping you when a listing goes live. One email. No price predictions, no spam." %}
        {% set notify_source = "buy" %}
        {% include "partials/notify_form.html" %}
    </div>
</section>
{% endblock %}