---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import CarCard from '../components/CarCard.astro';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { lt } from '../i18n/lt';
import { site } from '../site';

const allCars = await getCollection('cars');
const currentCars = allCars.filter((car) => !car.data.sold).sort((a, b) => b.data.publishedAt.valueOf() - a.data.publishedAt.valueOf());
const soldCars = allCars.filter((car) => car.data.sold);
const heroCar = currentCars.find((car) => car.data.featured) ?? currentCars[0];
---

<BaseLayout title="Juozas Auto" description={site.description} canonicalPath="/">
  <Header />
  <main>
    <section class="mx-auto grid max-w-7xl gap-10 px-5 pb-16 pt-8 sm:px-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-end lg:px-10 lg:pb-24 lg:pt-14">
      <div class="max-w-3xl">
        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-burgundy-700">Naudoti automobiliai Lietuvoje</p>
        <h1 class="mt-5 text-3xl font-semibold text-ink sm:text-3xl">
          Atrinkti automobiliai. Be triukšmo, be paslėptų mokesčių.
        </h1>
        <p class="mt-6 max-w-xl text-lg text-muted">
          Mažas inventorius, aiškios kainos ir tiesioginis kontaktas su pardavėju. Kiekvienas automobilis pateiktas taip, kad sprendimą priimtumėte ramiai.
        </p>
      </div>
      {heroCar && (
        <a href={`/automobiliai/${heroCar.slug}`} class="group block" aria-label={`Peržiūrėti ${heroCar.data.make} ${heroCar.data.model}`}>
          <div class="overflow-hidden rounded-[2.5rem] bg-wash shadow-soft">
            <Image
              src={heroCar.data.photos[0]}
              alt={`${heroCar.data.make} ${heroCar.data.model} automobilio nuotrauka`}
              width={1040}
              height={780}
              loading="eager"
              format="avif"
              class="aspect-[4/3] w-full object-cover"
            />
          </div>
          <p class="mt-4 flex items-center justify-between text-sm text-muted">
            <span>Naujausias pasirinkimas</span>
            <span class="font-semibold text-burgundy-700">{heroCar.data.year} {heroCar.data.make} {heroCar.data.model}</span>
          </p>
        </a>
      )}
    </section>

    <section id="automobiliai" class="mx-auto max-w-7xl px-5 sm:px-8 lg:px-10">
      <div class="mb-8 flex items-end justify-between gap-6">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-muted">{currentCars.length} vnt.</p>
          <h2 class="mt-2 text-2xl font-semibold tracking-[-0.05em]">{lt.sections.currentCars}</h2>
        </div>
        <a class="hidden text-sm font-semibold text-burgundy-700 sm:block" href="/kontaktai">Norite parduoti automobilį?</a>
      </div>
      {currentCars.length > 0 ? (
        <div class="grid gap-x-7 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
          {currentCars.map((car) => <CarCard car={car} />)}
        </div>
      ) : (
        <div class="rounded-[2rem] border border-line bg-paper p-8">
          <p class="text-xl font-semibold">Šiuo metu aktyvių automobilių nėra.</p>
          <p class="mt-2 text-muted">Susisiekite, jei ieškote konkretaus modelio arba norite parduoti savo automobilį.</p>
        </div>
      )}
    </section>

    {site.showSoldCars && soldCars.length > 0 && (
      <section class="mx-auto mt-20 max-w-7xl px-5 sm:px-8 lg:px-10">
        <h2 class="text-xl font-semibold tracking-[-0.04em]">{lt.sections.soldCars}</h2>
        <div class="mt-6 grid gap-x-7 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
          {soldCars.map((car) => <CarCard car={car} compact />)}
        </div>
      </section>
    )}
  </main>
  <Footer />
</BaseLayout>
