---
import ContactButtons from '../components/ContactButtons.astro';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { EMAIL, HOURS, PHONE_DISPLAY } from '../lib/contact';
import { site } from '../site';
---

<BaseLayout title="Kontaktai - Juozas Auto" description="Susisiekite telefonu, el. paštu arba WhatsApp dėl automobilio apžiūros Lietuvoje." canonicalPath="/kontaktai">
  <Header />
  <main class="mx-auto grid max-w-7xl gap-12 px-5 py-10 sm:px-8 lg:grid-cols-[0.8fr_1.2fr] lg:px-10">
    <section>
      <p class="text-xs font-semibold uppercase tracking-[0.18em] text-burgundy-700">Kontaktai</p>
      <h1 class="mt-4 text-3xl font-semibold tracking-[-0.06em]">Susitarkime dėl apžiūros.</h1>
      <p class="mt-5 max-w-xl text-lg text-muted">Greičiausias būdas susisiekti yra skambutis arba WhatsApp žinutė. Atsakome darbo valandomis.</p>
      <div class="mt-8 max-w-md">
        <ContactButtons />
      </div>
      <dl class="mt-10 space-y-4 text-sm">
        <div><dt class="text-muted">Telefonas</dt><dd class="mt-1 font-semibold tabular">{PHONE_DISPLAY}</dd></div>
        <div><dt class="text-muted">El. paštas</dt><dd class="mt-1 font-semibold">{EMAIL}</dd></div>
        <div><dt class="text-muted">Darbo laikas</dt><dd class="mt-1 font-semibold">{HOURS}</dd></div>
      </dl>
    </section>

    <section class="rounded-[2rem] border border-line bg-paper p-6 shadow-soft sm:p-8" aria-labelledby="sell-heading">
      <h2 id="sell-heading" class="text-2xl font-semibold tracking-[-0.05em]">Norite parduoti automobilį?</h2>
      <p class="mt-3 text-muted">Palikite kontaktą ir trumpą informaciją. Nuotraukas galėsite atsiųsti atsakius į užklausą.</p>
      {!site.formAction && (
        <p class="mt-5 rounded-2xl bg-burgundy-50 px-4 py-3 text-sm text-burgundy-900">
          Forma paruošta prijungimui. Iki tol greičiausias kontaktas yra telefonas arba WhatsApp.
        </p>
      )}
      <form class="mt-7 grid gap-4" action={site.formAction || undefined} method="post" data-sell-form data-meta-params={JSON.stringify({ content_category: 'SellerLead', content_name: 'Sell car inquiry' })}>
        <label class="grid gap-2 text-sm font-semibold">Vardas<input class="rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="name" autocomplete="name" required /></label>
        <label class="grid gap-2 text-sm font-semibold">Telefonas<input class="rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="phone" autocomplete="tel" required /></label>
        <label class="grid gap-2 text-sm font-semibold">Automobilis<input class="rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="car" placeholder="BMW 320d, 2018" required /></label>
        <label class="grid gap-2 text-sm font-semibold">Pastaba<textarea class="min-h-32 rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="message" placeholder="Trumpai apie komplektaciją, ridą, būklę ir nuotraukas." /></label>
        <p class="text-sm text-muted">Nuotraukų įkėlimas šiame etape nenaudojamas dėl paprasto ir greito statinio puslapio.</p>
        <button class="rounded-full bg-burgundy-700 px-5 py-4 font-semibold text-paper transition-transform duration-200 ease-out-quart hover:-translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-60" type="submit" disabled={!site.formAction}>Siųsti užklausą</button>
        <p class="text-sm text-muted" role="status" data-form-status></p>
      </form>
    </section>
  </main>
  <Footer />
</BaseLayout>

<script is:inline>
  const form = document.querySelector('[data-sell-form]');
  const status = document.querySelector('[data-form-status]');
  if (form && form.action) {
    form.addEventListener('submit', async (event) => {
      event.preventDefault();
      const submit = form.querySelector('button[type="submit"]');
      if (submit) submit.disabled = true;
      if (status) status.textContent = 'Siunčiama...';
      try {
        const response = await fetch(form.action, {
          method: 'POST',
          body: new FormData(form),
          headers: { Accept: 'application/json' },
        });
        if (!response.ok) throw new Error('Form submit failed');
        if (window.juozasTrackMeta) {
          window.juozasTrackMeta('Lead', JSON.parse(form.dataset.metaParams || '{}'));
        }
        form.reset();
        if (status) status.textContent = 'Užklausa išsiųsta. Susisieksime artimiausiu metu.';
      } catch {
        if (status) status.textContent = 'Nepavyko išsiųsti. Paskambinkite arba parašykite per WhatsApp.';
        if (submit) submit.disabled = false;
      }
    });
  }
</script>