@extends('layouts.portal.app')

@section('title', "Billing & Subscription InsightsReady")

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="{{ asset("portal-assets/portal.css") }}"/>
@endpush

@section('content')

    <main class="container page">

        <section class="hbar"><h1>Billing & Subscription</h1></section>
        <section class="grid-2">
            <div class="panel">
                <strong>Current plan</strong>
                <p class="app-sub">Pro • $799/mo • 10 seats</p>
            </div>
            <div class="panel">
                <strong>Payment method</strong>
                <p class="app-sub">Visa •••• 4242 • exp 12/27</p>
            </div>
            <div class="panel" style="grid-column:1/-1">
                <strong>Usage</strong>
                <p class="app-sub">Connectors: 8/10 • Reports: 42 • AI credits: 65%</p>
            </div>
        </section>

    </main>

@endsection

@push('scripts')

@endpush