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 } from "@/data/site";

export function ContactCta() {
  return (
    <section id="contact" className="relative isolate overflow-hidden py-20 lg:py-28">
      <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/85" />

      <div className="mx-auto max-w-[1400px] px-5 text-center lg:px-10">
        <Reveal>
          <p className="kicker mb-7 justify-center">
            <span className="latin">GET IN TOUCH</span>
          </p>
        </Reveal>

        <Reveal delay={90}>
          <h2 className="mx-auto max-w-3xl text-3xl leading-[1.45] font-extrabold text-white lg:text-[3rem]">
            بیایید فضای بعدی‌تان را
            <span className="text-gold"> با هم بسازیم</span>
          </h2>
        </Reveal>

        <Reveal delay={170}>
          <p className="mx-auto mt-7 max-w-xl text-[1.02rem] leading-[2.1] text-white/70">
            برای مشاوره سرمایه‌گذاری، همکاری در ساخت یا بازدید از پروژه‌های در حال اجرا، با
            کارشناسان گروه رئوفی در تماس باشید.
          </p>
        </Reveal>

        <Reveal delay={250}>
          <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"
            >
              تماس با ما
            </Link>
            <Link
              href={`mailto:${contact.email}`}
              className="latin rounded-full border border-white/35 px-9 py-3.5 text-white transition-colors duration-300 hover:border-white hover:bg-white/10"
            >
              {contact.email}
            </Link>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
