import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";
import { getLocaleOption, type SupportedLocale } from "@/lib/i18n-config";
import { getLocalizedPublicPath } from "@/lib/i18n-urls";
import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";
import { getPublicSeoCopy, type PublicSeoPageKey } from "@/lib/public-seo-i18n";

export type PublicRow = readonly [string, string, string, string, string, string];
type NonKoreanLocale = Exclude<SupportedLocale, "ko">;

const localeIndex: Record<SupportedLocale, number> = {
  ko: 0,
  en: 1,
  zh: 2,
  ja: 3,
  vi: 4,
  ru: 5,
};

export function copy(locale: SupportedLocale, row: PublicRow) {
  return row[localeIndex[locale]];
}

function localized(locale: SupportedLocale, pathname: string) {
  return getLocalizedPublicPath(pathname, locale);
}

function JsonLd({ data }: { data: Record<string, unknown> }) {
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />;
}

export const shared = {
  brand: ["오피셜메일", "OfficialMail", "OfficialMail", "OfficialMail", "OfficialMail", "OfficialMail"],
  businessEmail: ["기업메일", "Business email", "企业邮箱", "ビジネスメール", "Email doanh nghiệp", "Деловая почта"],
  domainEmail: ["도메인 메일", "Domain email", "域名邮箱", "ドメインメール", "Email tên miền", "Доменная почта"],
  guide: ["사용 가이드", "Setup guide", "设置指南", "設定ガイド", "Hướng dẫn", "Руководство"],
  blog: ["블로그", "Blog", "博客", "ブログ", "Blog", "Блог"],
  freeCheck: ["무료 DNS 진단", "Free DNS check", "免费 DNS 检测", "無料DNS診断", "Kiểm tra DNS miễn phí", "Бесплатная проверка DNS"],
  partner: ["제휴 문의", "Partnerships", "合作咨询", "提携お問い合わせ", "Hợp tác", "Партнерство"],
  login: ["로그인", "Sign in", "登录", "ログイン", "Đăng nhập", "Войти"],
  start: ["무료로 시작하기", "Start free", "免费开始", "無料で始める", "Bắt đầu miễn phí", "Начать бесплатно"],
} as const satisfies Record<string, PublicRow>;

function PublicHeader({ locale }: { locale: SupportedLocale }) {
  return (
    <header className="sticky top-0 z-40 border-b border-[#e5ecf7] bg-white/88 backdrop-blur-xl">
      <div className="mx-auto flex h-[68px] w-full max-w-[1420px] items-center justify-between px-4 sm:h-20 sm:px-8 xl:px-10">
        <Link
          href={localized(locale, "/")}
          className="flex items-center gap-2 text-[#2f6df6]"
          aria-label={copy(locale, shared.brand)}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-7 w-7" aria-hidden="true">
            <rect x="3.5" y="5.5" width="17" height="13" rx="2.5" />
            <path d="m4.8 7 7.2 5.6L19.2 7" />
          </svg>
          <span className="text-[18px] font-extrabold tracking-[-0.06em]">{copy(locale, shared.brand)}</span>
        </Link>
        <nav className="hidden items-center gap-7 text-[14px] font-medium text-[#5b6d89] lg:flex">
          <Link href={localized(locale, "/business-email")} className="hover:text-[#2f6df6]">{copy(locale, shared.businessEmail)}</Link>
          <Link href={localized(locale, "/domain-email")} className="hover:text-[#2f6df6]">{copy(locale, shared.domainEmail)}</Link>
          <Link href={localized(locale, "/guide")} className="hover:text-[#2f6df6]">{copy(locale, shared.guide)}</Link>
          <Link href={localized(locale, "/domain-mail-check")} className="hover:text-[#2f6df6]">{copy(locale, shared.freeCheck)}</Link>
          <Link href={localized(locale, "/blog")} className="hover:text-[#2f6df6]">{copy(locale, shared.blog)}</Link>
          <Link href={localized(locale, "/partner")} className="hover:text-[#2f6df6]">{copy(locale, shared.partner)}</Link>
        </nav>
        <div className="flex items-center gap-2">
          <Link href="/login" className="om-btn-secondary hidden h-10 rounded-[11px] px-4 text-[13px] sm:inline-flex">{copy(locale, shared.login)}</Link>
          <Link href="/signup" className="om-btn-primary h-10 rounded-[11px] px-4 text-[13px] shadow-none">{copy(locale, shared.start)}</Link>
        </div>
      </div>
    </header>
  );
}

