@extends('storefront.layout')

@section('title', 'Payment Terms')

@section('content')
<section class="relative overflow-hidden border-b border-stone-200 bg-[#f5f1e8]">
    <div class="absolute inset-y-0 right-0 hidden w-[46%] bg-[radial-gradient(circle_at_30%_40%,rgba(5,150,105,0.16),transparent_65%)] lg:block"></div>
    <div class="relative mx-auto grid max-w-7xl gap-10 px-6 py-16 lg:grid-cols-[1.2fr_0.8fr] lg:px-8 lg:py-24">
        <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-700">Business credit</p>
            <h1 class="mt-4 max-w-3xl text-4xl font-semibold tracking-[-0.035em] text-stone-950 sm:text-5xl">Pay on Terms</h1>
            <p class="mt-6 max-w-2xl text-lg leading-8 text-stone-600">
                Payment terms are subject to credit review and approval. To apply, complete a credit application with information about your company, its owners, and authorized representatives.
            </p>
            <p class="mt-4 font-semibold text-stone-900">Credit subject to approval.</p>

            <div class="mt-8 flex flex-wrap gap-3">
                @auth
                    <a href="{{ route('storefront.credit-application') }}" class="inline-flex h-12 items-center justify-center rounded-xl bg-emerald-700 px-6 text-sm font-semibold text-white shadow-lg shadow-emerald-900/15 transition hover:-translate-y-0.5 hover:bg-emerald-800">
                        Apply for payment terms
                    </a>
                @else
                    <a href="{{ route('storefront.partner-application') }}" class="inline-flex h-12 items-center justify-center rounded-xl bg-emerald-700 px-6 text-sm font-semibold text-white shadow-lg shadow-emerald-900/15 transition hover:-translate-y-0.5 hover:bg-emerald-800">
                        Sign Up
                    </a>
                @endauth
            </div>
        </div>

        <aside class="rounded-3xl border border-white/80 bg-white/85 p-7 shadow-[0_24px_70px_rgba(28,25,23,0.10)] backdrop-blur sm:p-8">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-stone-400">How it works</p>
            <ol class="mt-6 space-y-6">
                @foreach ([
                    ['1', 'Complete the application', 'Provide the company, financial contact, and responsible-party information requested.'],
                    ['2', 'Credit review', 'Our team reviews the request and may ask for additional information.'],
                    ['3', 'Terms are assigned', 'If approved, your account receives a specific limit, payment period, and validity date.'],
                ] as [$step, $title, $body])
                    <li class="flex gap-4">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-700 text-sm font-semibold text-white">{{ $step }}</span>
                        <div>
                            <h2 class="font-semibold text-stone-950">{{ $title }}</h2>
                            <p class="mt-1 text-sm leading-6 text-stone-600">{{ $body }}</p>
                        </div>
                    </li>
                @endforeach
            </ol>
        </aside>
    </div>
</section>

<section class="mx-auto max-w-7xl px-6 py-14 lg:px-8">
    <div class="grid gap-6 md:grid-cols-3">
        @foreach ([
            ['No guarantee of approval', 'Submitting an application does not guarantee approval.'],
            ['Terms vary by review', 'Approved payment periods and credit limits may vary based on the results of our review.'],
            ['Shop while we review', 'You can continue ordering with Credit Card, ACH transfer, or Wire transfer.'],
        ] as [$title, $body])
            <article class="rounded-2xl border border-stone-200 bg-white p-6">
                <h2 class="font-semibold text-stone-950">{{ $title }}</h2>
                <p class="mt-2 text-sm leading-6 text-stone-600">{{ $body }}</p>
            </article>
        @endforeach
    </div>
</section>
@endsection