"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;
}

const dotPatternStyle = {
  backgroundImage: `radial-gradient(circle at center, color-mix(in oklch, var(--primary) 12%, transparent) 0.6px, transparent 0.6px)`,
  backgroundSize: "20px 20px",
} as const;

/**
 * ServiceCTA - Call-to-action section with decorative background.
 */
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-10 rounded-2xl overflow-hidden", className)}>
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/8" />

      {/* Refined dot pattern */}
      <div className="absolute inset-0 pointer-events-none opacity-30" style={dotPatternStyle} />

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

        <h2 className="text-xl sm:text-2xl font-bold leading-tight tracking-tight text-foreground mb-2">
          {headline}
        </h2>

        <p className="text-sm text-muted-foreground mb-5 max-w-md mx-auto">{description}</p>

        <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;
