import type { Metadata } from "next";
import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";
import { PublicLanguageMenu } from "@/components/public-language-controls";
import { PublicLocaleSuggestionForRequest } from "@/components/public-locale-suggestion-server";
import {
  copy as localizedCopy,
  legalCopy,
  type PublicRow,
} from "@/components/localized-public-pages";
import {
  localizeStaticUiValue,
  ServerStaticUiLocalizer,
} from "@/components/server-static-ui-localizer";
import type { SupportedLocale } from "@/lib/i18n-config";
import { translateStaticUiText } from "@/lib/i18n-dictionaries";
import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";
import { resolveRequestLocale } from "@/lib/i18n-server";
import { getLocalizedPublicPath } from "@/lib/i18n-urls";
import { LEGAL_EFFECTIVE_DATE_KO } from "@/lib/legal-consent";
import { buildPublicPageMetadata } from "@/lib/public-seo-i18n";

const ogImageUrl = getPublicSiteAbsoluteUrl("/images/officialmail-og-20260923.png");

export async function generateMetadata(): Promise<Metadata> {
  return buildPublicPageMetadata({
    imageUrl: ogImageUrl,
    locale: await resolveRequestLocale(),
    page: "privacy",
    pathname: "/privacy",
    type: "article",
  });
}

const effectiveDate = LEGAL_EFFECTIVE_DATE_KO;

const processingItems = [
  {
    purpose: "회원가입 및 계정 관리",
    items:
      "사업자명, 대표 메일 주소, 연결 도메인, 표시 이름, 비밀번호, 보조 이메일, 보조 이메일 인증 정보, 이용약관 및 개인정보처리방침 동의 버전·시각",
    retention: "회원 탈퇴 또는 계정 삭제 시까지. 다만 관계 법령상 보관이 필요한 경우 해당 기간까지 보관",
  },
  {
    purpose: "로그인 상태 유지",
    items: "로그인 유지에 필요한 정보",
    retention: "로그아웃 시 또는 브라우저 세션 종료 전까지",
  },
  {
    purpose: "서비스 이용 및 유입 분석",
    items:
      "방문 식별자, Google Analytics 온라인 식별자, 원본 IP 주소 및 해시·대역 정보, 국가 코드, 방문 페이지, 유입·리퍼러의 호스트와 경로, UTM 파라미터, 사용자 에이전트, 기기·브라우저·운영체제 정보, 언어, 시간대, 화면 및 뷰포트 크기, 가입 단계, 도메인 연결 단계·검증 결과, 결제수단 등록·결제 완료·플랜 전환 이벤트(메일 내용, DNS 입력값, 카드번호는 수집하지 않음)",
    retention: "수집일로부터 14개월 또는 이용자의 삭제 요청 처리 시까지",
  },
  {
    purpose: "도메인 연결 및 메일 서버 개통",
    items:
      "도메인명, 대표 메일 아이디, 도메인 연결 상태, 메일 운영에 필요한 설정 정보",
    retention: "도메인 또는 메일함 삭제 시까지",
  },
  {
    purpose: "도메인 연결 설정 대행(선택 서비스)",
    items:
      "도메인명, 도메인 구매처·관리처, 관리 계정 아이디와 비밀번호, 신청자가 입력한 참고 내용, 동의 및 처리 이력",
    retention:
      "관리 계정정보는 설정 완료 또는 신청 취소 즉시 폐기하며, 미완료 상태에서도 접수 후 최대 30일까지만 암호화 보관. 신청 및 동의·처리 이력은 관계 법령과 내부 분쟁 대응 기준에 따른 기간까지 보관",
  },
  {
    purpose: "제휴 문의 접수 및 상담",
    items:
      "기관명, 담당자명, 담당자 이메일, 연락처, 제휴 플랫폼 유형, 예상 지원 규모, 문의 내용, 개인정보 수집·이용 동의 이력",
    retention: "문의 처리 완료 후 3년 또는 정보주체의 삭제 요청 시까지",
  },
  {
    purpose: "메일 송수신 및 보관",
    items:
      "발신/수신 주소, 참조/숨은참조, 제목, 본문, 첨부파일, 폴더 정보, 읽음/중요 상태, 송수신 시각, 전송 및 동기화 로그",
    retention: "회원이 직접 삭제하거나 서비스 이용계약이 종료될 때까지",
  },
  {
    purpose: "첨부 업로드 처리",
    items:
      "파일명, 파일 형식, 용량, 첨부파일 처리 정보",
    retention:
      "전송되지 않은 임시 파일은 기본 24시간 이내 자동 삭제. 전송 완료 파일은 관련 메시지 보관 기간 동안 유지",
  },
  {
    purpose: "AI Assist Bridge(선택 기능)",
    items:
      "알림 수신 이메일, 요약 대상 메일의 제목/발신자/본문 일부, 릴레이 스레드 식별값, 요약 및 릴레이 이력",
    retention: "기능 해제, 관련 메시지 삭제 또는 서비스 이용 종료 시까지",
  },
] as const;

