import { Button } from "@/components/ui/button";
import { useIsMobile } from "@/hooks/use-mobile";
import { getContactLink, getPhoneNumber } from "@/lib/constants";
import { cn } from "@/lib/utils";
import { useState } from "react";

const StickySupportBanner = () => {
    const [isOpen, _] = useState(true);
    const isMobile = useIsMobile();
    const contactLink = getContactLink("default");
    const phoneNumber = getPhoneNumber("default");

    if (!isOpen) return null;

    return (
        <div
            className={cn(
                "fixed z-9999 transition-all duration-300",
                isMobile
                    ? "inset-0 bg-white"
                    : "right-4 bottom-4 w-auto shadow-lg md:right-8 md:bottom-8 md:max-w-[350px] lg:max-w-[400px]",
            )}
        >
            <div
                className={cn(
                    "flex flex-col",
                    isMobile
                        ? "h-full w-full"
                        : "w-full overflow-hidden rounded-xl border border-gray-200 bg-white md:min-w-[320px]",
                )}
            >
                {/* Header section */}
                <div
                    className={cn(
                        "bg-linear-to-r from-blue-900 via-blue-800 to-blue-900 text-center text-white",
                        isMobile ? "p-6" : "p-3",
                    )}
                >
                    <a
                        href={contactLink}
                        className="flex items-center justify-center font-medium hover:underline"
                    >
                        <span className={isMobile ? "text-lg" : ""}>
                            Need Help?{" "}
                        </span>
                        <span
                            className={cn(
                                "ml-1 font-bold",
                                isMobile ? "text-lg" : "",
                            )}
                        >
                            We're Here For You
                        </span>
                    </a>
                </div>

                {/* Center section with logo */}
                <div
                    className={cn(
                        "flex flex-col items-center justify-center",
                        isMobile ? "flex-1 px-6 py-10" : "p-4",
                    )}
                >
                    <img
                        src="/assets/spectrum.png"
                        alt="Spectrum Support"
                        className={isMobile ? "mb-8 h-16" : "mb-3 h-12"}
                    />
                    <p
                        className={cn(
                            "mb-8 text-center font-medium text-gray-700",
                            isMobile ? "max-w-xs text-2xl" : "text-md",
                        )}
                    >
                        Get the best Spectrum deals with zero hassle. Our team
                        handles everything from setup to billing.
                    </p>

                    <a
                        href={contactLink}
                        className={cn(
                            "mb-4 text-center",
                            isMobile
                                ? "text-2xl font-bold"
                                : "text-xl font-bold",
                        )}
                    >
                        {phoneNumber}
                    </a>

                    <a
                        href={contactLink}
                        className={isMobile ? "w-full max-w-xs" : "w-full"}
                    >
                        <Button
                            variant="blue"
                            size={isMobile ? "lg" : "default"}
                            className="w-full py-6"
                            onClick={() => {
                                // @ts-ignore
                                if (
                                    typeof gtag_report_conversion === "function"
                                ) {
                                    gtag_report_conversion();
                                }
                            }}
                        >
                            Call Us Now
                        </Button>
                    </a>
                </div>

                {/* Footer section */}
                <div
                    className={cn(
                        "border-t border-gray-200 bg-gray-50 text-center",
                        isMobile ? "p-6" : "p-3",
                    )}
                >
                    <a
                        href={contactLink}
                        className={cn(
                            "font-medium text-blue-800 hover:underline",
                            isMobile ? "text-base" : "text-sm",
                        )}
                    >
                        Get the best Spectrum deals with zero hassle—call now!
                    </a>
                </div>
            </div>
        </div>
    );
};

export default StickySupportBanner;
