@extends('layouts.marketing')

@section('content')
    <div class="container" style="padding-top: 24px;">
        <div style="display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px;">
            <div>
                <h1 style="font-size:34px; margin:0;">Earn</h1>
                <p class="muted" style="margin-top:8px; line-height:1.7; font-size:14px; max-width: 760px;">
                    Select an asset, enter the amount, choose a duration (7 days to 1 year), and see estimated returns instantly.
                </p>
            </div>
            <span class="pill">Simple interest APR</span>
        </div>

        <div class="grid-2">
            <aside class="card">
                <livewire:earn-staking-calculator />
            </aside>

            <aside class="card">
                <h2 class="h2">Why Earn With Us</h2>
                <p class="muted" style="line-height:1.7; font-size:14px; margin-top:8px;">
                    We keep staking math simple and provide a guided payment proof flow. Your dashboard can track status changes and submissions.
                </p>

                <ul style="margin: 14px 0 0; padding:0; list-style:none; display:grid; gap:10px;">
                    <li class="li">
                        <div class="icon"><span style="font-weight:900; color: var(--green);">✓</span></div>
                        <div>
                            <div style="font-weight:800; font-size:13px;">Estimated returns upfront</div>
                            <div class="muted" style="font-size:12px; margin-top:3px;">Transparent simple-interest calculation.</div>
                        </div>
                    </li>
                    <li class="li">
                        <div class="icon"><span style="font-weight:900; color: var(--blue);">✓</span></div>
                        <div>
                            <div style="font-weight:800; font-size:13px;">Wallet-ready staking</div>
                            <div class="muted" style="font-size:12px; margin-top:3px;">We show an address + amount to pay in a modal flow.</div>
                        </div>
                    </li>
                    <li class="li">
                        <div class="icon"><span style="font-weight:900; color: var(--green);">✓</span></div>
                        <div>
                            <div style="font-weight:800; font-size:13px;">Admin-reviewed proof</div>
                            <div class="muted" style="font-size:12px; margin-top:3px;">Upload proof of payment and submit for review.</div>
                        </div>
                    </li>
                </ul>
            </aside>
        </div>
    </div>
@endsection

