@extends('layouts.app')

@section('title', $book->title)
@section('og_title', $book->title)
@section('og_description', $book->short_description ?? Str::limit(strip_tags($book->description), 150))
@section('og_image', $book->cover_url)

@section('content')

{{-- BREADCRUMB HERO --}}
<section class="relative py-24 overflow-hidden -mt-20 pt-24">
    <div class="absolute inset-0 hero-gradient"></div>
    <div class="hero-mesh"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
        <nav class="flex items-center gap-2 text-sm text-white/40 mb-6 animate-fade-in">
            <a href="{{ route('home') }}" class="hover:text-accent transition-colors">Beranda</a>
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            <a href="{{ route('books.index') }}" class="hover:text-accent transition-colors">Katalog Buku</a>
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            <span class="text-white/70 truncate max-w-xs">{{ $book->title }}</span>
        </nav>
        <h1 class="text-display text-3xl md:text-4xl text-white" style="animation: textReveal 1s ease forwards;">{{ $book->title }}</h1>
    </div>
    <div class="wave-divider"><svg viewBox="0 0 1200 120" preserveAspectRatio="none" fill="#fafbfd"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C57.1,118.92,156.63,69.08,321.39,56.44Z"></path></svg></div>
</section>

<section class="py-16 max-w-7xl mx-auto px-4 sm:px-6">
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-10">
        {{-- Cover Image (Sticky) --}}
        <div class="lg:col-span-2">
            <div class="lg:sticky lg:top-28 animate-on-scroll">
                <div class="card-elevated overflow-hidden group">
                    <div class="img-zoom">
                        <img src="{{ $book->cover_url }}" alt="{{ $book->title }}" class="w-full aspect-[3/4] object-cover">
                    </div>
                </div>
                <a href="https://wa.me/{{ \App\Models\Setting::get('whatsapp_number', '6281234567890') }}?text=Halo, saya tertarik dengan buku: {{ urlencode($book->title) }}"
                   target="_blank"
                   class="flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white w-full py-3.5 rounded-xl font-bold mt-4 btn-shine shadow-lg shadow-green-500/20 text-sm hover:-translate-y-1 transition-all">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><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-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
                    Tanya via WhatsApp
                </a>
            </div>
        </div>

        {{-- Details --}}
        <div class="lg:col-span-3 animate-slide-left" x-data="{ activeTab: 'spesifikasi' }">
            {{-- Title & Meta --}}
            <h2 class="text-headline text-2xl md:text-3xl text-gray-900 mb-3">{{ $book->title }}</h2>
            <div class="flex items-center gap-3 text-surface-400 text-sm mb-6">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                {{ $book->created_at->format('d M Y') }}
                @if($book->category)
                <span class="w-1 h-1 bg-surface-300 rounded-full"></span>
                <span class="text-primary font-medium">{{ $book->category->name }}</span>
                @endif
            </div>

            {{-- Tabs --}}
            <div class="border-b border-surface-200 mb-6">
                <div class="flex gap-0">
                    <button @click="activeTab = 'spesifikasi'" class="tab-btn" :class="activeTab === 'spesifikasi' ? 'active' : ''">Spesifikasi</button>
                    <button @click="activeTab = 'sinopsis'" class="tab-btn" :class="activeTab === 'sinopsis' ? 'active' : ''">Sinopsis</button>
                </div>
            </div>

            {{-- Spesifikasi Tab --}}
            <div x-show="activeTab === 'spesifikasi'" 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">
                <h3 class="text-headline text-lg text-primary mb-4">Spesifikasi</h3>
                <ul class="space-y-3 text-sm text-surface-600">
                    @if($book->isbn)
                    <li class="flex items-start gap-2">
                        <span class="w-1.5 h-1.5 bg-accent rounded-full mt-2 flex-shrink-0"></span>
                        <span><strong class="text-gray-900">ISBN:</strong> {{ $book->isbn }}</span>
                    </li>
                    @endif
                    <li class="flex items-start gap-2">
                        <span class="w-1.5 h-1.5 bg-accent rounded-full mt-2 flex-shrink-0"></span>
                        <span><strong class="text-gray-900">Judul:</strong> {{ $book->title }}</span>
                    </li>
                    @if($book->publisher)
                    <li class="flex items-start gap-2">
                        <span class="w-1.5 h-1.5 bg-accent rounded-full mt-2 flex-shrink-0"></span>
                        <span><strong class="text-gray-900">Penerbit:</strong> {{ $book->publisher }}</span>
                    </li>
                    @endif
                    <li class="flex items-start gap-2">
                        <span class="w-1.5 h-1.5 bg-accent rounded-full mt-2 flex-shrink-0"></span>
                        <span><strong class="text-gray-900">Penulis:</strong> {{ $book->author }}</span>
                    </li>
                    @if($book->editor)
                    <li class="flex items-start gap-2">
                        <span class="w-1.5 h-1.5 bg-accent rounded-full mt-2 flex-shrink-0"></span>
                        <span><strong class="text-gray-900">Penyunting:</strong> {{ $book->editor }}</span>
                    </li>
                    @endif
                    @if($book->published_year)
                    <li class="flex items-start gap-2">
                        <span class="w-1.5 h-1.5 bg-accent rounded-full mt-2 flex-shrink-0"></span>
                        <span><strong class="text-gray-900">Tahun Terbit:</strong> {{ $book->published_year }}</span>
                    </li>
                    @endif
                    @if($book->category)
                    <li class="flex items-start gap-2">
                        <span class="w-1.5 h-1.5 bg-accent rounded-full mt-2 flex-shrink-0"></span>
                        <span><strong class="text-gray-900">Kategori:</strong> {{ $book->category->name }}</span>
                    </li>
                    @endif
                </ul>

                @if($book->short_description)
                <div class="mt-6 p-4 bg-surface-50 rounded-xl">
                    <h4 class="font-heading font-bold text-gray-900 text-sm mb-2">Deskripsi Singkat</h4>
                    <p class="text-surface-600 text-sm leading-relaxed">{{ $book->short_description }}</p>
                </div>
                @endif
            </div>

            {{-- Sinopsis Tab --}}
            <div x-show="activeTab === 'sinopsis'" 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">
                <h3 class="text-headline text-lg text-primary mb-4">Sinopsis:</h3>
                @if($book->description)
                <div class="prose prose-lg max-w-none text-surface-600 prose-headings:font-heading prose-headings:text-gray-900 leading-relaxed">
                    {!! nl2br(e(strip_tags($book->description))) !!}
                </div>
                @else
                <p class="text-surface-400 italic text-sm">Sinopsis belum tersedia untuk buku ini.</p>
                @endif
            </div>

            {{-- Share Links --}}
            <div class="mt-8 pt-6 border-t border-surface-200">
                <p class="text-sm font-semibold text-gray-700 mb-3">Bagikan Melalui:</p>
                <div class="flex items-center gap-3" x-data="{ copied: false }">
                    {{-- Facebook --}}
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" rel="noopener"
                       class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/30">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                    {{-- X (Twitter) --}}
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($book->title) }}" target="_blank" rel="noopener"
                       class="w-10 h-10 bg-gray-900 hover:bg-black text-white rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-gray-900/30">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                    </a>
                    {{-- WhatsApp --}}
                    <a href="https://wa.me/?text={{ urlencode($book->title . ' - ' . request()->url()) }}" target="_blank" rel="noopener"
                       class="w-10 h-10 bg-green-500 hover:bg-green-600 text-white rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-green-500/30">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><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-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
                    </a>
                    {{-- Copy Link --}}
                    <button @click="navigator.clipboard.writeText('{{ request()->url() }}'); copied = true; setTimeout(() => copied = false, 2000)"
                            class="w-10 h-10 bg-surface-200 hover:bg-surface-300 text-surface-600 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 relative">
                        <svg x-show="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                        <svg x-show="copied" x-cloak class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                    </button>
                    <span x-show="copied" x-cloak x-transition class="text-green-500 text-xs font-medium">Link disalin!</span>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- RELATED BOOKS --}}
