@props(['saree'])

{{-- At-a-Glance Saree Highlights Box (2x2 Quick-Spec Grid)
     Reference: frontend/product_details_page_pdp_plan.md (Section 5C)
     Framed inside a --bg-surface container with a 1px --border-subtle border (12px padding) --}}
<div class="bg-bg-surface border border-border-subtle p-[12px] lg:p-[14px] grid grid-cols-2 gap-x-[16px] gap-y-[12px]">
    <div>
        <span class="block font-body font-normal text-[13px] text-text-muted">Fabric</span>
        <span class="block font-body font-semibold text-[14px] text-text-primary">
            {{ $saree['specs']['fabric'] ?? 'Authentic Handwoven Saree' }}
        </span>
    </div>
    <div>
        <span class="block font-body font-normal text-[13px] text-text-muted">Saree Length</span>
        <span class="block font-body font-semibold text-[14px] text-text-primary">
            {{ $saree['specs']['length'] ?? '12 Haat (5.5 Meters)' }}
        </span>
    </div>
    <div>
        <span class="block font-body font-normal text-[13px] text-text-muted">Blouse Piece</span>
        <span class="block font-body font-semibold text-[14px] text-text-primary">
            {{ $saree['specs']['blousePieceDetail'] ?? $saree['specs']['blousePiece'] ?? 'Included (1 Yard Unstitched)' }}
        </span>
    </div>
    <div>
        <span class="block font-body font-normal text-[13px] text-text-muted">Work / Pattern</span>
        <span class="block font-body font-semibold text-[14px] text-text-primary">
            {{ $saree['specs']['workType'] ?? 'Handloom / Tant' }}
        </span>
    </div>
</div>