import { Link } from "@tanstack/react-router";
import { ArrowRight, Zap } from "lucide-react";
import { WHATSAPP_LINK } from "@/lib/site";

export function CTAButtons({ secondary = "quote" }: { secondary?: "quote" | "whatsapp" }) {
  return (
    <div className="flex flex-col sm:flex-row gap-3">
      <Link
        to="/contact"
        className="inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-emerald px-6 py-3.5 font-semibold text-navy-deep shadow-emerald hover:shadow-glow transition-all"
      >
        <Zap className="h-4 w-4" /> Fix My Website Now
      </Link>
      {secondary === "quote" ? (
        <Link
          to="/pricing"
          className="inline-flex items-center justify-center gap-2 rounded-lg border border-cream/25 bg-cream/5 px-6 py-3.5 font-semibold text-cream hover:bg-cream/10 transition-colors"
        >
          Get Instant Quote <ArrowRight className="h-4 w-4" />
        </Link>
      ) : (
        <a
          href={WHATSAPP_LINK}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center justify-center gap-2 rounded-lg border border-cream/25 bg-cream/5 px-6 py-3.5 font-semibold text-cream hover:bg-cream/10 transition-colors"
        >
          Chat on WhatsApp <ArrowRight className="h-4 w-4" />
        </a>
      )}
    </div>
  );
}