@props(['saree'])

@php
    $insideFee = number_format($storeConfig['insideDhakaDelivery']['chargeBDT'] ?? 70);
    $insideEta = $storeConfig['insideDhakaDelivery']['timeline'] ?? '2 – 3 Business Days';
    $outsideFee = number_format($storeConfig['outsideDhakaDelivery']['chargeBDT'] ?? 130);
    $outsideEta = $storeConfig['outsideDhakaDelivery']['timeline'] ?? '3 – 5 Business Days';

    $rawCare = $saree['resolvedCareInstructions'] ?? 'Dry clean recommended. Store wrapped in soft cotton cloth.';
    if (is_array($rawCare)) {
        $careLines = $rawCare;
    } else {
        $careLines = array_values(array_filter(array_map('trim', preg_split('/\.\s+|\n+/', (string) $rawCare))));
        $careLines = array_map(fn ($line) => str_ends_with($line, '.') ? $line : $line . '.', $careLines);
    }

    $specs = $saree['specs'] ?? [];
    $occasionVal = $specs['occasion'] ?? ($saree['occasionLabel'] ?? 'Festive & Cultural Wear');
    if (is_array($occasionVal)) {
        $occasionVal = implode(', ', $occasionVal);
    }

    $specRows = [
        ['label' => 'Fabric Material', 'value' => $specs['fabric'] ?? ($saree['fabric'] ?? 'Handloom Weave')],
        ['label' => 'Work / Pattern Type', 'value' => $specs['workType'] ?? ($saree['workType'] ?? 'Artisanal Handwork')],
        ['label' => 'Saree Length', 'value' => $specs['length'] ?? ($saree['length'] ?? '12 Haat (5.5 Meters)')],
        ['label' => 'Saree Width', 'value' => $specs['width'] ?? ($saree['width'] ?? '46–47 Inches')],
        ['label' => 'Blouse Piece Status', 'value' => $specs['blousePieceDetail'] ?? $specs['blousePiece'] ?? ($saree['blousePiece'] ?? 'Included (Running Blouse Piece)')],
        ['label' => 'Aanchal (Pallu) Style', 'value' => $specs['aanchalStyle'] ?? ($saree['aanchalStyle'] ?? 'Grand Heritage Aanchal')],
        ['label' => 'Color Family', 'value' => $specs['colorFamily'] ?? ($saree['colorLabel'] ?? 'Traditional Hue')],
        ['label' => 'Occasion', 'value' => $occasionVal],
        ['label' => 'Origin', 'value' => $specs['origin'] ?? ($saree['origin'] ?? 'Made in Bangladesh')],
    ];
@endphp

