"use client";

import { Phone, MessageCircle } from "lucide-react";
import { formatPhoneForTel, formatPhoneForWhatsApp } from "@/lib/utils";
import type { SiteSettings } from "@prisma/client";

interface ConversionFeaturesProps {
  settings: SiteSettings;
}

export function ConversionFeatures({ settings }: ConversionFeaturesProps) {
  return (
    <>
      <div className="fixed bottom-0 inset-x-0 z-50 md:hidden border-t border-border/80 bg-background/95 backdrop-blur-md p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
        <div className="flex gap-2">
          <a
            href={`tel:${formatPhoneForTel(settings.phone)}`}
            className="flex-1 inline-flex items-center justify-center gap-2 h-12 bg-primary text-primary-foreground text-sm font-semibold"
            data-track="mobile-sticky-call"
            data-conversion="call"
          >
            <Phone className="h-4 w-4" />
            Call Now
          </a>
          <a
            href={`https://wa.me/${formatPhoneForWhatsApp(settings.whatsapp)}?text=Hi, I need help with a service.`}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center justify-center h-12 w-12 bg-[#25D366] text-white shrink-0"
            aria-label="Chat on WhatsApp"
            data-track="floating-whatsapp"
            data-conversion="whatsapp"
          >
            <MessageCircle className="h-5 w-5" />
          </a>
        </div>
      </div>

      <a
        href={`https://wa.me/${formatPhoneForWhatsApp(settings.whatsapp)}?text=Hi, I need help with a service.`}
        target="_blank"
        rel="noopener noreferrer"
        className="hidden md:flex fixed bottom-6 right-6 z-50 items-center justify-center w-12 h-12 bg-[#25D366] text-white hover:bg-[#20bd5a] transition-colors"
        aria-label="Chat on WhatsApp"
        data-track="desktop-whatsapp"
        data-conversion="whatsapp"
      >
        <MessageCircle className="h-6 w-6" />
      </a>
    </>
  );
}