export const homeCopy = {
  eyebrow: ["회사 이름으로 보내는 첫 메일", "Your first email under your company name", "以公司名义发送第一封邮件", "会社名で送る最初のメール", "Email đầu tiên mang tên doanh nghiệp", "Первое письмо от имени вашей компании"],
  title: ["기업메일을 복잡한 구축 없이 시작하세요.", "Start business email without complex setup.", "无需复杂配置，即可启用企业邮箱。", "複雑な構築なしでビジネスメールを始めましょう。", "Bắt đầu email doanh nghiệp mà không cần thiết lập phức tạp.", "Запустите деловую почту без сложной настройки."],
  lead: ["대표 메일 1개와 웹메일은 무료입니다. 회사 도메인을 연결해 사용하고, 팀 메일함과 AI 요약은 성장 플랜에서 확장하세요.", "One primary mailbox and webmail are free. Connect your company domain; team mailboxes and AI summaries are available on the Growth plan.", "一个主邮箱和网页邮箱免费。连接公司域名后即可使用；团队邮箱和 AI 摘要需使用成长方案。", "代表メール1件とWebメールは無料です。会社ドメインを接続して利用し、チームメールボックスとAI要約は成長プランで追加できます。", "Một hộp thư chính và webmail được dùng miễn phí. Kết nối tên miền công ty; hộp thư nhóm và tóm tắt AI có trong gói Tăng trưởng.", "Один основной ящик и веб-почта бесплатны. Подключите домен компании; командные ящики и AI-сводки доступны на тарифе «Рост»."],
  secondary: ["설정 방법 보기", "View setup guide", "查看设置方法", "設定方法を見る", "Xem hướng dẫn thiết lập", "Посмотреть инструкцию"],
  free: ["대표 메일 1개 무료", "One primary mailbox free", "一个主邮箱免费", "代表メール1件無料", "Miễn phí 1 hộp thư chính", "Один основной ящик бесплатно"],
  noCard: ["카드 등록 없이 시작", "No card required", "无需绑定银行卡", "カード登録不要", "Không cần thẻ", "Без банковской карты"],
  ownDomain: ["보유한 도메인 사용", "Use your own domain", "使用自有域名", "保有ドメインを使用", "Dùng tên miền của bạn", "Используйте свой домен"],
  whyTitle: ["작은 팀에 필요한 것부터 정확하게", "Exactly what a small team needs", "从小团队真正需要的功能开始", "小さなチームに必要なものから", "Đúng những gì đội ngũ nhỏ cần", "Именно то, что нужно небольшой команде"],
  whyLead: ["무거운 그룹웨어를 먼저 구매하지 않아도 됩니다. 공식 주소를 만들고, 문의가 늘어날 때만 계정과 자동화를 추가하세요.", "You do not need to buy a heavy groupware suite first. Create an official address, then add accounts and automation only as inquiries grow.", "无需先购买复杂的协作套件。先创建官方邮箱，咨询量增加后再添加账号和自动化。", "最初から大規模なグループウェアは不要です。公式アドレスを作り、問い合わせが増えた時だけアカウントと自動化を追加できます。", "Bạn không cần mua bộ công cụ cồng kềnh ngay từ đầu. Hãy tạo địa chỉ chính thức và chỉ thêm tài khoản, tự động hóa khi lượng liên hệ tăng.", "Не нужно сразу покупать сложный корпоративный пакет. Создайте официальный адрес и добавляйте аккаунты и автоматизацию по мере роста обращений."],
  benefitTitles: [
    ["회사 도메인 주소", "Company domain address", "公司域名地址", "会社ドメインのアドレス", "Địa chỉ theo tên miền công ty", "Адрес на домене компании"],
    ["안내형 DNS 연결", "Guided DNS connection", "引导式 DNS 连接", "ガイド付きDNS接続", "Kết nối DNS có hướng dẫn", "Пошаговое подключение DNS"],
    ["팀이 성장할 때 확장", "Expand when the team grows", "随团队成长而扩展", "チームの成長に合わせて拡張", "Mở rộng khi đội ngũ phát triển", "Расширение по мере роста команды"],
    ["AI 요약과 답장 릴레이", "AI summaries and reply relay", "AI 摘要与回复转发", "AI要約と返信リレー", "Tóm tắt AI và chuyển tiếp trả lời", "AI-сводки и пересылка ответов"],
  ],
  benefitBodies: [
    ["contact@yourdomain.com처럼 고객이 바로 알아보는 공식 주소를 사용합니다.", "Use a recognizable official address such as contact@yourdomain.com.", "使用 contact@yourdomain.com 等易于识别的官方地址。", "contact@yourdomain.comのように伝わりやすい公式アドレスを使えます。", "Dùng địa chỉ chính thức dễ nhận biết như contact@yourdomain.com.", "Используйте понятный официальный адрес, например contact@yourdomain.com."],
    ["MX, SPF, DKIM, DMARC를 한 단계씩 입력하고 공개 상태를 확인합니다.", "Add MX, SPF, DKIM, and DMARC one step at a time and verify their public status.", "逐步添加 MX、SPF、DKIM、DMARC，并验证公开状态。", "MX、SPF、DKIM、DMARCを順番に登録し、公開状態を確認します。", "Thêm MX, SPF, DKIM, DMARC từng bước và kiểm tra trạng thái công khai.", "Добавляйте MX, SPF, DKIM и DMARC по шагам и проверяйте публикацию."],
    ["대표 메일로 시작하고 담당자가 생기면 멤버 메일함을 추가합니다.", "Start with the primary mailbox and add member mailboxes when roles appear.", "先使用主邮箱，有专人负责时再添加成员邮箱。", "代表メールから始め、担当者が増えたらメンバー用メールを追加します。", "Bắt đầu với hộp thư chính rồi thêm hộp thư thành viên khi có người phụ trách.", "Начните с основного ящика и добавляйте ящики сотрудников по мере появления ролей."],
    ["성장 플랜에서 긴 문의의 핵심을 보조 메일로 받아보고 답장을 원 발신자에게 전달합니다.", "On the Growth plan, receive key points in a secondary inbox and relay replies to the original sender.", "成长方案可将长邮件的重点发送到辅助邮箱，并把回复转发给原发件人。", "成長プランでは長い問い合わせの要点を補助メールで確認し、返信を元の送信者へ届けます。", "Với gói Tăng trưởng, xem ý chính của thư dài trong hộp thư phụ và chuyển câu trả lời đến người gửi ban đầu.", "На тарифе «Рост» получайте основные пункты длинных писем в резервный ящик и пересылайте ответы исходному отправителю."],
  ],
  stepsTitle: ["도메인 메일 연결은 네 단계면 됩니다", "Connect domain email in four steps", "四步连接域名邮箱", "4ステップでドメインメールを接続", "Kết nối email tên miền trong 4 bước", "Подключите доменную почту за четыре шага"],
  steps: [
    ["도메인과 대표 주소를 정합니다.", "Choose the domain and primary address.", "选择域名和主邮箱地址。", "ドメインと代表アドレスを決めます。", "Chọn tên miền và địa chỉ chính.", "Выберите домен и основной адрес."],
    ["DNS 관리 위치를 찾습니다.", "Find where DNS is managed.", "找到 DNS 管理平台。", "DNSの管理場所を確認します。", "Tìm nơi quản lý DNS.", "Найдите панель управления DNS."],
    ["제공된 레코드를 그대로 입력합니다.", "Enter the provided records exactly.", "按原样填写所提供的记录。", "表示されたレコードをそのまま入力します。", "Nhập chính xác các bản ghi được cung cấp.", "Точно внесите предоставленные записи."],
    ["연결 상태를 확인하고 송수신을 테스트합니다.", "Verify the connection and test sending and receiving.", "验证连接并测试收发邮件。", "接続を確認して送受信をテストします。", "Xác minh kết nối và thử gửi nhận.", "Проверьте подключение и отправку/получение."],
  ],
  useTitle: ["문의가 회사 자산으로 남는 운영", "Keep customer conversations as company assets", "让客户沟通成为公司资产", "問い合わせを会社の資産として残す", "Biến trao đổi khách hàng thành tài sản doanh nghiệp", "Сохраняйте переписку как актив компании"],
  useBodies: [
    ["1인 사업자: 견적, 제휴, 세금계산서 요청을 개인 메일과 분리합니다.", "Solo founders: separate quotes, partnerships, and invoice requests from personal email.", "个人创业者：将报价、合作与发票请求从私人邮箱中分离。", "個人事業主：見積・提携・請求書依頼を個人メールから分けます。", "Người sáng lập: tách báo giá, hợp tác và hóa đơn khỏi email cá nhân.", "Индивидуальные предприниматели: отделите запросы цен, партнерства и счета от личной почты."],
    ["온라인 스토어: 주문, 교환, 입점, 협찬 문의를 역할별 주소로 정리합니다.", "Online stores: organize orders, returns, vendors, and collaborations by role address.", "网店：按职能地址整理订单、退换货、入驻与合作咨询。", "オンラインストア：注文・交換・出店・協賛の問い合わせを役割別に整理します。", "Cửa hàng trực tuyến: phân loại đơn hàng, đổi trả, đối tác và hợp tác theo địa chỉ vai trò.", "Интернет-магазины: разделите заказы, возвраты, поставщиков и партнерства по служебным адресам."],
    ["소규모 팀: 담당자가 바뀌어도 문의 기록과 보낸 메일을 회사에 남깁니다.", "Small teams: retain inquiries and sent history even when ownership changes.", "小团队：负责人变更后，咨询与发件记录仍保留在公司。", "小規模チーム：担当者が変わっても問い合わせと送信履歴を会社に残します。", "Đội ngũ nhỏ: giữ lịch sử trao đổi và thư đã gửi khi thay đổi người phụ trách.", "Небольшие команды: сохраняйте обращения и историю отправки при смене ответственного."],
  ],
  priceTitle: ["대표 메일은 무료, 팀은 필요한 만큼", "Primary mailbox free, team seats as needed", "主邮箱免费，团队按需扩展", "代表メールは無料、チームは必要な分だけ", "Hộp thư chính miễn phí, thành viên theo nhu cầu", "Основной ящик бесплатно, места команды по необходимости"],
  priceBody: ["무료 플랜은 대표 메일 1개를 제공합니다. 성장 플랜은 팀 인원 1명당 월 3,900원이며 VAT는 별도입니다.", "The Free plan includes one primary mailbox. The Growth plan is KRW 3,900 per team member per month, excluding VAT.", "免费方案包含一个主邮箱。成长方案每位团队成员每月 3,900 韩元，另计增值税。", "無料プランは代表メール1件を提供します。成長プランはチーム1名あたり月額3,900ウォン（VAT別）です。", "Gói Miễn phí gồm một hộp thư chính. Gói Tăng trưởng là 3.900 KRW mỗi thành viên mỗi tháng, chưa gồm VAT.", "Бесплатный тариф включает один основной ящик. Тариф «Рост» стоит 3 900 KRW за участника в месяц без НДС."],
  ctaTitle: ["회사 이름이 담긴 첫 메일을 보내보세요.", "Send the first email with your company name.", "发送第一封带有公司名称的邮件。", "会社名が入った最初のメールを送りましょう。", "Gửi email đầu tiên mang tên doanh nghiệp.", "Отправьте первое письмо от имени компании."],
  ctaBody: ["카드 등록 없이 대표 주소를 만들고, 연결에 필요한 DNS 값을 바로 확인할 수 있습니다.", "Create a primary address without a card and see every DNS value required for connection.", "无需绑卡即可创建主邮箱，并立即查看连接所需的全部 DNS 值。", "カード登録なしで代表アドレスを作り、接続に必要なDNS値を確認できます。", "Tạo địa chỉ chính không cần thẻ và xem ngay mọi giá trị DNS cần thiết.", "Создайте основной адрес без карты и сразу получите все нужные DNS-записи."],
} as const satisfies Record<string, PublicRow | readonly PublicRow[]>;

function SectionLabel({ children }: { children: string }) {
  return <p className="text-[12px] font-bold uppercase tracking-[0.16em] text-[#2f6df6]">{children}</p>;
}

