// WhatsApp helpers — a URL builder and a button component.
//
// Every WhatsApp affordance on the site routes through here so the
// number, prefilled text, and analytics live in one place.

(function () {
  // Build a wa.me URL with optional prefilled text.
  //   waUrl()                    → https://wa.me/971555050772
  //   waUrl('SKU NJM-X-1')       → https://wa.me/971555050772?text=SKU%20NJM-X-1
  window.waUrl = function waUrl(text) {
    const base = `https://wa.me/${window.NAJMAT_DATA.brand.mobileDigits}`;
    return text ? `${base}?text=${encodeURIComponent(text)}` : base;
  };

  // <WhatsAppButton variant="primary"|"ghost"|"compact" text="..." label="..." />
  window.WhatsAppButton = function WhatsAppButton({
    variant = 'primary',
    text,
    label = 'WhatsApp us',
  }) {
    const style = {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      fontFamily: 'var(--font-sans)',
      fontWeight: 700,
      fontSize: 12,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      padding: '10px 16px',
      borderRadius: 'var(--radius-md)',
      transition: 'background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)',
    };
    if (variant === 'primary') {
      Object.assign(style, { background: 'var(--orange)', color: 'var(--ink)' });
    } else if (variant === 'ghost') {
      Object.assign(style, { background: 'transparent', color: 'var(--ink)', border: '1px solid var(--ink)' });
    } else if (variant === 'compact') {
      Object.assign(style, { padding: '6px 10px', fontSize: 11, background: 'transparent', color: 'inherit' });
    }
    return (
      <a
        href={window.waUrl(text)}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={`${label} — opens WhatsApp`}
        style={style}
      >
        {window.Icon.whatsapp({ size: 16 })}
        <span>{label}</span>
      </a>
    );
  };
})();