{% extends "base.html" %}

{% set page_title = get_page_text(page, "title", lang) %}
{% set page_excerpt = get_page_text(page, "excerpt", lang) %}
{% block title %}{{ get_page_text(page, "seo_title", lang) or page_title }} | {{ settings.company_name }}
{% endblock %}
{% block meta %}
  {% set meta_description = get_page_text(page, "meta_description", lang) or page_excerpt %}
  {% if meta_description %}<meta name="description" content="{{ meta_description }}">{% endif %}
  <meta property="og:description" content="{{ meta_description }}">
{% endblock %}

{% block content %}
<section class="page-hero">
  {% if page.hero_image_path %}
    <div class="page-hero-image" style="background-image:url('{{ page.hero_image_path }}')"></div>
  {% endif %}
  <div class="mx-auto max-w-5xl px-4 py-14 sm:px-6 lg:px-8">
    <nav class="mb-6 text-sm font-bold text-zinc-500">
      <a class="text-zinc-700 underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ url_for('home', lang=lang) }}">{{ t("home", lang) }}</a>
      <span class="mx-2">/</span>
      <span>{{ page_title }}</span>
    </nav>
    <div class="max-w-3xl">
      <p class="eyebrow-dark">{{ settings.company_name }}</p>
      <h1 class="mt-3 text-4xl font-black tracking-normal sm:text-5xl">{{ page_title }}</h1>
      {% if page_excerpt %}<p class="mt-4 text-lg leading-8 text-zinc-600">{{ page_excerpt }}</p>{% endif %}
    </div>
  </div>
</section>

<section class="cms-content px-4 py-10 sm:px-6 lg:px-8">
    <div class="prose-content mx-auto max-w-5xl rounded-lg border border-zinc-200 bg-white p-6 leading-7 text-zinc-700 shadow-sm">
      {{ get_page_text(page, "content_html", lang)|safe }}
    </div>
    {% if page.cta_title_en or page.cta_text_en %}
      <div class="mx-auto mt-8 max-w-5xl rounded-lg bg-zinc-950 p-6 text-white shadow-xl shadow-zinc-300/50">
        <p class="text-xs font-black uppercase tracking-[0.18em] text-amber-300">{{ t("next_step", lang) }}</p>
        <h2 class="mt-2 text-2xl font-black">{{ page.cta_title_en or "Talk to our team" }}</h2>
        <p class="mt-3 max-w-3xl text-zinc-300">{{ page.cta_text_en or "Ask about vehicle availability, financing, Canada-wide delivery, or inspection details." }}</p>
        <div class="mt-5 flex flex-wrap gap-3">
          <a class="btn-primary" href="{{ url_for('contact', lang=lang) }}">{{ t("contact_us", lang) }}</a>
          <a class="btn-secondary" href="{{ url_for('inventory', lang=lang) }}">{{ t("view_inventory", lang) }}</a>
        </div>
      </div>
    {% endif %}
</section>

{% if page.slug in ['about-us','delivery','financing','warranty','purchase-process'] %}<section class="mx-auto max-w-5xl px-4 pb-8 sm:px-6 lg:px-8">{% include 'partials/company_verification.html' %}</section>{% endif %}
{% if page.slug == 'about-us' %}{% set placement='about' %}{% include 'partials/trust_gallery.html' %}{% elif page.slug == 'delivery' %}{% set placement='delivery' %}{% include 'partials/trust_gallery.html' %}{% elif page.slug == 'warranty' %}{% set placement='warehouse' %}{% include 'partials/trust_gallery.html' %}{% endif %}

{% if page.slug == 'purchase-process' %}<section class="mx-auto max-w-5xl px-4 pb-8 sm:px-6 lg:px-8"><div class="flex flex-wrap gap-3"><a class="btn-outline" href="{{ url_for('public_page',lang=lang,page_slug='terms-conditions') }}">{{ t('nav_terms',lang) }}</a><a class="btn-outline" href="{{ url_for('public_page',lang=lang,page_slug='warranty') }}">{{ t('nav_warranty_inspection',lang) }}</a><a class="btn-outline" href="{{ url_for('public_page',lang=lang,page_slug='delivery') }}">{{ t('nav_shipping',lang) }}</a><a class="btn-outline" href="{{ url_for('public_page',lang=lang,page_slug='financing') }}">{{ t('vat_cross_border_title',lang) }}</a><a class="btn-primary" href="{{ url_for('contact',lang=lang) }}">{{ t('contact',lang) }}</a></div></section>{% endif %}

{% if page.slug == 'faq' and faqs %}
<section class="mx-auto max-w-5xl px-4 pb-16 sm:px-6 lg:px-8">
  <div class="grid gap-6 md:grid-cols-2">
    {% for faq in faqs %}
    {% set q = faq['question_' ~ lang] or faq.question_en %}
    {% set a = faq['answer_' ~ lang] or faq.answer_en %}
    <div class="faq-card rounded-lg border border-zinc-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md">
      <h3 class="text-base font-bold text-zinc-900">{{ q }}</h3>
      <p class="mt-3 text-sm leading-relaxed text-zinc-600">{{ a }}</p>
    </div>
    {% endfor %}
  </div>
</section>
{% endif %}
{% endblock %}