"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Container } from "@/components/container";
import { primaryCta, type NavItem } from "@/content/nav";
import { cn } from "@/lib/utils";
import { ArrowRight, Sparkles } from "lucide-react";
import { ThreeUIVanishingArray } from "@/components/threeui/dynamic-effects";
import { LazyEffect } from "@/components/threeui/lazy-effect";

const aiPrompts = [
  {
    label: "ChatGPT",
    href: "https://chatgpt.com/?q=What%20are%20the%20benefits%20of%20hiring%20an%20AI%20agents%20agency%20for%20voice%20and%20WhatsApp%3F",
  },
  {
    label: "Claude",
    href: "https://claude.ai/new?q=What%20should%20I%20look%20for%20in%20an%20AI%20voice%20and%20chat%20agent%20agency%3F",
  },
  {
    label: "Perplexity",
    href: "https://www.perplexity.ai/search?q=How%20does%20conversational%20AI%20for%20business%20inbound%20calls%20work%3F",
  },
];

export function CTASection({
  title,
  description = "Book a 20-minute strategy call — we'll map your workflows and show you exactly how an agent would handle your calls, chats and follow-ups.",
  primary = primaryCta,
  secondary = null,
  className,
}: {
  title?: React.ReactNode;
  description?: string;
  primary?: NavItem;
  secondary?: NavItem | null;
  className?: string;
}) {
  return (
    <section className={cn("relative overflow-hidden py-8 md:py-12", className)}>
      <Container>
        <div className="dark relative isolate overflow-hidden rounded-[1.75rem] border border-[#4FDAF1]/30 bg-[#020202] px-6 py-10 text-center text-foreground shadow-[0_0_80px_-20px_rgba(79,218,241,0.25),0_0_50px_-20px_rgba(226,107,11,0.2)] sm:rounded-[2rem] sm:px-10 sm:py-12 md:py-14">
          {/* ThreeUI Vanishing Array — full-bleed across the card. The wrapper is
              pointer-events-none, so the burst origin stays locked dead-centre
              (it otherwise tracks the cursor and skews); the effect's size/length
              are maxed (dynamic-effects.tsx) so the rays reach the side edges. A
              soft radial feather blends the rectangle edges into the card. */}
          <div
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 opacity-45 select-none [mask-image:radial-gradient(ellipse_115%_130%_at_center,rgba(0,0,0,1)_58%,transparent_100%)]"
          >
            <LazyEffect className="absolute inset-0 size-full">
              <ThreeUIVanishingArray />
            </LazyEffect>
          </div>

          {/* Atmospheric radial depth glow with reference cool/warm blend */}
          <div
            aria-hidden="true"
            className="pointer-events-none absolute left-1/2 top-1/2 -z-10 size-[650px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[radial-gradient(circle,rgba(79,218,241,0.18)_0%,rgba(247,156,9,0.08)_40%,rgba(226,107,11,0.05)_65%,transparent_80%)] blur-2xl"
          />

          <div className="relative z-10">
            {/* Eyebrow */}
            <div className="inline-flex items-center gap-2 rounded-full border border-neutral-800 bg-neutral-900/80 px-4 py-1.5 text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-neutral-300">
              <Sparkles className="size-3.5 text-[#4FDAF1]" aria-hidden="true" />
              Start your deployment
            </div>

            {/* Display headline — bold but compact (no longer hero-scale) */}
            <h2 className="mx-auto mt-5 max-w-2xl text-balance font-display text-3xl font-semibold leading-[1.05] tracking-tight text-white sm:text-4xl md:text-5xl">
              {title ?? (
                <>
                  Ready to put an{" "}
                  <span className="font-extrabold text-gradient-brand">AI agent</span> to work?
                </>
              )}
            </h2>

            <p className="mx-auto mt-4 max-w-xl text-pretty text-base leading-relaxed text-neutral-300 sm:text-lg">
              {description}
            </p>

            {/* High-Contrast CTAs */}
            <div className="mt-7 flex flex-col items-stretch justify-center gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3.5">
              <Button
                asChild
                variant="accent"
                size="pill-lg"
                className="w-full sm:w-auto"
              >
                <Link href={primary.href} className="group">
                  {primary.label}
                  <ArrowRight
                    className="ml-1.5 size-4 transition-transform duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"
                    aria-hidden="true"
                  />
                </Link>
              </Button>
              {secondary ? (
                <Button
                  asChild
                  variant="outline"
                  size="pill-lg"
                  className="w-full sm:w-auto border-neutral-700 bg-transparent text-[#FEFEFE] hover:bg-neutral-900"
                >
                  <Link href={secondary.href}>{secondary.label}</Link>
                </Button>
              ) : null}
            </div>

            {/* Independent-AI trust row (monochrome) */}
            <div className="mx-auto mt-9 max-w-lg border-t border-neutral-800/80 pt-6">
              <p className="text-xs font-medium text-neutral-400">
                Not sure yet? Ask an independent AI model about deploying agents:
              </p>
              <div className="mt-4 flex flex-wrap items-center justify-center gap-2.5">
                {aiPrompts.map((prompt) => (
                  <a
                    key={prompt.label}
                    href={prompt.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group inline-flex items-center gap-1 rounded-full border border-neutral-800 bg-neutral-950/60 px-4 py-1.5 text-xs font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:bg-neutral-900 hover:text-white"
                  >
                    {prompt.label}
                    <span
                      aria-hidden="true"
                      className="text-neutral-500 transition-colors group-hover:text-white"
                    >
                      ↗
                    </span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}