@extends('layouts.store')
@section('title', $product->t('name') . ' - ' . __('app.site_name'))
@section('meta_description', Str::limit(strip_tags($product->t('description')), 160))

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <nav class="mb-8 text-sm flex items-center gap-2 text-brand-400">
        <a href="{{ route('home') }}" class="hover:text-brand-600 transition-colors">{{ __('app.home') }}</a>
        <svg class="w-3.5 h-3.5 opacity-40" 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('shop') }}" class="hover:text-brand-600 transition-colors">{{ __('app.shop') }}</a>
        <svg class="w-3.5 h-3.5 opacity-40" 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-brand-700 font-medium">{{ $product->t('name') }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <div x-data="{ current: '{{ $product->image ? asset('storage/' . $product->image) : '' }}' }">
            <div class="aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-brand-50 to-cream-100 mb-4 border border-brand-100/50 shadow-sm">
                @if($product->image)
                    <img :src="current" alt="{{ $product->t('name') }}" class="w-full h-full object-cover transition-all duration-300">
                @else
                    <div class="w-full h-full flex items-center justify-center">
                        <svg class="w-28 h-28 text-aloe-200" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C12 2 8 8 8 14c0 2.2 1.8 4 4 4s4-1.8 4-4C16 8 12 2 12 2zm0 14c-1.1 0-2-.9-2-2 0-2.4 1.2-5.5 2-7.4.8 1.9 2 5 2 7.4 0 1.1-.9 2-2 2z"/></svg>
                    </div>
                @endif
            </div>
            @if($product->gallery && count($product->gallery) > 0)
                <div class="grid grid-cols-5 gap-3">
                    @if($product->image)
                        <button @click="current = '{{ asset('storage/' . $product->image) }}'" class="aspect-square rounded-xl overflow-hidden border-2 hover:border-brand-400 transition-colors" :class="current === '{{ asset('storage/' . $product->image) }}' ? 'border-brand-400 ring-2 ring-brand-200' : 'border-brand-100'">
                            <img src="{{ asset('storage/' . $product->image) }}" class="w-full h-full object-cover" alt="">
                        </button>
                    @endif
                    @foreach($product->gallery as $img)
                        <button @click="current = '{{ asset('storage/' . $img) }}'" class="aspect-square rounded-xl overflow-hidden border-2 hover:border-brand-400 transition-colors" :class="current === '{{ asset('storage/' . $img) }}' ? 'border-brand-400 ring-2 ring-brand-200' : 'border-brand-100'">
                            <img src="{{ asset('storage/' . $img) }}" class="w-full h-full object-cover" alt="" loading="lazy">
                        </button>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="lg:py-4">
            <span class="text-lavender-500 font-semibold text-xs uppercase tracking-wider flex items-center gap-1">
                <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C12 2 8 8 8 14c0 2.2 1.8 4 4 4s4-1.8 4-4C16 8 12 2 12 2z"/></svg>
                {{ $product->category?->t('name') }}
            </span>
            <h1 class="text-3xl md:text-4xl font-display font-bold text-brand-900 mt-2 mb-6 leading-tight">{{ $product->t('name') }}</h1>

            <div class="flex items-baseline gap-3 mb-6">
                <span class="text-4xl font-extrabold text-brand-700">{{ number_format($product->price, 2) }}</span>
                <span class="text-lg font-semibold text-brand-400">{{ __('app.jod') }}</span>
                @if($product->hasDiscount())
                    <span class="text-lg text-brand-300 line-through ms-2">{{ number_format($product->compare_price, 2) }}</span>
                    <span class="badge-status bg-red-100 text-red-600">-{{ $product->discountPercent() }}%</span>
                @endif
            </div>

            <div class="flex items-center gap-3 mb-8">
                @if($product->inStock())
                    <span class="inline-flex items-center gap-1.5 text-emerald-600 text-sm font-semibold bg-emerald-50 px-3 py-1.5 rounded-full">
                        <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
                        {{ __('app.in_stock') }} ({{ $product->stock }})
                    </span>
                @else
                    <span class="inline-flex items-center gap-1.5 text-red-500 text-sm font-semibold bg-red-50 px-3 py-1.5 rounded-full">{{ __('app.out_of_stock') }}</span>
                @endif
                <span class="text-brand-300 text-sm font-mono">{{ __('app.sku') }}: {{ $product->sku }}</span>
            </div>

            @if($product->t('description'))
                <div class="bg-brand-50/30 rounded-2xl p-6 mb-8 border border-brand-100/50">
                    <h3 class="font-bold text-brand-800 mb-3 flex items-center gap-2">
                        <svg class="w-5 h-5 text-aloe-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C12 2 8 8 8 14c0 2.2 1.8 4 4 4s4-1.8 4-4C16 8 12 2 12 2zm0 14c-1.1 0-2-.9-2-2 0-2.4 1.2-5.5 2-7.4.8 1.9 2 5 2 7.4 0 1.1-.9 2-2 2z"/></svg>
                        {{ __('app.description') }}
                    </h3>
                    <div class="text-brand-600 leading-relaxed">{!! nl2br(e($product->t('description'))) !!}</div>
                </div>
            @endif

            <form action="{{ route('cart.add', $product) }}" method="POST" class="space-y-4">
                @csrf
                <div class="flex items-center gap-4">
                    <div class="flex items-center border-2 border-brand-200 rounded-xl overflow-hidden bg-white">
                        <button type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.dispatchEvent(new Event('change'))" class="px-4 py-3 text-brand-500 hover:bg-brand-50 transition font-bold text-lg">−</button>
                        <input type="number" name="quantity" value="1" min="1" max="{{ $product->stock }}" class="w-16 text-center border-0 focus:ring-0 text-brand-800 font-bold">
                        <button type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.dispatchEvent(new Event('change'))" class="px-4 py-3 text-brand-500 hover:bg-brand-50 transition font-bold text-lg">+</button>
                    </div>
                    <button type="submit" @if(!$product->inStock()) disabled @endif
                        class="flex-1 py-3.5 rounded-xl font-bold text-lg transition-all duration-300 {{ $product->inStock() ? 'bg-gradient-to-r from-brand-500 to-lavender-500 text-white hover:from-brand-600 hover:to-lavender-600 shadow-lg shadow-brand-500/25 hover:shadow-xl active:scale-[0.98]' : 'bg-brand-100 text-brand-300 cursor-not-allowed' }}">
                        {{ $product->inStock() ? __('app.add_to_cart') : __('app.out_of_stock') }}
                    </button>
                </div>
            </form>

            <div class="mt-8 grid grid-cols-3 gap-4">
                <div class="text-center p-3 bg-brand-50 rounded-xl border border-brand-100">
                    <svg class="w-5 h-5 mx-auto text-aloe-500 mb-1" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C12 2 8 8 8 14c0 2.2 1.8 4 4 4s4-1.8 4-4C16 8 12 2 12 2z"/></svg>
                    <span class="text-xs font-medium text-brand-600">{{ __('app.natural_ingredients') }}</span>
                </div>
                <div class="text-center p-3 bg-brand-50 rounded-xl border border-brand-100">
                    <svg class="w-5 h-5 mx-auto text-brand-400 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    <span class="text-xs font-medium text-brand-600">{{ __('app.why_delivery') }}</span>
                </div>
                <div class="text-center p-3 bg-lavender-50 rounded-xl border border-lavender-100">
                    <svg class="w-5 h-5 mx-auto text-lavender-400 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    <span class="text-xs font-medium text-brand-600">{{ __('app.cod') }}</span>
                </div>
            </div>
        </div>
    </div>

    @if($relatedProducts->count())
    <section class="mt-20">
        <h2 class="section-heading mb-8">{{ __('app.related_products') }}</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            @foreach($relatedProducts as $rp)
                @include('store.partials.product-card', ['product' => $rp])
            @endforeach
        </div>
    </section>
    @endif
</div>
@endsection