const entrustedProcessors = [
  {
    processor: "네이버클라우드 플랫폼",
    task: "첨부파일 및 인라인 이미지의 임시 저장, 최종 업로드 파일 보관, 파일 전송 가속",
  },
  {
    processor: "Google LLC (Google Analytics)",
    task: "공개 웹페이지 방문, 유입 경로, 이용 행태 및 서비스 전환 통계 분석",
  },
] as const;

const sections = [
  {
    id: "collection",
    title: "1. 개인정보의 수집 방법",
    body: [
      "회사는 회원가입, 로그인, 비밀번호 재설정, 도메인 연결, 설정 대행 신청, 메일 작성 및 설정 화면에서 이용자가 직접 입력하는 방식으로 개인정보를 수집합니다.",
      "회원가입 시 이용약관 및 개인정보처리방침 필수 동의 여부와 동의한 문서의 버전·시각을 기록합니다.",
      "메일 송수신, 메일함 동기화, 첨부파일 업로드, 폴더 정리, 검색, 읽음 상태 변경 등 서비스 이용 과정에서 필요한 정보가 시스템에 자동 생성되거나 저장될 수 있습니다.",
      "공개 페이지 방문 시 서비스 개선, 유입 경로 분석 및 비정상 접속 방지를 위해 방문 식별자, 원본 IP 주소와 해시·대역 정보, 국가 코드, 리퍼러 경로, UTM 정보, 기기 및 브라우저 환경 정보를 자동 수집할 수 있습니다. 원본 IP 주소는 접근 권한이 제한된 최고관리자 분석 화면에서만 확인할 수 있으며, 리퍼러 URL의 쿼리스트링은 유입 분석 테이블에 저장하지 않습니다.",
      "회사는 공개 페이지 방문부터 가입, 도메인 연결, 결제 전환까지의 서비스 개선 흐름을 통계적으로 분석하기 위해 Google Analytics를 사용할 수 있습니다. 메일함과 최고관리자 등 비공개 경로에는 페이지 측정 태그를 적용하지 않으며, 도메인 연결 단계·검증 결과와 결제 상태처럼 메일 내용과 무관한 최소한의 서비스 이벤트만 서버에서 기록할 수 있습니다.",
      "AI Assist Bridge를 이용하는 경우 알림 메일 발송과 답장 릴레이를 처리하기 위해 관련 메일 스레드 정보가 자동으로 기록될 수 있습니다.",
    ],
  },
  {
    id: "purpose",
    title: "2. 개인정보의 이용 목적",
    body: [
      "회원 식별, 대표 계정 인증, 로그인 유지, 비밀번호 재설정 등 계정 관리 업무를 처리합니다.",
      "인증된 보조 이메일은 본인 확인, 아이디·비밀번호 찾기, 계정 복구, 보안 알림, 도메인·DNS 연결 상태, 결제·구독 실패, 서비스 장애·중단 및 약관·정책의 중요 변경 등 이용계약 이행과 서비스 운영에 필요한 비광고성 안내에 이용합니다.",
      "회사는 별도의 명시적 사전 동의 없이 보조 이메일을 영리목적 광고성 정보 전송에 이용하지 않습니다.",
      "대표 메일 생성, 도메인 연결, DNS 안내, 메일 송수신, 메일 검색, 폴더 관리, 첨부파일 처리 등 오피셜메일 핵심 기능을 제공합니다.",
      "이용자가 도메인 연결 설정 대행을 신청한 경우 DNS 설정 작업, 신청자 확인, 진행 상황 및 완료 결과 안내를 위해 신청 정보를 이용합니다.",
      "비정상 접속, 대량 발송, 스팸 악용, 시스템 오류 등 서비스 안정성과 보안을 확보하기 위한 운영 목적으로 이용할 수 있습니다.",
      "공개 페이지의 유입 경로, 기기 환경, 가입 및 서비스 전환 흐름을 분석하여 서비스 품질과 안내 콘텐츠를 개선합니다.",
      "이용자가 AI Assist Bridge를 활성화한 경우 요약 알림 발송과 외부 답장 릴레이 기능을 제공하기 위해 관련 정보를 이용합니다.",
    ],
  },
  {
    id: "retention",
    title: "3. 개인정보의 보유 및 이용 기간",
    body: [
      "회사는 개인정보의 수집 및 이용 목적이 달성되면 지체 없이 해당 정보를 삭제합니다.",
      "보조 이메일과 인증 정보는 회원 탈퇴 또는 계정 삭제 시까지 보관하며, 약관 및 개인정보처리방침 동의 이력은 분쟁 대응과 법적 의무 이행에 필요한 범위에서 보관할 수 있습니다.",
      "다만 회원이 직접 보관 중인 메일, 첨부파일, 폴더 데이터는 회원이 삭제하거나 계정 이용이 종료될 때까지 서비스 제공 범위 내에서 유지될 수 있습니다.",
      "전송을 위해 임시 업로드된 파일은 일정 시간이 지나면 자동 삭제되며, 전송 완료 후에는 관련 메시지와 연결된 자산으로 관리됩니다.",
      "관계 법령에 따라 별도 보관 의무가 있는 경우에는 해당 법령이 정한 기간 동안 분리하여 보관할 수 있습니다.",
    ],
  },
  {
    id: "third-party",
    title: "4. 개인정보의 제3자 제공",
    body: [
      "회사는 원칙적으로 이용자의 개인정보를 외부에 제공하지 않습니다.",
      "다만 이용자가 직접 메일을 발송하거나 AI Assist Bridge의 답장 릴레이 기능을 사용하는 경우, 수신자 및 수신 측 메일 서버에 메일 전송에 필요한 발신자 정보, 수신자 정보, 제목, 본문, 첨부파일이 전달됩니다.",
      "수신자의 메일 서버 위치에 따라 발신 메일은 국외 네트워크를 경유하거나 해외 서버로 전송될 수 있습니다.",
      "법령에 특별한 규정이 있거나 수사기관 등의 적법한 요청이 있는 경우에는 관련 법령에 따라 제공될 수 있습니다.",
    ],
  },
  {
    id: "rights",
    title: "6. 정보주체의 권리 및 행사 방법",
    body: [
      "이용자는 언제든지 자신의 개인정보에 대해 열람, 정정, 삭제, 처리정지, 동의 철회 등을 요청할 수 있습니다.",
      "계정 정보, 메일함, 첨부파일, AI Assist 설정 등은 서비스 화면에서 직접 수정하거나 삭제할 수 있으며, 추가 요청은 운영 문의 메일로 접수할 수 있습니다.",
      "법령상 별도 보관 의무가 있는 정보 또는 다른 이용자와의 송수신 기록처럼 즉시 삭제가 제한되는 정보는 관련 법령과 서비스 운영 기준에 따라 처리될 수 있습니다.",
    ],
  },
  {
    id: "destruction",
    title: "7. 개인정보의 파기 절차 및 방법",
    body: [
      "개인정보 보유 기간이 경과하거나 처리 목적이 달성된 경우 내부 정책에 따라 삭제 대상 여부를 확인한 뒤 지체 없이 파기합니다.",
      "전자적 파일 형태의 정보는 복구 또는 재생이 어렵도록 삭제하며, 임시 업로드 파일은 저장 경로와 관리 테이블에서 함께 정리합니다.",
      "종이 문서 등 출력물이 있는 경우에는 분쇄 또는 소각 등 복구가 불가능한 방법으로 파기합니다.",
    ],
  },
  {
    id: "safety",
    title: "8. 개인정보의 안전성 확보 조치",
    body: [
      "회사는 접근 권한 관리, 인증수단 운영, 보안 점검 등 기술적·관리적 보호조치를 적용합니다.",
      "관리자 및 운영 권한은 필요한 범위로 제한하며, 서비스 운영 로그와 상태 정보를 통해 이상 징후를 점검할 수 있습니다.",
      "메일 본문, 첨부파일, 계정 정보 등은 서비스 제공 목적 범위에서만 접근하도록 통제합니다.",
    ],
  },
  {
    id: "cookies",
    title: "9. 쿠키의 설치·운영 및 거부",
    body: [
      "회사는 로그인 상태 유지와 회원 인증을 위해 필수 쿠키를 사용할 수 있습니다.",
      "공개 페이지에서는 유입 경로와 가입 전환 흐름을 분석하기 위해 무작위 방문 식별자가 포함된 쿠키 또는 브라우저 저장소를 사용할 수 있습니다. 해당 식별자는 광고 식별자나 원본 IP 주소를 저장하지 않습니다.",
      "Google Analytics는 공개 페이지 방문과 서비스 전환 흐름 통계를 위해 _ga 계열 쿠키를 사용할 수 있습니다. 오피셜메일은 Google 광고 신호와 광고 개인 최적화 신호를 비활성화하며, 분석 쿠키의 유효기간은 최대 1년으로 설정합니다.",
      "필수 쿠키와 유입 분석 식별자는 로그아웃하거나 브라우저 설정에서 삭제할 수 있습니다. 유입 분석 식별자를 삭제하거나 차단해도 메일 서비스 이용 자체에는 영향을 주지 않습니다.",
      "다만 필수 쿠키를 차단할 경우 로그인 유지, 메일함 접근 등 서비스 핵심 기능이 정상 동작하지 않을 수 있습니다.",
    ],
  },
  {
    id: "remedies",
    title: "10. 권익침해 구제 방법",
    body: [
      "개인정보 침해와 관련한 상담이나 신고가 필요한 경우 개인정보 포털(privacy.go.kr), KISA 개인정보침해 신고센터(privacy.kisa.or.kr, 국번없이 118), 개인정보분쟁조정위원회(kopico.go.kr, 1833-6972)를 통해 도움을 받을 수 있습니다.",
    ],
  },
  {
    id: "contact",
    title: "11. 개인정보 보호 문의 및 방침 변경",
    body: [
      "개인정보 처리와 관련한 문의, 열람·정정·삭제 요청, 불만 접수는 admin@officialsite.kr 로 접수하실 수 있습니다.",
      "운영사: 카베닉스(KAVENIX) / 사업자등록번호: 516-16-02620",
      "본 방침의 내용이 추가, 삭제 또는 수정되는 경우 서비스 화면 또는 본 페이지를 통해 사전에 안내하겠습니다.",
    ],
  },
] as const;

