@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;">Financial Products</h1>
                <p class="muted" style="margin-top:8px; line-height:1.7; font-size:14px;">
                    Explore instant crypto loans, high-yield earn programs, and institutional lines.
                </p>
            </div>
            <span class="pill">Admin-managed terms</span>
        </div>

        <div class="grid-2" style="grid-template-columns: repeat(3, 1fr);">
            <div class="card">
                <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                    <div style="font-weight:900; font-size:16px;">Instant Crypto Loans</div>
                    <div class="icon"><span style="font-weight:900; color: var(--blue);">L</span></div>
                </div>
                <p class="muted" style="margin-top:10px; line-height:1.7; font-size:13px;">
                    Borrow against crypto collateral with admin-controlled durations and transparent required collateral.
                </p>
                <div style="margin-top:16px;">
                    <a class="btn btn-primary" href="{{ url('/borrow') }}" style="width:100%;">Explore Borrow</a>
                </div>
            </div>

            <div class="card">
                <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                    <div style="font-weight:900; font-size:16px;">High-Yield Earn</div>
                    <div class="icon"><span style="font-weight:900; color: var(--green);">E</span></div>
                </div>
                <p class="muted" style="margin-top:10px; line-height:1.7; font-size:13px;">
                    Stake supported assets to earn simple interest with a wallet-ready payment proof flow.
                </p>
                <div style="margin-top:16px;">
                    <a class="btn btn-primary" href="{{ url('/earn') }}" style="width:100%;">Start Earning</a>
                </div>
            </div>

            <div class="card">
                <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                    <div style="font-weight:900; font-size:16px;">Institutional Line</div>
                    <div class="icon"><span style="font-weight:900; color: var(--blue);">I</span></div>
                </div>
                <p class="muted" style="margin-top:10px; line-height:1.7; font-size:13px;">
                    For liquidity providers and institutions: configurable risk tiers, reporting, and dedicated onboarding.
                </p>
                <div style="margin-top:16px;">
                    <a class="btn btn-outline" href="{{ url('/company') }}" style="width:100%;">View Institutional</a>
                </div>
            </div>
        </div>
    </div>
@endsection

