{% extends "base.html" %}

{% block title %}{{ listing.seo_title_en or (listing.year|string + ' ' + listing.make + ' ' + listing.model + ' ' + (listing.trim or ''))|trim }} | {{ settings.company_name }}{% endblock %}

{% block og_type %}product{% endblock %}

{% block og_title %}{{ listing.seo_title_en or (listing.year|string + ' ' + listing.make + ' ' + listing.model + ' ' + (listing.trim or ''))|trim }}{% endblock %}

{% block meta %}
  {% if listing.meta_description_en %}
    <meta name="description" content="{{ listing.meta_description_en }}">
  {% endif %}
  <meta property="og:description" content="{{ listing.meta_description_en or (listing.year|string + ' ' + listing.make + ' ' + listing.model + ' ' + (listing.trim or '') + ' - ' + format_price_for_language(listing.price))|trim }}">
  {% if listing_images %}
    <meta property="og:image" content="{{ request.url_root.rstrip('/') }}{{ listing_images[0].src }}">
  {% endif %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Car",
    "name": "{{ listing.year }} {{ listing.make }} {{ listing.model }} {{ listing.trim or '' }}".trim(),
    "sku": "{{ listing.public_stock_number }}",
    "brand": { "@type": "Brand", "name": "{{ listing.make }}" },
    "model": "{{ listing.model }}",
    "vehicleModelDate": "{{ listing.year }}",
    "bodyType": "{{ listing.body_style }}",
    "numberOfDoors": {{ listing.doors or 4 }},
    "fuelType": "{{ listing.fuel_type }}",
    "mileageFromOdometer": {
      "@type": "QuantitativeValue",
      "value": {{ listing.odometer or 0 }},
      "unitCode": "KMT"
    },
    "vehicleTransmission": "{{ listing.transmission }}",
    "vehicleConfiguration": "{{ listing.trim or '' }}",
    "color": "{{ listing.exterior_color }}",
    "vehicleInteriorColor": "{{ listing.interior_color }}",
    "driveWheelConfiguration": "{{ listing.drive_line }}",
    "offers": {
      "@type": "Offer",
      "availability": "https://schema.org/{% if listing.status == 'Available' %}InStock{% else %}SoldOut{% endif %}",
      "priceCurrency": "CAD",
      "price": "{{ listing.price }}",
      "url": "{{ request.url }}"
    }
  }
  </script>
{% endblock %}

