Neura UI

{{--
    Category cards — four shop category entry points.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="mx-auto max-w-2xl text-center">
            <neura::badge variant="soft" pill class="mx-auto w-fit">{{ __('Categories') }}</neura::badge>
            <neura::heading level="h2" size="3xl" align="center" class="mt-4 tracking-tight text-balance">
                {{ __('Shop by category') }}
            </neura::heading>
        </div>

        <div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['name' => __('Lighting'), 'count' => __('18 products'), 'icon' => 'light-bulb'],
                ['name' => __('Desk'), 'count' => __('24 products'), 'icon' => 'computer-desktop'],
                ['name' => __('Home'), 'count' => __('31 products'), 'icon' => 'home'],
                ['name' => __('Accessories'), 'count' => __('42 products'), 'icon' => 'sparkles'],
            ] as $category)
                <a href="#category"
                    class="group flex flex-col rounded-2xl border border-dashed border-edge p-6 transition-colors hover:bg-hover/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50">
                    <div
                        class="flex size-10 items-center justify-center rounded-xl border border-dashed border-edge bg-surface-inset/40">
                        <neura::icon :name="$category['icon']" class="size-5 text-fg" />
                    </div>
                    <neura::heading level="h3" size="md" class="mt-5 tracking-tight">
                        {{ $category['name'] }}
                    </neura::heading>
                    <neura::text size="xs" class="mt-1 font-mono text-fg-muted">{{ $category['count'] }}</neura::text>
                    <span
                        class="mt-5 inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">
                        {{ __('Browse') }}
                        <neura::icon name="arrow-right" class="size-3.5 transition-transform group-hover:translate-x-0.5" />
                    </span>
                </a>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Checkout summary — address fields with order summary sidebar.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <neura::heading level="h1" size="2xl" class="tracking-tight">{{ __('Checkout') }}</neura::heading>
        <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('Shipping details and order review.') }}</neura::text>

        <div class="mt-8 grid gap-6 lg:grid-cols-12">
            <div class="lg:col-span-7">
                <neura::card class="p-6 sm:p-8">
                    <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                        {{ __('Shipping address') }}
                    </neura::text>

                    <form class="mt-5 space-y-5" action="#" method="POST" onsubmit="return false;">
                        <div class="grid gap-5 sm:grid-cols-2">
                            <neura::field>
                                <neura::label for="checkout-first">{{ __('First name') }}</neura::label>
                                <neura::input id="checkout-first" name="first_name" value="Alex"
                                    autocomplete="given-name" />
                            </neura::field>
                            <neura::field>
                                <neura::label for="checkout-last">{{ __('Last name') }}</neura::label>
                                <neura::input id="checkout-last" name="last_name" value="Martin"
                                    autocomplete="family-name" />
                            </neura::field>
                        </div>

                        <neura::field>
                            <neura::label for="checkout-email">{{ __('Email') }}</neura::label>
                            <neura::input id="checkout-email" type="email" name="email"
                                value="alex@company.com" autocomplete="email" />
                        </neura::field>

                        <neura::field>
                            <neura::label for="checkout-line1">{{ __('Address') }}</neura::label>
                            <neura::input id="checkout-line1" name="address_line1"
                                value="12 Rue de la Paix" autocomplete="address-line1" />
                        </neura::field>

                        <div class="grid gap-5 sm:grid-cols-3">
                            <neura::field>
                                <neura::label for="checkout-city">{{ __('City') }}</neura::label>
                                <neura::input id="checkout-city" name="city" value="Paris"
                                    autocomplete="address-level2" />
                            </neura::field>
                            <neura::field>
                                <neura::label for="checkout-postal">{{ __('Postal code') }}</neura::label>
                                <neura::input id="checkout-postal" name="postal_code" value="75002"
                                    autocomplete="postal-code" />
                            </neura::field>
                            <neura::field>
                                <neura::label for="checkout-country">{{ __('Country') }}</neura::label>
                                <neura::input id="checkout-country" name="country" value="France"
                                    autocomplete="country-name" />
                            </neura::field>
                        </div>

                        <neura::button type="submit" variant="primary" size="lg" class="w-full sm:w-auto">
                            {{ __('Place order') }}
                        </neura::button>
                    </form>
                </neura::card>
            </div>

            <aside class="lg:col-span-5">
                <div class="rounded-2xl border border-dashed border-edge p-6 sm:p-8">
                    <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                        {{ __('Order summary') }}
                    </neura::text>

                    <ul class="mt-5 space-y-4">
                        @foreach ([
                            ['name' => __('Studio desk lamp'), 'qty' => 1, 'price' => '€89'],
                            ['name' => __('Canvas tote bag'), 'qty' => 2, 'price' => '€84'],
                            ['name' => __('Ceramic mug set'), 'qty' => 1, 'price' => '€36'],
                        ] as $item)
                            <li class="flex items-start justify-between gap-3 text-sm">
                                <div>
                                    <span class="font-medium text-fg">{{ $item['name'] }}</span>
                                    <neura::text size="xs" class="text-fg-muted">× {{ $item['qty'] }}</neura::text>
                                </div>
                                <span class="shrink-0 tabular-nums text-fg">{{ $item['price'] }}</span>
                            </li>
                        @endforeach
                    </ul>

                    <neura::separator class="my-5" />

                    <dl class="space-y-3 text-sm">
                        <div class="flex justify-between gap-4">
                            <dt class="text-fg-secondary">{{ __('Subtotal') }}</dt>
                            <dd class="tabular-nums text-fg">€209</dd>
                        </div>
                        <div class="flex justify-between gap-4">
                            <dt class="text-fg-secondary">{{ __('Shipping') }}</dt>
                            <dd class="tabular-nums text-fg">{{ __('Free') }}</dd>
                        </div>
                        <div class="flex justify-between gap-4">
                            <dt class="font-medium text-fg">{{ __('Total') }}</dt>
                            <dd class="text-lg font-semibold tabular-nums text-fg">€209</dd>
                        </div>
                    </dl>
                </div>
            </aside>
        </div>
    </neura::container>
