<x-front-layout>
@php
    $storeName = \App\Models\Setting::where('key', 'store_name')->value('value') ?? 'DigiShop';
    $productDesc = $product->description ? strip_tags($product->description) : 'Beli ' . $product->name . ' di ' . $storeName;
    $productThumbnail = $product->thumbnail ? url(Storage::url($product->thumbnail)) : url('logo.png');
@endphp
@section('title', $product->name . ' - ' . $storeName)
@section('meta_description', Str::limit($productDesc, 160))
@section('og_type', 'product')
@section('og_image', $productThumbnail)

<!-- JSON-LD Structured Data for Product -->
@section('schema')
<script type="application/ld+json">
{
  "@@context": "https://schema.org/",
  "@@type": "Product",
  "name": "{{ $product->name }}",
  "image": "{{ $productThumbnail }}",
  "description": "{{ Str::limit($productDesc, 200) }}",
  "offers": {
    "@@type": "Offer",
    "url": "{{ url()->current() }}",
    "priceCurrency": "IDR",
    "price": "{{ $product->price }}",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@@type": "Organization",
      "name": "{{ $storeName }}"
    }
  }
}
</script>
@endsection
    <div class="bg-gray-50 border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <nav class="flex" aria-label="Breadcrumb">
                <ol class="flex items-center space-x-2 text-sm text-gray-500 font-medium">
                    <li><a href="{{ route('home') }}" class="hover:text-violet-600 transition-colors">Home</a></li>
                    <li><x-heroicon-s-chevron-right class="w-4 h-4 text-gray-300" /></li>
                    <li><a href="{{ route('home', ['category' => $product->category->slug ?? '']) }}" class="hover:text-violet-600 transition-colors">{{ $product->category->name ?? 'Uncategorized' }}</a></li>
                    <li><x-heroicon-s-chevron-right class="w-4 h-4 text-gray-300" /></li>
                    <li class="text-gray-900 truncate max-w-[200px]">{{ $product->name }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-16">
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden flex flex-col lg:flex-row">
            <!-- Product Image -->
            <div class="w-full lg:w-1/2 xl:w-7/12 bg-gray-50 aspect-video relative overflow-hidden">
                @if($product->thumbnail)
                    <img src="{{ Storage::url($product->thumbnail) }}" alt="{{ $product->name }}" class="absolute inset-0 w-full h-full object-contain p-6">
                @else
                    <div class="w-full h-full absolute inset-0 flex items-center justify-center text-gray-400">
                        <x-heroicon-o-photo class="w-24 h-24 opacity-30" />
                    </div>
                @endif
            </div>

            <!-- Product Info -->
            <div class="w-full lg:w-1/2 xl:w-5/12 p-8 lg:p-12 flex flex-col">
                <div class="mb-2">
                    @if($product->category)
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-violet-50 text-violet-700 border border-violet-100">
                            <x-dynamic-component :component="'heroicon-o-' . ($product->category->icon ?: 'tag')" class="w-3.5 h-3.5" />
                            {{ $product->category->name }}
                        </span>
                    @endif
                </div>
                
                <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight leading-tight mb-4">
                    {{ $product->name }}
                </h1>
                
                <div class="prose prose-violet prose-sm text-gray-500 mb-8 flex-grow line-clamp-[10]">
                    {!! nl2br(e($product->description)) !!}
                </div>

                <div class="bg-gray-50 rounded-2xl p-6 border border-gray-100 mt-auto">
                    <div class="flex items-end justify-between mb-6">
                        <div>
                            <p class="text-sm text-gray-500 font-medium mb-1">Harga Beli</p>
                            <p class="text-3xl font-bold text-gray-900 leading-none">Rp{{ number_format($product->price, 0, ',', '.') }}</p>
                        </div>
                    </div>

                    <a href="{{ route('checkout.index', $product) }}" class="w-full flex items-center justify-center px-8 py-4 text-base font-bold text-white bg-violet-600 hover:bg-violet-700 rounded-xl transition-all duration-200 shadow-sm hover:shadow-violet-200 hover:-translate-y-0.5">
                        Beli Sekarang <x-heroicon-o-arrow-right class="w-5 h-5 ml-2" />
                    </a>
                    
                    <p class="text-xs text-center text-gray-500 mt-4 font-medium flex items-center justify-center gap-1.5 border-t border-gray-100 pt-3">
                        <x-heroicon-s-shield-check class="w-4 h-4 text-green-500" /> Transaksi aman & instan
                    </p>
                </div>
            </div>
        </div>

        <div class="mt-10 flex flex-col lg:flex-row gap-8">
            <div class="w-full lg:w-2/3">
                @if($product->content)
                <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="px-8 py-6 border-b border-gray-100 bg-gray-50/50">
                        <h2 class="text-xl font-bold text-gray-900 flex items-center">
                            <x-heroicon-o-document-text class="w-6 h-6 mr-2 text-violet-500" />
                            Deskripsi Lengkap Produk
                        </h2>
                    </div>
                    <div class="p-8 lg:p-10">
                        <div class="prose prose-violet max-w-none text-gray-600 leading-relaxed
                            prose-headings:text-gray-900 prose-headings:font-bold
                            prose-a:text-violet-600 prose-a:no-underline hover:prose-a:underline
                            prose-strong:text-gray-900
                            prose-ul:list-none prose-ul:pl-0 prose-ol:list-decimal
                            prose-img:rounded-xl prose-img:shadow-sm">
                            {!! clean($product->content) !!}
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- Right Sidebar Cards -->
            <div class="w-full lg:w-1/3">
                <div class="sticky top-8 flex flex-col gap-6">
                    
                    <!-- Card Spesifikasi -->
                    <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="px-8 py-6 border-b border-gray-100 bg-gray-50/50">
                            <h2 class="text-xl font-bold text-gray-900 flex items-center">
                                <x-heroicon-o-information-circle class="w-6 h-6 mr-2 text-violet-500" />
                                Informasi Produk
                            </h2>
                        </div>
                        <div class="p-6">
                            <ul class="space-y-4 text-sm">
                                <li class="flex justify-between items-center border-b border-gray-50 pb-3">
                                    <span class="text-gray-500 flex items-center"><x-heroicon-o-calendar class="w-4 h-4 mr-2" /> Terakhir Update</span>
                                    <span class="font-semibold text-gray-900">{{ $product->updated_at->format('d M Y') }}</span>
                                </li>
                                <li class="flex justify-between items-center border-b border-gray-50 pb-3">
                                    <span class="text-gray-500 flex items-center"><x-heroicon-o-arrow-path class="w-4 h-4 mr-2" /> Versi</span>
                                    <span class="font-semibold text-gray-900">{{ $product->version ?? '-' }}</span>
                                </li>
                                <li class="flex justify-between items-center border-b border-gray-50 pb-3">
                                    <span class="text-gray-500 flex items-center"><x-heroicon-o-document-arrow-down class="w-4 h-4 mr-2" /> Format File</span>
                                    <span class="font-semibold text-gray-900">{{ $product->format ?? '-' }}</span>
                                </li>
                                <li class="flex justify-between items-center">
                                    <span class="text-gray-500 flex items-center"><x-heroicon-o-cpu-chip class="w-4 h-4 mr-2" /> Framework</span>
                                    <span class="font-semibold text-gray-900">{{ $product->framework ?? '-' }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Card Garansi Produk -->
                    <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
                    <div class="px-8 py-6 border-b border-gray-100 bg-gray-50/50">
                        <h2 class="text-xl font-bold text-gray-900 flex items-center">
                            <x-heroicon-o-shield-check class="w-6 h-6 mr-2 text-green-500" />
                            Garansi Produk
                        </h2>
                    </div>
                    <div class="p-6">
                        @if(!empty($product->warranty_info))
                            <div class="prose prose-sm text-gray-600
                                prose-headings:font-bold prose-headings:text-gray-900
                                prose-p:text-gray-500 prose-p:text-sm
                                prose-ul:list-none prose-ul:pl-0 prose-ol:list-decimal
                                prose-strong:text-gray-900">
                                {!! clean($product->warranty_info) !!}
                            </div>
                        @else
                            <div class="text-gray-500 text-sm">
                                <ul class="space-y-4">
                                    <li class="flex items-start">
                                        <x-heroicon-s-check-circle class="w-6 h-6 text-green-500 mr-2 shrink-0" />
                                        <span class="mt-0.5"><strong class="text-gray-900">Akses Instan</strong> langsung download setelah pembayaran sukses.</span>
                                    </li>
                                    <li class="flex items-start">
                                        <x-heroicon-s-check-circle class="w-6 h-6 text-green-500 mr-2 shrink-0" />
                                        <span class="mt-0.5"><strong class="text-gray-900">Garansi 100% Uang Kembali</strong> jika produk tidak sesuai dengan deskripsi.</span>
                                    </li>
                                    <li class="flex items-start">
                                        <x-heroicon-s-check-circle class="w-6 h-6 text-green-500 mr-2 shrink-0" />
                                        <span class="mt-0.5"><strong class="text-gray-900">Dukungan Teknis</strong> tersedia untuk membantu Anda mengatasi kendala.</span>
                                    </li>
                                    <li class="flex items-start">
                                        <x-heroicon-s-check-circle class="w-6 h-6 text-green-500 mr-2 shrink-0" />
                                        <span class="mt-0.5"><strong class="text-gray-900">Akses Selamanya</strong> untuk mendapatkan update versi secara gratis.</span>
                                    </li>
                                </ul>
                            </div>
                        @endif
                    </div>
                    </div>

                    <!-- Floating Support Button is appended at the bottom -->
                </div>
            </div>
        </div>

        <!-- Section Testimoni -->
        @if($product->testimonials->count() > 0)
        <div class="mt-20 bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-8 py-10 lg:p-12 text-center">
                <h2 class="text-3xl font-extrabold text-gray-900 mb-4">Apa Kata Mereka?</h2>
                <p class="text-gray-500 mb-10 max-w-2xl mx-auto">Kami mengumpulkan berbagai ulasan nyata dari pelanggan yang telah membeli dan merasakan manfaat langsung produk ini.</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 text-left">
                    @foreach($product->testimonials as $testimonial)
                    <div class="bg-gray-50 rounded-2xl p-6 border border-gray-100 relative">
                        <div class="flex items-center mb-4">
                            @if($testimonial->avatar)
                                <div class="w-12 h-12 rounded-full overflow-hidden mr-4 border border-gray-200 flex-shrink-0">
                                    <img src="{{ Storage::url($testimonial->avatar) }}" alt="{{ $testimonial->name }}" class="w-full h-full object-cover">
                                </div>
                            @else
                                @php
                                    $words = explode(' ', $testimonial->name);
                                    $initials = '';
                                    foreach ($words as $w) {
                                        $initials .= mb_substr($w, 0, 1);
                                    }
                                    $initials = strtoupper(mb_substr($initials, 0, 2));
                                    
                                    $classes = [
                                        ['bg' => 'bg-violet-200', 'text' => 'text-violet-700'],
                                        ['bg' => 'bg-green-200', 'text' => 'text-green-700'],
                                        ['bg' => 'bg-pink-200', 'text' => 'text-pink-700'],
                                    ];
                                    $style = $classes[strlen($testimonial->name) % count($classes)];
                                @endphp
                                <div class="w-12 h-12 {{ $style['bg'] }} rounded-full flex items-center justify-center {{ $style['text'] }} font-bold text-lg mr-4 flex-shrink-0">
                                    {{ $initials }}
                                </div>
                            @endif
                            
                            <div>
                                <h4 class="font-bold text-gray-900 leading-tight">{{ $testimonial->name }}</h4>
                                <div class="flex text-yellow-400 mt-1">
                                    @for($i=1; $i<=5; $i++)
                                        @if($i <= $testimonial->rating)
                                            <x-heroicon-s-star class="w-4 h-4" />
                                        @else
                                            <x-heroicon-s-star class="w-4 h-4 text-gray-300" />
                                        @endif
                                    @endfor
                                </div>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm italic">"{{ $testimonial->content }}"</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        @if($relatedProducts->count() > 0)
        <div class="mt-20">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-2xl font-bold text-gray-900">Mungkin Anda Suka</h2>
                <a href="{{ route('home', ['category' => $product->category->slug ?? '']) }}" class="text-sm font-medium text-violet-600 hover:text-violet-800 flex items-center">
                    Lihat Lainnya <x-heroicon-o-arrow-right class="w-4 h-4 ml-1" />
                </a>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                @foreach($relatedProducts as $related)
                <a href="{{ route('product.show', $related) }}" class="group bg-white rounded-2xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 flex flex-col h-full">
                    <div class="aspect-video w-full bg-gray-100 relative overflow-hidden">
                        @if($related->thumbnail)
                            <img src="{{ Storage::url($related->thumbnail) }}" alt="{{ $related->name }}" class="w-full h-full object-contain p-2 group-hover:scale-105 transition-transform duration-500">
                        @endif
                    </div>
                    <div class="p-5 flex-1 flex flex-col">
                        <h3 class="text-base font-bold text-gray-900 group-hover:text-violet-600 transition-colors line-clamp-2 leading-tight">{{ $related->name }}</h3>
                        <div class="mt-auto pt-4 flex items-center justify-between">
                            <p class="text-lg font-bold text-violet-600 leading-none">Rp{{ number_format($related->price, 0, ',', '.') }}</p>
                            <div class="h-8 w-8 bg-gray-50 rounded-full flex items-center justify-center text-gray-400 group-hover:bg-violet-600 group-hover:text-white transition-colors duration-300">
                                <x-heroicon-o-arrow-right class="w-4 h-4 -rotate-45 group-hover:rotate-0 transition-transform" />
                            </div>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    <!-- Floating Chat Support Widget -->
    <div x-data="{ chatOpen: false }" class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
        
        <!-- Chat Window -->
        <div x-show="chatOpen" 
             x-transition:enter="transition ease-out duration-300 transform origin-bottom-right"
             x-transition:enter-start="opacity-0 translate-y-4 scale-90"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-200 transform origin-bottom-right"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 scale-90"
             class="mb-4 w-80 bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden" 
             style="display: none;"
             @click.away="chatOpen = false">
            
            <!-- Chat Header -->
            <div class="bg-gradient-to-r from-emerald-500 to-green-500 px-5 py-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="relative">
                        <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white backdrop-blur-sm shadow-sm border border-white/30">
                            <x-heroicon-s-user class="w-6 h-6" />
                        </div>
                        <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-300 border-2 border-green-600 rounded-full"></span>
                    </div>
                    <div>
                        <h4 class="text-white font-bold text-sm leading-tight">Admin Support</h4>
                        <p class="text-green-50 text-xs text-opacity-90">Biasanya membalas instan</p>
                    </div>
                </div>
                <button @click="chatOpen = false" class="text-green-100 hover:text-white transition-colors focus:outline-none">
                    <x-heroicon-o-x-mark class="w-5 h-5" />
                </button>
            </div>

            <!-- Chat Body -->
            <div class="p-5 bg-gray-50 flex flex-col gap-4 bg-[url('https://www.transparenttextures.com/patterns/chat-pattern.png')] bg-opacity-5">
                <!-- Welcome Message Bubble -->
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 flex-shrink-0">
                        <x-heroicon-s-sparkles class="w-4 h-4" />
                    </div>
                    <div class="bg-white p-3 rounded-2xl rounded-tl-none shadow-sm border border-gray-100 text-sm text-gray-700 relative">
                        <p>Halo kak! 👋</p>
                        <p class="mt-1">Ada yang bisa kami bantu terkait template/produk <strong>{{ $product->name }}</strong>?</p>
                        <!-- triangle arrow -->
                        <div class="absolute left-0 top-0 -ml-2 mt-2 border-r-[10px] border-r-white border-t-[10px] border-t-transparent border-b-[10px] border-b-transparent"></div>
                    </div>
                </div>
            </div>

            <!-- Chat Footer (Action) -->
            <div class="p-4 bg-white border-t border-gray-100">
                <a href="https://wa.me/6281234567890?text={{ urlencode('Halo admin, saya tertarik dan butuh bantuan terkait produk: ' . $product->name) }}" 
                   target="_blank" 
                   @click="chatOpen = false" 
                   class="flex items-center justify-center w-full py-2.5 px-4 bg-green-500 hover:bg-green-600 text-white font-medium rounded-xl transition-all shadow-sm shadow-green-500/20 hover:shadow-md hover:shadow-green-500/40">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372C7.362 7.069 6.47 7.863 6.47 9.497c0 1.634 1.336 3.217 1.524 3.465.188.248 2.366 3.612 5.733 5.068.802.346 1.428.553 1.916.708.805.253 1.538.217 2.115.131.644-.096 1.979-.81 2.257-1.593.278-.783.278-1.452.195-1.593-.082-.141-.303-.223-.601-.371z"/></svg>
                    Chat via WhatsApp
                </a>
                <p class="text-[10px] text-center text-gray-400 mt-3">CS Siaga: Senin - Minggu (08:00 - 21:00)</p>
            </div>
        </div>

        <!-- Floating Button -->
        <div class="relative group" x-show="!chatOpen" x-transition.opacity>
            <div class="absolute inset-y-0 right-full mr-4 flex items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                <div class="bg-gray-900 text-white text-sm font-medium py-1.5 px-3 rounded-lg whitespace-nowrap shadow-lg">
                    Butuh Bantuan?
                    <div class="absolute top-1/2 left-full -mt-1 w-2 h-2 bg-gray-900 rotate-45 transform -translate-x-1"></div>
                </div>
            </div>
            
            <button @click="chatOpen = true" class="flex items-center justify-center w-14 h-14 bg-green-500 text-white rounded-full shadow-lg shadow-green-500/30 hover:bg-green-600 hover:scale-110 transition-all duration-300 relative focus:outline-none focus:ring-4 focus:ring-green-500/50">
                <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372C7.362 7.069 6.47 7.863 6.47 9.497c0 1.634 1.336 3.217 1.524 3.465.188.248 2.366 3.612 5.733 5.068.802.346 1.428.553 1.916.708.805.253 1.538.217 2.115.131.644-.096 1.979-.81 2.257-1.593.278-.783.278-1.452.195-1.593-.082-.141-.303-.223-.601-.371z"/></svg>
                <span class="absolute top-0 right-0 block w-3.5 h-3.5 bg-red-500 border-2 border-white rounded-full"></span>
            </button>
        </div>
    </div>
</x-front-layout>




