@extends('storefront.layout')

@section('title', 'How to Order')
@section('description', 'See how to browse current wholesale prices, build a $150 minimum order, check out, and track delivery with Vida Mansa.')

@section('content')
<section class="relative overflow-hidden border-b border-stone-200 bg-[#f7f8f5]">
    <div class="absolute inset-0 pointer-events-none" style="background-image:radial-gradient(circle at 12% 18%,rgba(0,122,85,.11),transparent 28%),radial-gradient(circle at 88% 76%,rgba(255,212,0,.16),transparent 24%)"></div>
    <div class="relative max-w-6xl mx-auto px-6 lg:px-8 py-16 md:py-20">
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">Simple wholesale ordering</p>
        <h1 class="mt-4 max-w-4xl text-4xl font-semibold tracking-tight text-stone-950 md:text-6xl">From catalog to checkout in a few straightforward steps.</h1>
        <p class="mt-6 max-w-3xl text-lg leading-8 text-stone-600">
            Browse the full Vida Mansa line with current wholesale pricing and availability. No account is required to explore products or begin building an order.
        </p>
        <div class="mt-8 flex flex-wrap gap-3">
            <a href="{{ route('storefront.catalog') }}" class="inline-flex items-center rounded-md bg-emerald-700 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2">
                Shop Products
            </a>
        </div>
    </div>
</section>

<section class="bg-white">
    <div class="max-w-6xl mx-auto px-6 lg:px-8 py-16 md:py-20">
        <div class="grid gap-6 md:grid-cols-2">
            @foreach ([
                [
                    '01',
                    'Browse current prices',
                    'Explore products, compare models and colors, and see current wholesale pricing and availability without logging in.',
                    '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138A60.114 60.114 0 0 0 5.106 5.272M7.5 14.25 5.106 5.272"/>',
                ],
                [
                    '02',
                    'Build your order',
                    'Choose quantities and add products to your cart. The minimum product subtotal is $150.',
                    '<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6m15 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>',
                ],
                [
                    '03',
                    'Check out in minutes',
                    'Enter your full name, email, shipping address, and payment method. Pay by ACH transfer, wire transfer, or credit card.',
                    '<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 0 0-9 0v3.75m-.75 10.5h10.5a2.25 2.25 0 0 0 2.25-2.25v-6A2.25 2.25 0 0 0 17.25 10.5H6.75A2.25 2.25 0 0 0 4.5 12.75v6A2.25 2.25 0 0 0 6.75 21Z"/>',
                ],
                [
                    '04',
                    'Track every update',
                    'Your order email includes the details and a secure path to follow payment, fulfillment, and delivery status.',
                    '<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3.75 9.75h16.5m-16.5 0v9A2.25 2.25 0 0 0 6 21h12a2.25 2.25 0 0 0 2.25-2.25v-9m-16.5 0V7.5A2.25 2.25 0 0 1 6 5.25h12a2.25 2.25 0 0 1 2.25 2.25v2.25"/>',
                ],
            ] as $step)
                <article class="relative overflow-hidden rounded-2xl border border-stone-200 bg-[#fbfaf7] p-7 shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-200 hover:shadow-lg sm:p-8">
                    <div class="flex items-start justify-between gap-5">
                        <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-emerald-700 text-white shadow-sm">
                            <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" aria-hidden="true">
                                {!! $step[3] !!}
                            </svg>
                        </div>
                        <span class="font-mono text-sm font-semibold tracking-[0.18em] text-stone-300">{{ $step[0] }}</span>
                    </div>
                    <h2 class="mt-7 text-2xl font-semibold tracking-tight text-stone-950">{{ $step[1] }}</h2>
                    <p class="mt-3 text-sm leading-7 text-stone-600">{{ $step[2] }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="border-y border-stone-800 bg-stone-950 text-white">
    <div class="max-w-6xl mx-auto px-6 lg:px-8 py-14">
        <div class="grid gap-8 lg:grid-cols-[1fr_1.2fr] lg:items-center">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.22em] text-[#ffd400]">Flexible ways to pay</p>
                <h2 class="mt-3 text-3xl font-semibold tracking-tight">Choose what works for this order.</h2>
            </div>
            <div class="grid gap-3 sm:grid-cols-3">
                @foreach (['ACH Transfer', 'Wire Transfer', 'Credit Card'] as $method)
                    <div class="rounded-xl border border-white/15 bg-white/5 px-4 py-4 text-center text-sm font-semibold text-stone-100">{{ $method }}</div>
                @endforeach
            </div>
        </div>
        <p class="mt-8 max-w-3xl border-l-2 border-[#ffd400] pl-4 text-sm leading-6 text-stone-300">
            Need payment terms? Complete a separate credit application. Payment terms and credit limits are subject to review and approval; applying does not guarantee approval.
        </p>
    </div>
</section>

<section class="bg-emerald-700 text-white">
    <div class="max-w-5xl mx-auto px-6 lg:px-8 py-16 text-center">
        <h2 class="text-3xl font-semibold tracking-tight md:text-4xl">Ready to build your Vida Mansa order?</h2>
        <p class="mx-auto mt-4 max-w-2xl text-emerald-50/85">See current pricing, find the right products for your shelves, and get started today.</p>
        <a href="{{ route('storefront.catalog') }}" class="mt-7 inline-flex items-center rounded-md bg-[#ffd400] px-6 py-3 text-sm font-semibold text-stone-950 shadow-sm transition hover:bg-yellow-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-emerald-700">
            Shop Now
        </a>
    </div>
</section>
@endsection