@extends('layouts.vpm-mobile-app', ['active' => 'pricing'])

@section('title', 'Pricing')

@section('content')
<div class="vpm-pricing">
    <x-vpm.page-intro title="Pricing" />

    <div class="vpm-pricing__sections">
        @foreach ($sections as $section)
            <section class="vpm-pricing__section">
                <h3 class="vpm-pricing__section-title">{{ $section['title'] }}</h3>

                <ul class="vpm-pricing__grid">
                    @foreach ($section['plans'] as $plan)
                        <x-vpm.pricing-card
                            :badge="$plan['badge']"
                            :name="$plan['name']"
                            :subtitle="$plan['subtitle'] ?? null"
                            :price="$plan['price']"
                            :currency="$plan['currency'] ?? 'USD'"
                            :cta-label="$plan['cta_label']"
                            :fund-url="$plan['fund_url']"
                        />
                    @endforeach
                </ul>
            </section>
        @endforeach
    </div>
</div>
@endsection