@extends('layouts.app')

@section('title', __('app.pricing.title'))
@section('meta_description', __('app.pricing.meta_description'))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.pricing')],
        ],
        'title' => __('app.pricing.h1'),
        'lead' => __('app.pricing.lead'),
    ])

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
        <div class="grid gap-6 lg:grid-cols-3">
            @foreach ($plans as $plan)
                <article class="flex flex-col rounded-2xl bg-white p-8 shadow-sm ring-1 ring-black/5">
                    <h2 class="text-lg font-bold text-brand-deep">{{ __("app.plans.{$plan->code}.name") }}</h2>
                    <p class="mt-4 text-3xl font-extrabold text-brand">
                        @if ($plan->price !== null)
                            {{ $plan->price }} <span class="text-base font-semibold text-ink-soft">{{ __("app.pricing.currency_{$plan->currency}") }} / {{ __("app.pricing.per_{$plan->billing_interval}") }}</span>
                        @else
                            <span class="text-2xl">{{ __('app.pricing.custom') }}</span>
                        @endif
                    </p>
                    <ul class="mt-6 flex-1 space-y-3 text-sm text-ink-soft">
                        @foreach (__("app.plans.{$plan->code}.features") as $feature)
                            <li class="flex gap-2">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-leaf" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4l3.3 3.3 7.3-7.3a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
                                {{ $feature }}
                            </li>
                        @endforeach
                    </ul>
                    <a href="{{ lroute('demo') }}" class="mt-8 block rounded-full bg-brand py-2.5 text-center text-sm font-semibold text-white transition hover:bg-brand-deep">
                        {{ __('app.nav.book_demo') }}
                    </a>
                </article>
            @endforeach
        </div>
        <p class="mt-8 text-center text-sm text-ink-soft">{{ __('app.pricing.note') }}</p>
    </section>
@endsection