import ArrowRightIcon from "@/assets/home/arrow-right.svg?react";
import {
  CTA_BUTTON_LABEL,
  CTA_DESCRIPTION,
  CTA_FOOTNOTE,
  CTA_HEADLINE,
  CTA_URL_PLACEHOLDER,
} from "@/features/home/content/cta";
import { useAnalyze } from "@/features/home/hooks/useAnalyze";
import { useInView } from "@/hooks/useInView";

export function CTASection() {
  const { ref, inView } = useInView<HTMLElement>();
  const { url, setUrl, handleAnalyze } = useAnalyze();

  return (
    <section ref={ref} className="py-20 md:py-24 bg-navy-900 text-white px-6 relative overflow-hidden">
      <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-navy-800 via-navy-900 to-navy-900 opacity-80" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-violet-500/20 rounded-full blur-[100px] pointer-events-none" />

      <div className="max-w-4xl mx-auto text-center relative z-10">
        <h2
          className={`display-36 md:display-48 mb-4 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice break-keep ${
            inView ? "animate-fade-in-up" : "opacity-0"
          }`}
        >
          {CTA_HEADLINE}
        </h2>

        <p
          className={`body-18-md-20 font-light text-lavender-200 mb-10 max-w-2xl mx-auto break-keep ${
            inView ? "animate-fade-in-up animation-delay-100" : "opacity-0"
          }`}
        >
          {CTA_DESCRIPTION}
        </p>

        <div
          className={`flex flex-col items-center justify-center gap-4 max-w-md mx-auto ${
            inView ? "animate-fade-in-up animation-delay-200" : "opacity-0"
          }`}
        >
          <input
            type="url"
            placeholder={CTA_URL_PLACEHOLDER}
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleAnalyze()}
            className="w-full px-8 py-4 body-16-medium bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice border border-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50 shadow-sm text-center text-navy-900 placeholder:text-navy-900/60 break-keep"
          />
          <button
            type="button"
            onClick={handleAnalyze}
            className="w-full px-10 py-4 body-18 font-medium text-white rounded-full transition-all shadow-xl hover:shadow-2xl flex items-center justify-center gap-2 group cursor-pointer bg-gradient-to-r from-violet-700 to-navy-950 hover:from-violet-hover hover:to-violet-hover break-keep"
          >
            {CTA_BUTTON_LABEL}
            <ArrowRightIcon aria-hidden="true" className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </button>
          <p className="label-12 text-lavender-200/80 mt-2 break-keep">{CTA_FOOTNOTE}</p>
        </div>
      </div>
    </section>
  );
}