<section class="mt-10 lg:mt-14 border-t border-border-subtle" aria-label="Saree Details, Care & Delivery">
    {{-- =====================================================================
         PANEL 1: Saree Story & Specifications (OPEN BY DEFAULT)
         ===================================================================== --}}
    <div class="border-b border-border-subtle">
        <button
            type="button"
            @click="toggleAccordion('specs')"
            :aria-expanded="openAccordions.specs.toString()"
            class="w-full min-h-[54px] py-4 flex items-center justify-between gap-4 text-left group focus:outline-none"
        >
            <h3 class="type-h3 text-brand-primary group-hover:opacity-85 transition-opacity">
                Saree Story &amp; Specifications
            </h3>
            <span class="w-8 h-8 flex items-center justify-center border border-border-subtle bg-surface text-brand-primary transition-transform duration-200"
                  :class="openAccordions.specs ? 'rotate-180 bg-brand-primary text-text-light border-brand-primary' : ''">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                </svg>
            </span>
        </button>

        <div
            x-show="openAccordions.specs"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-1"
            x-transition:enter-end="opacity-100 translate-y-0"
            class="pb-6 pt-1 space-y-5"
        >
            {{-- 2–3 Sentence Craftsmanship & Drape Description --}}
            @if(!empty($saree['shortDescription']))
                <p class="type-body text-text-primary max-w-[78ch] leading-relaxed">
                    {{ $saree['shortDescription'] }}
                </p>
            @endif

            {{-- Clean 2-Column Specification Table (Alternating --bg-surface / --bg-main rows) --}}
            <div class="border border-border-subtle overflow-hidden max-w-[760px]">
                <dl class="divide-y divide-border-subtle">
                    @foreach($specRows as $idx => $row)
                        <div class="grid grid-cols-1 sm:grid-cols-12 px-4 py-3 text-[14px] {{ $idx % 2 === 0 ? 'bg-surface' : 'bg-main' }}">
                            <dt class="sm:col-span-5 font-semibold text-text-primary">
                                {{ $row['label'] }}
                            </dt>
                            <dd class="sm:col-span-7 text-text-muted mt-0.5 sm:mt-0">
                                {{ $row['value'] }}
                            </dd>
                        </div>
                    @endforeach
                </dl>
            </div>
        </div>
    </div>

    {{-- =====================================================================
         PANEL 2: Wash & Care Instructions (COLLAPSED BY DEFAULT)
         ===================================================================== --}}
    <div class="border-b border-border-subtle">
        <button
            type="button"
            @click="toggleAccordion('care')"
            :aria-expanded="openAccordions.care.toString()"
            class="w-full min-h-[54px] py-4 flex items-center justify-between gap-4 text-left group focus:outline-none"
        >
            <h3 class="type-h3 text-brand-primary group-hover:opacity-85 transition-opacity">
                Wash &amp; Care Instructions
            </h3>
            <span class="w-8 h-8 flex items-center justify-center border border-border-subtle bg-surface text-brand-primary transition-transform duration-200"
                  :class="openAccordions.care ? 'rotate-180 bg-brand-primary text-text-light border-brand-primary' : ''">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                </svg>
            </span>
        </button>

        <div
            x-show="openAccordions.care"
            x-cloak
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-1"
            x-transition:enter-end="opacity-100 translate-y-0"
            class="pb-6 pt-1 space-y-4 max-w-[760px]"
        >
            <ul class="space-y-2.5 text-[14px] text-text-primary">
                @foreach($careLines as $line)
                    <li class="flex items-start gap-2.5">
                        <span class="text-brand-primary font-bold mt-0.5">•</span>
                        <span>{{ $line }}</span>
                    </li>
                @endforeach
            </ul>

            {{-- Studio Lighting & Natural Dye Disclaimer --}}
            <div class="p-3.5 bg-surface border border-border-subtle text-[13px] text-text-muted leading-relaxed">
                <strong class="text-text-primary font-semibold">Color &amp; Handloom Note:</strong>
                Slight variations in weave texture or thread tension are natural hallmarks of authentic handloom artistry. Product colors may appear slightly warmer or cooler depending on studio lighting and your device screen settings.
            </div>
        </div>
    </div>

    {{-- =====================================================================
         PANEL 3: Delivery, Cash on Delivery & Exchange Policy (COLLAPSED BY DEFAULT)
         ===================================================================== --}}
    <div class="border-b border-border-subtle">
        <button
            type="button"
            @click="toggleAccordion('delivery')"
            :aria-expanded="openAccordions.delivery.toString()"
            class="w-full min-h-[54px] py-4 flex items-center justify-between gap-4 text-left group focus:outline-none"
        >
            <h3 class="type-h3 text-brand-primary group-hover:opacity-85 transition-opacity">
                Delivery, Cash on Delivery &amp; Exchange Policy
            </h3>
            <span class="w-8 h-8 flex items-center justify-center border border-border-subtle bg-surface text-brand-primary transition-transform duration-200"
                  :class="openAccordions.delivery ? 'rotate-180 bg-brand-primary text-text-light border-brand-primary' : ''">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
                </svg>
            </span>
        </button>

        <div
            x-show="openAccordions.delivery"
            x-cloak
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-1"
            x-transition:enter-end="opacity-100 translate-y-0"
            class="pb-6 pt-1 space-y-4 max-w-[760px]"
        >
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div class="p-3.5 bg-surface border border-border-subtle">
                    <div class="text-[12px] font-semibold uppercase tracking-wider text-brand-primary">
                        Inside Dhaka Delivery
                    </div>
                    <div class="mt-1 text-[15px] font-bold text-text-primary">
                        BDT {{ $insideFee }} <span class="font-normal text-text-muted text-[13px]">({{ $insideEta }})</span>
                    </div>
                </div>
                <div class="p-3.5 bg-surface border border-border-subtle">
                    <div class="text-[12px] font-semibold uppercase tracking-wider text-brand-primary">
                        Outside Dhaka (All 64 Districts)
                    </div>
                    <div class="mt-1 text-[15px] font-bold text-text-primary">
                        BDT {{ $outsideFee }} <span class="font-normal text-text-muted text-[13px]">({{ $outsideEta }})</span>
                    </div>
                </div>
            </div>

            <ul class="space-y-2 text-[14px] text-text-primary">
                <li class="flex items-start gap-2.5">
                    <span class="text-state-success font-bold mt-0.5">✓</span>
                    <span><strong>100% Cash on Delivery (COD):</strong> No advance payment required. Pay the courier in cash when your saree arrives at your doorstep.</span>
                </li>
                <li class="flex items-start gap-2.5">
                    <span class="text-state-success font-bold mt-0.5">✓</span>
                    <span><strong>Doorstep Parcel Verification:</strong> Inspect your saree in front of the delivery rider before completing payment.</span>
                </li>
                <li class="flex items-start gap-2.5">
                    <span class="text-state-success font-bold mt-0.5">✓</span>
                    <span><strong>Easy 3-Day Exchange:</strong> Unused sarees with intact tags and original fold can be exchanged within 3 days of delivery.</span>
                </li>
            </ul>
        </div>
    </div>
</section>