{% block content %}
<section class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8" data-analytics-listing-id="{{ listing.id }}">

  {# Breadcrumbs #}
  <nav class="mb-6 flex items-center gap-1.5 text-sm text-zinc-500" aria-label="Breadcrumb">
    <a href="{{ url_for('home', lang=lang) }}" class="hover:text-zinc-900 transition-colors">{{ t('home', lang) }}</a>
    <span aria-hidden="true">/</span>
    <a href="{{ url_for('inventory', lang=lang) }}" class="hover:text-zinc-900 transition-colors">{{ t('inventory', lang) }}</a>
    <span aria-hidden="true">/</span>
    <span class="font-semibold text-zinc-900 truncate max-w-[240px]">{{ listing.year }} {{ listing.make }} {{ listing.model }}</span>
  </nav>

  {# ===== 1. IMAGE GALLERY ===== #}
  <div class="mb-8 overflow-hidden rounded-2xl bg-zinc-900" x-data="listingGallery()" data-total-images="{{ listing_images|length }}">
    {# Hero Image Area #}
    <div class="relative aspect-[16/9] w-full">
      {% if listing_images %}
        <img
          id="galleryHero"
          src="{{ listing_images[0].src }}"
          alt="{{ listing_images[0].alt }}"
          class="h-full w-full object-contain cursor-zoom-in"
          fetchpriority="high"
          decoding="async"
          draggable="false"
          tabindex="0"
          role="button"
          x-on:click="openZoom()"
          x-on:keydown.enter.prevent="openZoom()"
        >
        {# Navigation Arrows #}
        {% if listing_images|length > 1 %}
          <button
            class="absolute left-3 top-1/2 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full bg-white/90 text-zinc-900 shadow-lg transition hover:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"
            type="button"
            aria-label="{{ t('previous_image', lang) }}"
            x-on:click="prev()"
          >
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
          </button>
          <button
            class="absolute right-3 top-1/2 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full bg-white/90 text-zinc-900 shadow-lg transition hover:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"
            type="button"
            aria-label="{{ t('next_image', lang) }}"
            x-on:click="next()"
          >
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
          </button>
        {% endif %}
      {% else %}
        <div class="flex h-full w-full items-center justify-center bg-zinc-800">
          <div class="text-center text-zinc-500">
            <svg class="mx-auto h-16 w-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <p class="mt-3 text-sm font-semibold">{{ t('no_images', lang) }}</p>
          </div>
        </div>
      {% endif %}

      {# Image Counter Overlay #}
      {% if listing_images %}
        <span class="absolute bottom-4 right-4 rounded-full bg-black/60 px-3 py-1 text-sm font-semibold text-white backdrop-blur-sm" x-text="counterText"></span>
      {% endif %}
    </div>

    {# Thumbnail Strip #}
    {% if listing_images|length > 1 %}
      <div class="relative border-t border-zinc-800">
        <div
          class="flex gap-2 overflow-x-auto px-3 py-3 scrollbar-thin"
          role="listbox"
          aria-label="{{ t('image_thumbnails', lang) }}"
          x-ref="thumbStrip"
        >
          {% for image in listing_images %}
            <button
              class="shrink-0 overflow-hidden rounded-lg border-2 transition-all focus:outline-none focus:ring-2 focus:ring-amber-400 h-20 w-28 bg-zinc-800"
              :class="currentIndex === {{ loop.index0 }} ? 'border-amber-400 ring-1 ring-amber-400' : 'border-transparent opacity-60 hover:opacity-90'"
              type="button"
              role="option"
              x-on:click="goTo({{ loop.index0 }})"
              aria-label="{{ t('view_image', lang) }} {{ loop.index }}"
              :aria-selected="currentIndex === {{ loop.index0 }}"
            >
              <img
                src="{{ image.thumb_src }}"
                alt="{{ image.alt }}"
                class="h-full w-full object-contain"
                loading="lazy"
                decoding="async"
                draggable="false"
              >
            </button>
          {% endfor %}
        </div>
      </div>
    {% endif %}

    {# Zoom lightbox (Alpine) #}
    <div x-show="zoomOpen" x-transition.opacity class="gallery-zoom-modal" x-cloak
         x-on:click.self="closeZoom()" role="dialog" aria-modal="true" aria-label="Image zoom">
      <button class="gallery-zoom-close" type="button" x-on:click="closeZoom()" aria-label="Close zoom">Close</button>
      <button class="gallery-zoom-arrow left" type="button" x-on:click="zoomPrev()" aria-label="Previous image"
              x-show="images.length > 1">&#8249;</button>
      <img :src="images[currentIndex]" :alt="alts[currentIndex]" class="gallery-zoom-image">
      <button class="gallery-zoom-arrow right" type="button" x-on:click="zoomNext()" aria-label="Next image"
              x-show="images.length > 1">&#8250;</button>
      <p class="gallery-zoom-counter" x-text="(currentIndex + 1) + ' / ' + images.length"></p>
    </div>
  </div>

  {# ===== 2. TITLE + PRICE BAR ===== #}
  <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
    <div class="min-w-0">
      <h1 class="text-2xl font-black tracking-tight text-zinc-950 sm:text-3xl">
        {{ listing.year }} {{ listing.make }} {{ listing.model }} {{ listing.trim or '' }}
      </h1>
      <div class="mt-2 flex flex-wrap items-center gap-3">
        {% if listing.status == 'Sold' %}
          <span class="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-xs font-black uppercase tracking-wider text-red-700">&#9679; {{ t('sold', lang) }}</span>
        {% elif listing.status == 'Reserved' or listing.status == 'Pending' %}
          <span class="inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-xs font-black uppercase tracking-wider text-amber-700">&#9679; {{ t('reserved', lang) }}</span>
        {% endif %}
        {% if listing.certified %}
          <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-xs font-black uppercase tracking-wider text-blue-700">
            <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z" clip-rule="evenodd"/></svg>
            {{ t('certified', lang) }}
          </span>
        {% endif %}
      </div>
    </div>
    <div class="shrink-0 text-right">
      <p class="text-3xl font-black tracking-tight text-zinc-950 sm:text-4xl">CAD {{ format_price_for_language(listing.price) }}</p>
      <p class="text-xs text-slate-500 mt-0.5">{{ t('price_plus_tax', lang) }}</p>
      {% if settings.savings_banner_enabled and listing.savings is defined and listing.savings and listing.savings > 0 and listing.msrp is defined and listing.msrp and listing.msrp|float > (listing.price|string|replace(',', ''))|float %}
        <p class="mt-1 inline-block rounded-lg bg-amber-100 px-3 py-1.5 text-sm font-black leading-tight text-amber-900">
          {{ t('save', lang) }} CAD {{ format_price_for_language(listing.savings) }} {{ t('vs_msrp', lang) }} CAD {{ format_price_for_language(listing.msrp) }}
        </p>
      {% endif %}
    </div>
  </div>

  {# --- Pricing disclaimer --- #}
  <p class="text-xs text-slate-500 mb-8">{{ t('pricing_disclaimer', lang) }}</p>

  {# ===== 3. QUICK STATS ROW ===== #}
  <div class="mb-8 flex flex-wrap gap-2">
    {# Odometer #}
    <div class="inline-flex items-center gap-1.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-sm">
      <svg class="h-4 w-4 shrink-0 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="M12 6v6l4 2"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/></svg>
      <span>{{ '{:,.0f}'.format(listing.odometer) if listing.odometer else '---' }} km</span>
    </div>
    {# Transmission #}
    <div class="inline-flex items-center gap-1.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-sm">
      <svg class="h-4 w-4 shrink-0 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      <span>{{ listing.transmission or '---' }}</span>
    </div>
    {# Fuel Type #}
    <div class="inline-flex items-center gap-1.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-sm">
      <svg class="h-4 w-4 shrink-0 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      <span>{{ listing.fuel_type or '---' }}</span>
    </div>
    {# Drive Line #}
    <div class="inline-flex items-center gap-1.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-sm">
      <svg class="h-4 w-4 shrink-0 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/></svg>
      <span>{{ listing.drive_line or '---' }}</span>
    </div>
    {# Exterior Color with dot #}
    <div class="inline-flex items-center gap-1.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-sm">
      <span class="inline-block h-3.5 w-3.5 rounded-full border border-zinc-300 shrink-0" style="background-color: {{ listing.exterior_color|colorhex }};"></span>
      <span>{{ listing.exterior_color or '---' }}</span>
    </div>
    {# Doors #}
    <div class="inline-flex items-center gap-1.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-sm">
      <svg class="h-4 w-4 shrink-0 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
      <span>{{ listing.doors if listing.doors else '---' }} {{ t('doors', lang) }}</span>
    </div>
    {# Body Style #}
    <div class="inline-flex items-center gap-1.5 rounded-xl border border-zinc-200 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-sm">
      <svg class="h-4 w-4 shrink-0 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 17h14M5 12h14M5 7h14"/></svg>
      <span>{{ listing.body_style or '---' }}</span>
    </div>
  </div>

  {# ===== LISTING LAYOUT: promo (desktop) -> specs|contact (60/40) -> description -> safety -> similar ===== #}

  {# Promo banner: desktop only (mobile has no promo — unchanged from today) #}
  {% if promo_enabled and promo_placement in ('listing', 'both') %}
  <div class="promo-listing-banner promo-theme-{{ promo_theme }}{% if promo_anim_entrance %} promo-anim-entrance{% endif %}{% if promo_anim_shimmer %} promo-anim-shimmer{% endif %}{% if promo_anim_slide_text %} promo-anim-slide-text{% endif %} mb-8 hidden rounded-2xl px-4 py-2.5 text-center text-sm font-bold lg:block">
    <span class="promo-banner-text flex items-center justify-center gap-1.5">
      <svg class="h-4 w-4 shrink-0{% if promo_anim_pulse %} promo-anim-pulse-icon{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
      {{ promo_text }}
    </span>
    {% if promo_countdown_text %}
    <span class="promo-countdown-pill">{{ promo_countdown_text }}</span>
    {% endif %}
  </div>
  {% endif %}

  {# Mobile enquiry card (mobile only — unchanged) #}
  <div class="mb-8 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm lg:hidden" id="enquireMobile">
    <h2 class="mb-4 text-lg font-black text-zinc-950">{{ t('interested_in_this_vehicle', lang) }}</h2>
    <div class="grid grid-cols-2 gap-2 mb-5">
      <a href="tel:{{ settings.phone }}" class="flex items-center justify-center gap-1.5 rounded-xl bg-zinc-100 px-3 py-2.5 text-sm font-bold text-zinc-800 transition hover:bg-zinc-200">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
        {% if settings.phone2 %}{{ settings.phone }}{% else %}{{ t('call', lang) }}{% endif %}
      </a>
      <a href="{{ listing_email_url(listing) }}" class="flex items-center justify-center gap-1.5 rounded-xl bg-zinc-100 px-3 py-2.5 text-sm font-bold text-zinc-800 transition hover:bg-zinc-200">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        {{ t('email', lang) }}
      </a>
      {% if settings.phone2 %}
      <a href="tel:{{ settings.phone2 }}" class="col-span-2 flex items-center justify-center gap-1.5 rounded-xl bg-zinc-100 px-3 py-2.5 text-sm font-bold text-zinc-800 transition hover:bg-zinc-200">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
        {{ settings.phone2 }}
      </a>
      {% endif %}
    </div>
    <form method="post" action="{{ url_for('listing_detail', lang=lang, slug=listing.slug) }}" class="space-y-3">
      <input type="hidden" name="listing_id" value="{{ listing.id }}">
      <input type="hidden" name="source_page" value="{{ request.path }}">
      <input type="hidden" name="language" value="{{ lang }}">
      <input type="hidden" name="listing_slug" value="{{ listing.slug }}">
      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <input class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition" type="text" name="name" placeholder="{{ t('your_name', lang) }}" required>
        <input class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition" type="tel" name="phone" placeholder="{{ t('your_phone', lang) }}" required>
        <input class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition sm:col-span-2" type="email" name="email" placeholder="{{ t('your_email', lang) }}" required>
      </div>
      <textarea class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition" name="message" rows="3" placeholder="{{ t('i_am_interested_in', lang) }} {{ listing.year }} {{ listing.make }} {{ listing.model }}. {{ t('please_contact_me', lang) }}"></textarea>
      <button class="w-full rounded-xl bg-zinc-950 px-4 py-3 text-sm font-black text-white transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2" type="submit">
        {{ t('send_enquiry', lang) }}
      </button>
    </form>
  </div>

  {# Mobile Carfax (mobile only — unchanged) #}
  {% if settings.carfax_button_enabled and listing.vin and (listing.carfax_enabled is none or listing.carfax_enabled) %}
    <div class="mb-8 lg:hidden">
      <div class="rounded-2xl border border-blue-200 bg-gradient-to-br from-blue-50 to-white p-6 shadow-sm">
        <div class="text-center">
          <h2 class="text-lg font-black text-zinc-950">{{ t('carfax_vehicle_history', lang) }}</h2>
          <p class="mt-1 text-sm text-zinc-600">{{ t('carfax_description', lang) }}</p>
          <a
            href="{{ url_for('carfax_report', vin=listing.vin) }}"
            class="mt-4 inline-flex items-center gap-2 rounded-xl bg-blue-600 px-5 py-3 text-sm font-black text-white transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
            target="_blank"
            rel="noopener noreferrer"
          >
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
            {{ t('view_carfax_report', lang) }}
          </a>
        </div>
      </div>
    </div>
  {% endif %}

  {# Mobile Inspection Report (mobile only — shown only when shop-approved) #}
  {% if settings.inspection_button_enabled and report and report.status == 'approved' %}
    <div class="mb-8 lg:hidden">
      <div class="rounded-2xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-white p-6 shadow-sm">
        <div class="text-center">
          <h2 class="text-lg font-black text-zinc-950">{{ t('view_inspection_report', lang) }}</h2>
          <p class="mt-1 text-sm text-zinc-600">Pre-sale mechanical inspection, shop-approved.</p>
          <a
            href="{{ url_for('inspection_report', token=report.report_token) }}"
            class="mt-4 inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-5 py-3 text-sm font-black text-white transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2"
            target="_blank"
            rel="noopener noreferrer"
          >
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            {{ t('view_inspection_report', lang) }}
          </a>
        </div>
      </div>
    </div>
  {% endif %}

  {# 60/40 row: Specifications (left, always visible) + Contact card (right, desktop only) #}
  <div class="listing-layout grid gap-8 lg:grid-cols-5">
    {# Specifications card #}
    <div class="listing-main lg:col-span-3">
      <div class="mb-8 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-8">
        <h2 class="mb-6 text-xl font-black text-zinc-950">{{ t('specifications', lang) }}</h2>
        <div class="overflow-hidden rounded-xl border border-zinc-100">
          <table class="w-full">
            <tbody class="divide-y divide-zinc-100">
              {% if listing.engine %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500 w-2/5">{{ t('engine', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ listing.engine }}</td>
                </tr>
              {% endif %}
              {% if listing.transmission %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('transmission', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ listing.transmission }}</td>
                </tr>
              {% endif %}
              {% if listing.fuel_type %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('fuel_type', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ listing.fuel_type }}</td>
                </tr>
              {% endif %}
              {% if listing.drive_line %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('drivetrain', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ listing.drive_line }}</td>
                </tr>
              {% endif %}
              {% if listing.body_style %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('body_style', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ listing.body_style }}</td>
                </tr>
              {% endif %}
              {% if listing.doors %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('doors', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ listing.doors }}</td>
                </tr>
              {% endif %}
              {% if listing.exterior_color %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('exterior_color', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">
                    <span class="inline-flex items-center gap-2">
                      <span class="inline-block h-3.5 w-3.5 rounded-full border border-zinc-300" style="background-color: {{ listing.exterior_color|colorhex }};"></span>
                      {{ listing.exterior_color }}
                    </span>
                  </td>
                </tr>
              {% endif %}
              {% if listing.interior_color %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('interior_color', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">
                    <span class="inline-flex items-center gap-2">
                      <span class="inline-block h-3.5 w-3.5 rounded-full border border-zinc-300" style="background-color: {{ listing.interior_color|colorhex }};"></span>
                      {{ listing.interior_color }}
                    </span>
                  </td>
                </tr>
              {% endif %}
              {% if listing.odometer is not none %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('odometer', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ '{:,.0f}'.format(listing.odometer) }} km</td>
                </tr>
              {% endif %}
              {% if listing.public_stock_number %}
                <tr>
                  <th class="bg-zinc-50 px-5 py-3.5 text-left text-sm font-bold text-zinc-500">{{ t('stock_number', lang) }}</th>
                  <td class="px-5 py-3.5 text-sm font-semibold text-zinc-900">{{ listing.public_stock_number }}</td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {# Contact card (desktop only — mobile uses #enquireMobile above) #}
    <aside class="listing-sidebar hidden lg:block lg:col-span-2">
      <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm" id="enquire">
        <h2 class="text-lg font-black text-zinc-950">{{ t('interested_in_this_vehicle', lang) }}</h2>
        <p class="mt-1 text-sm text-zinc-500">{{ t('enquiry_copy', lang) }}</p>
        <div class="mt-5 grid grid-cols-2 gap-2">
          <a href="tel:{{ settings.phone }}" class="flex items-center justify-center gap-1.5 rounded-xl bg-zinc-100 px-2 py-2.5 text-xs font-bold text-zinc-800 transition hover:bg-zinc-200">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
            {% if settings.phone2 %}{{ settings.phone }}{% else %}{{ t('call', lang) }}{% endif %}
          </a>
          <a href="{{ listing_email_url(listing) }}" class="flex items-center justify-center gap-1.5 rounded-xl bg-zinc-100 px-2 py-2.5 text-xs font-bold text-zinc-800 transition hover:bg-zinc-200">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            {{ t('email', lang) }}
          </a>
          {% if settings.phone2 %}
          <a href="tel:{{ settings.phone2 }}" class="col-span-2 flex items-center justify-center gap-1.5 rounded-xl bg-zinc-100 px-2 py-2.5 text-xs font-bold text-zinc-800 transition hover:bg-zinc-200">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
            {{ settings.phone2 }}
          </a>
          {% endif %}
        </div>
        <form method="post" action="{{ url_for('listing_detail', lang=lang, slug=listing.slug) }}" class="mt-5 space-y-3">
          <input type="hidden" name="listing_id" value="{{ listing.id }}">
          <input type="hidden" name="source_page" value="{{ request.path }}">
          <input type="hidden" name="language" value="{{ lang }}">
          <input type="hidden" name="listing_slug" value="{{ listing.slug }}">
          <input class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition" type="text" name="name" placeholder="{{ t('your_name', lang) }}" required>
          <input class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition" type="tel" name="phone" placeholder="{{ t('your_phone', lang) }}" required>
          <input class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition" type="email" name="email" placeholder="{{ t('your_email', lang) }}" required>
          <textarea class="w-full rounded-xl border border-zinc-300 bg-white px-3.5 py-2.5 text-sm font-medium text-zinc-900 placeholder:text-zinc-400 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-200 transition" name="message" rows="2" placeholder="{{ t('i_am_interested_in', lang) }} {{ listing.year }} {{ listing.make }} {{ listing.model }}. {{ t('please_contact_me', lang) }}"></textarea>
          <button class="w-full rounded-xl bg-zinc-950 px-4 py-3 text-sm font-black text-white transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2" type="submit">
            {{ t('send_enquiry', lang) }}
          </button>
        </form>

        {# ===== DESKTOP CARFAX BUTTON ===== #}
        {% if settings.carfax_button_enabled and listing.vin and (listing.carfax_enabled is none or listing.carfax_enabled) %}
          <div class="mt-5 pt-5 border-t border-zinc-200">
            <a
              href="{{ url_for('carfax_report', vin=listing.vin) }}"
              class="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-3 text-sm font-black text-white transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
              {{ t('view_carfax_report', lang) }}
            </a>
          </div>
        {% endif %}

        {# ===== DESKTOP INSPECTION BUTTON (shop-approved only) ===== #}
        {% if settings.inspection_button_enabled and report and report.status == 'approved' %}
          <div class="mt-3">
            <a
              href="{{ url_for('inspection_report', token=report.report_token) }}"
              class="flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-3 text-sm font-black text-white transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
              {{ t('view_inspection_report', lang) }}
            </a>
          </div>
        {% endif %}
      </div>
    </aside>
  </div>

  {# Description (full width — unchanged) #}
  {% if listing.description_html_en %}
    <div class="mb-8 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-8">
      <h2 class="mb-4 text-xl font-black text-zinc-950">{{ t('description', lang) }}</h2>
      <div class="prose prose-zinc max-w-none prose-headings:font-black prose-headings:text-zinc-950 prose-p:text-zinc-600 prose-a:text-amber-700 prose-a:underline prose-strong:text-zinc-900 prose-li:text-zinc-600">
        {{ listing.description_html_en|safe }}
      </div>
    </div>
  {% endif %}

  {# Safety certification (full width — unchanged) #}
  {% if listing.safety_certified == 1 %}
    <div class="mb-8 rounded-2xl border border-emerald-200 bg-gradient-to-br from-emerald-50 to-white p-6 shadow-sm sm:p-8">
      <div class="flex items-start gap-4">
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-emerald-100">
          <svg class="h-6 w-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
        </div>
        <div>
          <h2 class="text-lg font-black text-emerald-900">{{ t('safety_certified_title', lang) }}</h2>
          <p class="mt-1 text-sm font-medium text-emerald-700">{{ t('safety_certified_description', lang) }}</p>
        </div>
        <span class="ml-auto shrink-0 inline-flex items-center gap-1 rounded-full bg-emerald-100 px-3 py-1 text-xs font-black uppercase tracking-wider text-emerald-700">
          <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
          {{ t('certified', lang) }}
        </span>
      </div>
    </div>
  {% endif %}

  {# Similar vehicles carousel #}
  {% if similar_listings %}
    <div class="mb-8" data-carousel-scope>
      <div class="mb-4 flex items-center justify-between">
        <h2 class="text-xl font-black text-zinc-950">{{ t('similar_vehicles', lang) }}</h2>
        <div class="flex gap-2">
          <button type="button" class="similar-carousel-arrow" data-carousel-prev aria-label="Previous similar vehicle">&#8249;</button>
          <button type="button" class="similar-carousel-arrow" data-carousel-next aria-label="Next similar vehicle">&#8250;</button>
        </div>
      </div>
      <div class="similar-vehicles-carousel" data-carousel data-carousel-cols="1">
        {% for rel in similar_listings %}
          <div class="similar-vehicle-card">{% with listing=rel %}{% include "partials/listing_card.html" %}{% endwith %}</div>
        {% endfor %}
      </div>
    </div>
  {% endif %}
</section>

{# ===== MOBILE STICKY BOTTOM BAR ===== #}
<div class="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 bg-white/95 backdrop-blur-sm lg:hidden">
  <div class="flex items-center gap-2 px-3 py-2.5">
    <p class="mr-auto min-w-0 truncate text-sm font-bold text-zinc-900">CAD {{ format_price_for_language(listing.price) }}</p>
    <a href="tel:{{ settings.phone }}" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-800" aria-label="{{ t('call', lang) }}">
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
    </a>
    <a href="{{ listing_email_url(listing) }}" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-800" aria-label="{{ t('email', lang) }}">
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
    </a>
    <a href="#enquireMobile" class="rounded-xl bg-zinc-950 px-4 py-2.5 text-sm font-black text-white shrink-0">{{ t('enquire', lang) }}</a>
  </div>
</div>

{# ===== GALLERY JAVASCRIPT (Alpine.js) ===== #}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('listingGallery', () => {
      const images = {{ listing_images|map(attribute='src')|list|tojson }};
      const thumbs = {{ listing_images|map(attribute='thumb_src')|list|tojson }};
      const alts = {{ listing_images|map(attribute='alt')|list|tojson }};

      return {
        currentIndex: 0,
        images: images,
        thumbs: thumbs,
        alts: alts,
        zoomOpen: false,

        get counterText() {
          return (this.currentIndex + 1) + ' / ' + this.images.length;
        },

        goTo(index) {
          if (index < 0) index = 0;
          if (index >= this.images.length) index = this.images.length - 1;
          this.currentIndex = index;
          this._updateHero();
          this._scrollThumbIntoView();
        },

        next() {
          this.goTo((this.currentIndex + 1) % this.images.length);
        },

        prev() {
          this.goTo((this.currentIndex - 1 + this.images.length) % this.images.length);
        },

        openZoom() { this.zoomOpen = true; },
        closeZoom() { this.zoomOpen = false; },
        zoomNext() { this.next(); },
        zoomPrev() { this.prev(); },

        _updateHero() {
          const hero = document.getElementById('galleryHero');
          if (hero) {
            hero.src = this.images[this.currentIndex];
            hero.alt = this.alts[this.currentIndex] || '';
          }
        },

        _scrollThumbIntoView() {
          const strip = this.$refs.thumbStrip;
          if (!strip) return;
          const btn = strip.querySelectorAll('button')[this.currentIndex];
          if (btn) {
            btn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
          }
        },

        init() {
          document.addEventListener('keydown', (e) => {
            if (this.zoomOpen) {
              if (e.key === 'Escape') { e.preventDefault(); this.closeZoom(); return; }
              if (e.key === 'ArrowLeft') { e.preventDefault(); this.zoomPrev(); return; }
              if (e.key === 'ArrowRight') { e.preventDefault(); this.zoomNext(); return; }
            }
            if (e.key === 'ArrowLeft') { e.preventDefault(); this.prev(); }
            if (e.key === 'ArrowRight') { e.preventDefault(); this.next(); }
          });
        }
      };
    });
  });
</script>
{% endblock %}