@if(isset($relatedBooks) && $relatedBooks->isNotEmpty())
<section class="bg-surface-100 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <h2 class="text-headline text-2xl text-gray-900 mb-10 animate-on-scroll">Buku Lainnya</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6" data-stagger="80">
            @foreach($relatedBooks as $index => $related)
            <a href="{{ route('books.show', $related->slug) }}" class="group animate-on-scroll block">
                <div class="bg-white rounded-2xl overflow-hidden shadow-sm shadow-gray-200/60 group-hover:shadow-xl group-hover:shadow-primary/10 group-hover:-translate-y-2 transition-all duration-500">
                    <div class="relative overflow-hidden bg-surface-100">
                        <div class="aspect-[3/4]">
                            <img src="{{ $related->cover_url }}" alt="{{ $related->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" loading="lazy">
                        </div>
                        <div class="absolute inset-0 bg-gradient-to-t from-primary-950/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end p-4">
                            <span class="text-white text-xs font-semibold flex items-center gap-1.5 translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                Lihat Detail
                            </span>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-heading font-bold text-gray-900 text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{{ $related->title }}</h3>
                        <div class="flex items-center gap-1.5 mt-2">
                            <svg class="w-3 h-3 text-surface-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            <p class="text-surface-400 text-xs truncate">{{ $related->author }}</p>
                        </div>
                        @if($related->editor)
                        <div class="flex items-center gap-1.5 mt-1">
                            <svg class="w-3 h-3 text-surface-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                            <p class="text-surface-400 text-xs truncate">Penyunting: {{ $related->editor }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection