Collapsible Content

@props([
    'eyebrow'       => 'About us',
    'heading'       => 'Crafted to be carried for years, not seasons',
    'intro'         => 'Every piece begins with the material and ends with the maker. We keep the process close, the runs small, and the standards uncompromising — so what you carry only improves with age.',
    'items'         => null,
    'allowMultiple' => false,
    'cta'           => ['label' => 'Read our full story', 'href' => '#'],
])

@php
    $items ??= [
        ['title' => 'Our materials', 'body' => 'Full-grain leather is sourced from a single family-run tannery and vegetable-tanned over six weeks. No bonded offcuts, no plastic coatings — only hides that earn a richer patina with every wear.'],
        ['title' => 'Craftsmanship', 'body' => 'Each bag is cut, stitched and finished by one artisan from start to seal. Saddle-stitched seams and burnished edges are done by hand, the way they have been for four generations.'],
        ['title' => 'Care', 'body' => 'Wipe with a soft, dry cloth and condition twice a year. Store away from direct heat and let natural marks settle in — they are the record of a bag that is genuinely used.'],
    ];

    // Per-instance id base so triggers/panels wire up uniquely on a page with multiple copies.
    $blockId = 'collapsible-content-'.\Illuminate\Support\Str::random(6);
@endphp

<section
    {{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-20 lg:py-28']) }}
    data-slot="collapsible-content"
    aria-labelledby="{{ $blockId }}-heading"
>
    <div class="mx-auto grid max-w-7xl items-center gap-12 px-6 sm:px-8 lg:grid-cols-2 lg:gap-16 lg:px-12">

        {{-- ── Media placeholder (start column) ── --}}
        <div class="aspect-[4/5] w-full overflow-hidden rounded-lg bg-muted sm:aspect-[5/4] lg:aspect-[4/5]" aria-hidden="true"></div>

        {{-- ── Editorial copy + collapsible rows (end column) ── --}}
        <div class="flex flex-col">
            <p class="font-body text-base uppercase tracking-[0.3em] text-muted-foreground">
                {{ __($eyebrow) }}
            </p>

            <h2 id="{{ $blockId }}-heading" class="mt-4 font-heading text-3xl font-normal leading-[1.1] tracking-tight sm:text-4xl lg:text-5xl">
                {{ __($heading) }}
            </h2>

            <p class="mt-6 max-w-prose font-body text-base leading-relaxed text-muted-foreground sm:text-lg">
                {{ __($intro) }}
            </p>

            {{-- Collapsible rows on the ghost accordion; the first row starts open. --}}
            <x-ui.accordion variant="ghost" :inset="false" :multiple="$allowMultiple" :default="$blockId.'-0'" class="mt-10">
                @foreach ($items as $i => $item)
                    <x-ui.accordion.item :value="$blockId.'-'.$i" class="py-2">
                        <x-ui.accordion.trigger class="!py-6 font-heading !text-lg !font-normal hover:text-primary [&_svg]:size-5">
                            {{ __($item['title']) }}
                        </x-ui.accordion.trigger>
                        <x-ui.accordion.content class="font-body !text-base">
                            <p class="pb-2 leading-relaxed">{{ __($item['body']) }}</p>
                        </x-ui.accordion.content>
                    </x-ui.accordion.item>
                @endforeach
            </x-ui.accordion>

            @if ($cta)
                <div class="mt-10">
                    <x-ui.button :href="$cta['href']" variant="outline" :withArrow="true">
                        {{ __($cta['label']) }}
                    </x-ui.button>
                </div>
            @endif
        </div>
    </div>
</section>