@extends('layouts.app')

@section('content')
<div class="container d-flex flex-column align-items-center justify-content-center" style="min-height: 80vh;">
    <div class="text-center mb-5" style="max-width: 600px;">
        <h1 class="display-5 fw-bold text-dark mb-4">Stay on top of your money</h1>
        <p class="lead text-muted mb-5">
            Connect your bank and credit cards to fetch all your transactions. Create, categorize and match these transactions to those you have in Accountify.
        </p>
        
        <div class="d-flex flex-column flex-md-row gap-3 justify-content-center align-items-center mb-5">
            <!-- <a href="{{ route('banking.accounts.connect') }}" class="btn btn-primary btn-lg px-5 py-3 shadow-sm fw-bold rounded-3" style="font-size: 1.1rem;">
                Connect Bank / Credit Card
            </a> -->
            <a href="{{ route('banking.accounts.create') }}" class="btn btn-light btn-lg px-5 py-3 border fw-bold rounded-3" style="font-size: 1.1rem;">
                Add Manually
            </a>
        </div>

        <p class="text-muted">
            Don't use banking for your business? <a href="{{ route('banking.dashboard') }}" class="text-primary text-decoration-none fw-bold">Skip</a>
        </p>
    </div>
</div>
@endsection