FAQ

@props([
    'eyebrow' => 'Support',
    'heading' => 'Questions, answered',
    'intro' => 'Everything you need to know before, during and after your order. Browse by topic — and reach out if anything is still unclear.',
    'contactText' => 'Still have a question?',
    'contactCta' => ['label' => 'Contact our team', 'href' => '#'],
    'categories' => null,
])

@php
    // Editorial, category-grouped FAQ. Sensible sample content so the block
    // renders fully with no arguments.
    $categories ??= [
        [
            'label' => 'Orders',
            'items' => [
                ['question' => 'Can I change or cancel my order?', 'answer' => 'Orders can be amended or cancelled within an hour of being placed. After that the order enters fulfilment and can no longer be edited — though a return is always available once it arrives.'],
                ['question' => 'Which payment methods do you accept?', 'answer' => 'Secure payments are taken via all major credit cards and the regional wallet options shown at checkout. An itemised receipt is emailed automatically with every order.'],
            ],
        ],
        [
            'label' => 'Shipping',
            'items' => [
                ['question' => 'Do you ship internationally?', 'answer' => 'Yes — orders are shipped worldwide. Shipping fees and delivery estimates are calculated at checkout, and a tracking link is sent the moment your parcel is dispatched.'],
                ['question' => 'How long will delivery take?', 'answer' => 'Standard delivery arrives within three to five business days. Express options are offered at checkout for next-day arrival in most regions.'],
            ],
        ],
        [
            'label' => 'Returns',
            'items' => [
                ['question' => 'What is your return policy?', 'answer' => 'Returns are accepted within fourteen days of delivery. Items must be unused and returned in their original condition, after which your refund is issued to the original payment method.'],
                ['question' => 'How do I start a return?', 'answer' => 'Open your order history, select the item and request a prepaid return label. Drop the parcel at any carrier point and we will handle the rest.'],
            ],
        ],
    ];

    // Per-instance id seed so several copies can coexist on one page.
    $uid = 'faq08-'.\Illuminate\Support\Str::random(6);
    // Open the first row by default.
@endphp

{{--
    faq-08 — "Editorial" Monogram FAQ section.
    Distinct sibling of the other FAQ compositions: a two-column editorial layout — a header
    column (uppercase wide-tracked eyebrow, large light `font-heading` heading,
    intro + contact line) beside a category-grouped accordion. Uppercase
    wide-tracked category labels, thin hairline dividers (<x-ui.separator>), lots
    of whitespace. Each category is a ghost-variant <x-ui.accordion>; the
    first question of the first category starts open.
    Composes <x-ui.accordion> and <x-ui.separator>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<section
    data-slot="faq-08"
    {{ $attributes->merge(['class' => 'bg-background py-20 text-foreground sm:py-28']) }}
>
    <div class="mx-auto max-w-6xl px-6 sm:px-8 lg:px-12">
        <div class="grid gap-12 lg:grid-cols-12 lg:gap-16">

            {{-- ── Editorial header column ── --}}
            <div class="lg:col-span-4">
                @if ($eyebrow)
                    <p class="font-body text-sm uppercase tracking-[0.3em] text-muted-foreground">
                        {{ __($eyebrow) }}
                    </p>
                @endif

                <h2 class="mt-4 text-balance font-heading text-3xl font-normal leading-tight tracking-tight sm:text-4xl">
                    {{ __($heading) }}
                </h2>

                @if ($intro)
                    <p class="mt-6 text-pretty font-body leading-relaxed text-muted-foreground">
                        {{ __($intro) }}
                    </p>
                @endif

                @if ($contactText || $contactCta)
                    <p class="mt-8 font-body text-sm text-muted-foreground">
                        @if ($contactText)
                            {{ __($contactText) }}
                        @endif
                        @if ($contactCta)
                            <a
                                href="{{ $contactCta['href'] }}"
                                class="font-medium text-foreground underline decoration-border underline-offset-4 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                            >
                                {{ __($contactCta['label']) }}
                            </a>
                        @endif
                    </p>
                @endif
            </div>

            {{-- ── Category-grouped accordion column ── --}}
            <div class="lg:col-span-8">
                @foreach ($categories as $c => $category)
                    <div class="mt-12 first:mt-0">
                        {{-- Category label --}}
                        <h3 class="font-body text-sm uppercase tracking-widest text-muted-foreground">
                            {{ __($category['label']) }}
                        </h3>

                        <x-ui.separator class="mt-4" />

                        <x-ui.accordion variant="ghost" :inset="false" :default="$c === 0 ? $uid.'-0-0' : null" class="border-b border-border/60">
                            @foreach ($category['items'] as $i => $item)
                                <x-ui.accordion.item :value="$uid.'-'.$c.'-'.$i">
                                    <x-ui.accordion.trigger class="!py-6 font-body !text-base leading-snug [&_svg]:size-5">
                                        {{ __($item['question']) }}
                                    </x-ui.accordion.trigger>
                                    <x-ui.accordion.content class="font-body !text-base">
                                        <p class="pb-2 pe-10 text-pretty leading-relaxed">{{ __($item['answer']) }}</p>
                                    </x-ui.accordion.content>
                                </x-ui.accordion.item>
                            @endforeach
                        </x-ui.accordion>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>