import Image from "next/image";
import strategist from "@/assets/visuals/strategist-late-review.jpg";
import { AmbientVideo } from "@/components/ui/AmbientVideo";
import { ButtonLink } from "@/components/ui/Button";
import { MagneticButton } from "@/components/ui/MagneticButton";
import { Eyebrow } from "@/components/ui/SectionHeading";
import { revealProps } from "@/components/ui/reveal";
import { finalCta } from "@/content/home";
import { ctaVideo } from "@/content/media";
import { routes } from "@/lib/routes";

interface CTAProps {
  id?: string;
  title?: string;
  body?: string;
  buttonLabel?: string;
  href?: string;
  microcopy?: string;
  showCovers?: boolean;
}

/** High-contrast closing call to action used at the end of every marketing page. */
export function CTA({
  id = "closing-cta-title",
  title = finalCta.title,
  body = finalCta.body,
  buttonLabel = finalCta.button,
  href = routes.audit,
  microcopy = finalCta.microcopy,
  showCovers = true,
}: CTAProps) {
  return (
    <section aria-labelledby={id} className="tone-night relative isolate overflow-hidden bg-night text-night-text">
      <div className="absolute inset-0 -z-10" aria-hidden="true">
        {ctaVideo.length > 0 ? (
          <AmbientVideo poster={strategist} variants={ctaVideo} sizes="100vw" mediaClassName="object-[72%_center]" />
        ) : (
          <Image src={strategist} alt="" fill sizes="100vw" placeholder="blur" className="object-cover object-[72%_center]" />
        )}
        <div className="absolute inset-0 bg-[linear-gradient(90deg,var(--color-night)_0%,rgb(13_13_17/0.94)_32%,rgb(13_13_17/0.55)_62%,rgb(13_13_17/0.2)_100%)]" />
        <div className="absolute inset-0 bg-night/65 md:hidden" />
        <div className="absolute inset-x-0 bottom-0 h-2/5 bg-[linear-gradient(180deg,rgb(13_13_17/0)_0%,var(--color-night)_100%)]" />
      </div>

      <div className="container-page py-24 sm:py-32 lg:py-40">
        <div className="max-w-2xl" {...revealProps()}>
          <Eyebrow tone="dark">Next step</Eyebrow>
          <h2 id={id} className="mt-6 text-display-lg">
            {title}
          </h2>
          <p className="mt-6 max-w-xl text-lead text-night-muted">{body}</p>
          <div className="mt-10 flex flex-col items-start gap-5">
            <MagneticButton>
              <ButtonLink href={href} tone="dark" size="lg">
                {buttonLabel}
              </ButtonLink>
            </MagneticButton>
            {microcopy ? <p className="max-w-md text-sm text-night-muted">{microcopy}</p> : null}
          </div>
        </div>

        {showCovers ? (
          <dl className="mt-16 grid max-w-5xl gap-8 border-t border-night-line pt-8 md:grid-cols-3 lg:mt-24" {...revealProps(120)}>
            {finalCta.covers.map((cover) => (
              <div key={cover.title}>
                <dt className="flex items-center gap-2 font-medium">
                  <span aria-hidden="true" className="size-1.5 bg-signal-bright" />
                  {cover.title}
                </dt>
                <dd className="mt-2 text-[0.9375rem] text-night-muted">{cover.description}</dd>
              </div>
            ))}
          </dl>
        ) : null}
      </div>
    </section>
  );
}