const privacyCategoryBySection = [0, 1, 2, 3, 5, 2, 6, 0, 7, 7] as const;
const privacySectionNumbers = [1, 2, 3, 4, 6, 7, 8, 9, 10, 11] as const;
const legalBodyIndex = { en: 0, zh: 1, ja: 2, vi: 3, ru: 4 } as const;

const localizedRecoveryEmailPrivacy = {
  en: {
    collection: "At registration, we record whether the user accepted the required Terms of Service and Privacy Policy, together with the accepted document versions and time of acceptance.",
    purpose: [
      "The verified recovery email is used for non-promotional notices necessary to perform the service contract and operate the service, including identity verification, ID or password recovery, account recovery, security alerts, domain and DNS status, failed billing or subscription renewal, service incidents or suspension, and material changes to terms or policies.",
      "We do not use the recovery email for commercial advertising without separate, explicit prior consent.",
    ],
    retention: "Recovery email and verification data are retained until account withdrawal or deletion. Consent records may be retained as necessary to handle disputes and comply with legal obligations.",
  },
  zh: {
    collection: "注册时，我们会记录用户是否同意必需的服务条款和隐私政策，以及所同意文件的版本和同意时间。",
    purpose: [
      "已验证的备用邮箱用于履行服务合同和运营服务所必需的非广告通知，包括身份验证、账号或密码找回、账户恢复、安全提醒、域名与 DNS 状态、付款或订阅失败、服务故障或中断以及条款或政策的重要变更。",
      "未经另行明确事先同意，我们不会将备用邮箱用于发送商业广告。",
    ],
    retention: "备用邮箱和验证信息保留至会员注销或账户删除。为处理争议及履行法律义务，可能在必要范围内保留同意记录。",
  },
  ja: {
    collection: "登録時に、必須の利用規約およびプライバシーポリシーへの同意の有無、同意した文書のバージョンと同意時刻を記録します。",
    purpose: [
      "認証済み予備メールは、本人確認、ID・パスワードの照会、アカウント復旧、セキュリティ通知、ドメイン・DNS接続状態、決済・契約更新の失敗、障害・停止、規約・方針の重要な変更など、契約履行とサービス運営に必要な非広告性の案内に利用します。",
      "別途の明示的な事前同意なく、予備メールを営利目的の広告情報送信に利用しません。",
    ],
    retention: "予備メールと認証情報は退会またはアカウント削除まで保存します。同意履歴は紛争対応および法的義務の履行に必要な範囲で保存する場合があります。",
  },
  vi: {
    collection: "Khi đăng ký, chúng tôi ghi nhận việc người dùng chấp nhận Điều khoản dịch vụ và Chính sách quyền riêng tư bắt buộc, cùng phiên bản tài liệu và thời điểm chấp nhận.",
    purpose: [
      "Email khôi phục đã xác minh được dùng cho các thông báo không mang tính quảng cáo cần thiết để thực hiện hợp đồng và vận hành dịch vụ, gồm xác minh danh tính, tìm lại ID hoặc mật khẩu, khôi phục tài khoản, cảnh báo bảo mật, trạng thái tên miền và DNS, lỗi thanh toán hoặc gia hạn, sự cố hoặc gián đoạn dịch vụ và thay đổi quan trọng của điều khoản hoặc chính sách.",
      "Chúng tôi không dùng email khôi phục để gửi quảng cáo thương mại nếu chưa có sự đồng ý trước, rõ ràng và riêng biệt.",
    ],
    retention: "Email khôi phục và dữ liệu xác minh được lưu đến khi rút tư cách thành viên hoặc xóa tài khoản. Hồ sơ đồng ý có thể được lưu trong phạm vi cần thiết để giải quyết tranh chấp và tuân thủ nghĩa vụ pháp lý.",
  },
  ru: {
    collection: "При регистрации мы фиксируем принятие обязательных Условий использования и Политики конфиденциальности, версии принятых документов и время согласия.",
    purpose: [
      "Подтвержденный резервный email используется для не рекламных уведомлений, необходимых для исполнения договора и работы сервиса: идентификации, восстановления логина или пароля и аккаунта, уведомлений безопасности, статуса домена и DNS, неудачной оплаты или продления, сбоев или приостановки сервиса и существенных изменений условий или политики.",
      "Мы не используем резервный email для коммерческой рекламы без отдельного явного предварительного согласия.",
    ],
    retention: "Резервный email и данные подтверждения хранятся до выхода пользователя или удаления аккаунта. История согласий может храниться в объеме, необходимом для разрешения споров и выполнения требований закона.",
  },
} as const;

