"use client";

import type { ReactNode, MouseEvent } from "react";
import { ArrowRight, Sparkles } from "lucide-react";
import { Button } from "@/components/atoms/button";
import { cn } from "@/shared/utils/cn";

export interface ServiceCTAProps {
  eyebrow?: string | undefined;
  eyebrowIcon?: ReactNode | undefined;
  headline: string;
  description: string;
  primaryAction: {
    label: string;
    href?: string | undefined;
    onClick?: ((e: MouseEvent) => void) | undefined;
  };
  secondaryAction?:
    | {
        label: string;
        href: string;
      }
    | undefined;
  className?: string | undefined;
}

/**
 * ServiceCTA - Reusable call-to-action section
 *
 * Gradient background CTA with decorative elements.
 * Used at the bottom of service pages to drive conversion.
 */
export function ServiceCTA({
  eyebrow = "Get started in minutes",
  eyebrowIcon = <Sparkles className="h-3.5 w-3.5" />,
  headline,
  description,
  primaryAction,
  secondaryAction,
  className,
}: ServiceCTAProps) {
  return (
    <section className={cn("relative text-center py-12 rounded-2xl overflow-hidden", className)}>
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-primary/5 to-purple-500/10" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_oklch(0.55_0.18_260_/_0.1),_transparent_70%)]" />

      {/* Decorative rings */}
      <div
        className="absolute top-4 left-8 w-20 h-20 rounded-full border border-primary/10 cp-float hidden sm:block"
        aria-hidden="true"
      />
      <div
        className="absolute bottom-4 right-8 w-16 h-16 rounded-full border border-blue-500/10 cp-float-delayed hidden sm:block"
        aria-hidden="true"
      />

      {/* Content */}
      <div className="relative">
        {/* Eyebrow */}
        <div className="inline-flex items-center gap-1.5 text-xs font-medium text-primary mb-4 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20">
          {eyebrowIcon}
          {eyebrow}
        </div>

        {/* Headline */}
        <h2 className="text-display-sm font-display text-foreground mb-3">{headline}</h2>

        {/* Description */}
        <p className="text-base text-muted-foreground mb-6 max-w-md mx-auto">{description}</p>

        {/* Actions */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
          {primaryAction.onClick ? (
            <Button
              onClick={primaryAction.onClick}
              size="lg"
              rightIcon={<ArrowRight className="h-4 w-4" />}
            >
              {primaryAction.label}
            </Button>
          ) : (
            <Button
              as="a"
              href={primaryAction.href ?? "#"}
              size="lg"
              rightIcon={<ArrowRight className="h-4 w-4" />}
            >
              {primaryAction.label}
            </Button>
          )}

          {secondaryAction && (
            <Button as="a" href={secondaryAction.href} variant="outline" size="lg">
              {secondaryAction.label}
            </Button>
          )}
        </div>
      </div>
    </section>
  );
}

export default ServiceCTA;