export async function LocalizedHomePage({ locale }: { locale: NonKoreanLocale }) {
  const benefitTitles = homeCopy.benefitTitles as readonly PublicRow[];
  const benefitBodies = homeCopy.benefitBodies as readonly PublicRow[];
  const steps = homeCopy.steps as readonly PublicRow[];
  const useBodies = homeCopy.useBodies as readonly PublicRow[];
  const homeUrl = getPublicSiteAbsoluteUrl(getLocalizedPublicPath("/", locale));
  const organizationId = `${getPublicSiteAbsoluteUrl("/")}#organization`;
  const language = getLocaleOption(locale).htmlLang;

  return (
    <main className="min-h-screen overflow-x-clip bg-[#fbfcff] text-[#14213a]">
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "@id": `${homeUrl}#software`,
        applicationCategory: "BusinessApplication",
        name: "OfficialMail",
        description: copy(locale, homeCopy.lead),
        inLanguage: language,
        isAccessibleForFree: true,
        offers: { "@type": "Offer", price: "0", priceCurrency: "KRW" },
        operatingSystem: "Web",
        provider: { "@id": organizationId },
        url: homeUrl,
      }} />
      <PublicHeader locale={locale} />
      <section className="relative isolate overflow-hidden border-b border-[#e6edf8]">
        <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_76%_20%,rgba(47,109,246,0.2),transparent_32%),linear-gradient(180deg,#f5f9ff_0%,#ffffff_100%)]" />
        <div className="mx-auto grid w-full max-w-[1420px] gap-12 px-4 py-20 sm:px-8 sm:py-28 lg:grid-cols-[minmax(0,1fr)_440px] lg:items-center xl:px-10">
          <div>
            <SectionLabel>{copy(locale, homeCopy.eyebrow)}</SectionLabel>
            <h1 className="mt-5 max-w-[850px] text-balance text-[42px] font-semibold leading-[1.08] tracking-[-0.075em] text-[#111a33] sm:text-[64px]">{copy(locale, homeCopy.title)}</h1>
            <p className="mt-7 max-w-[760px] text-[17px] leading-8 text-[#53637d] sm:text-[20px] sm:leading-9">{copy(locale, homeCopy.lead)}</p>
            <div className="mt-9 flex flex-wrap gap-3">
              <Link href="/signup" className="om-btn-primary h-12 rounded-[12px] px-6 text-[14px] shadow-none">{copy(locale, shared.start)}</Link>
              <Link href={localized(locale, "/guide")} className="om-btn-secondary h-12 rounded-[12px] px-6 text-[14px]">{copy(locale, homeCopy.secondary)}</Link>
            </div>
            <div className="mt-8 flex flex-wrap gap-x-5 gap-y-2 text-[13px] font-medium text-[#61738f]">
              {[homeCopy.free, homeCopy.noCard, homeCopy.ownDomain].map((row) => <span key={row[0]} className="border-b border-[#b9cdf5] pb-1">{copy(locale, row)}</span>)}
            </div>
          </div>
          <div className="relative min-h-[390px] overflow-hidden rounded-[32px] border border-[#d9e5f7] bg-white p-5 shadow-[0_30px_80px_rgba(27,59,117,0.12)] sm:p-7">
            <div className="flex items-center justify-between border-b border-[#e9eef7] pb-5">
              <span className="font-semibold text-[#223553]">contact@yourdomain.com</span>
              <span className="rounded-full bg-[#eef4ff] px-3 py-1 text-[11px] font-semibold text-[#2f6df6]">DNS verified</span>
            </div>
            <div className="mt-6 space-y-3">
              {["MX", "SPF", "DKIM", "DMARC"].map((record, index) => (
                <div key={record} className="grid grid-cols-[62px_1fr_auto] items-center gap-3 rounded-[16px] bg-[#f7faff] px-4 py-4">
                  <span className="font-semibold text-[#2f6df6]">{record}</span>
                  <span className="truncate text-[12px] text-[#6b7d98]">{index === 0 ? "mx1.officialsite.kr" : `${record.toLowerCase()} record`}</span>
                  <span className="h-2.5 w-2.5 rounded-full bg-[#43b77a]" />
                </div>
              ))}
            </div>
            <div className="mt-6 h-2 overflow-hidden rounded-full bg-[#eaf0fa]"><div className="h-full w-full rounded-full bg-[#2f6df6]" /></div>
          </div>
        </div>
      </section>

      <section className="mx-auto w-full max-w-[1420px] px-4 py-20 sm:px-8 sm:py-28 xl:px-10">
        <SectionLabel>OfficialMail</SectionLabel>
        <h2 className="mt-4 max-w-[780px] text-[34px] font-semibold leading-[1.18] tracking-[-0.06em] sm:text-[46px]">{copy(locale, homeCopy.whyTitle)}</h2>
        <p className="mt-5 max-w-[780px] text-[16px] leading-8 text-[#64748b]">{copy(locale, homeCopy.whyLead)}</p>
        <div className="mt-12 grid border-y border-[#dfe7f3] md:grid-cols-2 xl:grid-cols-4">
          {benefitTitles.map((title, index) => (
            <article key={title[0]} className="border-b border-[#e6edf7] py-8 md:px-7 md:nth-[2n]:border-l xl:border-b-0 xl:border-l xl:first:border-l-0">
              <span className="text-[12px] font-bold text-[#9aa8bb]">0{index + 1}</span>
              <h3 className="mt-5 text-[20px] font-semibold tracking-[-0.04em]">{copy(locale, title)}</h3>
              <p className="mt-3 text-[14px] leading-7 text-[#687a96]">{copy(locale, benefitBodies[index])}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="border-y border-[#e6edf8] bg-[#f5f8fe]">
        <div className="mx-auto w-full max-w-[1420px] px-4 py-20 sm:px-8 xl:px-10">
          <h2 className="max-w-[760px] text-[34px] font-semibold tracking-[-0.06em] sm:text-[46px]">{copy(locale, homeCopy.stepsTitle)}</h2>
          <ol className="mt-10 grid gap-3 lg:grid-cols-4">
            {steps.map((step, index) => (
              <li key={step[0]} className="rounded-[22px] border border-[#dce6f5] bg-white px-6 py-7">
                <span className="text-[12px] font-bold text-[#2f6df6]">STEP {index + 1}</span>
                <p className="mt-4 text-[17px] font-semibold leading-7 text-[#263957]">{copy(locale, step)}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="mx-auto grid w-full max-w-[1420px] gap-12 px-4 py-20 sm:px-8 sm:py-28 lg:grid-cols-[0.85fr_1.15fr] xl:px-10">
        <div>
          <SectionLabel>Operations</SectionLabel>
          <h2 className="mt-4 text-[34px] font-semibold leading-[1.18] tracking-[-0.06em] sm:text-[46px]">{copy(locale, homeCopy.useTitle)}</h2>
        </div>
        <div className="border-t border-[#dfe7f3]">
          {useBodies.map((body, index) => (
            <div key={body[0]} className="grid grid-cols-[42px_1fr] gap-4 border-b border-[#dfe7f3] py-6">
              <span className="text-[12px] font-semibold text-[#91a0b5]">0{index + 1}</span>
              <p className="text-[15px] leading-7 text-[#536783]">{copy(locale, body)}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto w-full max-w-[1420px] px-4 pb-20 sm:px-8 sm:pb-28 xl:px-10">
        <div className="grid overflow-hidden rounded-[32px] bg-[#15294e] text-white lg:grid-cols-[1fr_auto] lg:items-center">
          <div className="p-8 sm:p-12">
            <SectionLabel>Pricing</SectionLabel>
            <h2 className="mt-4 text-[32px] font-semibold tracking-[-0.055em] sm:text-[42px]">{copy(locale, homeCopy.priceTitle)}</h2>
            <p className="mt-4 max-w-[760px] text-[15px] leading-7 text-white/68">{copy(locale, homeCopy.priceBody)}</p>
          </div>
          <div className="border-t border-white/10 p-8 lg:border-l lg:border-t-0 lg:p-12"><Link href="/signup" className="inline-flex h-12 items-center rounded-[12px] bg-white px-6 text-[14px] font-semibold text-[#173063]">{copy(locale, shared.start)}</Link></div>
        </div>
      </section>

      <section className="border-t border-[#e5ecf7] bg-white">
        <div className="mx-auto w-full max-w-[1420px] px-4 py-20 text-center sm:px-8 sm:py-24 xl:px-10">
          <h2 className="text-balance text-[36px] font-semibold tracking-[-0.065em] sm:text-[50px]">{copy(locale, homeCopy.ctaTitle)}</h2>
          <p className="mx-auto mt-5 max-w-[720px] text-[16px] leading-8 text-[#65758f]">{copy(locale, homeCopy.ctaBody)}</p>
          <Link href="/signup" className="om-btn-primary mt-8 h-12 rounded-[12px] px-7 text-[14px] shadow-none">{copy(locale, shared.start)}</Link>
        </div>
      </section>
      <SiteFooter className="pt-12" />
    </main>
  );
}

const guideCopy = {
  eyebrow: ["도메인 메일 설정", "Domain email setup", "域名邮箱设置", "ドメインメール設定", "Thiết lập email tên miền", "Настройка доменной почты"],
  title: ["처음이어도 순서대로 연결할 수 있습니다.", "Connect your domain step by step, even if this is your first time.", "即使是第一次，也能按步骤完成域名连接。", "初めてでも順番にドメインを接続できます。", "Kết nối tên miền từng bước ngay cả khi đây là lần đầu.", "Подключите домен пошагово, даже если делаете это впервые."],
  lead: ["도메인을 구매한 곳과 DNS를 실제로 관리하는 곳을 먼저 확인한 뒤, 오피셜메일이 제공하는 값을 그대로 입력하세요.", "First identify where you bought the domain and where its DNS is actually managed, then enter the values provided by OfficialMail exactly.", "先确认域名购买平台和实际 DNS 管理平台，再按原样填写 OfficialMail 提供的值。", "ドメイン購入先と実際のDNS管理先を確認し、OfficialMailが表示する値をそのまま入力します。", "Trước tiên xác định nơi mua tên miền và nơi thực sự quản lý DNS, sau đó nhập chính xác các giá trị OfficialMail cung cấp.", "Сначала выясните, где куплен домен и где реально управляется DNS, затем точно внесите значения OfficialMail."],
  before: ["시작 전 확인", "Before you begin", "开始前确认", "開始前の確認", "Trước khi bắt đầu", "Перед началом"],
  beforeBody: ["입력할 주소는 www나 https가 없는 루트 도메인입니다. 예: yourdomain.com. 홈페이지 제작사와 DNS 관리사는 서로 다를 수 있습니다.", "Use the root domain without www or https, for example yourdomain.com. Your website builder and DNS provider may be different companies.", "请输入不含 www 或 https 的根域名，例如 yourdomain.com。网站制作平台与 DNS 服务商可能不同。", "wwwやhttpsを除いたルートドメインを入力します（例：yourdomain.com）。サイト制作会社とDNS管理会社は異なる場合があります。", "Nhập tên miền gốc không có www hoặc https, ví dụ yourdomain.com. Nơi tạo website và nơi quản lý DNS có thể khác nhau.", "Введите корневой домен без www и https, например yourdomain.com. Конструктор сайта и DNS-провайдер могут быть разными."],
  recordsTitle: ["각 레코드의 역할", "What each DNS record does", "各 DNS 记录的作用", "各DNSレコードの役割", "Vai trò của từng bản ghi DNS", "Назначение DNS-записей"],
  records: [
    ["MX — 수신 메일이 도착할 서버를 지정합니다.", "MX — selects the server that receives incoming mail.", "MX — 指定接收邮件的服务器。", "MX — 受信メールが届くサーバーを指定します。", "MX — chỉ định máy chủ nhận email đến.", "MX — указывает сервер для входящей почты."],
    ["SPF — 이 도메인으로 발송할 수 있는 서버를 선언합니다.", "SPF — declares which servers may send for the domain.", "SPF — 声明哪些服务器可使用该域名发信。", "SPF — このドメインから送信できるサーバーを宣言します。", "SPF — khai báo máy chủ được phép gửi cho tên miền.", "SPF — объявляет серверы, которым разрешена отправка от домена."],
    ["DKIM — 발송 메일의 전자서명을 검증할 공개키입니다.", "DKIM — provides the public key used to verify email signatures.", "DKIM — 提供用于验证邮件签名的公钥。", "DKIM — 送信メールの署名を検証する公開鍵です。", "DKIM — cung cấp khóa công khai để xác minh chữ ký email.", "DKIM — открытый ключ для проверки подписи письма."],
    ["DMARC — SPF와 DKIM 인증 실패를 처리하는 정책입니다.", "DMARC — defines how SPF or DKIM authentication failures are handled.", "DMARC — 定义 SPF 或 DKIM 验证失败时的处理方式。", "DMARC — SPFまたはDKIM認証失敗時の処理方針です。", "DMARC — quy định cách xử lý khi SPF hoặc DKIM thất bại.", "DMARC — задает политику обработки сбоев SPF или DKIM."],
  ],
  stepsTitle: ["연결 순서", "Connection sequence", "连接顺序", "接続手順", "Trình tự kết nối", "Порядок подключения"],
  steps: [
    ["오피셜메일에서 사용할 도메인과 대표 메일 주소를 등록합니다.", "Register the domain and primary email address in OfficialMail.", "在 OfficialMail 中登记域名和主邮箱地址。", "OfficialMailでドメインと代表メールアドレスを登録します。", "Đăng ký tên miền và địa chỉ email chính trong OfficialMail.", "Зарегистрируйте домен и основной адрес в OfficialMail."],
    ["도메인 구매처 또는 호스팅사의 DNS 레코드 관리 화면을 엽니다.", "Open DNS record management at the registrar or hosting provider.", "在域名注册商或托管服务商中打开 DNS 记录管理。", "ドメイン購入先またはホスティング会社のDNS管理画面を開きます。", "Mở trang quản lý bản ghi DNS tại nhà đăng ký hoặc nhà cung cấp hosting.", "Откройте управление DNS у регистратора или хостинг-провайдера."],
    ["화면에 표시된 MX, SPF, DKIM, DMARC 값을 줄이거나 수정하지 않고 저장합니다.", "Save the displayed MX, SPF, DKIM, and DMARC values without shortening or editing them.", "按原样保存 MX、SPF、DKIM、DMARC，不要删减或修改。", "表示されたMX、SPF、DKIM、DMARCを短縮・変更せず保存します。", "Lưu nguyên vẹn MX, SPF, DKIM, DMARC, không rút gọn hay sửa đổi.", "Сохраните MX, SPF, DKIM и DMARC без сокращений и изменений."],
    ["연결 상태 확인을 눌러 레코드별 결과와 최근 확인 시각을 봅니다.", "Select Check connection to review each record and its latest verification time.", "点击“检查连接”，查看各记录结果和最近验证时间。", "「接続状態を確認」を押し、各レコードと最終確認時刻を確認します。", "Nhấn Kiểm tra kết nối để xem kết quả từng bản ghi và thời gian xác minh gần nhất.", "Нажмите «Проверить подключение», чтобы увидеть статус каждой записи и время проверки."],
    ["외부 Gmail 또는 다른 주소와 양방향으로 테스트 메일을 주고받습니다.", "Exchange test messages both ways with Gmail or another external address.", "与 Gmail 或其他外部地址双向收发测试邮件。", "Gmailなどの外部アドレスと双方向でテストメールを送受信します。", "Gửi và nhận email thử hai chiều với Gmail hoặc địa chỉ bên ngoài khác.", "Обменяйтесь тестовыми письмами в обе стороны с Gmail или другим внешним адресом."],
  ],
  warningTitle: ["기존 메일 서비스를 사용 중이라면", "If another mail service is already active", "如果正在使用其他邮件服务", "既存のメールサービスを利用中の場合", "Nếu đang dùng dịch vụ email khác", "Если уже используется другая почта"],
  warningBody: ["MX를 바꾸는 순간 새 메일의 수신 경로가 변경됩니다. 기존 메일 보관과 전환 일정을 먼저 확인하고, 한 도메인에 SPF 레코드를 여러 개 만들지 마세요.", "Changing MX changes the route for new incoming mail. Confirm migration and retention first, and never publish multiple SPF records for one domain.", "修改 MX 会改变新邮件的接收路径。请先确认迁移与保留方案，且同一域名不要发布多个 SPF 记录。", "MXを変更すると新着メールの受信先が変わります。移行と保存方法を先に確認し、1つのドメインに複数のSPFレコードを作らないでください。", "Đổi MX sẽ thay đổi đường nhận thư mới. Hãy xác nhận kế hoạch chuyển đổi, lưu trữ và không tạo nhiều bản ghi SPF cho cùng tên miền.", "Изменение MX меняет маршрут новых писем. Сначала проверьте миграцию и хранение и не публикуйте несколько SPF-записей для одного домена."],
  troubleshooting: ["연결이 바로 완료되지 않나요?", "Connection not complete yet?", "连接尚未完成？", "接続がまだ完了しませんか？", "Kết nối chưa hoàn tất?", "Подключение еще не завершено?"],
  troubleshootingBody: ["DNS 반영에는 수분에서 최대 24시간이 걸릴 수 있습니다. 호스트, 값, MX 우선순위, 중복 SPF를 다시 확인한 뒤 재검증하세요. 어려우면 도메인 연결 화면의 설정 대행 또는 채널 상담을 이용할 수 있습니다.", "DNS propagation can take minutes or up to 24 hours. Recheck host names, values, MX priority, and duplicate SPF records before verifying again. If you need help, contact chat support from the domain page.", "DNS 传播可能需要几分钟至 24 小时。请重新检查主机、值、MX 优先级和重复 SPF 后再次验证。如需帮助，可在域名页面联系在线客服。", "DNS反映には数分から最大24時間かかります。ホスト、値、MX優先度、SPF重複を確認して再検証してください。必要な場合はドメイン画面からチャット相談を利用できます。", "DNS có thể cập nhật trong vài phút đến 24 giờ. Kiểm tra lại host, giá trị, ưu tiên MX và SPF trùng trước khi xác minh lại. Nếu cần trợ giúp, hãy liên hệ hỗ trợ qua chat trên trang tên miền.", "Распространение DNS занимает от нескольких минут до 24 часов. Проверьте хосты, значения, приоритет MX и дубли SPF. При необходимости обратитесь в чат поддержки на странице домена."],
} as const satisfies Record<string, PublicRow | readonly PublicRow[]>;

export async function LocalizedGuidePage({ locale }: { locale: NonKoreanLocale }) {
  const records = guideCopy.records as readonly PublicRow[];
  const steps = guideCopy.steps as readonly PublicRow[];
  const guideUrl = getPublicSiteAbsoluteUrl(getLocalizedPublicPath("/guide", locale));
  return (
    <main className="min-h-screen bg-white text-[#16233c]">
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "HowTo",
        name: copy(locale, guideCopy.title),
        description: copy(locale, guideCopy.lead),
        inLanguage: getLocaleOption(locale).htmlLang,
        step: steps.map((step, index) => ({
          "@type": "HowToStep",
          position: index + 1,
          text: copy(locale, step),
        })),
        url: guideUrl,
      }} />
      <PublicHeader locale={locale} />
      <section className="border-b border-[#e6edf8] bg-[linear-gradient(180deg,#f5f9ff_0%,#ffffff_100%)]">
        <div className="mx-auto w-full max-w-[1160px] px-4 py-16 sm:px-8 sm:py-24">
          <SectionLabel>{copy(locale, guideCopy.eyebrow)}</SectionLabel>
          <h1 className="mt-5 max-w-[900px] text-balance text-[40px] font-semibold leading-[1.12] tracking-[-0.07em] sm:text-[58px]">{copy(locale, guideCopy.title)}</h1>
          <p className="mt-6 max-w-[820px] text-[17px] leading-8 text-[#60718d]">{copy(locale, guideCopy.lead)}</p>
        </div>
      </section>
      <div className="mx-auto w-full max-w-[1160px] space-y-16 px-4 py-16 sm:px-8 sm:py-20">
        <section className="rounded-[26px] border border-[#dce7f7] bg-[#f8fbff] p-7 sm:p-9">
          <h2 className="text-[24px] font-semibold tracking-[-0.045em]">{copy(locale, guideCopy.before)}</h2>
          <p className="mt-4 text-[15px] leading-8 text-[#60718d]">{copy(locale, guideCopy.beforeBody)}</p>
        </section>
        <section>
          <h2 className="text-[30px] font-semibold tracking-[-0.055em]">{copy(locale, guideCopy.recordsTitle)}</h2>
          <div className="mt-7 grid gap-3 sm:grid-cols-2">
            {records.map((record) => <p key={record[0]} className="rounded-[20px] border border-[#e1e9f5] px-5 py-5 text-[14px] leading-7 text-[#596d8b]">{copy(locale, record)}</p>)}
          </div>
        </section>
        <section>
          <h2 className="text-[30px] font-semibold tracking-[-0.055em]">{copy(locale, guideCopy.stepsTitle)}</h2>
          <ol className="mt-7 border-t border-[#dfe7f3]">
            {steps.map((step, index) => (
              <li key={step[0]} className="grid grid-cols-[48px_1fr] gap-4 border-b border-[#dfe7f3] py-6 sm:grid-cols-[72px_1fr]">
                <span className="text-[12px] font-bold text-[#2f6df6]">0{index + 1}</span>
                <p className="text-[15px] leading-7 text-[#526784]">{copy(locale, step)}</p>
              </li>
            ))}
          </ol>
        </section>
        <section className="grid gap-4 lg:grid-cols-2">
          <div className="rounded-[24px] bg-[#162f62] p-7 text-white sm:p-9">
            <h2 className="text-[23px] font-semibold">{copy(locale, guideCopy.warningTitle)}</h2>
            <p className="mt-4 text-[14px] leading-7 text-white/72">{copy(locale, guideCopy.warningBody)}</p>
          </div>
          <div className="rounded-[24px] border border-[#dce7f7] p-7 sm:p-9">
            <h2 className="text-[23px] font-semibold">{copy(locale, guideCopy.troubleshooting)}</h2>
            <p className="mt-4 text-[14px] leading-7 text-[#60718d]">{copy(locale, guideCopy.troubleshootingBody)}</p>
            <div className="mt-6 flex flex-wrap gap-2">
              <Link href={localized(locale, "/domain-mail-check")} className="om-btn-secondary h-10 rounded-[10px] px-4 text-[13px]">{copy(locale, shared.freeCheck)}</Link>
              <Link href="/signup" className="om-btn-primary h-10 rounded-[10px] px-4 text-[13px] shadow-none">{copy(locale, shared.start)}</Link>
            </div>
          </div>
        </section>
      </div>
      <SiteFooter className="pt-12" />
    </main>
  );
}

export const seoGenericCopy = {
  summary: ["핵심 요약", "Key points", "要点", "要点", "Điểm chính", "Ключевые моменты"],
  summaryItems: [
    ["회사 도메인을 사용하는 공식 메일 주소로 고객 신뢰를 높일 수 있습니다.", "An official address on your company domain helps customers recognize a trusted channel.", "使用公司域名的官方邮箱有助于客户识别可信渠道。", "会社ドメインの公式アドレスは、信頼できる窓口だと伝えます。", "Địa chỉ chính thức trên tên miền công ty giúp khách hàng nhận biết kênh đáng tin cậy.", "Официальный адрес на домене компании помогает клиентам узнать надежный канал."],
    ["MX, SPF, DKIM, DMARC 상태를 확인해 수신과 발신 인증을 함께 관리합니다.", "Review MX, SPF, DKIM, and DMARC to manage receiving and sender authentication together.", "检查 MX、SPF、DKIM、DMARC，同时管理收信与发信验证。", "MX、SPF、DKIM、DMARCを確認し、受信と送信認証をまとめて管理します。", "Kiểm tra MX, SPF, DKIM, DMARC để quản lý nhận thư và xác thực gửi.", "Проверяйте MX, SPF, DKIM и DMARC для приема и аутентификации отправки."],
    ["대표 메일로 시작하고 실제 업무량이 늘어날 때 팀과 자동화 기능을 확장합니다.", "Start with a primary mailbox and expand the team and automation only when operations grow.", "从主邮箱开始，业务增长后再扩展团队与自动化。", "代表メールから始め、業務量が増えた時だけチームと自動化を拡張します。", "Bắt đầu với hộp thư chính và chỉ mở rộng đội ngũ, tự động hóa khi công việc tăng.", "Начните с основного ящика и расширяйте команду и автоматизацию по мере роста."],
  ],
  howTitle: ["오피셜메일에서 시작하는 순서", "How to get started with OfficialMail", "使用 OfficialMail 的开始步骤", "OfficialMailで始める手順", "Cách bắt đầu với OfficialMail", "Как начать работу с OfficialMail"],
  how: [
    ["사용할 회사 도메인과 대표 주소를 정합니다.", "Choose your company domain and primary address.", "选择公司域名和主邮箱地址。", "会社ドメインと代表アドレスを決めます。", "Chọn tên miền công ty và địa chỉ chính.", "Выберите домен компании и основной адрес."],
    ["안내에 따라 DNS 레코드를 입력하고 공개 상태를 검증합니다.", "Enter the guided DNS records and verify their public status.", "按指引填写 DNS 记录并验证公开状态。", "案内に沿ってDNSレコードを入力し、公開状態を確認します。", "Nhập bản ghi DNS theo hướng dẫn và xác minh trạng thái công khai.", "Внесите DNS-записи по инструкции и проверьте их публикацию."],
    ["외부 주소와 테스트한 뒤 홈페이지와 고객 안내에 공식 주소를 사용합니다.", "Test with an external address, then publish the official address on your website and customer materials.", "与外部邮箱测试后，在网站和客户资料中使用官方地址。", "外部アドレスとテストした後、サイトや顧客案内に公式アドレスを掲載します。", "Kiểm tra với địa chỉ bên ngoài rồi dùng địa chỉ chính thức trên website và tài liệu khách hàng.", "Проверьте обмен с внешним адресом и разместите официальный адрес на сайте и в материалах."],
  ],
  operationsTitle: ["운영할 때 확인할 기준", "Operational checks", "运营检查要点", "運用時の確認項目", "Điểm cần kiểm tra khi vận hành", "Что контролировать при работе"],
  operations: [
    ["고객 문의, 제휴, 정산처럼 역할이 다른 메일을 주소와 폴더로 분리합니다.", "Separate customer support, partnerships, and billing by address and folder.", "按地址和文件夹区分客服、合作与结算邮件。", "問い合わせ・提携・請求などをアドレスとフォルダで分けます。", "Tách hỗ trợ khách hàng, hợp tác và thanh toán theo địa chỉ, thư mục.", "Разделяйте поддержку, партнерства и расчеты по адресам и папкам."],
    ["담당자가 바뀌어도 회사 메일함에 기록이 남도록 업무 계정을 사용합니다.", "Use company accounts so records remain when ownership changes.", "使用公司账号，确保负责人更换后记录仍保留。", "担当者が変わっても記録が会社に残るよう業務アカウントを使います。", "Dùng tài khoản công ty để giữ lịch sử khi thay đổi người phụ trách.", "Используйте корпоративные аккаунты, чтобы история сохранялась при смене ответственного."],
    ["반송이나 스팸 분류가 생기면 DNS 인증과 원문 인증 결과를 함께 확인합니다.", "If mail bounces or enters spam, review DNS authentication and the message authentication results.", "如出现退信或进垃圾箱，请同时检查 DNS 验证与邮件原文的验证结果。", "不達や迷惑メール分類が起きたらDNS認証とメール原文の認証結果を確認します。", "Khi thư bị trả lại hoặc vào spam, kiểm tra xác thực DNS và kết quả xác thực trong nguồn thư.", "При возврате или попадании в спам проверьте DNS-аутентификацию и результаты в исходнике письма."],
  ],
  faqTitle: ["자주 묻는 질문", "Frequently asked questions", "常见问题", "よくある質問", "Câu hỏi thường gặp", "Частые вопросы"],
  faqQuestion: ["도메인이 꼭 필요한가요?", "Do I need a domain?", "必须有域名吗？", "ドメインは必要ですか？", "Có cần tên miền không?", "Нужен ли домен?"],
  faqAnswer: ["회사명이 들어간 공식 주소를 만들려면 소유하거나 관리 권한이 있는 도메인이 필요합니다. 홈페이지가 없어도 도메인만 있으면 메일 연결은 가능합니다.", "You need a domain that you own or can manage to create an official company address. A website is not required; the domain alone can be connected to email.", "创建带有公司名称的官方邮箱需要拥有或可管理的域名。无需网站，仅有域名也可连接邮箱。", "会社名入りの公式アドレスには、所有または管理権限のあるドメインが必要です。Webサイトがなくてもドメインだけでメール接続できます。", "Bạn cần tên miền do mình sở hữu hoặc có quyền quản lý để tạo địa chỉ chính thức. Không cần website; chỉ có tên miền vẫn kết nối email được.", "Для официального адреса нужен домен, которым вы владеете или управляете. Сайт не обязателен: достаточно домена."],
} as const satisfies Record<string, PublicRow | readonly PublicRow[]>;

export async function LocalizedSeoLanding({
  locale,
  page,
  pathname,
}: {
  locale: NonKoreanLocale;
  page: PublicSeoPageKey;
  pathname: string;
}) {
  const seo = getPublicSeoCopy(page, locale);
  const summaryItems = seoGenericCopy.summaryItems as readonly PublicRow[];
  const how = seoGenericCopy.how as readonly PublicRow[];
  const operations = seoGenericCopy.operations as readonly PublicRow[];
  const pageUrl = getPublicSiteAbsoluteUrl(getLocalizedPublicPath(pathname, locale));
  return (
    <main className="min-h-screen bg-white text-[#16233c]">
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "WebPage",
        name: seo.title,
        description: seo.description,
        inLanguage: getLocaleOption(locale).htmlLang,
        isPartOf: { "@id": `${getPublicSiteAbsoluteUrl("/")}#website` },
        mainEntity: {
          "@type": "SoftwareApplication",
          name: "OfficialMail",
          applicationCategory: "BusinessApplication",
          operatingSystem: "Web",
        },
        url: pageUrl,
      }} />
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "FAQPage",
        inLanguage: getLocaleOption(locale).htmlLang,
        mainEntity: [{
          "@type": "Question",
          name: copy(locale, seoGenericCopy.faqQuestion),
          acceptedAnswer: { "@type": "Answer", text: copy(locale, seoGenericCopy.faqAnswer) },
        }],
      }} />
      <PublicHeader locale={locale} />
      <section className="border-b border-[#e6edf8] bg-[radial-gradient(circle_at_80%_10%,rgba(47,109,246,0.17),transparent_30%),linear-gradient(180deg,#f7faff_0%,#ffffff_100%)]">
        <div className="mx-auto w-full max-w-[1160px] px-4 py-16 sm:px-8 sm:py-24">
          <SectionLabel>OfficialMail</SectionLabel>
          <h1 className="mt-5 max-w-[940px] text-balance text-[40px] font-semibold leading-[1.12] tracking-[-0.07em] sm:text-[58px]">{seo.title.replace(/\s*\|\s*OfficialMail$/i, "")}</h1>
          <p className="mt-6 max-w-[820px] text-[17px] leading-8 text-[#5e708c]">{seo.description}</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Link href="/signup" className="om-btn-primary h-12 rounded-[12px] px-6 text-[14px] shadow-none">{copy(locale, shared.start)}</Link>
            <Link href={localized(locale, "/guide")} className="om-btn-secondary h-12 rounded-[12px] px-6 text-[14px]">{copy(locale, shared.guide)}</Link>
          </div>
        </div>
      </section>
      <div className="mx-auto w-full max-w-[1160px] space-y-20 px-4 py-16 sm:px-8 sm:py-24">
        <section>
          <h2 className="text-[30px] font-semibold tracking-[-0.055em]">{copy(locale, seoGenericCopy.summary)}</h2>
          <div className="mt-7 grid gap-3 lg:grid-cols-3">
            {summaryItems.map((item, index) => <article key={item[0]} className="rounded-[22px] border border-[#dfe8f5] p-6"><span className="text-[12px] font-bold text-[#2f6df6]">0{index + 1}</span><p className="mt-4 text-[15px] leading-7 text-[#5b6e8a]">{copy(locale, item)}</p></article>)}
          </div>
        </section>
        <section className="grid gap-10 lg:grid-cols-[0.8fr_1.2fr]">
          <h2 className="text-[30px] font-semibold tracking-[-0.055em]">{copy(locale, seoGenericCopy.howTitle)}</h2>
          <ol className="border-t border-[#dfe7f3]">
            {how.map((item, index) => <li key={item[0]} className="grid grid-cols-[42px_1fr] gap-4 border-b border-[#dfe7f3] py-6"><span className="text-[12px] font-bold text-[#2f6df6]">0{index + 1}</span><p className="text-[15px] leading-7 text-[#596d89]">{copy(locale, item)}</p></li>)}
          </ol>
        </section>
        <section className="rounded-[30px] bg-[#f5f8fe] p-7 sm:p-10">
          <h2 className="text-[30px] font-semibold tracking-[-0.055em]">{copy(locale, seoGenericCopy.operationsTitle)}</h2>
          <div className="mt-6 grid gap-4 md:grid-cols-3">
            {operations.map((item) => <p key={item[0]} className="rounded-[18px] bg-white px-5 py-5 text-[14px] leading-7 text-[#5b6e89]">{copy(locale, item)}</p>)}
          </div>
        </section>
        <section className="border-y border-[#dfe7f3] py-10">
          <SectionLabel>{copy(locale, seoGenericCopy.faqTitle)}</SectionLabel>
          <h2 className="mt-4 text-[25px] font-semibold tracking-[-0.045em]">{copy(locale, seoGenericCopy.faqQuestion)}</h2>
          <p className="mt-4 max-w-[860px] text-[15px] leading-8 text-[#60718d]">{copy(locale, seoGenericCopy.faqAnswer)}</p>
        </section>
        <div className="flex flex-wrap gap-3">
          <Link href={localized(locale, "/domain-mail-check")} className="om-btn-secondary h-11 rounded-[11px] px-5 text-[13px]">{copy(locale, shared.freeCheck)}</Link>
          <Link href={localized(locale, pathname === "/faq" ? "/guide" : "/faq")} className="om-btn-secondary h-11 rounded-[11px] px-5 text-[13px]">{pathname === "/faq" ? copy(locale, shared.guide) : copy(locale, seoGenericCopy.faqTitle)}</Link>
        </div>
      </div>
      <SiteFooter className="pt-12" />
    </main>
  );
}

export const legalCopy = {
  termsTitle: ["이용약관", "Terms of Service", "服务条款", "利用規約", "Điều khoản sử dụng", "Условия использования"],
  privacyTitle: ["개인정보처리방침", "Privacy Policy", "隐私政策", "プライバシーポリシー", "Chính sách quyền riêng tư", "Политика конфиденциальности"],
  notice: ["번역문은 이해를 돕기 위한 것입니다. 해석이 다른 경우 대한민국 법에 따른 한국어 원문이 우선합니다.", "This translation is provided for convenience. If interpretations differ, the Korean original governed by the laws of the Republic of Korea prevails.", "本译文仅为方便理解。如有解释差异，以适用大韩民国法律的韩文原文为准。", "本翻訳は理解の便宜のために提供されます。解釈に差異がある場合は、大韓民国法に基づく韓国語原文を優先します。", "Bản dịch này chỉ nhằm hỗ trợ việc hiểu nội dung. Nếu có khác biệt, bản tiếng Hàn theo pháp luật Hàn Quốc sẽ được ưu tiên.", "Перевод предоставлен для удобства. При расхождениях преимущество имеет корейский оригинал, регулируемый законодательством Республики Корея."],
  effective: ["시행일: 2026년 6월 15일", "Effective: June 15, 2026", "生效日期：2026年6月15日", "施行日：2026年6月15日", "Có hiệu lực: 15 tháng 6, 2026", "Дата вступления в силу: 15 июня 2026 г."],
  termsSections: [
    [["서비스와 계약", "Service and agreement", "服务与协议", "サービスと契約", "Dịch vụ và thỏa thuận", "Сервис и договор"], ["OfficialMail provides business email, domain connection, webmail, team mailbox, scheduled sending, and optional AI Assist features. An agreement begins when registration is accepted and the user may cancel through the service.", "OfficialMail 提供企业邮箱、域名连接、网页邮箱、团队邮箱、定时发送及可选 AI 助手功能。注册获受理后协议生效，用户可通过服务申请注销。", "OfficialMailはビジネスメール、ドメイン接続、Webメール、チームメールボックス、予約送信、任意のAIアシスト機能を提供します。登録承認時に契約が成立し、利用者はサービスから解約できます。", "OfficialMail cung cấp email doanh nghiệp, kết nối tên miền, webmail, hộp thư nhóm, gửi theo lịch và AI Assist tùy chọn. Thỏa thuận có hiệu lực khi đăng ký được chấp nhận và người dùng có thể hủy trong dịch vụ.", "OfficialMail предоставляет деловую почту, подключение домена, веб-почту, командные ящики, отправку по расписанию и дополнительные функции AI Assist. Договор действует после принятия регистрации; пользователь может расторгнуть его через сервис."]],
    [["계정과 보안", "Accounts and security", "账号与安全", "アカウントとセキュリティ", "Tài khoản và bảo mật", "Аккаунты и безопасность"], ["Users must provide accurate information, protect credentials, and notify OfficialMail of unauthorized use. Account sharing, impersonation, spam, phishing, malware distribution, and attempts to disrupt the service are prohibited.", "用户须提供准确信息、妥善保护凭据，并在发现未授权使用时通知 OfficialMail。禁止账号共享、冒充、垃圾邮件、钓鱼、恶意软件传播及干扰服务。", "利用者は正確な情報を提供し、認証情報を保護し、不正利用を確認した場合はOfficialMailへ通知する必要があります。アカウント共有、なりすまし、スパム、フィッシング、マルウェア配布、サービス妨害は禁止です。", "Người dùng phải cung cấp thông tin chính xác, bảo vệ thông tin đăng nhập và báo cho OfficialMail khi có truy cập trái phép. Cấm chia sẻ tài khoản, mạo danh, spam, lừa đảo, phát tán mã độc và phá hoại dịch vụ.", "Пользователь обязан указывать точные данные, защищать учетные данные и сообщать о несанкционированном доступе. Запрещены передача аккаунта, выдача себя за другое лицо, спам, фишинг, вредоносное ПО и нарушение работы сервиса."]],
    [["도메인과 외부 서비스", "Domains and external services", "域名与外部服务", "ドメインと外部サービス", "Tên miền và dịch vụ bên ngoài", "Домены и внешние сервисы"], ["Users must own or be authorized to manage connected domains. DNS propagation, registrar policies, external mail providers, domain expiry, and third-party outages are outside OfficialMail's direct control.", "用户必须拥有或获授权管理所连接的域名。DNS 传播、注册商政策、外部邮件服务、域名到期及第三方故障不受 OfficialMail 直接控制。", "接続ドメインは利用者が所有または管理権限を持つ必要があります。DNS反映、レジストラ方針、外部メール事業者、ドメイン失効、第三者障害はOfficialMailの直接管理外です。", "Người dùng phải sở hữu hoặc có quyền quản lý tên miền kết nối. Việc truyền DNS, chính sách nhà đăng ký, nhà cung cấp email ngoài, hết hạn tên miền và sự cố bên thứ ba nằm ngoài quyền kiểm soát trực tiếp của OfficialMail.", "Пользователь должен владеть доменом или иметь право управления им. Распространение DNS, правила регистратора, внешние почтовые службы, истечение домена и сбои третьих лиц не находятся под прямым контролем OfficialMail."]],
    [["요금과 해지", "Plans, billing, and cancellation", "方案、计费与取消", "プラン・請求・解約", "Gói, thanh toán và hủy", "Тарифы, оплата и отмена"], ["The Free plan provides the scope shown in the service. Paid plans, VAT, billing cycles, renewal, cancellation, and refunds follow the checkout screen, applicable law, and the service policy. Unused prepaid periods are handled according to applicable consumer law.", "免费方案按服务页面所示范围提供。付费方案、增值税、计费周期、续订、取消及退款以结账页面、适用法律和服务政策为准。未使用的预付期间按消费者保护法律处理。", "無料プランはサービス画面に表示された範囲で提供されます。有料プラン、VAT、請求周期、更新、解約、返金は決済画面、関連法令、運営方針に従います。未使用の前払い期間は消費者法に基づき処理します。", "Gói Miễn phí được cung cấp trong phạm vi hiển thị. Gói trả phí, VAT, chu kỳ thanh toán, gia hạn, hủy và hoàn tiền tuân theo màn hình thanh toán, pháp luật và chính sách dịch vụ. Thời gian trả trước chưa dùng được xử lý theo luật bảo vệ người tiêu dùng.", "Бесплатный тариф действует в пределах, указанных в сервисе. Платные тарифы, НДС, циклы оплаты, продление, отмена и возвраты регулируются экраном оплаты, законом и политикой сервиса. Неиспользованный предоплаченный период обрабатывается по потребительскому законодательству."]],
    [["AI Assist", "AI Assist", "AI 助手", "AIアシスト", "AI Assist", "AI Assist"], ["When enabled, selected message data may be processed to create summaries and relay replies. Users remain responsible for reviewing generated results and for having authority to process the relevant correspondence.", "启用后，所选邮件数据可能用于生成摘要和转发回复。用户仍须审核生成结果，并确保拥有处理相关通信的权限。", "有効化すると、選択したメールデータが要約作成や返信リレーのために処理される場合があります。利用者は生成結果を確認し、対象通信を処理する権限を持つ責任があります。", "Khi bật, dữ liệu email được chọn có thể được xử lý để tạo tóm tắt và chuyển tiếp câu trả lời. Người dùng chịu trách nhiệm kiểm tra kết quả và có quyền xử lý thư liên quan.", "При включении выбранные данные писем могут обрабатываться для сводок и пересылки ответов. Пользователь обязан проверять результат и иметь право на обработку переписки."]],
    [["중단과 책임", "Availability and liability", "可用性与责任", "提供停止と責任", "Khả dụng và trách nhiệm", "Доступность и ответственность"], ["OfficialMail may restrict abusive activity or temporarily suspend service for maintenance, security, outages, or force majeure. Liability is limited to the extent permitted by applicable law, especially for events outside reasonable control.", "OfficialMail 可限制滥用行为，或因维护、安全、故障及不可抗力临时中断服务。在法律允许范围内，尤其对于无法合理控制的事件，责任受到限制。", "OfficialMailは不正利用を制限し、保守・安全対策・障害・不可抗力によりサービスを一時停止できます。合理的な管理を超える事象について、責任は法令で許される範囲に制限されます。", "OfficialMail có thể hạn chế hành vi lạm dụng hoặc tạm ngừng dịch vụ vì bảo trì, bảo mật, sự cố hay bất khả kháng. Trách nhiệm được giới hạn trong phạm vi pháp luật cho phép, đặc biệt với sự kiện ngoài khả năng kiểm soát hợp lý.", "OfficialMail может ограничивать злоупотребления и временно приостанавливать сервис для обслуживания, безопасности, при сбоях или форс-мажоре. Ответственность ограничена в пределах закона, особенно за события вне разумного контроля."]],
    [["데이터와 종료", "Data and termination", "数据与终止", "データと終了", "Dữ liệu và chấm dứt", "Данные и прекращение"], ["Service data is retained and deleted according to law and OfficialMail policy. Users should keep necessary backups. After termination, data may be retained for legally required periods and then securely deleted.", "服务数据依法律和 OfficialMail 政策保存与删除。用户应自行备份必要数据。终止后，数据可在法定期限内保留，随后安全删除。", "サービスデータは法令とOfficialMail方針に従って保存・削除されます。必要なバックアップは利用者が保持してください。終了後は法定期間保存し、その後安全に削除する場合があります。", "Dữ liệu dịch vụ được lưu và xóa theo pháp luật và chính sách OfficialMail. Người dùng nên sao lưu dữ liệu cần thiết. Sau khi chấm dứt, dữ liệu có thể được giữ trong thời hạn luật định rồi xóa an toàn.", "Данные хранятся и удаляются по закону и политике OfficialMail. Пользователь должен сохранять нужные резервные копии. После прекращения данные могут храниться обязательный срок, затем безопасно удаляются."]],
    [["준거법", "Governing law", "适用法律", "準拠法", "Luật áp dụng", "Применимое право"], ["The laws of the Republic of Korea govern these terms. The parties should first attempt good-faith consultation; unresolved disputes follow the jurisdiction prescribed by applicable law.", "本条款适用大韩民国法律。双方应先诚信协商，未解决的争议由适用法律规定的管辖法院处理。", "本規約には大韓民国法を適用します。当事者はまず誠実に協議し、解決しない紛争は関連法令が定める管轄裁判所に従います。", "Các điều khoản này chịu sự điều chỉnh của pháp luật Hàn Quốc. Các bên trước hết thương lượng thiện chí; tranh chấp chưa giải quyết theo thẩm quyền luật định.", "Условия регулируются законами Республики Корея. Стороны сначала добросовестно консультируются; нерешенные споры рассматриваются по подсудности, установленной законом."]],
  ],
  privacySections: [
    [["수집하는 정보", "Information we collect", "我们收集的信息", "収集する情報", "Thông tin chúng tôi thu thập", "Какие данные мы собираем"], ["We process registration and account data, domain and mailbox settings, billing records, support requests, service logs, device and network information, and email data required to provide requested mail features.", "我们处理注册与账号信息、域名和邮箱设置、账单记录、客服咨询、服务日志、设备与网络信息，以及提供所请求邮件功能所必需的邮件数据。", "登録・アカウント情報、ドメインとメール設定、請求記録、問い合わせ、サービスログ、端末・ネットワーク情報、要求されたメール機能に必要なメールデータを処理します。", "Chúng tôi xử lý dữ liệu đăng ký, tài khoản, cài đặt tên miền và hộp thư, thanh toán, hỗ trợ, nhật ký dịch vụ, thiết bị, mạng và dữ liệu email cần để cung cấp tính năng được yêu cầu.", "Мы обрабатываем регистрационные и учетные данные, настройки домена и ящиков, платежи, обращения, журналы сервиса, сведения об устройстве и сети, а также данные писем, нужные для запрошенных функций." ]],
    [["이용 목적", "Why we use information", "使用目的", "利用目的", "Mục đích sử dụng", "Цели обработки"], ["Information is used to create accounts, deliver and synchronize mail, verify domains, prevent abuse, provide billing and support, operate optional AI Assist features, improve reliability, and comply with legal obligations.", "信息用于创建账号、收发和同步邮件、验证域名、防止滥用、提供计费与支持、运行可选 AI 助手功能、提升可靠性并履行法律义务。", "アカウント作成、メール送受信・同期、ドメイン検証、不正防止、請求・サポート、任意のAIアシスト機能、信頼性向上、法的義務の履行に利用します。", "Thông tin được dùng để tạo tài khoản, gửi nhận và đồng bộ thư, xác minh tên miền, ngăn lạm dụng, thanh toán, hỗ trợ, AI Assist tùy chọn, cải thiện độ tin cậy và tuân thủ pháp luật.", "Данные используются для аккаунтов, доставки и синхронизации почты, проверки доменов, предотвращения злоупотреблений, оплаты и поддержки, опционального AI Assist, повышения надежности и соблюдения закона." ]],
    [["보관 기간", "Retention", "保存期限", "保存期間", "Thời gian lưu giữ", "Срок хранения"], ["Data is retained only as long as needed for the stated purpose or legal obligations. Account and service data may be deleted after termination, while transaction, tax, dispute, and abuse-prevention records may be kept for legally required periods.", "数据仅在实现所述目的或履行法律义务所需期间保存。账号与服务数据可在终止后删除，交易、税务、争议及防滥用记录可依法定期限保留。", "データは目的または法的義務に必要な期間のみ保存します。アカウント・サービスデータは終了後に削除し、取引・税務・紛争・不正防止記録は法定期間保存する場合があります。", "Dữ liệu chỉ được lưu trong thời gian cần cho mục đích đã nêu hoặc nghĩa vụ pháp lý. Dữ liệu tài khoản có thể bị xóa sau khi chấm dứt; giao dịch, thuế, tranh chấp và chống lạm dụng được giữ theo luật.", "Данные хранятся лишь для заявленных целей или по закону. Данные аккаунта могут удаляться после прекращения, а сведения о транзакциях, налогах, спорах и злоупотреблениях — храниться обязательный срок." ]],
    [["제공과 처리위탁", "Service providers and disclosure", "服务商与披露", "委託先と提供", "Nhà cung cấp và tiết lộ", "Поставщики и раскрытие"], ["We do not sell personal information. We may use infrastructure, payment, security, storage, communication, and optional AI processing providers under contracts that limit processing to service delivery. Information may be disclosed when required by law.", "我们不出售个人信息。为提供服务，我们可能在限制处理用途的合同下使用基础设施、支付、安全、存储、通信及可选 AI 处理服务商；法律要求时可能披露信息。", "個人情報は販売しません。サービス提供に限定する契約の下で、インフラ、決済、セキュリティ、保存、通信、任意のAI処理事業者を利用する場合があります。法令により開示することがあります。", "Chúng tôi không bán thông tin cá nhân. Có thể sử dụng nhà cung cấp hạ tầng, thanh toán, bảo mật, lưu trữ, liên lạc và xử lý AI tùy chọn theo hợp đồng giới hạn mục đích. Thông tin có thể được tiết lộ khi pháp luật yêu cầu.", "Мы не продаем персональные данные. Можем привлекать поставщиков инфраструктуры, платежей, безопасности, хранения, связи и опциональной AI-обработки по договорам, ограничивающим цели. Раскрытие возможно по закону." ]],
    [["국외 처리", "International processing", "跨境处理", "国外処理", "Xử lý ở nước ngoài", "Международная обработка"], ["Some infrastructure or optional AI providers may process data outside Korea. Where applicable, users are informed of the recipient, country, purpose, data categories, method, and retention period, and required safeguards are applied.", "部分基础设施或可选 AI 服务商可能在韩国境外处理数据。适用时会告知接收方、国家、目的、数据类别、方式和期限，并采取必要保障措施。", "一部のインフラまたは任意のAI事業者が韓国外で処理する場合があります。該当時は受領者、国、目的、項目、方法、期間を案内し、必要な保護措置を適用します。", "Một số nhà cung cấp hạ tầng hoặc AI tùy chọn có thể xử lý dữ liệu ngoài Hàn Quốc. Khi áp dụng, người dùng được thông báo về bên nhận, quốc gia, mục đích, loại dữ liệu, phương thức, thời hạn và biện pháp bảo vệ.", "Некоторые поставщики инфраструктуры или опционального AI могут обрабатывать данные вне Кореи. В применимых случаях сообщаются получатель, страна, цель, категории, способ и срок, и применяются меры защиты." ]],
    [["이용자 권리", "Your rights", "您的权利", "利用者の権利", "Quyền của bạn", "Ваши права"], ["Users may request access, correction, deletion, restriction, withdrawal of consent, or account termination as allowed by law. Requests can be made through service settings or support and may require identity verification.", "用户可依法请求访问、更正、删除、限制处理、撤回同意或注销账号。可通过服务设置或客服提出，并可能需要身份验证。", "利用者は法令に基づき、開示、訂正、削除、処理制限、同意撤回、退会を請求できます。設定またはサポートから申請でき、本人確認を求める場合があります。", "Người dùng có thể yêu cầu truy cập, sửa, xóa, hạn chế, rút đồng ý hoặc chấm dứt tài khoản theo luật. Yêu cầu được gửi qua cài đặt hoặc hỗ trợ và có thể cần xác minh danh tính.", "Пользователь может запросить доступ, исправление, удаление, ограничение, отзыв согласия или закрытие аккаунта в рамках закона. Запрос подается через настройки или поддержку и может требовать подтверждения личности." ]],
    [["보안", "Security", "安全措施", "安全管理", "Bảo mật", "Безопасность"], ["We apply access controls, encryption or hashing where appropriate, credential protection, logging, monitoring, backups, network safeguards, and staff access restrictions. No system is risk-free, so users should also protect passwords and devices.", "我们采用访问控制、适当的加密或哈希、凭据保护、日志、监控、备份、网络防护及人员访问限制。任何系统都无法完全无风险，用户也应保护密码和设备。", "アクセス制御、適切な暗号化・ハッシュ化、認証情報保護、ログ、監視、バックアップ、ネットワーク対策、担当者権限制限を実施します。完全に無リスクではないため、利用者もパスワードと端末を保護してください。", "Chúng tôi áp dụng kiểm soát truy cập, mã hóa hoặc băm phù hợp, bảo vệ thông tin đăng nhập, ghi nhật ký, giám sát, sao lưu, bảo vệ mạng và giới hạn quyền nhân viên. Không hệ thống nào hoàn toàn không rủi ro, nên người dùng cũng phải bảo vệ mật khẩu và thiết bị.", "Мы применяем контроль доступа, шифрование или хеширование, защиту учетных данных, журналы, мониторинг, резервное копирование, сетевые меры и ограничения персонала. Полностью безрисковых систем нет, поэтому пользователь также должен защищать пароль и устройства." ]],
    [["문의", "Contact", "联系我们", "お問い合わせ", "Liên hệ", "Контакты"], ["Privacy inquiries and rights requests can be sent to admin@officialsite.kr. We will verify the requester where necessary and respond according to applicable law.", "隐私咨询与权利请求可发送至 admin@officialsite.kr。必要时我们会核实申请人身份，并依法回复。", "個人情報に関する問い合わせや権利行使はadmin@officialsite.krへ送付できます。必要に応じて本人確認を行い、法令に従って回答します。", "Yêu cầu về quyền riêng tư có thể gửi đến admin@officialsite.kr. Chúng tôi sẽ xác minh người yêu cầu khi cần và phản hồi theo pháp luật.", "Запросы по конфиденциальности и реализации прав можно направить на admin@officialsite.kr. При необходимости мы проверим личность и ответим по закону." ]],
  ],
} as const;

export async function LocalizedLegalPage({
  locale,
  type,
}: {
  locale: NonKoreanLocale;
  type: "privacy" | "terms";
}) {
  const title = copy(locale, type === "terms" ? legalCopy.termsTitle : legalCopy.privacyTitle);
  const sections = (type === "terms" ? legalCopy.termsSections : legalCopy.privacySections) as readonly (readonly [PublicRow, readonly [string, string, string, string, string]])[];
  const bodyIndex: Record<NonKoreanLocale, number> = { en: 0, zh: 1, ja: 2, vi: 3, ru: 4 };
  const pathname = type === "terms" ? "/terms" : "/privacy";
  return (
    <main className="min-h-screen bg-[linear-gradient(180deg,#f7faff_0%,#ffffff_260px)] text-[#223250]">
      <JsonLd data={{
        "@context": "https://schema.org",
        "@type": "WebPage",
        name: title,
        description: copy(locale, legalCopy.notice),
        inLanguage: getLocaleOption(locale).htmlLang,
        url: getPublicSiteAbsoluteUrl(getLocalizedPublicPath(pathname, locale)),
      }} />
      <PublicHeader locale={locale} />
      <div className="mx-auto w-full max-w-[1060px] px-4 py-14 sm:px-8 sm:py-20">
        <section className="rounded-[30px] border border-[#e2eaf6] bg-white p-7 shadow-[0_24px_60px_rgba(29,50,93,0.06)] sm:p-10">
          <SectionLabel>OfficialMail</SectionLabel>
          <h1 className="mt-4 text-[38px] font-semibold tracking-[-0.065em] sm:text-[50px]">{title}</h1>
          <p className="mt-5 text-[14px] leading-7 text-[#64748f]">{copy(locale, legalCopy.notice)}</p>
          <p className="mt-3 text-[12px] font-semibold text-[#8290a6]">{copy(locale, legalCopy.effective)}</p>
        </section>
        <div className="mt-7 space-y-4">
          {sections.map(([heading, bodies], index) => (
            <section key={heading[0]} className="rounded-[24px] border border-[#e4ebf6] bg-white px-6 py-6 sm:px-8">
              <span className="text-[11px] font-bold text-[#9aa8bb]">{String(index + 1).padStart(2, "0")}</span>
              <h2 className="mt-2 text-[21px] font-semibold tracking-[-0.04em]">{copy(locale, heading)}</h2>
              <p className="mt-3 text-[14px] leading-7 text-[#61728d]">{bodies[bodyIndex[locale]]}</p>
            </section>
          ))}
        </div>
      </div>
      <SiteFooter className="pt-12" />
    </main>
  );
}