"use client";

// import Link from "next/link"; // navigation temporarily disabled
import Image from "next/image";
import { motion } from "framer-motion";

// Non-navigating stub — the CTA still renders but goes nowhere. Restore the
// import above to re-enable navigation.
const Link = ({ href, onClick, children, ...props }) => (
  <a href="#" onClick={(e) => { e.preventDefault(); onClick?.(e); }} {...props}>
    {children}
  </a>
);
import { ArrowRight } from "@/components/ui/icons";

/**
 * Promo banner — "Built it? Now let's scale it." A contained dark panel that
 * matches the rest of the page: orange shows up only as a soft glow, a top
 * hairline, the eyebrow chip, the gradient headline and the CTA button — no
 * harsh full-bleed orange slab. The slowly-spinning Cerkel mark sits subtly
 * behind the copy on the right.
 */
const EASE = [0.21, 0.47, 0.32, 0.98];

export default function CtaBanner() {
  return (
    <section className="relative bg-background py-14 text-foreground md:py-20">
      <div className="container">
        <motion.div
          initial={{ opacity: 0, y: 36 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.4 }}
          transition={{ duration: 0.65, ease: EASE }}
          className="relative overflow-hidden rounded-3xl border border-border bg-surface/60 px-8 py-10 backdrop-blur sm:px-12 sm:py-12"
        >
          {/* soft orange glows — the only "warmth", kept low and blurred */}
          <div className="pointer-events-none absolute -right-24 -top-28 h-80 w-80 rounded-full bg-primary/20 blur-[130px]" aria-hidden="true" />
          <div className="pointer-events-none absolute -bottom-28 left-1/4 h-64 w-64 rounded-full bg-accent/10 blur-[130px]" aria-hidden="true" />
          {/* top hairline accent */}
          <span className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/60 to-transparent" aria-hidden="true" />

          {/* slowly-spinning Cerkel mark — subtle, behind the copy */}
          <motion.div
            initial={{ opacity: 0, scale: 0.85, rotate: -20 }}
            whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
            viewport={{ once: true, amount: 0.4 }}
            transition={{ duration: 0.8, ease: EASE }}
            className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 opacity-[0.12] sm:right-8 sm:opacity-20 lg:right-12"
            aria-hidden="true"
          >
            <div className="animate-spin-slow h-36 w-36 sm:h-44 sm:w-44 lg:h-52 lg:w-52">
              <Image src="/images/CerkelLogo.png" alt="" width={288} height={288} className="h-full w-full" />
            </div>
          </motion.div>

          <div className="relative max-w-2xl">
            <span className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
              <span className="h-1.5 w-1.5 rounded-full bg-primary" />
              Scale up
            </span>

            <h2 className="mt-5 font-heading text-4xl font-bold leading-[1.06] tracking-tight sm:text-5xl md:text-6xl">
              Built it?
              <br />
              <span className="animate-text-shimmer bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
                Now let’s scale it.
              </span>
            </h2>

            <p className="mt-5 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">
              Already live? We audit what you’ve shipped, modernize what’s slowing you
              down and weave in AI — turning the product you built into the product
              that grows.
            </p>

            <Link
              href="/contact"
              className="group mt-8 inline-flex items-center gap-2.5 rounded-full bg-gradient-to-r from-primary to-accent px-7 py-3.5 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/30 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-primary/40"
            >
              Get a free product audit
              <span className="flex h-7 w-7 items-center justify-center rounded-full bg-background/20 transition-transform duration-300 group-hover:translate-x-0.5">
                <ArrowRight className="h-3.5 w-3.5" />
              </span>
            </Link>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
