import React from 'react';
import { PhoneIcon } from 'lucide-react';
import { useSite } from '../api';
import { useLang } from '../i18n/lang';
import { track } from '../analytics';

export function FloatingContact() {
  const { brand } = useSite();
  const { t } = useLang();

  return (
    <a
      href={brand.phone_href}
      aria-label={t('callBrand')}
      onClick={() => track('phone-click', { from: 'floating' })}
      className="group fixed bottom-8 ltr:right-8 rtl:left-8 z-40 flex h-14 w-14 items-center justify-center rounded-full border border-copper/50 bg-char/80 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_12px_35px_rgba(0,0,0,0.5),0_0_20px_rgba(197,143,92,0.25)] transition-all duration-500 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_35px_rgba(197,143,92,0.7)] active:scale-95"
    >
      {/* پالس هاله نوری در پس‌زمینه مانند رادار */}
      <span
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-full border border-copper/60 animate-ping opacity-30"
      />

      {/* آیکون تلفن با انیمیشن چرخش ظریف در زمان هاور */}
      <PhoneIcon className="relative z-10 h-6 w-6 transition-transform duration-300 ease-lux group-hover:rotate-12" />
    </a>
  );
}