@extends('layouts.app')

@section('title', ($commerce->brand_name ?? 'Proveedor').' | Proveedores para Bodas y Matrimonios en Chile')

@section('meta-tags')
@php
    $desc = $commerce->description
        ? \Illuminate\Support\Str::limit(strip_tags($commerce->description), 155)
        : 'Proveedor para bodas y matrimonios en Chile. Revisa productos, ideas y servicios en Datos Matrimonios.';
    $img = $commerce->cover_path
        ? asset($commerce->cover_path)
        : asset('images/placeholder-cover.jpg');
@endphp

<meta name="description" content="{{ $desc }}">
<meta name="robots" content="index, follow">
<link rel="canonical" href="{{ url()->current() }}">

<meta property="og:type" content="website">
<meta property="og:site_name" content="Datos Matrimonios">
<meta property="og:locale" content="es_CL">
<meta property="og:title" content="{{ ($commerce->brand_name ?? 'Proveedor').' | Bodas y Matrimonios en Chile' }}">
<meta property="og:description" content="{{ $desc }}">
<meta property="og:image" content="{{ $img }}">
<meta property="og:url" content="{{ url()->current() }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ ($commerce->brand_name ?? 'Proveedor').' | Bodas y Matrimonios en Chile' }}">
<meta name="twitter:description" content="{{ $desc }}">
<meta name="twitter:image" content="{{ $img }}">

{{-- Schema: LocalBusiness --}}
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"LocalBusiness",
  "name":"{{ $commerce->brand_name ?? 'Proveedor' }}",
  "url":"{{ url()->current() }}",
  "image":"{{ $img }}",
  "address":{
    "@type":"PostalAddress",
    "addressCountry":"CL",
    "addressLocality":"{{ $commerce->city ?? 'Chile' }}"
  }
}
</script>
@endsection

@push('styles')
<style>
    :root{
        --dm-bg: #f7f8fb;
        --dm-card: #ffffff;
        --dm-text: #0f172a;
        --dm-muted: #64748b;
        --dm-border: rgba(15, 23, 42, .10);
        --dm-shadow: 0 18px 50px rgba(15, 23, 42, .10);
        --dm-radius: 22px;
        --dm-primary: #2563eb;
    }

    body{ background: var(--dm-bg); color: var(--dm-text); }
    .dm-card{
        background: var(--dm-card);
        border: 1px solid var(--dm-border);
        border-radius: var(--dm-radius);
        box-shadow: 0 10px 30px rgba(15,23,42,.06);
        overflow:hidden;
    }
    .dm-pill{
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        border-radius: 999px;
        padding: .25rem .6rem;
        font-size: .78rem;
        border: 1px solid rgba(37,99,235,.18);
        background: rgba(37,99,235,.07);
        color: #1d4ed8;
        font-weight: 700;
    }
    .muted{ color: var(--dm-muted); }
    .cover{
        position: relative;
        border-radius: 28px;
        overflow: hidden;
        border: 1px solid var(--dm-border);
        box-shadow: var(--dm-shadow);
    }
    .cover img{ width: 100%; height: 320px; object-fit: cover; display:block; }
    .cover::after{
        content:"";
        position:absolute; inset:0;
        background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
    }
    .cover-content{
        position:absolute; inset:0;
        display:flex;
        align-items:flex-end;
        padding: 18px;
        z-index:2;
        color:#fff;
    }
    .logo-box{
        width:64px; height:64px;
        border-radius: 16px;
        overflow:hidden;
        border: 1px solid rgba(255,255,255,.35);
        background: rgba(255,255,255,.9);
        flex:0 0 64px;
    }
    .logo-box img{ width:100%; height:100%; object-fit:cover; }
    .btn-primary{
        background: var(--dm-primary);
        border-color: var(--dm-primary);
        font-weight: 800;
        border-radius: 14px;
        padding: 10px 16px;
    }
</style>
@endpush

