"use client";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { type Transition, motion } from "motion/react";

export interface CtaSectionProps {
  /** Section heading. */
  title: string;
  /** Supporting paragraph below the heading. */
  description: string;
  /** Primary CTA button config. */
  primaryAction: { label: string; href: string };
  /** Optional secondary CTA button config. */
  secondaryAction?: { label: string; href: string };
  /** Extra classes forwarded to the outer wrapper. */
  className?: string;
}

const spring: Transition = {
  type: "spring",
  stiffness: 260,
  damping: 24
};

function CtaSection({
  title,
  description,
  primaryAction,
  secondaryAction,
  className
}: CtaSectionProps) {
  return (
    <section
      data-slot="cta-section"
      className={cn("w-full px-6 py-24 md:py-32", className)}
    >
      <motion.div
        initial={{ opacity: 0, y: 32, scale: 0.97 }}
        whileInView={{ opacity: 1, y: 0, scale: 1 }}
        viewport={{ once: true, margin: "-100px" }}
        transition={spring}
        className="relative mx-auto max-w-4xl overflow-hidden rounded-2xl border bg-card p-10 md:p-16"
      >
        <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top_right,var(--primary)/10%,transparent_60%)]" />
        <div className="absolute -right-16 -top-16 -z-10 size-64 rounded-full bg-primary/5 blur-3xl" />
        <div className="absolute -bottom-16 -left-16 -z-10 size-64 rounded-full bg-primary/5 blur-3xl" />

        <div className="flex flex-col items-center text-center">
          <motion.h2
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ ...spring, delay: 0.1 }}
            className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl"
          >
            {title}
          </motion.h2>

          <motion.p
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ ...spring, delay: 0.15 }}
            className="mt-4 max-w-xl text-lg text-muted-foreground"
          >
            {description}
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ ...spring, delay: 0.2 }}
            className="mt-8 flex flex-col gap-4 sm:flex-row"
          >
            <Button size="lg" asChild>
              <a href={primaryAction.href}>
                {primaryAction.label}
                <ArrowRight />
              </a>
            </Button>
            {secondaryAction && (
              <Button variant="outline" size="lg" asChild>
                <a href={secondaryAction.href}>{secondaryAction.label}</a>
              </Button>
            )}
          </motion.div>
        </div>
      </motion.div>
    </section>
  );
}

export CtaSection;
export { CtaSection };
Ready to build something amazing?
