---
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Apie - Juozas Auto" description="Trumpai apie Juozas Auto principus, automobilio pardavimo pagalbą ir darbo būdą." canonicalPath="/apie">
  <Header />
  <main class="mx-auto max-w-5xl px-5 py-10 sm:px-8 lg:px-10">
    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-burgundy-700">Apie</p>
    <h1 class="mt-4 max-w-3xl text-3xl font-semibold tracking-[-0.06em]">Mažas inventorius, daugiau dėmesio kiekvienam automobiliui.</h1>
    <p class="mt-7 max-w-2xl text-lg leading-8 text-muted">
      Juozas Auto yra vieno pardavėjo projektas. Čia nėra pirkėjų paskyrų, paslėptų mokesčių ar triukšmingų skelbimų blokų. Tik keli automobiliai ir aiški informacija sprendimui priimti.
    </p>

    <section class="mt-16 grid gap-8 md:grid-cols-3" aria-labelledby="process-heading">
      <h2 id="process-heading" class="sr-only">Kaip tai veikia</h2>
      <div>
        <p class="text-sm font-semibold text-burgundy-700">01</p>
        <h3 class="mt-3 text-xl font-semibold tracking-[-0.04em]">Atranka</h3>
        <p class="mt-3 text-muted">Į svetainę patenka tik keli automobiliai, kuriuos galima ramiai apžiūrėti ir palyginti.</p>
      </div>
      <div>
        <p class="text-sm font-semibold text-burgundy-700">02</p>
        <h3 class="mt-3 text-xl font-semibold tracking-[-0.04em]">Pateikimas</h3>
        <p class="mt-3 text-muted">Nuotraukos, kaina ir specifikacija pateikiami be perteklinių blokų ar dirbtinės skubos.</p>
      </div>
      <div>
        <p class="text-sm font-semibold text-burgundy-700">03</p>
        <h3 class="mt-3 text-xl font-semibold tracking-[-0.04em]">Kontaktas</h3>
        <p class="mt-3 text-muted">Skambutis arba WhatsApp žinutė veda tiesiai pas pardavėją. Savininkas tekstą pakeis tikra istorija.</p>
      </div>
    </section>

    <section class="mt-16 rounded-[2rem] bg-wash p-8">
      <p class="text-sm uppercase tracking-[0.18em] text-muted">Pasitikėjimas</p>
      <div class="mt-6 grid gap-8 sm:grid-cols-3">
        <div><p class="text-3xl font-semibold tabular">8+</p><p class="mt-1 text-sm text-muted">metai patirties</p></div>
        <div><p class="text-3xl font-semibold tabular">120+</p><p class="mt-1 text-sm text-muted">parduotų automobilių</p></div>
        <div><p class="text-3xl font-semibold tabular">1:1</p><p class="mt-1 text-sm text-muted">tiesioginis bendravimas</p></div>
      </div>
    </section>
  </main>
  <Footer />
</BaseLayout>
