{% extends "base.html" %}

{% block title %}{{ landing.title }} | {{ settings.company_name }}{% endblock %}
{% block meta %}
  <meta name="description" content="{{ landing.description }}">
  <meta property="og:description" content="{{ landing.description }}">
{% endblock %}

{% block content %}
<section class="bg-zinc-950 text-white">
  <div class="mx-auto grid max-w-7xl gap-10 px-4 py-14 sm:px-6 lg:grid-cols-[1fr_0.86fr] lg:px-8">
    <div>
      <nav class="mb-6 text-sm font-bold text-zinc-400">
        <a class="text-amber-300" href="{{ url_for('home', lang=lang) }}">{{ t("home", lang) }}</a>
        <span class="mx-2">/</span>
        <span>{{ landing.heading }}</span>
      </nav>
      <p class="eyebrow">{{ t("export_focused_vehicles", lang) }}</p>
      <h1 class="mt-4 max-w-4xl text-4xl font-black tracking-normal sm:text-5xl">{{ landing.heading }}</h1>
      <p class="mt-5 max-w-3xl text-lg leading-8 text-zinc-300">{{ landing.description }}</p>
      <div class="mt-7 flex flex-wrap gap-3">
        <a class="btn-primary" href="{{ url_for('inventory', lang=lang, category=landing.category) if landing.category else url_for('inventory', lang=lang) }}">{{ t("view_matching_stock", lang) }}</a>
        <a class="btn-secondary" href="{{ url_for('contact', lang=lang) }}">{{ t("ask_about_export", lang) }}</a>
      </div>
    </div>
    <div class="landing-visual-strip">
      {% for listing in landing.listings[:3] %}
        {% set card_image = get_listing_primary_image(listing.id) %}
        {% if card_image %}
          <img src="{{ card_image|thumb }}" alt="{{ public_title_for_listing(listing, lang) }}" loading="lazy" decoding="async">
        {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

<section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
  <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
    {% for listing in landing.listings %}
      {% include "partials/listing_card.html" %}
    {% else %}
      <p class="rounded-lg border border-zinc-200 bg-white p-6 text-zinc-600">{{ t("no_matching_inventory", lang) }}</p>
    {% endfor %}
  </div>
</section>
{% endblock %}