{% extends "base.html" %}

{% set hero_title = get_page_text(page, "title", lang) if page and get_page_text(page, "title", lang) else "Quality Used Vehicles in Toronto" %}
{% set hero_subtitle = get_page_text(page, "excerpt", lang) if page and get_page_text(page, "excerpt", lang) else "Browse our hand-picked inventory of certified and inspected used cars, trucks, and SUVs." %}
{% set hero_bg = page.hero_image_path if page and page.hero_image_path else none %}

{% block title %}{{ get_page_text(page, "seo_title", lang) if page else hero_title }} | {{ settings.company_name }}{% endblock %}

{% block content %}

{# ─────────────────── 1. HERO SECTION ─────────────────── #}
<section class="relative flex min-h-[32rem] items-center overflow-hidden bg-zinc-900 sm:min-h-[36rem]">
  {% if hero_bg %}
    <img src="{{ hero_bg }}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-40" loading="eager" decoding="async">
  {% endif %}
  <div class="absolute inset-0 bg-gradient-to-b from-zinc-900/30 via-zinc-900/60 to-zinc-900/90"></div>

  <div class="relative z-10 mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
    <div class="grid gap-10 lg:grid-cols-12 lg:items-center">
      <div class="lg:col-span-7">
        <p class="text-sm font-black uppercase tracking-[0.2em] text-amber-400">{{ t("home_hero_eyebrow", lang) }}</p>
        <h1 class="mt-4 text-4xl font-black leading-tight tracking-tight text-white sm:text-5xl lg:text-6xl">{{ hero_title }}</h1>
        <p class="mt-5 max-w-xl text-lg leading-8 text-zinc-300">{{ hero_subtitle }}</p>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href="{{ url_for('inventory', lang=lang) }}" class="inline-flex items-center rounded-lg bg-amber-400 px-6 py-3 text-sm font-black text-zinc-950 transition hover:bg-amber-300">{{ t("browse_inventory", lang) }}</a>
          <a href="{{ url_for('contact', lang=lang) }}" class="inline-flex items-center rounded-lg border-2 border-white/40 px-6 py-3 text-sm font-black text-white transition hover:border-white hover:bg-white/10">{{ t("contact_us", lang) }}</a>
        </div>
        <div class="mt-12">
          <p class="mb-3 text-xs font-bold uppercase tracking-wider text-zinc-400">{{ t("quick_search_by_category", lang) }}</p>
          <div class="flex flex-wrap gap-2">
            {% set quick_categories = [("Sedan","Sedans"),("SUV","SUVs"),("Truck","Trucks"),("Coupe","Coupes"),("Hatchback","Hatchbacks"),("Van","Vans"),("Convertible","Convertibles")] %}
            {% for cat_value, cat_label in quick_categories %}
              <a href="{{ url_for('inventory', lang=lang) }}?body_style={{ cat_value }}" class="rounded-full border border-white/25 px-4 py-1.5 text-xs font-semibold text-white transition hover:border-amber-400 hover:bg-amber-400/10 hover:text-amber-300">{{ cat_label }}</a>
            {% endfor %}
          </div>
        </div>
      </div>

      {% if featured_listings %}
      <div class="lg:col-span-5" data-carousel-scope>
        <div class="mb-3 flex items-center justify-between">
          <p class="text-xs font-bold uppercase tracking-wider text-zinc-300">{{ t("featured_vehicles_label", lang) }}</p>
          <div class="flex gap-2">
            <button type="button" class="hero-carousel-arrow" data-carousel-prev aria-label="Previous vehicles">&#8249;</button>
            <button type="button" class="hero-carousel-arrow" data-carousel-next aria-label="More vehicles">&#8250;</button>
          </div>
        </div>
        <div class="hero-featured-carousel" data-carousel data-carousel-cols="2">
          {% for listing in featured_listings[:settings.featured_carousel_count|default(8)|int] %}
            <div class="hero-featured-card">{% include "partials/listing_card_compact.html" %}</div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</section>


{# ─────────────────── 2. TRUST STRIP ─────────────────── #}
<section class="border-y border-zinc-200 bg-white">
  <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">

      {# CARFAX reports #}
      <div class="trust-strip-card">
        <div class="trust-strip-icon-wrap">
          <svg class="trust-strip-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
            <line x1="16" y1="13" x2="8" y2="13"/>
            <line x1="16" y1="17" x2="8" y2="17"/>
          </svg>
        </div>
        <span class="trust-strip-label">{{ t("trust_carfax", lang) }}</span>
      </div>

      {# Safety inspected #}
      <div class="trust-strip-card">
        <div class="trust-strip-icon-wrap">
          <svg class="trust-strip-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            <polyline points="9 12 11 14 15 10"/>
          </svg>
        </div>
        <span class="trust-strip-label">{{ t("trust_safety_inspected", lang) }}</span>
      </div>

      {# Financing #}
      <div class="trust-strip-card">
        <div class="trust-strip-icon-wrap">
          <svg class="trust-strip-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="1" x2="12" y2="23"/>
            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
          </svg>
        </div>
        <span class="trust-strip-label">{{ t("trust_financing", lang) }}</span>
      </div>

      {# Trade-ins #}
      <div class="trust-strip-card">
        <div class="trust-strip-icon-wrap">
          <svg class="trust-strip-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="23 4 23 10 17 10"/>
            <polyline points="1 20 1 14 7 14"/>
            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
          </svg>
        </div>
        <span class="trust-strip-label">{{ t("trust_trade_ins", lang) }}</span>
      </div>

      {# Canada-wide delivery #}
      <div class="trust-strip-card">
        <div class="trust-strip-icon-wrap">
          <svg class="trust-strip-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="1" y="3" width="15" height="13"/>
            <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
            <circle cx="5.5" cy="18.5" r="2.5"/>
            <circle cx="18.5" cy="18.5" r="2.5"/>
          </svg>
        </div>
        <span class="trust-strip-label">{{ t("trust_canada_delivery", lang) }}</span>
      </div>

    </div>
  </div>
</section>


{# ─────────────────── 4. SHOP BY BODY STYLE ─────────────────── #}
<section class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
  <p class="text-sm font-black uppercase tracking-[0.2em] text-zinc-500">{{ t("shop_by_body_style", lang) }}</p>
  <h2 class="mt-2 text-3xl font-black tracking-tight text-zinc-950">{{ t("find_your_perfect_vehicle", lang) }}</h2>

  <div class="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
    {% for card in body_style_cards %}
      <a href="{{ url_for('inventory', lang=lang) }}?body_style={{ card.key }}" class="group flex flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white transition hover:border-amber-300 hover:shadow-lg">
        <div class="aspect-[4/3] w-full overflow-hidden bg-zinc-100">
          {% if card.image_path %}
            <img src="{{ url_for('static', filename=card.image_path) }}" alt="{{ card.label_en }}" class="h-full w-full object-cover transition duration-300 group-hover:scale-105">
          {% else %}
            <div class="flex h-full w-full items-center justify-center text-sm font-black uppercase tracking-wider text-zinc-400">{{ card.label_en }}</div>
          {% endif %}
        </div>
        <span class="px-4 py-3 text-center text-sm font-black text-zinc-950">{{ card.label_en }}</span>
      </a>
    {% endfor %}
  </div>
</section>


{# ─────────────────── 5. POPULAR MAKES ─────────────────── #}
<section class="bg-zinc-50 py-14">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <p class="text-sm font-black uppercase tracking-[0.2em] text-zinc-500">{{ t("popular_makes", lang) }}</p>
    <h2 class="mt-2 text-3xl font-black tracking-tight text-zinc-950">{{ t("browse_by_make", lang) }}</h2>

    <div class="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-8">
      {% for pm in popular_makes %}
        {% set color_pair = MAKE_COLORS[loop.index0 % MAKE_COLORS|length] %}
        <a href="{{ url_for('inventory', lang=lang) }}?make={{ pm.key }}" class="group flex flex-col items-center gap-3 rounded-xl bg-white p-5 text-center shadow-sm transition hover:shadow-md">
          {% if pm.image_path %}
            <img src="{{ url_for('static', filename=pm.image_path) }}" alt="{{ pm.label }}" class="h-12 w-20 object-contain transition group-hover:scale-110">
          {% else %}
            <div class="flex h-14 w-14 items-center justify-center rounded-full {{ color_pair[0] }} text-xl font-black transition group-hover:scale-110">
              {{ pm.key[0] }}
            </div>
          {% endif %}
          <span class="text-sm font-bold text-zinc-800">{{ pm.label }}</span>
          <span class="text-xs text-zinc-400">{{ pm.count }} in stock</span>
        </a>
      {% endfor %}
    </div>
  </div>
</section>


{# ─────────────────── 6. RECENT ARRIVALS ─────────────────── #}
{% if recent_listings %}
<section class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
  <div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
    <div>
      <p class="text-sm font-black uppercase tracking-[0.2em] text-zinc-500">{{ t("recently_added_label", lang) }}</p>
      <h2 class="mt-2 text-3xl font-black tracking-tight text-zinc-950">{{ t("recently_added_heading", lang) }}</h2>
    </div>
    <a href="{{ url_for('inventory', lang=lang) }}" class="text-sm font-bold text-zinc-950 underline decoration-amber-400 decoration-2 underline-offset-4">
      {{ t("view_all_inventory", lang) }}
    </a>
  </div>

  <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
    {% for listing in recent_listings[:6] %}
      {% include "partials/listing_card.html" %}
    {% endfor %}
  </div>
</section>
{% endif %}


{# ─────────────────── 7. CMS CONTENT ─────────────────── #}
{% if page and get_page_text(page, 'content_html', lang) %}
<section class="border-t border-zinc-200 bg-white py-14">
  <div class="prose prose-zinc mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
    {{ get_page_text(page, 'content_html', lang)|safe }}
  </div>
</section>
{% endif %}

{% endblock %}