import Link from "next/link";
import { ArrowRight } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

type Action = { label: string; href: string };

type CtaBannerProps = {
  pill?: string;
  heading?: React.ReactNode;
  description?: string;
  primary?: Action;
  secondary?: Action;
};

/** Brand-blue closing call-to-action: centred content, slowly shifting gradient and a ripple animation on the right. Copy defaults to the home page's. */
export default function CtaBanner({
  pill = "Let's Talk",
  heading = (
    <>
      Have an idea worth <br className="hidden sm:block" />
      turning into an app?
    </>
  ),
  description = "Let's turn your idea into a mobile product people love to use.",
  primary = { label: "Start a Conversation", href: "#contact" },
  secondary = { label: "Explore Our Apps", href: "#work" },
}: CtaBannerProps) {
  return (
    <section id="cta" className="relative bg-white py-16 sm:py-20 lg:py-24">
      <div className="container">
        <div className="relative flex items-center justify-center overflow-hidden rounded-4xl bg-[linear-gradient(135deg,var(--color-accent)_0%,var(--color-accent)_45%,#0087D8_70%,var(--color-accent-600)_100%)] bg-size-[200%_200%] px-0 py-24 text-center animate-gradient-shift motion-reduce:animate-none sm:rounded-[2.5rem] sm:py-20 lg:rounded-[3rem]">
          {/* Background: soft circles, small dots, ripple waves — CSS only, always behind the content */}
          <div
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 z-0"
          >
            {/* Soft circles on the left */}
            <div className="absolute -left-40 -top-44 h-104 w-104 animate-float-slow rounded-full bg-white/[0.07] motion-reduce:animate-none [animation-duration:20s]" />
            <div className="absolute -bottom-56 -left-44 h-120 w-120 animate-float-slow rounded-full bg-white/[0.07] motion-reduce:animate-none [animation-delay:-8s] [animation-duration:24s]" />
            <div className="absolute -bottom-40 -left-20 h-72 w-[18rem] rounded-full bg-white/6" />

          </div>

          <div className="relative z-10 w-full px-5 sm:px-10">
            <div className="mx-auto flex max-w-200 flex-col items-center">
              <ScrollReveal>
                <p className="inline-flex items-center rounded-full border border-white/40 bg-white/10 px-5 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white backdrop-blur-sm">
                  {pill}
                </p>
              </ScrollReveal>

              <ScrollReveal delay={100}>
                <h2 className="mt-7 font-display text-4xl font-bold leading-[1.08] tracking-tight text-white sm:text-5xl lg:text-[3.75rem] xl:text-[4.25rem]">
                  {heading}
                </h2>
              </ScrollReveal>

              <ScrollReveal delay={200}>
                <p className="mx-auto mt-6 max-w-150 text-base leading-[1.7] text-white/95 sm:text-lg lg:text-xl">
                  {description}
                </p>
              </ScrollReveal>

              <ScrollReveal delay={300} className="w-full sm:w-auto">
                <div className="mt-10 flex w-full flex-col items-stretch justify-center gap-3 sm:w-auto sm:flex-row sm:items-center">
                  <Link
                    href={primary.href}
                    className="group inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-semibold text-accent-700 shadow-[0_14px_34px_-12px_rgba(0,30,80,0.5)] transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-accent-50 hover:shadow-[0_18px_38px_-12px_rgba(0,30,80,0.6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-accent-600 motion-reduce:hover:translate-y-0"
                  >
                    {primary.label}
                    <ArrowRight
                      className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
                      aria-hidden
                    />
                  </Link>
                  <Link
                    href={secondary.href}
                    className="group inline-flex min-h-12 items-center justify-center gap-2 rounded-full border border-white/70 px-8 py-3.5 text-sm font-semibold text-white transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-accent-600 motion-reduce:hover:translate-y-0"
                  >
                    {secondary.label}
                    <ArrowRight
                      className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
                      aria-hidden
                    />
                  </Link>
                </div>
              </ScrollReveal>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}