"use client";

import Image from "next/image";
import AdvisorActionsCard from "@/components/ui/advisor-actions-card";
import NavigationButton from "@/components/ui/navigation-button";
import { PageBackground } from "@/components/utils/page-background";
import { useI18n } from "@/i18n/provider";
import Link from "next/link";

const advisorAvatars = [
  { id: "advisor-primary", src: "/assets/images/Avatar Image.png" },
  { id: "advisor-secondary", src: "/assets/images/Ellipse 370.png" },
  { id: "advisor-tertiary", src: "/assets/images/Avatar Image.png" },
];

export default function RequestSentPage() {
  const { dictionary: t } = useI18n();
  const copy = t.findingMatch;

  return (
    <>
      <PageBackground />

      <main 
        style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }}
        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[calc(var(--safe-top)+28px)] text-center"
      >
        <header className="-mx-[6px] flex items-center justify-between">
          <NavigationButton icon="back" />
          <h1 className="font-faminela group-16">Habib Marriage</h1>
          <NavigationButton icon="support" iconLabel="Support" />
        </header>

        <div className="flex flex-1 flex-col justify-between gap-20 pt-[109px]">
          <section className="flex flex-col items-center">
            <div className="relative isolate flex items-center justify-center">
              <Image
                src="/assets/images/Group 15978804fdasf68.svg"
                alt="Request sent"
                width={131}
                height={125}
                priority
                className="relative z-10"
              />
            </div>

            <h1 className="mt-11 group-16 leading-none font-black tracking-[0.02em] text-[#171717] uppercase">
              Request Sent
            </h1>

            <p className="mt-4 max-w-[315px] group-12 leading-[1.45] font-semibold text-[#777777]">
              We will propose marriage on your behalf. If they accept, their contact details will be shared with you.
            </p>

            <Link href={"/new-match/profile"} className="mt-9 w-full max-w-[212px]">
              <div className="bg-[#F5F5F5] px-4 py-2 rounded-[15px] shadow group-14 text-center font-semibold text-[#36363C]">
                  Match Profile
              </div>
            </Link >
          </section>

          <div className="space-y-8">
            <AdvisorActionsCard
              title={copy.advisorTitle}
              description={copy.advisorDescription}
              avatars={advisorAvatars}
              extraCount={7}
              getAdvisorLabel={copy.getAdvisor}
              getAdvisorHref="/questions-list"
            />

            <section className="flex flex-col items-center text-center">
              <div className="flex items-center justify-center py-3.5 rounded-[11px] gap-1 w-full bg-[#DBDBDB]">
                <Image
                  src={"/assets/images/material-symbols_lock.svg"}
                  width={24}
                  height={24}
                  alt="lock"
                />

                <h2 className="group-14 leading-none font-semibold text-[#747474]">
                  Profile is locked
                </h2>
              </div>
            </section>
          </div>
        </div>
      </main>
    </>
  );
}