function buildLocalizedPrivacySections(locale: SupportedLocale) {
  if (locale === "ko") {
    return sections;
  }

  return sections.map((section, index) => {
    const category = legalCopy.privacySections[privacyCategoryBySection[index]];
    const recoveryNotice = localizedRecoveryEmailPrivacy[locale];
    const additionalBody =
      index === 0
        ? [recoveryNotice.collection]
        : index === 1
          ? recoveryNotice.purpose
          : index === 2
            ? [recoveryNotice.retention]
            : [];

    return {
      id: section.id,
      title: `${privacySectionNumbers[index]}. ${localizedCopy(locale, category[0] as PublicRow)}`,
      body: [category[1][legalBodyIndex[locale]], ...additionalBody],
    };
  });
}

function buildLocalizedProcessingItems(locale: SupportedLocale) {
  if (locale === "ko") {
    return processingItems;
  }

  const collected = legalCopy.privacySections[0][1][legalBodyIndex[locale]];
  const retained = legalCopy.privacySections[2][1][legalBodyIndex[locale]];
  return processingItems.map((item) => ({
    purpose: translateStaticUiText(locale, item.purpose),
    items: collected,
    retention: retained,
  }));
}

function MailMark() {
  return (
    <span className="flex items-center justify-center text-[#2f6df6]">
      <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="h-[32px] w-[32px] sm:h-[40px] sm:w-[40px]"
      >
        <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>
  );
}