</section>

{{--
    Coupon bar — promo code input with apply action.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-10 lg:py-12">
        <div
            class="flex flex-col gap-4 rounded-2xl border border-dashed border-edge px-6 py-5 sm:flex-row sm:items-end sm:px-8">
            <div class="min-w-0 flex-1">
                <neura::heading level="h2" size="md" class="tracking-tight">
                    {{ __('Have a coupon?') }}
                </neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">
                    {{ __('Enter a code to apply a discount at checkout.') }}
                </neura::text>
            </div>

            <form class="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-start" action="#" method="POST"
                onsubmit="return false;">
                <neura::field class="flex-1">
                    <neura::label for="coupon-code" class="sr-only">{{ __('Coupon code') }}</neura::label>
                    <neura::input id="coupon-code" name="coupon" placeholder="{{ __('NEURA10') }}"
                        autocomplete="off" />
                </neura::field>
                <neura::button type="submit" variant="primary" size="lg" class="sm:shrink-0">
                    {{ __('Apply') }}
                </neura::button>
            </form>
        </div>
    </neura::container>
</section>

{{--
    Product card row — three horizontal product cards.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::badge variant="soft" pill class="w-fit">{{ __('Shop') }}</neura::badge>
                <neura::heading level="h2" size="3xl" class="mt-4 tracking-tight text-balance">
                    {{ __('Featured products') }}
                </neura::heading>
            </div>
            <neura::button href="#shop" variant="soft" icon="arrow-right">{{ __('View catalog') }}</neura::button>
        </div>

        <div class="mt-12 grid gap-4 md:grid-cols-3">
            @foreach ([
                ['name' => __('Studio desk lamp'), 'price' => '€89', 'tag' => __('Lighting')],
                ['name' => __('Canvas tote bag'), 'price' => '€42', 'tag' => __('Accessories')],
                ['name' => __('Ceramic mug set'), 'price' => '€36', 'tag' => __('Home')],
            ] as $product)
                <article class="group flex flex-col overflow-hidden rounded-2xl border border-dashed border-edge">
                    <div
                        class="flex aspect-[4/3] items-center justify-center border-b border-dashed border-edge bg-surface-inset/50">
                        <neura::icon name="photo" class="size-8 text-fg-muted" />
                    </div>
                    <div class="flex flex-1 flex-col p-5">
                        <neura::badge variant="soft" pill class="w-fit">{{ $product['tag'] }}</neura::badge>
                        <neura::heading level="h3" size="md" class="mt-3 tracking-tight">
                            {{ $product['name'] }}
                        </neura::heading>
                        <div class="mt-auto flex items-center justify-between gap-3 pt-5">
                            <span class="text-lg font-semibold tabular-nums text-fg">{{ $product['price'] }}</span>
                            <neura::button variant="outline" size="sm" icon="shopping-bag">
                                {{ __('Add') }}
                            </neura::button>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Product detail — image panel, title, price, options and CTA.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-20">
        <div class="grid gap-10 lg:grid-cols-2 lg:gap-14">
            <div
                class="flex aspect-square items-center justify-center rounded-2xl border border-dashed border-edge bg-surface-inset/50 lg:aspect-auto lg:min-h-[28rem]">
                <neura::icon name="photo" class="size-12 text-fg-muted" />
            </div>

            <div>
                <neura::badge variant="soft" pill class="w-fit">{{ __('Lighting') }}</neura::badge>
                <neura::heading level="h1" size="3xl" class="mt-4 tracking-tight text-balance">
                    {{ __('Studio desk lamp') }}
                </neura::heading>
                <neura::text size="lg" class="mt-3 font-semibold tabular-nums text-fg">€89</neura::text>
                <neura::text size="sm" class="mt-4 max-w-md text-fg-secondary text-pretty">
                    {{ __('Adjustable arm, warm LED and a matte powder-coated base. Built for late shipping sessions.') }}
                </neura::text>

                <neura::separator class="my-8" />

                <form class="space-y-6" action="#" method="POST" onsubmit="return false;">
                    <fieldset>
                        <legend class="mb-3 text-sm font-medium text-fg">{{ __('Color') }}</legend>
                        <div class="flex flex-wrap gap-2">
                            @foreach ([
                                ['label' => __('Graphite'), 'selected' => true],
                                ['label' => __('Sand'), 'selected' => false],
                                ['label' => __('Ink'), 'selected' => false],
                            ] as $color)
                                <button type="button"
                                    @class([
                                        'rounded-xl border border-dashed px-4 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
                                        'border-fg bg-surface-raised font-medium text-fg shadow-sm' => $color['selected'],
                                        'border-edge text-fg-secondary hover:bg-hover/40' => ! $color['selected'],
                                    ])>
                                    {{ $color['label'] }}
                                </button>
                            @endforeach
                        </div>
                    </fieldset>

                    <neura::field class="max-w-[8rem]">
                        <neura::label for="product-qty">{{ __('Quantity') }}</neura::label>
                        <neura::input id="product-qty" type="number" name="quantity" value="1" min="1" />
                    </neura::field>

                    <div class="flex flex-wrap gap-3">
                        <neura::button type="submit" variant="primary" size="lg" icon="shopping-bag">
                            {{ __('Add to cart') }}
                        </neura::button>
                        <neura::button type="button" variant="outline" size="lg" icon="heart">
                            {{ __('Wishlist') }}
                        </neura::button>
                    </div>
                </form>

                <ul class="mt-8 space-y-2">
                    @foreach ([__('Free shipping over €75'), __('30-day returns'), __('In stock · ships in 2 days')] as $note)
                        <li class="flex items-center gap-2 text-sm text-fg-secondary">
                            <neura::icon name="check" class="size-4 shrink-0 text-fg" />
                            {{ $note }}
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Product grid — four-up catalog cards with price and add button.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-16 lg:py-24">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="3xl" class="tracking-tight text-balance">
                    {{ __('All products') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('12 items · Updated weekly') }}
                </neura::text>
            </div>
            <neura::button href="#filters" variant="outline" size="sm" icon="funnel">
                {{ __('Filter') }}
            </neura::button>
        </div>

        <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['name' => __('Studio desk lamp'), 'price' => '€89'],
                ['name' => __('Canvas tote bag'), 'price' => '€42'],
                ['name' => __('Ceramic mug set'), 'price' => '€36'],
                ['name' => __('Walnut notebook'), 'price' => '€28'],
            ] as $product)
                <article class="group flex flex-col overflow-hidden rounded-2xl border border-dashed border-edge">
                    <div
                        class="flex aspect-square items-center justify-center border-b border-dashed border-edge bg-surface-inset/50">
                        <neura::icon name="photo" class="size-7 text-fg-muted" />
                    </div>
                    <div class="flex flex-1 flex-col p-4">
                        <neura::text size="sm" class="font-medium text-fg">{{ $product['name'] }}</neura::text>
                        <div class="mt-auto flex items-center justify-between gap-2 pt-4">
                            <span class="font-semibold tabular-nums text-fg">{{ $product['price'] }}</span>
                            <neura::button variant="primary" size="sm">{{ __('Add') }}</neura::button>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </neura::container>
</section>

{{--
    Receipt card — order confirmation receipt with line items and totals.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-12 lg:py-16">
        <div class="mx-auto max-w-lg">
            <div class="mb-6 text-center">
                <neura::badge variant="soft" color="success" pill class="mx-auto w-fit">
                    {{ __('Paid') }}
                </neura::badge>
                <neura::heading level="h1" size="2xl" align="center" class="mt-4 tracking-tight">
                    {{ __('Order confirmed') }}
                </neura::heading>
                <neura::text size="sm" align="center" class="mt-2 text-fg-secondary">
                    {{ __('A receipt was sent to alex@company.com') }}
                </neura::text>
            </div>

            <neura::card class="p-6 sm:p-8">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                            {{ __('Order') }}
                        </neura::text>
                        <neura::text size="sm" class="mt-1 font-medium text-fg">#ORD-2048</neura::text>
                    </div>
                    <div class="text-right">
                        <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                            {{ __('Date') }}
                        </neura::text>
                        <neura::text size="sm" class="mt-1 font-mono text-fg">Mar 18, 2026</neura::text>
                    </div>
                </div>

                <neura::separator class="my-6" />

                <ul class="space-y-4">
                    @foreach ([
                        ['name' => __('Studio desk lamp'), 'meta' => __('Graphite · Qty 1'), 'price' => '€89'],
                        ['name' => __('Canvas tote bag'), 'meta' => __('Natural · Qty 2'), 'price' => '€84'],
                        ['name' => __('Ceramic mug set'), 'meta' => __('Set of 2 · Qty 1'), 'price' => '€36'],
                    ] as $line)
                        <li class="flex items-start justify-between gap-3 text-sm">
                            <div>
                                <span class="font-medium text-fg">{{ $line['name'] }}</span>
                                <neura::text size="xs" class="text-fg-muted">{{ $line['meta'] }}</neura::text>
                            </div>
                            <span class="shrink-0 tabular-nums text-fg">{{ $line['price'] }}</span>
                        </li>
                    @endforeach
                </ul>

                <neura::separator class="my-6" />

                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between gap-4">
                        <dt class="text-fg-secondary">{{ __('Subtotal') }}</dt>
                        <dd class="tabular-nums text-fg">€209</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-fg-secondary">{{ __('Shipping') }}</dt>
                        <dd class="tabular-nums text-fg">{{ __('Free') }}</dd>
                    </div>
                    <div class="flex justify-between gap-4">
                        <dt class="text-fg-secondary">{{ __('Tax') }}</dt>
                        <dd class="tabular-nums text-fg">€0</dd>
                    </div>
                    <div class="flex justify-between gap-4 pt-1">
                        <dt class="font-medium text-fg">{{ __('Total paid') }}</dt>
                        <dd class="text-lg font-semibold tabular-nums text-fg">€209</dd>
                    </div>
                </dl>

                <div class="mt-6 flex flex-wrap gap-2">
                    <neura::button variant="primary" size="sm" icon="arrow-down-tray" class="flex-1 sm:flex-none">
                        {{ __('Download PDF') }}
                    </neura::button>
                    <neura::button href="#shop" variant="outline" size="sm" class="flex-1 sm:flex-none">
                        {{ __('Continue shopping') }}
                    </neura::button>
                </div>
            </neura::card>
        </div>
    </neura::container>
</section>

{{--
    Review list — product reviews with star ratings.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h2" size="xl" class="tracking-tight">{{ __('Customer reviews') }}</neura::heading>
                <div class="mt-2 flex items-center gap-2">
                    <div class="flex items-center gap-0.5">
                        @for ($i = 0; $i < 5; $i++)
                            <neura::icon name="star" class="size-4 text-amber-500" />
                        @endfor
                    </div>
                    <neura::text size="sm" class="text-fg-secondary">4.8 · {{ __('24 reviews') }}</neura::text>
                </div>
            </div>
            <neura::button variant="outline" size="sm">{{ __('Write a review') }}</neura::button>
        </div>

        <ul class="mt-8 space-y-4">
            @foreach ([
                [
                    'name' => 'Amira B.',
                    'stars' => 5,
                    'title' => __('Perfect for late sessions'),
                    'body' => __('Warm light, solid build and the arm stays put. Exactly what our studio needed.'),
                    'date' => 'Mar 14',
                ],
                [
                    'name' => 'Jonas K.',
                    'stars' => 5,
                    'title' => __('Quiet and well finished'),
                    'body' => __('No flicker, clean powder coat. Packaging was careful and shipping was fast.'),
                    'date' => 'Mar 2',
                ],
                [
                    'name' => 'Sofia R.',
                    'stars' => 4,
                    'title' => __('Great lamp, wish for dimmer presets'),
                    'body' => __('Love the color options. A couple of saved brightness levels would make it perfect.'),
                    'date' => 'Feb 18',
                ],
            ] as $review)
                <li class="rounded-2xl border border-dashed border-edge p-5 sm:p-6">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div class="flex items-center gap-3">
                            <neura::avatar :name="$review['name']" color="auto" size="sm" />
                            <div>
                                <neura::text size="sm" class="font-medium text-fg">{{ $review['name'] }}</neura::text>
                                <div class="mt-0.5 flex items-center gap-0.5">
                                    @for ($i = 0; $i < 5; $i++)
                                        <neura::icon name="star"
                                            @class([
                                                'size-3.5',
                                                'text-amber-500' => $i < $review['stars'],
                                                'text-fg-muted/40' => $i >= $review['stars'],
                                            ]) />
                                    @endfor
                                </div>
                            </div>
                        </div>
                        <span class="font-mono text-[11px] text-fg-muted">{{ $review['date'] }}</span>
                    </div>
                    <neura::text size="sm" class="mt-4 font-medium text-fg">{{ $review['title'] }}</neura::text>
                    <neura::text size="sm" class="mt-1 text-fg-secondary text-pretty">{{ $review['body'] }}</neura::text>
                </li>
            @endforeach
        </ul>
    </neura::container>
</section>

{{--
    Shopping cart — line items with quantity, totals and checkout CTA.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <neura::heading level="h1" size="2xl" class="tracking-tight">{{ __('Your cart') }}</neura::heading>
        <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('3 items ready for checkout.') }}</neura::text>

        <ul class="mt-8 overflow-hidden rounded-2xl border border-dashed border-edge">
            @foreach ([
                ['name' => __('Studio desk lamp'), 'meta' => __('Graphite'), 'price' => '€89', 'qty' => 1],
                ['name' => __('Canvas tote bag'), 'meta' => __('Natural'), 'price' => '€42', 'qty' => 2],
                ['name' => __('Ceramic mug set'), 'meta' => __('Set of 2'), 'price' => '€36', 'qty' => 1],
            ] as $line)
                <li
                    class="flex flex-wrap items-center gap-4 border-b border-dashed border-edge px-5 py-4 last:border-b-0">
                    <div
                        class="flex size-16 shrink-0 items-center justify-center rounded-xl border border-dashed border-edge bg-surface-inset/50">
                        <neura::icon name="photo" class="size-5 text-fg-muted" />
                    </div>
                    <div class="min-w-0 flex-1">
                        <neura::text size="sm" class="font-medium text-fg">{{ $line['name'] }}</neura::text>
                        <neura::text size="xs" class="text-fg-muted">{{ $line['meta'] }}</neura::text>
                    </div>
                    <div class="flex items-center gap-2">
                        <neura::button type="button" variant="ghost" size="sm" icon="minus" />
                        <span class="w-6 text-center text-sm tabular-nums text-fg">{{ $line['qty'] }}</span>
                        <neura::button type="button" variant="ghost" size="sm" icon="plus" />
                    </div>
                    <span class="w-16 text-right text-sm font-medium tabular-nums text-fg">{{ $line['price'] }}</span>
                    <neura::button type="button" variant="ghost" size="sm" icon="trash" class="shrink-0" />
                </li>
            @endforeach
        </ul>

        <div class="mt-6 rounded-2xl border border-dashed border-edge p-6">
            <dl class="space-y-3">
                <div class="flex justify-between gap-4 text-sm">
                    <dt class="text-fg-secondary">{{ __('Subtotal') }}</dt>
                    <dd class="font-medium tabular-nums text-fg">€209</dd>
                </div>
                <div class="flex justify-between gap-4 text-sm">
                    <dt class="text-fg-secondary">{{ __('Shipping') }}</dt>
                    <dd class="font-medium tabular-nums text-fg">{{ __('Free') }}</dd>
                </div>
                <neura::separator />
                <div class="flex justify-between gap-4">
                    <dt class="font-medium text-fg">{{ __('Total') }}</dt>
                    <dd class="text-lg font-semibold tabular-nums text-fg">€209</dd>
                </div>
            </dl>
            <neura::button href="#checkout" variant="primary" size="lg" class="mt-6 w-full" icon="arrow-right">
                {{ __('Checkout') }}
            </neura::button>
        </div>
    </neura::container>
</section>

{{--
    Wishlist grid — saved products with remove and add-to-cart actions.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-12 lg:py-16">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <neura::heading level="h1" size="2xl" class="tracking-tight">{{ __('Wishlist') }}</neura::heading>
                <neura::text size="sm" class="mt-1 text-fg-secondary">{{ __('4 saved items') }}</neura::text>
            </div>
            <neura::button href="#shop" variant="soft" icon="arrow-right">{{ __('Continue shopping') }}</neura::button>
        </div>

        <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['name' => __('Studio desk lamp'), 'price' => '€89'],
                ['name' => __('Walnut notebook'), 'price' => '€28'],
                ['name' => __('Linen throw'), 'price' => '€64'],
                ['name' => __('Desk organizer'), 'price' => '€48'],
            ] as $item)
                <article class="flex flex-col overflow-hidden rounded-2xl border border-dashed border-edge">
                    <div class="relative">
                        <div
                            class="flex aspect-square items-center justify-center border-b border-dashed border-edge bg-surface-inset/50">
                            <neura::icon name="photo" class="size-7 text-fg-muted" />
                        </div>
                        <button
                            type="button"
                            class="absolute right-2 top-2 inline-flex size-8 items-center justify-center rounded-md border border-dashed border-edge bg-surface/90 text-fg-muted transition hover:bg-surface hover:text-fg"
                            aria-label="{{ __('Remove from wishlist') }}"
                        >
                            <neura::icon name="x-mark" class="size-4" />
                        </button>
                    </div>
                    <div class="flex flex-1 flex-col p-4">
                        <neura::text size="sm" class="font-medium text-fg">{{ $item['name'] }}</neura::text>
                        <span class="mt-1 font-semibold tabular-nums text-fg">{{ $item['price'] }}</span>
                        <neura::button variant="outline" size="sm" class="mt-4 w-full" icon="shopping-bag">
                            {{ __('Add to cart') }}
                        </neura::button>
                    </div>
                </article>
            @endforeach
        </div>
    </neura::container>
</section>