import Link from "next/link";
import { Phone, ArrowRight } from "lucide-react";
import { companyDetails } from "@/content/company";
import { cn } from "@/lib/utils";

interface CtaBannerProps {
  title?: string;
  subtitle?: string;
  ctaText?: string;
  ctaLink?: string;
  bgVariant?: "primary" | "accent-light";
}

export function CtaBanner({
  title = "Masz pytania? Umów darmową konsultację",
  subtitle = "Skontaktuj się z nami! Doradzimy najlepsze rozwiązania, dobierzemy moc urządzeń i przygotujemy bezpłatną wycenę.",
  ctaText = "Zamów bezpłatną konsultację",
  ctaLink = "/kontakt",
  bgVariant = "primary",
}: CtaBannerProps) {
  const isPrimary = bgVariant === "primary";

  return (
    <section className="relative overflow-hidden py-16 md:py-20">
      <div
        className={cn(
          "absolute inset-0 z-0",
          isPrimary
            ? "bg-[#0F2A47] text-white"
            : "bg-accent-light text-primary"
        )}
      />

      {isPrimary && (
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(43,168,224,0.12),transparent_40%)] z-0" />
      )}

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col lg:flex-row items-center justify-between gap-10">
          <div className="max-w-2xl text-center lg:text-left flex flex-col gap-3">
            <h2
              className={cn(
                "text-2xl sm:text-3xl md:text-4xl font-extrabold font-heading leading-tight",
                isPrimary ? "text-white" : "text-primary"
              )}
            >
              {title}
            </h2>
            <p
              className={cn(
                "text-sm sm:text-base leading-relaxed max-w-xl",
                isPrimary ? "text-slate-300" : "text-text-muted"
              )}
            >
              {subtitle}
            </p>
          </div>
          <div className="flex flex-col sm:flex-row items-center gap-4 mt-8 w-full sm:w-auto shrink-0 justify-center">
            <Link href={ctaLink} className="w-fit sm:w-auto btn btn-primary font-bold text-white px-6">
              <span>{ctaText}</span>
              <ArrowRight className="size-5" />
            </Link>

            <a
              href={`tel:${companyDetails.phoneRaw}`}
              className="w-fit sm:w-auto"
            >
              <button
                className={cn(
                  "btn btn-outline btn-primary bg-white w-fit sm:w-auto font-bold flex items-center gap-2 px-6",
                  isPrimary
                    ? "text-white hover:bg-white/20 hover:text-white border-white/30"
                    : "text-primary hover:bg-primary/10 border-primary/20"
                )}
              >
                <Phone className="size-5" />
                <span>{companyDetails.phone}</span>
              </button>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}