import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";
import { translate } from "@/lib/i18n-dictionaries";
import { resolveRequestLocale } from "@/lib/i18n-server";
import { getLocalizedPublicPath } from "@/lib/i18n-urls";

const socialIconClassName = "h-full w-full";

function OfficialsiteIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <circle cx="12" cy="12" r="8.7" />
      <path d="M3.7 12h16.6M12 3.3c2.2 2.3 3.3 5.2 3.3 8.7S14.2 18.4 12 20.7C9.8 18.4 8.7 15.5 8.7 12S9.8 5.6 12 3.3Z" strokeLinecap="round" />
    </svg>
  );
}

function NaverBlogIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="currentColor">
      <path d="M5 4.5h4.1l5.8 8.3V4.5H19v15h-4.1l-5.8-8.3v8.3H5v-15Z" />
    </svg>
  );
}

function BloggerIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="currentColor">
      <path d="M7.1 3.7h5.7a4.1 4.1 0 0 1 4.1 4.1v1.1c0 .7.5 1.2 1.2 1.2h.7c.7 0 1.2.5 1.2 1.2v3.2a5.8 5.8 0 0 1-5.8 5.8H9.5a5.8 5.8 0 0 1-5.8-5.8V7.1a3.4 3.4 0 0 1 3.4-3.4Zm1.2 4.1a1.2 1.2 0 0 0 0 2.4h4.8a1.2 1.2 0 0 0 0-2.4H8.3Zm0 6a1.2 1.2 0 0 0 0 2.4h7.4a1.2 1.2 0 0 0 0-2.4H8.3Z" />
    </svg>
  );
}

function WordPressIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.55">
      <circle cx="12" cy="12" r="9" />
      <path d="m6.4 8 3.5 9.1L12 11.6l2.1 5.5L17.5 8M5.5 8h4M14.4 8h4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function DevToIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.65">
      <rect x="2.3" y="5.2" width="19.4" height="13.6" rx="2.1" />
      <path d="M5.1 9v6h1.3c1 0 1.6-.6 1.6-1.6v-2.8C8 9.6 7.4 9 6.4 9H5.1Zm5 0v6h3M10.2 12h2.2M14.5 9l1.6 6 1.6-6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function MediumIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="currentColor">
      <ellipse cx="7.3" cy="12" rx="5.3" ry="7" />
      <ellipse cx="16.2" cy="12" rx="2.7" ry="6.6" />
      <ellipse cx="21" cy="12" rx="1" ry="5.8" />
    </svg>
  );
}

function DisquietIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M5 5h6.2a7 7 0 1 1 0 14H5V5Z" strokeLinejoin="round" />
      <path d="m13.5 14.5 4.8 4.8" strokeLinecap="round" />
    </svg>
  );
}

function XIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.05">
      <path d="M5 4.5 19 19.5M18.7 4.5 5.3 19.5" strokeLinecap="round" />
    </svg>
  );
}

function RocketPunchIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M14.4 4.1c2.1-.7 4.1-.6 5.5-.1.5 1.4.6 3.4-.1 5.5-1 3-3.7 5.6-6.7 6.6l-3.6-3.6c1-3 3.7-5.6 6.6-6.7" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="16.3" cy="7.7" r="1.6" />
      <path d="m9.8 9.6-3.4.5-2.3 2.3 4.3.7M10.9 14.2l-.5 3.4-2.3 2.3-.7-4.3M6.5 17.5 4 20" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ThreadsIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.1">
      <path d="M7.4 8.1c1.1-1.5 2.8-2.3 4.7-2.3 3.5 0 5.7 2.1 5.7 5.3 0 3.6-2.3 6.5-5.7 6.5-2.8 0-4.7-1.7-4.7-4.1 0-2.2 1.9-3.7 4.9-3.7 2.3 0 4 .7 5.1 2.1" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M12.2 9.8c.2 2.7-.3 4.5-1.7 5.3" strokeLinecap="round" />
    </svg>
  );
}

function InstagramIcon() {
  return (
    <svg aria-hidden="true" className={socialIconClassName} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
      <rect x="3.3" y="3.3" width="17.4" height="17.4" rx="5" />
      <circle cx="12" cy="12" r="4.1" />
      <circle cx="17.35" cy="6.75" r="1" fill="currentColor" stroke="none" />
    </svg>
  );
}

