"use client";

import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Phone, Mail, ArrowUpRight } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function GetStartedCTA() {
  const router = useRouter();
  return (
    <section className="w-full pt-4 pb-16 relative">
      <div
        className="absolute inset-0 z-0"
        style={{
          backgroundImage: `
        linear-gradient(to right, #e2e8f0 1px, transparent 1px),
        linear-gradient(to bottom, #e2e8f0 1px, transparent 1px)
      `,
          backgroundSize: "20px 30px",
          WebkitMaskImage:
            "radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%)",
          maskImage:
            "radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%)",
        }}
      />
      {/* Your Content/Components */}

      <div className="container mx-auto grid grid-cols-1  gap-8 items-center ">
        {/* Right side content */}
        <Card className="bg-transparent  border-0 shadow-none z-20">
          <CardContent className="flex flex-col items-center gap-6">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2  text-center ">
                Are you ready to get started?
              </h2>
              <p className="text-center">
                Need help with something? Get in touch with our friendly team
                and we'll be happy to help.
              </p>
            </div>

            <div className="flex flex-wrap justify-center gap-4">
              <Button
                variant="outline"
                className="rounded-lg py-6 px-8 bg-foreground text-background textbase"
                onClick={() => router.push("tel: 0433 883 339")}
              >
                <Phone className="w-4 h-4 mr-2" />
                Call 0433 883 339
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="rounded-lg py-6 px-8 bg-foreground text-background text-base"
                onClick={() => router.push("mailto:info@focux.com.au")}
              >
                <Mail className="w-4 h-4 mr-2" />
                info@focux.com.au
              </Button>
            </div>

            <div className="flex gap-3">
              <Link href="#" target="_blank" rel="noopener noreferrer">
                <Image
                  src="/images/svg/facebook.png"
                  width={25}
                  height={25}
                  className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                  alt="facebook"
                />
              </Link>
              <Link href="#" target="_blank" rel="noopener noreferrer">
                <Image
                  src="/images/svg/instagram.png"
                  width={25}
                  height={25}
                  className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                  alt="instagram"
                />
              </Link>
              <Link href="#" target="_blank" rel="noopener noreferrer">
                <Image
                  src="/images/svg/whatsapp.png"
                  width={25}
                  height={25}
                  className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                  alt="whatsapp"
                />
              </Link>
              <Link href="#" target="_blank" rel="noopener noreferrer">
                <Image
                  src="/images/svg/xiaohongshu.png"
                  width={25}
                  height={25}
                  className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                  alt="xiaohongshu"
                />
              </Link>
            </div>

            <Button size="lg" className="rounded-lg group py-6 px-8 text-base">
              Want to know more
              <ArrowUpRight className="ml-2w-4 h-4 group-hover:rotate-45 transition-rotate duration-200" />
            </Button>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}
