import Image from "next/image";
import Link from "next/link";

import ctaImage from "@/assets/images/projects/elysium.jpg";
import { Reveal } from "@/components/Reveal";
import { contact, site } from "@/data/site";

/** Dark closing band over a full-bleed plate, as on the reference page. */
export function PageCta({
  caption,
  title,
  action,
}: {
  caption: string;
  title: string;
  action: string;
}) {
  return (
    <section className="relative isolate flex min-h-[560px] items-center overflow-hidden py-28 lg:py-36">
      <Image
        src={ctaImage}
        alt=""
        fill
        quality={72}
        sizes="100vw"
        placeholder="blur"
        className="-z-20 object-cover object-top"
      />
      <div className="absolute inset-0 -z-10 bg-ink/80" />

      <div className="mx-auto w-full max-w-[1400px] px-6 text-center lg:px-12">
        <Reveal>
          <p className="latin text-xs tracking-[0.4em] text-gold">{caption}</p>
        </Reveal>

        <Reveal delay={90}>
          <h2 className="mt-7 text-3xl font-light text-white lg:text-5xl">{title}</h2>
        </Reveal>

        <Reveal delay={180}>
          <div className="mt-11 flex flex-wrap items-center justify-center gap-4">
            <Link
              href={`tel:${contact.phoneLinks[0]}`}
              className="rounded-full bg-gold px-9 py-3.5 text-white transition-colors duration-300 hover:bg-white hover:text-ink"
            >
              {action}
            </Link>
            <Link
              href="/contactus"
              className="rounded-full border border-white/35 px-9 py-3.5 text-white transition-colors duration-300 hover:border-white hover:bg-white/10"
            >
              تماس با ما
            </Link>
          </div>
        </Reveal>

        <Reveal delay={260}>
          <p className="latin mt-16 text-xs tracking-[0.42em] text-white/45">
            {site.taglineLatin}
          </p>
        </Reveal>
      </div>
    </section>
  );
}