---
import { lt } from '../i18n/lt';
import { PHONE_E164, PHONE_WA, telUrl, whatsappUrl } from '../lib/contact';

type Props = {
  make?: string;
  model?: string;
  compact?: boolean;
};

const { make, model, compact = false } = Astro.props;
const baseClass = compact ? 'px-4 py-3 text-sm' : 'px-5 py-4 text-base';
---

<div class="grid w-full max-w-full grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]" data-contact-buttons>
  <a
    class:list={[
      'min-w-0 rounded-full bg-burgundy-700 text-center font-semibold text-paper shadow-soft transition-transform duration-200 ease-out-quart hover:-translate-y-0.5 active:translate-y-0 tabular',
      baseClass,
    ]}
    href={telUrl(PHONE_E164)}
    data-contact-event
  >
    {lt.actions.call}
  </a>
  <a
    class:list={[
      'min-w-0 rounded-full border border-line bg-paper text-center font-semibold text-ink transition-colors duration-200 ease-out-quart hover:border-burgundy-600 hover:text-burgundy-700 tabular',
      baseClass,
    ]}
    href={whatsappUrl(PHONE_WA, make, model)}
    data-contact-event
  >
    {lt.actions.whatsapp}
  </a>
</div>

<script is:inline>
  if (!window.__juozasContactEventsBound) {
    window.__juozasContactEventsBound = true;
    document.addEventListener('click', (event) => {
      const link = event.target.closest('[data-contact-event]');
      if (!link) return;
      if (window.fbq) window.fbq('track', 'Contact');
    });
  }
</script>