export default async function PrivacyPage() {
  const locale = await resolveRequestLocale();
  const localizedSections = buildLocalizedPrivacySections(locale);
  const localizedProcessingItems = buildLocalizedProcessingItems(locale);
  const localizedProcessors = localizeStaticUiValue(entrustedProcessors, locale);
  const ui = (source: string) => translateStaticUiText(locale, source);

  return (
    <ServerStaticUiLocalizer locale={locale}>
    <div className="min-h-screen bg-white text-[#223250]">
      <div className="sticky top-0 z-30">
      <PublicLocaleSuggestionForRequest pathname="/privacy" />
      <header className="border-b border-black/5 bg-white/94 shadow-sm backdrop-blur-xl backdrop-saturate-150">
        <div className="mx-auto flex h-[62px] w-full max-w-[1420px] items-center justify-between px-4 sm:h-20 sm:px-8 xl:px-10">
          <Link href={getLocalizedPublicPath("/", locale)} className="flex items-center gap-2.5 sm:gap-3">
            <MailMark />
            <span className="text-[22px] font-extrabold tracking-[-0.08em] text-[#2f6df6]">
              {locale === "ko" ? "오피셜메일" : "OfficialMail"}
            </span>
          </Link>
          <div className="flex items-center gap-2">
            <PublicLanguageMenu currentLocale={locale} pathname="/privacy" />
            <Link
              href={getLocalizedPublicPath("/", locale)}
              className="text-[13px] font-semibold text-[#68758a] transition-colors hover:text-[#2f6df6]"
            >
              ← 홈으로
            </Link>
          </div>
        </div>
      </header>
      </div>

      <main className="px-4 pb-16 pt-12 sm:px-8 sm:pb-24 sm:pt-16 xl:px-10">
        <div className="mx-auto w-full max-w-[1420px]">
          <section className="border-b border-[#e4eaf2] pb-10 sm:pb-12">
            <p className="text-[12px] font-semibold uppercase tracking-[0.18em] text-[#2f6df6]">
              Privacy Policy
            </p>
            <h1 className="mt-4 text-[34px] font-semibold tracking-[-0.05em] text-[#111a33] sm:text-[42px]">
              개인정보처리방침
            </h1>
            <p className="mt-4 max-w-[760px] text-[15px] leading-7 text-[#64748f]">
              {ui("오피셜메일은 대표 메일 생성, 도메인 연결, 웹메일, 메일 보관, 첨부 업로드, AI Assist Bridge 등 기업메일 운영 기능을 제공하며, 이 방침은 그 과정에서 처리되는 개인정보의 기준을 설명합니다.")}
            </p>
            <div className="mt-6 flex flex-wrap items-center gap-x-5 gap-y-2 text-[13px] text-[#7a8799]">
              <span>운영사 카베닉스(KAVENIX)</span>
              <span>사업자등록번호 516-16-02620</span>
              <span>{ui("시행일")} {ui(effectiveDate)}</span>
            </div>
          </section>

          <section className="mt-10 grid gap-10 lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-16">
            <aside className="sticky top-[68px] z-20 -mx-4 flex min-w-0 items-center gap-5 border-y border-[#e4eaf2] bg-white/96 px-4 py-3 backdrop-blur-xl sm:-mx-8 sm:px-8 lg:top-24 lg:z-auto lg:mx-0 lg:block lg:h-fit lg:border-y-0 lg:border-r lg:bg-transparent lg:px-0 lg:py-0 lg:pr-8 lg:backdrop-blur-none">
              <p className="shrink-0 text-[14px] font-semibold text-[#30425f]">목차</p>
              <nav className="flex min-w-0 max-w-full flex-1 gap-x-5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mt-3 lg:block lg:overflow-visible">
                <a
                  href="#processing-items"
                  className="block shrink-0 whitespace-nowrap py-1.5 text-[13px] leading-5 text-[#60718d] transition-colors hover:text-[#2f6df6] lg:whitespace-normal"
                >
                  개인정보 처리 항목
                </a>
                {localizedSections.slice(0, 4).map((section) => (
                  <a
                    key={section.id}
                    href={`#${section.id}`}
                    className="block shrink-0 whitespace-nowrap py-1.5 text-[13px] leading-5 text-[#60718d] transition-colors hover:text-[#2f6df6] lg:whitespace-normal"
                  >
                    {section.title}
                  </a>
                ))}
                <a
                  href="#entrustment"
                  className="block shrink-0 whitespace-nowrap py-1.5 text-[13px] leading-5 text-[#60718d] transition-colors hover:text-[#2f6df6] lg:whitespace-normal"
                >
                  5. 개인정보 처리의 위탁
                </a>
                {localizedSections.slice(4).map((section) => (
                  <a
                    key={section.id}
                    href={`#${section.id}`}
                    className="block shrink-0 whitespace-nowrap py-1.5 text-[13px] leading-5 text-[#60718d] transition-colors hover:text-[#2f6df6] lg:whitespace-normal"
                  >
                    {section.title}
                  </a>
                ))}
              </nav>
            </aside>

            <div className="min-w-0 divide-y divide-[#e4eaf2]">
              <section
                id="processing-items"
                className="scroll-mt-24 pb-9"
              >
                <h2 className="text-[20px] font-semibold tracking-[-0.03em] text-[#16233c] sm:text-[21px]">
                  개인정보 처리 항목
                </h2>
                <p className="mt-4 text-[15px] leading-8 text-[#5f6f89]">
                  오피셜메일은 서비스 제공에 필요한 범위에서 아래 항목을 처리합니다.
                </p>
                <div className="mt-5 overflow-x-auto border-y border-[#dfe6f0]">
                  <table className="min-w-full border-collapse text-left">
                    <thead className="text-[13px] text-[#41536f]">
                      <tr>
                        <th className="border-b border-[#e7edf8] px-4 py-3 font-semibold">
                          처리 목적
                        </th>
                        <th className="border-b border-[#e7edf8] px-4 py-3 font-semibold">
                          처리 항목
                        </th>
                        <th className="border-b border-[#e7edf8] px-4 py-3 font-semibold">
                          보유 기간
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {localizedProcessingItems.map((item) => (
                        <tr key={item.purpose} className="align-top">
                          <td className="border-b border-[#eef3fb] px-4 py-4 text-[14px] font-semibold text-[#21314f]">
                            {item.purpose}
                          </td>
                          <td className="border-b border-[#eef3fb] px-4 py-4 text-[14px] leading-6 text-[#5f6f89]">
                            {item.items}
                          </td>
                          <td className="border-b border-[#eef3fb] px-4 py-4 text-[14px] leading-6 text-[#5f6f89]">
                            {item.retention}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </section>

              {localizedSections.slice(0, 4).map((section) => (
                <section
                  key={section.id}
                  id={section.id}
                  className="scroll-mt-24 py-9"
                >
                  <h2 className="text-[20px] font-semibold tracking-[-0.03em] text-[#16233c] sm:text-[21px]">
                    {section.title}
                  </h2>
                  <div className="mt-4 space-y-3">
                    {section.body.map((paragraph) => (
                      <p key={paragraph} className="text-[15px] leading-[1.9] text-[#5f6f89]">
                        {paragraph}
                      </p>
                    ))}
                  </div>
                </section>
              ))}

              <section
                id="entrustment"
                className="scroll-mt-24 py-9"
              >
                <h2 className="text-[20px] font-semibold tracking-[-0.03em] text-[#16233c] sm:text-[21px]">
                  5. 개인정보 처리의 위탁
                </h2>
                <p className="mt-4 text-[15px] leading-8 text-[#5f6f89]">
                  {ui("회사는 첨부파일과 업로드 자산 처리에 필요한 범위에서 아래와 같이 일부 업무를 위탁할 수 있으며, 위탁계약 체결 시 관련 법령에 따라 개인정보 보호 의무를 반영합니다.")}
                </p>
                <div className="mt-5 overflow-x-auto border-y border-[#dfe6f0]">
                  <table className="min-w-full border-collapse text-left">
                    <thead className="text-[13px] text-[#41536f]">
                      <tr>
                        <th className="border-b border-[#e7edf8] px-4 py-3 font-semibold">
                          수탁자
                        </th>
                        <th className="border-b border-[#e7edf8] px-4 py-3 font-semibold">
                          위탁 업무
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {localizedProcessors.map((item) => (
                        <tr key={item.processor} className="align-top">
                          <td className="border-b border-[#eef3fb] px-4 py-4 text-[14px] font-semibold text-[#21314f]">
                            {item.processor}
                          </td>
                          <td className="border-b border-[#eef3fb] px-4 py-4 text-[14px] leading-6 text-[#5f6f89]">
                            {item.task}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </section>

              {localizedSections.slice(4).map((section) => (
                <section
                  key={section.id}
                  id={section.id}
                  className="scroll-mt-24 py-9"
                >
                  <h2 className="text-[20px] font-semibold tracking-[-0.03em] text-[#16233c] sm:text-[21px]">
                    {section.title}
                  </h2>
                  <div className="mt-4 space-y-3">
                    {section.body.map((paragraph) => (
                      <p key={paragraph} className="text-[15px] leading-[1.9] text-[#5f6f89]">
                        {paragraph}
                      </p>
                    ))}
                  </div>
                </section>
              ))}

              <section className="py-9">
                <h2 className="text-[20px] font-semibold tracking-[-0.03em] text-[#16233c] sm:text-[21px]">
                  시행일
                </h2>
                <p className="mt-4 text-[15px] leading-8 text-[#5f6f89]">
                  {ui("본 개인정보처리방침은 2026년 9월 2일부터 적용됩니다.")}
                </p>
              </section>
            </div>
          </section>
        </div>
      </main>

      <SiteFooter className="bg-white" />
    </div>
    </ServerStaticUiLocalizer>
  );
}