@props(['saree'])

@php
    $shareText = sprintf('%s — %s | %s', $saree['title'], $saree['formattedPrice'], url()->current());
    $whatsappShareUrl = 'https://wa.me/?text=' . rawurlencode($shareText);
@endphp

{{-- Compact "Share This Saree" Row on PDP
     Reference: frontend/reviews_chat_and_social_sharing_plan.md (Section 3B)
     & frontend/product_details_page_pdp_plan.md (Section 5F.2) --}}
<div class="flex items-center gap-[12px] pt-[4px]">
    <span class="font-body text-[13px] text-text-muted">Share this saree:</span>

    <div class="flex items-center gap-[8px]">
        {{-- 1. WhatsApp Share --}}
        <a href="{{ $whatsappShareUrl }}"
           target="_blank"
           rel="noopener noreferrer"
           aria-label="Share saree on WhatsApp"
           class="btn-icon">
            <svg class="w-[16px] h-[16px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="1.9" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>
            </svg>
        </a>

        {{-- 2. Facebook / Messenger Share --}}
        <button type="button"
                @click="shareOnFacebookOrNative()"
                aria-label="Share saree on Facebook or Messenger"
                class="btn-icon">
            <svg class="w-[16px] h-[16px] fill-current" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
            </svg>
        </button>

        {{-- 3. Copy Link (🔗 — shows toast "Product link copied ✓" with --state-success border) --}}
        <button type="button"
                @click="copyProductLink()"
                aria-label="Copy product link"
                class="btn-icon">
            <svg class="w-[16px] h-[16px] stroke-current fill-none" viewBox="0 0 24 24" stroke-width="1.9" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
            </svg>
        </button>
    </div>
</div>