@section('content')
<div class="container py-4" style="max-width: 1100px;">

    <div class="mb-3">
        <a href="{{ url('/') }}" class="text-decoration-none">← Volver al inicio</a>
    </div>

    {{-- COVER --}}
    <div class="cover mb-4">
        <img
            src="{{ $commerce->cover_path ? asset($commerce->cover_path) : asset('images/placeholder-cover.jpg') }}"
            alt="Proveedor para bodas y matrimonios en Chile: {{ $commerce->brand_name }}"
            loading="lazy" decoding="async"
        >
        <div class="cover-content">
            <div class="d-flex gap-3 align-items-center">
                <div class="logo-box">
                    <img
                        src="{{ $commerce->logo_path ? asset($commerce->logo_path) : asset('images/placeholder-logo.png') }}"
                        alt="Logo de {{ $commerce->brand_name }}"
                        loading="lazy" decoding="async"
                    >
                </div>
                <div class="min-w-0">
                    <div class="dm-pill mb-2">Proveedor</div>
                    <h1 class="h3 fw-bold mb-1 text-truncate">{{ $commerce->brand_name ?? 'Proveedor' }}</h1>
                    <div class="small" style="opacity:.92;">
                        📍 {{ $commerce->city ?? 'Chile' }}
                        @if(!empty($commerce->category)) · {{ $commerce->category }} @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- INFO --}}
    <div class="row g-3 mb-4">
        <div class="col-lg-8">
            <div class="dm-card p-4">
                <h2 class="h5 fw-bold mb-2">Sobre este proveedor</h2>
                <div class="muted">
                    @if(!empty($commerce->description))
                        {!! nl2br(e($commerce->description)) !!}
                    @else
                        Proveedor de productos y servicios para bodas y matrimonios en Chile.
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="dm-card p-4">
                <h2 class="h6 fw-bold mb-3">Contacto</h2>

                {{-- Ajusta estos campos según tu BD (whatsapp, instagram, website, email, etc.) --}}
                @php
                    $whatsapp = $commerce->whatsapp ?? null;
                    $instagram = $commerce->instagram ?? null;
                    $website = $commerce->website ?? null;
                @endphp

                <div class="d-grid gap-2">
                    @if($whatsapp)
                        <a class="btn btn-primary" target="_blank" rel="noopener"
                           href="https://wa.me/{{ preg_replace('/\D+/', '', $whatsapp) }}">
                            Contactar por WhatsApp
                        </a>
                    @endif

                    @if($instagram)
                        <a class="btn btn-outline-secondary" target="_blank" rel="noopener"
                           href="https://instagram.com/{{ ltrim($instagram, '@') }}">
                            Ver Instagram
                        </a>
                    @endif

                    @if($website)
                        <a class="btn btn-outline-secondary" target="_blank" rel="noopener"
                           href="{{ $website }}">
                            Sitio web
                        </a>
                    @endif

                    @if(!$whatsapp && !$instagram && !$website)
                        <div class="muted small">
                            Este proveedor aún no ha agregado datos de contacto.
                        </div>
                    @endif
                </div>

                <hr class="my-3">

                <a href="{{ url('/blog?s='.urlencode($commerce->brand_name ?? '')) }}" class="text-decoration-none fw-bold">
                    Buscar ideas relacionadas →
                </a>
            </div>
        </div>
    </div>

    {{-- PRODUCTOS --}}
    <div class="d-flex justify-content-between align-items-end gap-2 mb-3">
        <div>
            <h2 class="h4 fw-bold mb-1">Productos</h2>
            <div class="muted">Productos activos para bodas y matrimonios.</div>
        </div>
    </div>

    @if($products->count())
        <div class="row g-3">
            @foreach($products as $p)
                <div class="col-12 col-md-6 col-lg-3">
                    <a href="{{ url('/producto/'.$p->slug) }}" class="text-decoration-none text-reset">
                        <div class="dm-card h-100">
                            <div class="ratio ratio-4x3 bg-light">
                                <img
                                    src="{{ $p->image_path ? asset($p->image_path) : asset('images/placeholder-producto.jpg') }}"
                                    alt="Producto para bodas y matrimonios: {{ $p->name }}"
                                    loading="lazy" decoding="async"
                                    style="width:100%;height:100%;object-fit:cover;"
                                >
                            </div>
                            <div class="p-3">
                                <div class="muted small mb-1">
                                    @if($p->category) {{ $p->category }} @endif
                                </div>
                                <div class="fw-bold">{{ $p->name }}</div>

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

                                @if(!empty($p->description))
                                    <div class="muted small mt-2">
                                        {{ \Illuminate\Support\Str::limit($p->description, 70) }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $products->links() }}
        </div>
    @else
        <div class="dm-card p-4">
            <div class="fw-bold mb-1">Este proveedor aún no tiene productos activos</div>
            <div class="muted">Vuelve más tarde o revisa ideas en el blog.</div>
        </div>
    @endif

</div>
@endsection