@extends('layouts.app')
@section('title', $product->title . ' — ' . $siteName)

@section('content')
<section class="section">
    <div class="container">
        <!-- Breadcrumb -->
        <div class="breadcrumb" style="display:flex;gap:.5rem;font-size:.82rem;color:var(--ink-3);margin-bottom:1.5rem;">
            <a href="{{ route('home') }}" style="color:var(--ink-2);"><i class="fas fa-house"></i></a>
            <span>/</span>
            <a href="{{ route('category.show', $product->category->slug) }}" style="color:var(--ink-2);">{{ $product->category->name }}</a>
            <span>/</span>
            <span style="color:var(--amber-deep);font-weight:700;">{{ $product->title }}</span>
        </div>

        <div style="display:grid;grid-template-columns:1fr;gap:2rem;">
            <div style="display:grid;grid-template-columns:1fr;gap:1.5rem;">
                @media (min-width:768px){#pd-grid{grid-template-columns:1fr 1fr;}}
                <!-- Gallery -->
                <div style="background:var(--paper);border-radius:var(--r-2xl);padding:1.5rem;border:1px solid var(--line);">
                    <div style="aspect-ratio:1/1;background:var(--cream-2);border-radius:var(--r-xl);overflow:hidden;display:flex;align-items:center;justify-content:center;">
                        <img src="{{ image_url($product->image_path) }}" alt="{{ $product->title }}" style="max-width:100%;max-height:100%;object-fit:contain;padding:1.5rem;">
                    </div>
                </div>

                <!-- Info -->
                <div>
                    <div class="card-brand" style="font-size:.78rem;">{{ $product->brand?->name }}</div>
                    <h1 style="font-size:clamp(1.4rem,3vw,1.85rem);font-weight:800;color:var(--ink);margin:.35rem 0 .65rem;letter-spacing:-.02em;">{{ $product->title }}</h1>

                    @if($product->discount_percent > 0)
                        <div style="display:inline-flex;align-items:center;gap:.5rem;background:var(--amber-soft);border:1px solid #FCD34D;color:var(--amber-deep);padding:.4rem .9rem;border-radius:var(--r-full);font-size:.82rem;font-weight:700;margin-bottom:1rem;">
                            <i class="fas fa-tag"></i> {{ $product->discount_percent }}% ছাড় — {{ format_price($product->save_amount) }} সাশ্রয়
                        </div>
                    @endif

                    <div style="display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem;">
                        <span style="font-size:clamp(1.75rem,4vw,2.25rem);font-weight:800;color:var(--ink);letter-spacing:-.02em;">{{ format_price($product->price) }}</span>
                        @if($product->discount_percent > 0)
                            <span style="font-size:1.1rem;color:var(--ink-3);text-decoration:line-through;">{{ format_price($product->regular_price) }}</span>
                        @endif
                    </div>

                    @php $stock = $product->stock_status; @endphp
                    <div class="card-stock {{ $stock['class'] }}" style="font-size:.9rem;margin-bottom:1.5rem;">
                        <i class="fas {{ $stock['icon'] }}"></i> {{ $stock['label'] }}
                    </div>

                    @if($product->ram || $product->rom || $product->color || $product->battery_health)
                        <div style="background:var(--cream);border-radius:var(--r-lg);padding:1rem 1.25rem;margin-bottom:1.5rem;">
                            <h3 style="font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--ink-3);margin-bottom:.65rem;">স্পেসিফিকেশন</h3>
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:.65rem;">
                                @if($product->ram)<div><span style="font-size:.7rem;color:var(--ink-3);">RAM</span><div style="font-weight:700;">{{ $product->ram }}</div></div>@endif
                                @if($product->rom)<div><span style="font-size:.7rem;color:var(--ink-3);">ROM</span><div style="font-weight:700;">{{ $product->rom }}</div></div>@endif
                                @if($product->color)<div><span style="font-size:.7rem;color:var(--ink-3);">কালার</span><div style="font-weight:700;">{{ $product->color }}</div></div>@endif
                                @if($product->battery_health)<div><span style="font-size:.7rem;color:var(--ink-3);">ব্যাটারি</span><div style="font-weight:700;">{{ $product->battery_health }}</div></div>@endif
                            </div>
                        </div>
                    @endif

                    <div style="display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:1.5rem;">
                        @if($stock['class'] !== 'out')
                            <form action="{{ route('cart.add') }}" method="post" style="flex:1;display:flex;">
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $product->id }}">
                                <input type="hidden" name="quantity" value="1">
                                <button type="submit" class="btn-card btn-card-primary" style="flex:1;padding:.85rem 1.5rem;font-size:.95rem;">
                                    <i class="fas fa-bag-shopping"></i> কার্টে যোগ করুন
                                </button>
                            </form>
                        @endif
                        <a href="https://wa.me/{{ format_whatsapp($whatsappNumber) }}?text={{ urlencode('হাই, আমি অর্ডার করতে চাই: ' . $product->title . ' (' . format_price($product->price) . ')') }}" target="_blank" class="btn-card" style="background:#22C55E;color:#fff;border:1.5px solid #22C55E;padding:.85rem 1.5rem;font-size:.95rem;flex:0;">
                            <i class="fab fa-whatsapp"></i> WhatsApp অর্ডার
                        </a>
                    </div>

                    @if($product->description)
                        <div style="background:var(--paper);border-radius:var(--r-lg);padding:1.25rem;border:1px solid var(--line);margin-top:1.5rem;">
                            <h3 style="font-size:1rem;font-weight:800;margin-bottom:.75rem;">বিবরণ</h3>
                            <p style="color:var(--ink-2);font-size:.92rem;line-height:1.7;">{{ $product->description }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Related Products -->
            @if($related->isNotEmpty())
                <div style="margin-top:1.5rem;">
                    <div class="sec-header">
                        <div class="sec-title-wrap">
                            <span class="sec-eyebrow">সম্পর্কিত</span>
                            <h2 class="sec-title">একই ক্যাটাগরির আরও</h2>
                        </div>
                    </div>
                    <div class="slider-wrap">
                        <div class="slider">
                            @foreach($related as $p)
                                <div class="slider-item">@include('components.product-card', ['p' => $p])</div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</section>
@endsection