@extends('site.layouts.app')
@section('title', $product->title . ' | ' . config('site.name'))
@section('description', Str::limit($product->description, 160))

@section('content')
<section class="page-hero"><div class="container"><h1>{{ $product->title }}</h1><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('site.home') }}">الرئيسية</a></li><li class="breadcrumb-item"><a href="{{ route('site.categories.show', $product->category) }}">{{ $product->category->name }}</a></li><li class="breadcrumb-item active">{{ $product->title }}</li></ol></nav></div></section>
<section class="section-padding"><div class="container"><div class="row g-5">
    <div class="col-lg-6"><img src="{{ $product->image_url }}" alt="{{ $product->title }}" class="img-fluid rounded-4 shadow w-100"></div>
    <div class="col-lg-6">
        <span class="badge bg-secondary mb-2">{{ $product->category->name }}</span>
        <h2 class="section-title">{{ $product->title }}</h2>
        <p>{{ $product->description }}</p>
        <div class="d-flex flex-wrap gap-2 mt-4">
            <a href="{{ route('site.quote') }}" class="btn btn-gold">اطلب عرض سعر</a>
            <a href="https://wa.me/{{ config('site.whatsapp') }}?text={{ urlencode('استفسار عن: ' . $product->title) }}" target="_blank" class="btn btn-wa">واتساب</a>
            <a href="tel:{{ config('site.phone_tel') }}" class="btn btn-outline-dark"><i class="bi bi-telephone"></i> {{ config('site.phone_display') }}</a>
        </div>
    </div>
</div>
@if($related->count())
    <hr class="my-5">
    <h3 class="section-title mb-4">منتجات مشابهة</h3>
    <div class="row g-4">@foreach($related as $item)@include('site.partials.product-card', ['product' => $item])@endforeach</div>
@endif
</div></section>
@endsection