@extends('layouts.app')

@section('title', $product->name.' | Bodas y Matrimonios en Chile')

@section('meta-tags')
<meta name="description" content="{{ \Illuminate\Support\Str::limit(strip_tags($product->description ?? ''), 155) }}">
<link rel="canonical" href="{{ url()->current() }}">
<meta property="og:type" content="product">
<meta property="og:title" content="{{ $product->name }}">
<meta property="og:description" content="{{ \Illuminate\Support\Str::limit(strip_tags($product->description ?? ''), 155) }}">
<meta property="og:image" content="{{ $product->image_path ? asset($product->image_path) : asset('images/placeholder-producto.jpg') }}">
<meta property="og:url" content="{{ url()->current() }}">
@endsection

@section('content')
<div class="container py-4" style="max-width: 1100px;">
    <a href="{{ url('/') }}#productos" class="text-decoration-none">← Volver</a>

    <div class="row g-4 mt-2">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="ratio ratio-4x3 bg-light">
                    <img
                        src="{{ $product->image_path ? asset($product->image_path) : asset('images/placeholder-producto.jpg') }}"
                        alt="Producto para bodas y matrimonios: {{ $product->name }}"
                        style="width:100%;height:100%;object-fit:cover;"
                    >
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <h1 class="fw-bold mb-2">{{ $product->name }}</h1>

            <div class="text-muted mb-2">
                {{ $product->commerceProfile?->brand_name ?? 'Proveedor' }}
                @if($product->category) · {{ $product->category }} @endif
            </div>

            @if(!is_null($product->price))
                <div class="h4 fw-bold mb-3">${{ number_format($product->price, 0, ',', '.') }} CLP</div>
            @else
                <div class="text-muted mb-3">Precio a convenir</div>
            @endif

            @if($product->description)
                <div class="card border-0 rounded-4 p-3 mb-3">
                    {!! nl2br(e($product->description)) !!}
                </div>
            @endif

            <div class="d-flex flex-wrap gap-2">
                {{-- CTA principal: ajustar a tu realidad (WhatsApp, formulario, etc.) --}}
                <a href="{{ url('/blog?s='.urlencode($product->name)) }}" class="btn btn-primary">
                    Ver ideas relacionadas
                </a>
                <a href="{{ url('/blog?s='.urlencode($product->commerceProfile?->brand_name ?? '')) }}" class="btn btn-outline-secondary">
                    Más de este proveedor
                </a>
            </div>
        </div>
    </div>
</div>
@endsection