CTA 1

"use client";

import { cn } from "@/lib/utils";
import { GradientBorderButton } from "@/components/components/gradient-border-button";
import { ImageDithering } from "@paper-design/shaders-react";
import { type Transition, motion } from "motion/react";
import { memo } from "react";

const CTA_IMAGE = "/hero-bg.jpeg";

const SHADER = {
  type: "4x4" as const,
  size: 1,
  colorSteps: 5,
  fit: "cover" as const
} as const;

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

const MemoizedImageDithering = memo(ImageDithering);

function Cta1Background() {
  return (
    <div
      aria-hidden
      className="pointer-events-none absolute inset-0 md:aspect-square lg:aspect-video dark:opacity-90"
    >
      <MemoizedImageDithering
        className="absolute inset-0 size-full"
        width={1280}
        height={720}
        image={CTA_IMAGE}
        originalColors
        type={SHADER.type}
        size={SHADER.size}
        colorSteps={SHADER.colorSteps}
        fit={SHADER.fit}
      />
      <div className="absolute inset-0 bg-black/35" />
    </div>
  );
}

export interface Cta1Props {
  /** Extra classes forwarded to the outer section. */
  className?: string;
}

export function Cta1({ className }: Cta1Props) {
  return (
    <section
      data-slot="cta1"
      className={cn(
        "relative z-10 w-full overflow-hidden px-6 py-16 md:py-24",
        className
      )}
    >
      <div className="relative mx-auto max-w-6xl overflow-hidden rounded-xl border bg-background">
        <div className="relative overflow-hidden rounded-xl py-24 sm:py-32">
          <Cta1Background />

          <div className="relative z-10 mx-auto max-w-2xl px-6 text-center">
            <motion.h2
              initial={{ opacity: 0, y: 16, filter: "blur(6px)" }}
              whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
              viewport={{ once: true, margin: "-80px" }}
              transition={{ ...stagger, delay: 0.08 }}
              className="text-balance font-serif text-3xl font-medium text-white sm:text-4xl"
            >
              Ready to transform your website with AI?
            </motion.h2>

            <motion.p
              initial={{ opacity: 0, y: 16, filter: "blur(6px)" }}
              whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
              viewport={{ once: true, margin: "-80px" }}
              transition={{ ...stagger, delay: 0.16 }}
              className="mt-6 text-pretty text-lg text-white/70"
            >
              Get started with Tent ui in less than 5 minutes.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 16, filter: "blur(6px)" }}
              whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
              viewport={{ once: true, margin: "-80px" }}
              transition={{ ...stagger, delay: 0.24 }}
              className="mt-10 flex items-center justify-center gap-x-6"
            >
              <GradientBorderButton size="lg" asChild>
                <a href="/docs" className="text-nowrap">
                  Get Started Now
                </a>
              </GradientBorderButton>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}

export Cta1;