import Image from "next/image";
import Link from "next/link";
import FormRedirectSnippets from "./FormRedirectSnippets.client";
import FormSubmissionMessage from "./FormSubmissionMessage.client";

interface ThankYouContentProps {
  isModal?: boolean;
  onClose?: () => void;
}

const socialLinkClass =
  "inline-flex h-8 w-8 items-center justify-center transition-colors hover:opacity-80 lg:h-9 lg:w-9";

export default function ThankYouContent({
  isModal,
  onClose,
}: ThankYouContentProps) {
  const content = (
    <div className="flex min-h-screen w-full flex-col">
      <FormRedirectSnippets position="top" />
      <section className="relative min-h-[420px] overflow-hidden px-6 sm:min-h-[500px] sm:px-10 lg:min-h-[560px] lg:px-[68px]">
        <div className="absolute inset-0 ">
          <Image
            src="/thankyou.png"
            alt=""
            fill
            priority
            className="object-cover"
          />
        </div>
        <div className="absolute inset-0 bg-white/8" />
        <div className="relative z-10 mx-auto flex min-h-[420px] max-w-[1120px] flex-col justify-end pb-12 sm:min-h-[500px] sm:pb-16 lg:min-h-[560px] lg:pb-[76px]">
          <div>
            <h1
              className="text-[64px] leading-[0.92] tracking-[-0.04em] text-[#9b845b] sm:text-[82px] md:text-[96px] lg:text-[108px]"
              style={{
                fontFamily: "Georgia, 'Times New Roman', serif",
                textShadow: "0 3px 8px rgba(120, 92, 46, 0.18)",
              }}
            >
              Thank You
            </h1>
            <p className="mt-4 pl-[10px] text-[14px] uppercase tracking-[0.6em] text-[#1e1e1e] sm:text-[17px]">
              FOR BOOKING WITH US
            </p>
          </div>
        </div>
      </section>

      <section className="bg-[#f5f2ec] px-6 py-10 sm:px-10 lg:px-[68px] lg:py-[46px]">
        <div className="mx-auto max-w-[1120px] text-center">
          <p
            className="text-[24px] leading-[1.3] text-[#9b845b] sm:text-[30px] lg:text-[33px]"
            style={{ fontFamily: "Georgia, 'Times New Roman', serif" }}
          >
            <FormSubmissionMessage fallback="Please find attached your booking confirmation documents." />
          </p>
        </div>
      </section>

      <section className="px-6 py-12 sm:px-10 sm:py-14 lg:px-[68px] lg:py-[54px]">
        <div className="mx-auto max-w-[1120px] text-center">
          <p
            className="text-[22px] uppercase tracking-[0.02em] text-[#85714D] font-normal sm:text-[32px]"
            style={{ fontFamily: "Georgia, 'Times New Roman', serif" }}
          >
            WE CREATE... EXPERIENCES
          </p>

          <div className="mt-12 flex flex-col items-center justify-center gap-10 sm:mt-16 sm:gap-12 lg:mt-[90px] lg:flex-row lg:items-start lg:gap-[195px]">
            <div className="w-full max-w-[320px] text-center lg:w-auto lg:max-w-none">
              <p className="text-[16px] font-medium uppercase tracking-[0.02em] text-[#5d5d5d] sm:text-[18px] lg:text-[21px]">
                #EXPERIENCEKARMA
              </p>
              <div className="mt-4 flex flex-wrap items-center justify-center gap-4 sm:mt-5 sm:gap-5 lg:gap-6">
                <a href="#" aria-label="Facebook" className={socialLinkClass}>
                  <Image
                    src="/facebook.png"
                    alt="Facebook"
                    width={36}
                    height={36}
                    className="h-full w-full object-contain"
                  />
                </a>
                <a href="#" aria-label="Instagram" className={socialLinkClass}>
                  <Image
                    src="/instagram.png"
                    alt="Instagram"
                    width={36}
                    height={36}
                    className="h-full w-full object-contain"
                  />
                </a>
                <a href="#" aria-label="YouTube" className={socialLinkClass}>
                  <Image
                    src="/youtube.png"
                    alt="YouTube"
                    width={36}
                    height={36}
                    className="h-full w-full object-contain"
                  />
                </a>
                <a href="#" aria-label="TikTok" className={socialLinkClass}>
                  <Image
                    src="/tiktok.png"
                    alt="TikTok"
                    width={36}
                    height={36}
                    className="h-full w-full object-contain"
                  />
                </a>
              </div>
            </div>

            <div className="w-full max-w-[220px] text-center lg:w-auto lg:max-w-none">
              <p className="text-[16px] font-medium uppercase tracking-[0.02em] text-[#5d5d5d] sm:text-[18px] lg:text-[21px]">
                CONTACT US
              </p>
              <a
                href="mailto:contact@example.com"
                aria-label="Contact us"
                className="mt-4 inline-flex items-center justify-center text-[#666666] transition-colors hover:text-[#99845f] sm:mt-5"
              >
                <Image
                  src="/mail.png"
                  alt="Mail"
                  width={36}
                  height={36}
                  className="h-9 w-9 object-contain"
                />
              </a>
            </div>
          </div>
        </div>
      </section>

      {isModal && onClose ? (
        <div className="border-t border-[#e7e2da] px-6 py-4 text-center">
          <button
            onClick={onClose}
            className="text-[14px] uppercase tracking-[0.18em] text-[#6d6d6d] transition-colors hover:text-[#99845f]"
          >
            Close
          </button>
        </div>
      ) : (
        <footer className="mt-auto bg-[#85714D] px-6 py-5 text-center">
          <Link
            href="/"
            className="text-[21px] text-white transition-opacity hover:opacity-85"
            style={{ fontFamily: "Gotham" }}
          >
            Go to our website
          </Link>
        </footer>
      )}
      <FormRedirectSnippets position="bottom" />
    </div>
  );

  if (isModal) {
    return content;
  }

  return <main className="bg-white">{content}</main>;
}