export async function SiteFooter({
  className = "",
}: {
  className?: string;
}) {
  const locale = await resolveRequestLocale();
  const t = (key: Parameters<typeof translate>[1]) => translate(locale, key);
  const publicUrl = (pathname: string) =>
    getPublicSiteAbsoluteUrl(getLocalizedPublicPath(pathname, locale));
  const businessInfo = [
    [t("public.footer.businessName"), locale === "ko" ? "카베닉스(KAVENIX)" : "KAVENIX"],
    [locale === "ko" ? "대표자" : "Representative", locale === "ko" ? "이상현" : "Sang Hyun Lee"],
    [t("public.footer.businessNumber"), "516-16-02620"],
    [locale === "ko" ? "사업장 주소" : "Business address", locale === "ko" ? "서울특별시 중랑구 숙선옹주로5길 15-26(묵동)" : "15-26 Sukseonongju-ro 5-gil, Jungnang-gu, Seoul, Republic of Korea"],
  ] as const;
  const socialLinks = [
    { label: "Officialsite", href: publicUrl("/blog"), icon: <OfficialsiteIcon /> },
    { label: "네이버 블로그", href: "https://blog.naver.com/kavenix", icon: <NaverBlogIcon /> },
    { label: "Blogger", href: "https://officialmail-blog.blogspot.com/", icon: <BloggerIcon /> },
    { label: "WordPress", href: "https://officialmailkr.wordpress.com/", icon: <WordPressIcon /> },
    { label: "DEV.to", href: "https://dev.to/officialmailkr", icon: <DevToIcon /> },
    { label: "Medium", href: "https://medium.com/@officialmailkr", icon: <MediumIcon /> },
    { label: "Disquiet", href: "https://disquiet.io/posts/Q8CEJ8", icon: <DisquietIcon /> },
    { label: "X", href: "https://x.com/official__mail", icon: <XIcon /> },
    { label: "RocketPunch", href: "https://www.rocketpunch.com/@officialmail/post", icon: <RocketPunchIcon /> },
    { label: "Threads", href: "https://www.threads.com/@official__mail", icon: <ThreadsIcon /> },
    { label: "Instagram", href: "https://www.instagram.com/official__mail/", icon: <InstagramIcon /> },
  ] as const;

  return (
    <footer
      className={`px-4 pb-10 text-center text-[11.5px] text-[#8f98a4] sm:px-8 sm:pb-12 sm:text-[12px] xl:px-10 ${className}`.trim()}
    >
      <div className="mx-auto w-full max-w-[1420px]">
        <div className="mx-auto mb-4 flex max-w-[180px] flex-wrap items-center justify-center gap-x-3 gap-y-2 sm:max-w-none">
          {socialLinks.map(({ label, href, icon }) => (
            <a
              key={label}
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={`Official Mail ${label}`}
              title={label}
              className="h-5 w-5 shrink-0 text-[#687891] transition-colors hover:text-[#2f6df6] focus-visible:text-[#2f6df6] focus-visible:outline-none"
            >
              {icon}
            </a>
          ))}
        </div>
        <div className="mx-auto flex max-w-[280px] flex-wrap items-center justify-center gap-x-2 gap-y-1 sm:max-w-none sm:gap-x-3">
          <a href={publicUrl("/business-email")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.businessEmail")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/domain-email")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.domainEmail")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/ai-email-summary")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.aiSummary")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/blog")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.blog")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/domain-mail-check")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.domainCheck")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/faq")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.faq")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/partner")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.partner")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/terms")} className="transition-colors hover:text-[#101418]">
            {t("public.nav.terms")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a href={publicUrl("/refund-policy")} className="transition-colors hover:text-[#101418]">
            {locale === "ko" ? "환불정책" : "Refund policy"}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a
            href={publicUrl("/privacy")}
            className="font-semibold transition-colors hover:text-[#101418]"
          >
            {t("public.nav.privacy")}
          </a>
          <span className="text-[#d5d9df]">|</span>
          <a
            href={publicUrl("/account-deletion")}
            className="transition-colors hover:text-[#101418]"
          >
            {t("public.nav.accountDeletion")}
          </a>
        </div>
        <address className="mx-auto mt-4 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 not-italic leading-5 text-[#7f8997]">
          {businessInfo.map(([label, value]) => (
            <span key={label} className="inline-flex items-center gap-1.5">
              <span className="font-semibold text-[#5d6673]">{label}</span>
              <span>{value}</span>
            </span>
          ))}
        </address>
        <p className="mt-3 leading-5">
          <span className="block sm:inline">
            <span className="font-extrabold text-[#2f6df6]">OFFICIALMAIL</span>{" "}
            Copyright © <span className="font-semibold text-[#101418]">KAVENIX</span>.
          </span>{" "}
          <span className="block sm:inline">All Rights Reserved.</span>
        </p>
      </div>
    </footer>
  );
}