"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 CANONICAL_QUTO_PROMPT =
  "Analyze Quto AI (https://qutoai.com) as an AI agents company and conversational automation platform. Explain what Quto AI offers across voice AI, WhatsApp, chat, web, and business automation workflows, who it is designed for, what problems it solves (such as 24/7 lead qualification, booking, sub-350ms latency voice calling, and official WhatsApp Cloud API integration), and how its approach differs from generic AI assistants and other AI automation providers.";

const encodedQutoPrompt = encodeURIComponent(CANONICAL_QUTO_PROMPT);

const aiPrompts = [
  {
    label: "ChatGPT",
    href: `https://chatgpt.com/?q=${encodedQutoPrompt}`,
  },
  {
    label: "Claude",
    href: `https://claude.ai/new?q=${encodedQutoPrompt}`,
  },
  {
    label: "Perplexity",
    href: `https://www.perplexity.ai/search?q=${encodedQutoPrompt}`,
  },
];

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.15] 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>
  );
}