"use client";

import React from "react";
import { ArrowUpRight } from "lucide-react";
import { useRouter } from "next/navigation";
const CompetitorAnalysisCTA = () => {
  const router = useRouter();

  return (
    <div className="bg-[#794AFF] text-white px-4 sm:px-6 lg:px-16 py-16">
      <div className="text-center">
        <h2 className="text-3xl lg:text-4xl font-semibold">
          Want to outpace your competition?
        </h2>

        <p className="mt-3 text-[#FFFFFFCC] text-[17px] lg:text-[20px]">
          Contact us for custom suggestions on how to achieve this with our
          tool.
        </p>

        <button
          onClick={() => router.push("/contact")}
          className="mt-6 inline-flex items-center gap-2 bg-white text-[#794AFF] px-6 py-3 rounded-full text-sm lg:text-[15px] hover:opacity-90 transition group"
        >
          Contact
          <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:-translate-y-1 group-hover:translate-x-1" />
        </button>
      </div>
    </div>
  );
};

export default CompetitorAnalysisCTA;