@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;">Borrow</h1>
                <p class="muted" style="margin-top:8px; line-height:1.7; font-size:14px; max-width: 720px;">
                    Choose a collateral asset to see required LTV and minimum deposit. Then apply now and complete KYC + proof of payment.
                </p>
            </div>
            <span class="pill">APR from {{ number_format(($minApr ?? 0) * 100, 2) }}%</span>
        </div>

        <div class="grid-2" style="grid-template-columns: repeat(3, 1fr);">
            @foreach($collateralAssets as $asset)
                <div class="card">
                    <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                        <div style="font-weight:900; font-size:16px;">{{ $asset->name }}</div>
                        <div class="icon"><span style="font-weight:900; color: var(--green);">{{ $asset->symbol }}</span></div>
                    </div>
                    <div class="muted" style="margin-top:10px; font-size:13px; line-height:1.7;">
                        <div>Interest Rate: <strong style="color: var(--text)">{{ number_format(($minApr ?? 0) * 100, 2) }}% APR</strong></div>
                        <div>LTV Ratio: <strong style="color: var(--text)">{{ number_format((float)$asset->loan_ltv_ratio * 100, 2) }}%</strong></div>
                        <div>Min Collateral: <strong style="color: var(--text)">{{ $asset->min_collateral_coin }} {{ $asset->symbol }}</strong></div>
                    </div>
                    <div style="margin-top: 16px;">
                        <a class="btn btn-primary"
                           href="{{ auth()->check() ? url('/borrow/apply/' . $asset->symbol) : route('login') }}"
                           style="width:100%;">
                            Apply Now
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

        <div style="margin-top: 28px;">
            <div class="grid-2">
                <div class="card">
                    <h2 class="h2">Why Choose Us</h2>
                    <div class="muted" style="line-height:1.7; font-size:14px;">
                        A guided loan process with clear collateral requirements and admin-managed durations.
                    </div>
                </div>
                <div class="card">
                    <h2 class="h2">Steps</h2>
                    <div class="list" style="margin-top: 12px;">
                        <div class="li">
                            <div class="icon"><span style="font-weight:900;">1</span></div>
                            <div>
                                <div style="font-weight:800; font-size:13px;">Select collateral</div>
                                <div class="muted" style="font-size:12px; margin-top:3px;">Pick the crypto you want to deposit.</div>
                            </div>
                        </div>
                        <div class="li">
                            <div class="icon"><span style="font-weight:900;">2</span></div>
                            <div>
                                <div style="font-weight:800; font-size:13px;">Complete KYC</div>
                                <div class="muted" style="font-size:12px; margin-top:3px;">Upload your ID + selfie.</div>
                            </div>
                        </div>
                        <div class="li">
                            <div class="icon"><span style="font-weight:900;">3</span></div>
                            <div>
                                <div style="font-weight:800; font-size:13px;">Pay & upload proof</div>
                                <div class="muted" style="font-size:12px; margin-top:3px;">Send required collateral to your wallet address.</div>
                            </div>
                        </div>
                        <div class="li">
                            <div class="icon"><span style="font-weight:900;">4</span></div>
                            <div>
                                <div style="font-weight:800; font-size:13px;">Get approved</div>
                                <div class="muted" style="font-size:12px; margin-top:3px;">Admin verifies and updates your status.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection