import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { AdsenseContentAd } from "@/components/adsense-content-ad";
import {
  PublicLanguageMenu,
  PublicLocaleSuggestion,
} from "@/components/public-language-controls";
import { resolvePublicSuggestedLocale } from "@/components/public-locale-suggestion-server";
import {
  OfficialMailGuideMobileMenu,
  OfficialMailGuideSidebar,
  type GuideSidebarGroup,
} from "@/components/official-mail-guide-sidebar";
import {
  localizeStaticUiValue,
  ServerStaticUiLocalizer,
} from "@/components/server-static-ui-localizer";
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 { buildPublicPageMetadata } from "@/lib/public-seo-i18n";
import { getAdsenseSlot } from "@/lib/adsense-server";

const ogImageUrl = getPublicSiteAbsoluteUrl("/blog/generated/gabia-domain-email-dns.webp");

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

const sidebarGroups = [
  {
    label: "시작",
    items: [
      { href: "#start", label: "오피셜메일 시작하기" },
      { href: "#choose", label: "운영 방식 선택" },
    ],
  },
  {
    label: "도메인 연결",
    items: [
      { href: "#mail-address", label: "대표 메일 입력" },
      { href: "#dns-location", label: "DNS 설정 위치 찾기" },
      { href: "#provider-guides", label: "업체별 설정 위치" },
      { href: "#records", label: "필수 레코드" },
      { href: "#check", label: "연결 상태 확인" },
    ],
  },
  {
    label: "메일 운영",
    items: [
      { href: "#mailbox", label: "메일함 사용법" },
      { href: "#ai", label: "AI 요약 릴레이" },
      { href: "#team", label: "팀 계정 관리" },
      { href: "#auto-send", label: "자동발송 예약" },
      { href: "#integrations", label: "외부 연동" },
    ],
  },
  {
    label: "문제 해결",
    items: [
      { href: "#troubleshooting", label: "자주 막히는 지점" },
      { href: "#support", label: "도움 받기" },
    ],
  },
] satisfies GuideSidebarGroup[];

const setupOptions = [
  {
    tone: "대표 메일",
    title: "혼자 운영하는 사업자",
    description:
      "admin, contact, cs처럼 고객이 기억하기 쉬운 대표 주소를 먼저 만들고 바로 수신 테스트를 진행합니다.",
    icon: "mail",
  },
  {
    tone: "도메인 연결",
    title: "브랜드 도메인이 있는 팀",
    description:
      "홈페이지 주소와 같은 도메인을 메일 주소에 적용해 문의·견적·거래처 메일 신뢰도를 높입니다.",
    icon: "domain",
  },
  {
    tone: "팀 메일함",
    title: "멤버를 함께 쓰는 회사",
    description:
      "대표 관리자가 결제와 도메인을 관리하고, 각 멤버는 본인 메일함과 AI 기능을 따로 설정합니다.",
    icon: "team",
  },
  {
    tone: "AI 릴레이",
    title: "중요 메일을 놓치기 싫은 팀",
    description:
      "성장 플랜에서 계정별로 수신 메일을 요약해 보조 이메일로 전달하고, 그 메일에 답장하면 원 발신자에게 이어서 전달합니다.",
    icon: "spark",
  },
];

const dnsProviders = [
  {
    name: "가비아",
    logo: "/images/dns-providers/gabia.png",
    type: "도메인 구매처",
    path: "My가비아 → 서비스 관리 → DNS 관리툴 → 설정 → 레코드 추가",
    note: "가비아 네임서버를 그대로 사용 중인 도메인",
    helpUrl: "https://customer.gabia.com/faq/detail/2929/2932",
  },
  {
    name: "카페24",
    logo: "/images/dns-providers/cafe24.png",
    type: "쇼핑몰·도메인",
    path: "쇼핑몰 설정 → 기본 설정 → 쇼핑몰 정보 → 도메인 설정 → DNS 설정",
    note: "카페24 네임서버 또는 카페24 쇼핑몰 연결 도메인",
    helpUrl:
      "https://support.cafe24.com/hc/ko/articles/8468703686937-%EC%87%BC%ED%95%91%EB%AA%B0%EC%97%90-%EC%97%B0%EA%B2%B0%ED%95%9C-%EB%8F%84%EB%A9%94%EC%9D%B8%EC%9D%98-DNS-%EA%B4%80%EB%A6%AC%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90%EC%84%9C-%ED%95%98%EB%82%98%EC%9A%94",
  },
  {
    name: "후이즈",
    logo: "/images/dns-providers/whois.png",
    type: "도메인 구매처",
    path: "도메인 활용·부가서비스 → 네임서버 고급설정",
    note: "후이즈 네임서버를 사용 중인 도메인",
    helpUrl: "https://domain.whois.co.kr/regist/han_server.php?file=cd",
  },
  {
    name: "GoDaddy",
    logo: "/images/dns-providers/godaddy.png",
    type: "도메인 구매처",
    path: "Domain Portfolio → 도메인 선택 → DNS → Add New Record",
    note: "GoDaddy 네임서버를 사용 중인 도메인",
    helpUrl: "https://www.godaddy.com/en-ca/help/manage-dns-records-680",
  },
  {
    name: "아임웹",
    logo: "/images/dns-providers/imweb.png",
    type: "홈페이지 제작·호스팅",
    path: "관리자 페이지 → 환경설정 → 도메인 → 네임서버 설정 → 레코드 추가",
    note: "아임웹 네임서버로 변경한 경우에만 이 경로에서 설정",
    helpUrl:
      "https://imweb.me/faq?category=56&category2=100&idx=72132&mode=view",
  },
  {
    name: "퍼스트몰",
    logo: "/images/dns-providers/firstmall.png",
    type: "쇼핑몰 호스팅",
    path: "퍼스트몰 고객센터 → 1:1 문의 → 도메인과 MX·TXT 값 전달",
    note: "직접 입력 메뉴가 없으면 퍼스트몰 안내에 따라 수동 등록 요청",
    helpUrl: "https://www.firstmall.kr/customer/faq/1146",
  },
];

const dnsRecords = [
  {
    type: "MX",
    host: "@",
    value: "mx1.officialsite.kr.",
    priority: "10",
    note: "받는 메일을 오피셜메일 서버로 보내는 핵심 레코드입니다.",
    ttl: "3600",
  },
  {
    type: "TXT",
    host: "@",
    value: "v=spf1 include:mx1.officialsite.kr -all",
    priority: "-",
    note: "오피셜메일에서 발송한 메일임을 수신 서버가 확인할 수 있게 합니다.",
    ttl: "3600",
  },
  {
    type: "TXT",
    host: "dkim._domainkey",
    value: "v=DKIM1; k=rsa; p=[도메인 연결 화면의 공개키]",
    priority: "-",
    note: "공개키는 도메인마다 다릅니다. 호스트와 값 모두 도메인 연결 화면에 표시된 내용을 복사하세요.",
    ttl: "3600",
  },
  {
    type: "TXT",
    host: "_dmarc",
    value: "v=DMARC1; p=none; rua=mailto:dmarc@officialsite.kr",
    priority: "-",
    note: "인증 실패 메일의 처리 정책입니다. DKIM을 미사용해도 SPF와 DMARC는 계속 검증합니다.",
    ttl: "3600",
  },
];

const mailboxTasks = [
  "대표 주소로 테스트 메일을 보내 수신이 되는지 확인합니다.",
  "받은 편지함, 전체 메일, 스팸함, 휴지통 이동이 즉시 반영되는지 확인합니다.",
  "중요 표시, 안읽음 처리, 새 창 열기, 보기 방식 변경을 팀 운영 방식에 맞춰 사용합니다.",
  "메일 전달·답장 시 본문은 URL에 싣지 않고 서버에서 원본을 다시 불러옵니다.",
];

const aiSteps = [
  {
    title: "요약 받을 주소 입력",
    body: "업무용 Gmail, 개인 보조 메일, 대표자 메일 등 알림을 받을 주소를 등록합니다.",
  },
  {
    title: "릴레이 켜기",
    body: "새 메일이 들어오면 AI가 핵심 요청, 의심 포인트, 추천 답장 방향을 정리해 전달합니다.",
  },
  {
    title: "원본 확인",
    body: "요약 메일 안의 원본 확인 버튼으로 오피셜메일 본문을 바로 열 수 있습니다.",
  },
  {
    title: "답장 릴레이",
    body: "AI 요약 메일에 답장하면 기존 발신자에게 답장이 이어지도록 처리됩니다.",
  },
];

const teamRows = [
  {
    title: "대표 관리자",
    body: "도메인 연결, 결제 및 구독, 멤버 생성·삭제를 관리합니다.",
  },
  {
    title: "일반 멤버",
    body: "본인 메일함, AI 릴레이, 자동발송 예약을 개별 설정합니다.",
  },
  {
    title: "성장 플랜",
    body: "도메인에 성장 플랜이 적용되면 멤버도 유료 기능을 사용할 수 있습니다.",
  },
];

const troubleshooting = [
  {
    question: "Vercel이나 Railway에서 DNS를 설정해야 하나요?",
    answer:
      "홈페이지만 Vercel이나 Railway에 배포했다면 보통 DNS는 도메인 구매처에 남아 있습니다. 다만 네임서버 자체를 해당 서비스나 다른 DNS 제공사로 변경했다면 그 관리 화면에서 오피셜메일 레코드를 등록해야 합니다.",
  },
  {
    question: "DNS가 계속 불일치로 보여요",
    answer:
      "레코드 값의 따옴표, 공백, SPF include 값을 먼저 확인하세요. DNS 제공사에 따라 반영까지 10분에서 24시간이 걸릴 수 있습니다.",
  },
  {
    question: "메일 수신은 되는데 발송 신뢰도가 낮아요",
    answer:
      "SPF가 v=spf1 include:mx1.officialsite.kr -all과 일치하는지 확인하고 DKIM 사용을 권장 상태로 유지하세요. DKIM을 사용하지 않아도 연결은 가능하지만 외부 수신처에서 스팸 분류나 반송 가능성이 높아질 수 있습니다.",
  },
  {
    question: "AI 요약 메일이 늦게 와요",
    answer:
      "AI 어시스트에서 릴레이가 켜져 있고 요약 받을 이메일이 정확한지 확인하세요. AI 요약에 실패하면 실패 안내와 함께 원문이 릴레이되므로 원문 도착 여부도 함께 확인할 수 있습니다.",
  },
  {
    question: "멤버가 결제 메뉴를 볼 수 없어요",
    answer:
      "결제 및 구독, 도메인 연결, 멤버 관리는 대표 관리자만 접근합니다. 멤버는 본인 메일함 기능과 개인 자동화 설정을 사용합니다.",
  },
  {
    question: "Outlook에서 공급자를 무엇으로 선택해야 하나요?",
    answer:
      "성장 플랜에서 메일함과 읽음 상태를 동기화하려면 IMAP을 선택하세요. 받은메일함을 기기로 내려받는 방식이 필요하면 POP3도 사용할 수 있습니다. 두 방식 모두 외부 연동에서 먼저 활성화해야 합니다.",
  },
];

const supportLinks = [
  {
    title: "도메인 연결을 바로 진행할까요?",
    body: "관리 화면에서 현재 도메인의 MX, SPF, DKIM, DMARC 상태를 확인하세요.",
    href: "/mail?panel=setup&section=domain",
    label: "도메인 설정 열기",
  },
  {
    title: "AI 릴레이를 먼저 써볼까요?",
    body: "요약 받을 이메일을 등록하고 실제 수신 메일로 동작을 확인하세요.",
    href: "/mail?panel=setup&section=assistant",
    label: "AI 어시스트 설정",
  },
  {
    title: "메일함으로 돌아갈까요?",
    body: "설정을 마쳤다면 받은 편지함에서 수신·발송 흐름을 확인하세요.",
    href: "/mail?folder=all",
    label: "메일 홈 열기",
  },
];

function OfficialMailLogo({ locale }: { locale: Awaited<ReturnType<typeof resolveRequestLocale>> }) {
  return (
    <span className="flex items-center">
      <span className="flex h-8 w-8 items-center justify-center rounded-[10px] text-[#2f6df6]">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="1.8"
          className="h-6 w-6"
          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>
      <span className="text-[18px] font-extrabold tracking-[-0.07em] text-[#2f6df6]">
        {locale === "ko" ? "오피셜메일" : "OfficialMail"}
      </span>
    </span>
  );
}

function GuideIcon({ type }: { type: string }) {
  const common = "h-7 w-7";
  if (type === "mail") {
    return (
      <svg viewBox="0 0 24 24" fill="none" className={common} aria-hidden="true">
        <rect x="3.5" y="5" width="17" height="14" rx="3" stroke="currentColor" strokeWidth="1.8" />
        <path d="m5 7.2 7 5.4 7-5.4" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      </svg>
    );
  }
  if (type === "domain") {
    return (
      <svg viewBox="0 0 24 24" fill="none" className={common} aria-hidden="true">
        <circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="1.8" />
        <path d="M3.8 12h16.4M12 3.5c2.2 2.2 3.3 5 3.3 8.5s-1.1 6.3-3.3 8.5c-2.2-2.2-3.3-5-3.3-8.5S9.8 5.7 12 3.5Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      </svg>
    );
  }
  if (type === "team") {
    return (
      <svg viewBox="0 0 24 24" fill="none" className={common} aria-hidden="true">
        <path d="M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM15.8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM4.2 19a5 5 0 0 1 9.6 0M14.5 18.8a4 4 0 0 1 5.3-3.6" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" fill="none" className={common} aria-hidden="true">
      <path d="m12 3 1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8zM18.5 15l.8 2.1 2.1.8-2.1.8-.8 2.1-.8-2.1-2.1-.8 2.1-.8z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
    </svg>
  );
}

function StepSection({
  children,
  id,
  number,
  subtitle,
  title,
}: {
  children: React.ReactNode;
  id: string;
  number: number;
  subtitle?: string;
  title: string;
}) {
  return (
    <section id={id} className="scroll-mt-24 border-b border-[#e8edf5] py-12 sm:py-14">
      <div className="grid grid-cols-[36px_minmax(0,1fr)] gap-5 sm:grid-cols-[44px_minmax(0,1fr)] sm:gap-6">
        <div className="flex flex-col items-center">
          <span className="flex h-9 w-9 items-center justify-center rounded-[11px] bg-[#3182f6] text-[15px] font-bold text-white shadow-[0_8px_18px_rgba(49,130,246,0.24)] sm:h-10 sm:w-10">
            {number}
          </span>
          <span className="mt-3 h-full min-h-12 w-px bg-[#3182f6]" />
        </div>
        <div className="min-w-0">
          {subtitle ? (
            <p className="mb-2 text-[15px] font-semibold text-[#3182f6]">{subtitle}</p>
          ) : null}
          <h2 className="text-[26px] font-bold leading-[1.25] tracking-[-0.055em] text-[#191f28] sm:text-[32px]">
            {title}
          </h2>
          <div className="mt-7">{children}</div>
        </div>
      </div>
    </section>
  );
}

function SetupCard({
  description,
  icon,
  title,
  tone,
}: {
  description: string;
  icon: string;
  title: string;
  tone: string;
}) {
  return (
    <article className="group rounded-[18px] border border-[#e5e8ef] bg-white p-5 transition-all duration-200 hover:-translate-y-0.5 hover:border-[#b9d3ff] hover:shadow-[0_18px_40px_rgba(25,31,40,0.08)]">
      <div className="flex h-14 w-14 items-center justify-center rounded-[18px] bg-[linear-gradient(135deg,#eef5ff,#f8fbff)] text-[#3182f6]">
        <GuideIcon type={icon} />
      </div>
      <p className="mt-5 text-[13px] font-semibold text-[#3182f6]">{tone}</p>
      <h3 className="mt-2 text-[18px] font-bold tracking-[-0.035em] text-[#191f28]">{title}</h3>
      <p className="mt-3 text-[15px] leading-7 text-[#58616f]">{description}</p>
    </article>
  );
}

function SupportLink({
  body,
  href,
  label,
  title,
}: {
  body: string;
  href: string;
  label: string;
  title: string;
}) {
  return (
    <Link
      href={href}
      className="group flex items-center justify-between gap-5 border-b border-[#e8edf5] py-5 transition-colors hover:border-[#cfe0ff]"
    >
      <span className="min-w-0">
        <span className="block text-[17px] font-bold tracking-[-0.035em] text-[#191f28]">{title}</span>
        <span className="mt-1.5 block text-[14px] leading-6 text-[#6b7684]">{body}</span>
      </span>
      <span className="shrink-0 text-[14px] font-semibold text-[#3182f6] group-hover:translate-x-0.5">
        {label}
      </span>
    </Link>
  );
}

export default async function OfficialMailGuidePage() {
  const locale = await resolveRequestLocale();
  const suggestedLocale = await resolvePublicSuggestedLocale();
  const ui = (source: string) => translateStaticUiText(locale, source);
  const localizedSidebarGroups = localizeStaticUiValue(
    sidebarGroups,
    locale,
  ) satisfies GuideSidebarGroup[];
  const localizedSetupOptions = localizeStaticUiValue(setupOptions, locale);
  const localizedDnsProviders = localizeStaticUiValue(dnsProviders, locale);
  const localizedDnsRecords = localizeStaticUiValue(dnsRecords, locale);
  const localizedMailboxTasks = localizeStaticUiValue(mailboxTasks, locale);
  const localizedAiSteps = localizeStaticUiValue(aiSteps, locale);
  const localizedTeamRows = localizeStaticUiValue(teamRows, locale);
  const localizedTroubleshooting = localizeStaticUiValue(troubleshooting, locale);
  const localizedSupportLinks = localizeStaticUiValue(supportLinks, locale);

  return (
    <ServerStaticUiLocalizer locale={locale}>
    <main className="min-h-screen bg-white text-[#191f28]">
      <div className="fixed inset-x-0 top-0 z-50">
      <PublicLocaleSuggestion countryLocale={suggestedLocale} pathname="/guide" />
      <header className="h-[60px] border-b border-[#e8edf5] bg-white/95 backdrop-blur-xl">
        <div className="flex h-full w-full items-center justify-between px-5 sm:px-8">
          <Link href={getLocalizedPublicPath("/", locale)} aria-label="오피셜메일 홈으로 이동">
            <OfficialMailLogo locale={locale} />
          </Link>
          <nav className="hidden items-center gap-7 text-[14px] font-semibold text-[#4e5968] md:flex">
            <a href="#domain" className="transition-colors hover:text-[#3182f6]">
              도메인 연결
            </a>
            <a href="#mailbox" className="transition-colors hover:text-[#3182f6]">
              메일 사용법
            </a>
            <a href="#ai" className="transition-colors hover:text-[#3182f6]">
              AI 릴레이
            </a>
            <a href="#integrations" className="transition-colors hover:text-[#3182f6]">
              외부 연동
            </a>
            <a href="#troubleshooting" className="transition-colors hover:text-[#3182f6]">
              문제 해결
            </a>
          </nav>
          <div className="hidden items-center gap-3 lg:flex">
            <PublicLanguageMenu currentLocale={locale} pathname="/guide" />
            <Link
              href="/login"
              className="inline-flex h-9 items-center rounded-[12px] bg-[#3182f6] px-4 text-[14px] font-bold text-white transition-colors hover:bg-[#1b64da]"
            >
              시작하기
            </Link>
          </div>
          <OfficialMailGuideMobileMenu groups={localizedSidebarGroups} />
        </div>
      </header>
      </div>

      <OfficialMailGuideSidebar
        groups={localizedSidebarGroups}
        localeSuggestionVisible={Boolean(suggestedLocale)}
      />

      <div
        className={
          suggestedLocale
            ? "pt-[116px] sm:pt-[108px] lg:pl-[236px]"
            : "pt-[60px] lg:pl-[236px]"
        }
      >
        <article className="mx-auto w-full max-w-[1420px] px-5 pb-24 pt-12 sm:px-8 sm:pt-16 lg:px-10 lg:pt-20 xl:px-12">
          <div id="start" className="scroll-mt-24">
            <div className="flex items-center justify-between gap-4">
              <p className="text-[14px] font-semibold text-[#6b7684]">
                가이드 <span className="mx-1 text-[#b0b8c1]">/</span> 시작하기
              </p>
              <Link
                href="/mail?panel=setup&section=domain"
                className="hidden h-9 items-center rounded-[12px] border border-[#dfe5ed] px-3.5 text-[13px] font-bold text-[#4e5968] transition-colors hover:border-[#b9d3ff] hover:text-[#3182f6] sm:inline-flex"
              >
                도메인 설정 열기
              </Link>
            </div>
            <p className="mt-9 text-[15px] font-bold text-[#3182f6]">Official Mail Guide</p>
            <h1 className="mt-3 text-[42px] font-extrabold leading-[1.16] tracking-[-0.075em] text-[#191f28] sm:text-[54px]">
              오피셜메일 시작하기
            </h1>
            <p className="mt-6 text-[19px] leading-8 tracking-[-0.025em] text-[#4e5968] sm:text-[21px] sm:leading-9">
              회사 도메인으로 메일 주소를 만들고, 수신·발신 인증과 AI 요약 릴레이까지 한 번에 연결하는 순서입니다.
            </p>
            <div className="mt-7 rounded-[16px] bg-[#f6f8fb] px-4 py-3 text-[14px] leading-6 text-[#58616f]">
              오피셜메일이 현재 도메인에 필요한 MX·SPF·DKIM·DMARC 값을 제공합니다. 사용자는 그 값을
              현재 DNS를 관리하는 화면에 복사하고, 오피셜메일에서 반영 상태를 확인하면 됩니다.
            </div>
          </div>

          <StepSection id="choose" number={1} subtitle={ui("운영 방식 선택")} title={ui("먼저 어떤 메일 운영이 필요한지 정하세요")}>
            <div className="grid gap-3 sm:grid-cols-2">
              {localizedSetupOptions.map((option) => (
                <SetupCard key={option.title} {...option} />
              ))}
            </div>
          </StepSection>

          <StepSection
            id="domain"
            number={2}
            subtitle={ui("도메인 연결")}
            title={ui("메일 주소를 정하고 DNS 설정 위치부터 찾으세요")}
          >
            <div className="space-y-5 text-[16px] leading-8 text-[#4e5968]">
              <div
                id="mail-address"
                className="scroll-mt-24 rounded-[20px] bg-[linear-gradient(135deg,#f2f7ff_0%,#fbfdff_100%)] px-5 py-6 sm:px-7 sm:py-7"
              >
                <p className="text-[13px] font-bold text-[#3182f6]">대표 메일 입력 방법</p>
                <h3 className="mt-2 text-[22px] font-bold tracking-[-0.045em] text-[#191f28]">
                  @ 앞부분과 도메인을 나눠서 입력합니다
                </h3>
                <p className="mt-3 text-[15px] leading-7 text-[#58616f]">
                  <strong className="font-bold text-[#333d4b]">contact@내도메인.com</strong>을
                  만들고 싶다면 대표 메일 주소에는 <strong className="font-bold text-[#333d4b]">contact</strong>만
                  입력합니다. 뒤의 <strong className="font-bold text-[#333d4b]">@내도메인.com</strong>은 앞에서
                  입력한 도메인을 기준으로 자동으로 붙습니다.
                </p>
                <div className="mt-5 flex min-w-0 items-center overflow-hidden rounded-[14px] border border-[#d8e4f7] bg-white text-[14px] shadow-[0_10px_28px_rgba(49,130,246,0.07)]">
                  <span className="min-w-0 flex-1 px-4 py-3.5 font-semibold text-[#191f28]">
                    contact
                  </span>
                  <span className="max-w-[58%] truncate border-l border-[#e7edf7] bg-[#f8faff] px-4 py-3.5 font-semibold text-[#526784]">
                    @내도메인.com
                  </span>
                </div>
              </div>

              <div id="dns-location" className="scroll-mt-24 pt-5">
                <p className="text-[13px] font-bold text-[#3182f6]">먼저 확인할 것</p>
                <h3 className="mt-2 text-[22px] font-bold tracking-[-0.045em] text-[#191f28]">
                  도메인을 산 곳, 홈페이지가 있는 곳, DNS를 관리하는 곳은 다를 수 있습니다
                </h3>
                <p className="mt-4">
                  도메인 구매처는 인터넷 주소를 결제하고 연장하는 곳이고, 웹 호스팅은 홈페이지 파일이나 앱이
                  실행되는 곳입니다. DNS 관리처는 방문자와 메일을 어느 서버로 보낼지 정하는 현재의 연결
                  관리소입니다. 오피셜메일 레코드는 세 곳 중 <strong className="font-bold text-[#333d4b]">현재 DNS를
                  관리하는 곳</strong>에 입력합니다.
                </p>

                <div className="mt-6 grid border-y border-[#e8edf5] sm:grid-cols-3 sm:divide-x sm:divide-[#e8edf5]">
                  {[
                    ["도메인 구매처", "도메인을 사고 매년 연장하는 곳", "가비아, 후이즈, GoDaddy"],
                    ["DNS 관리처", "웹·메일 연결값을 입력하는 곳", "현재 네임서버를 운영하는 업체"],
                    ["웹 호스팅", "홈페이지가 실제로 실행되는 곳", "아임웹, 퍼스트몰, Vercel, Railway"],
                  ].map(([title, body, example]) => (
                    <div key={title} className="border-b border-[#e8edf5] py-5 last:border-b-0 sm:border-b-0 sm:px-5 sm:first:pl-0 sm:last:pr-0">
                      <p className="text-[15px] font-bold text-[#191f28]">{title}</p>
                      <p className="mt-2 text-[14px] leading-6 text-[#58616f]">{body}</p>
                      <p className="mt-2 text-[12px] leading-5 text-[#8b95a1]">{example}</p>
                    </div>
                  ))}
                </div>

                <div className="mt-6 rounded-[16px] bg-[#fff8e8] px-5 py-4 text-[14px] leading-7 text-[#66552c]">
                  <strong className="font-bold text-[#4f411e]">가비아에서 구매하고 퍼스트몰 네임서버로 바꾼 예:</strong>{" "}
                  도메인 소유권과 연장 결제는 여전히 가비아에 남지만, DNS 값을 입력하는 관리 창은 퍼스트몰 또는
                  퍼스트몰이 안내하는 DNS 관리처로 이동한 것으로 이해하면 쉽습니다.
                  <span className="mt-2 block text-[12px] leading-5 text-[#8a7540]">
                    이 설명은 비개발자의 이해를 돕기 위해 관리 역할을 단순화한 표현이며, 도메인 등록기관이나
                    법적인 소유권이 이전된다는 의미는 아닙니다.
                  </span>
                </div>

                <div className="mt-6">
                  <p className="text-[15px] font-bold text-[#191f28]">어디인지 모를 때는 이렇게 찾으세요</p>
                  <ol className="mt-3 divide-y divide-[#e8edf5] border-y border-[#e8edf5]">
                    {[
                      "도메인 구매처의 관리 화면에서 현재 네임서버 주소를 확인합니다.",
                      "네임서버에 gabia, cafe24, whois, imweb 같은 업체명이 보이면 그 업체의 DNS 관리 화면을 찾습니다.",
                      "홈페이지 연결 때 A 또는 CNAME만 추가했다면 DNS는 대부분 기존 도메인 구매처에 그대로 있습니다.",
                      "그래도 모르겠다면 고객센터에 “이 도메인의 MX와 TXT 레코드는 어디에서 추가하나요?”라고 문의합니다.",
                    ].map((item, index) => (
                      <li key={item} className="flex gap-4 py-4 text-[14px] leading-6 text-[#58616f]">
                        <span className="font-bold text-[#3182f6]">{String(index + 1).padStart(2, "0")}</span>
                        <span>{item}</span>
                      </li>
                    ))}
                  </ol>
                </div>

                <div className="mt-6 rounded-[16px] bg-[#f6f8fb] px-5 py-4 text-[14px] leading-7 text-[#58616f]">
                  <strong className="font-bold text-[#333d4b]">Vercel·Railway 사용자:</strong> 홈페이지를 그곳에
                  배포했다는 이유만으로 메일 레코드도 그곳에 넣는 것은 아닙니다. 도메인 구매처에서 A·CNAME만
                  연결했다면 구매처 DNS에 입력하고, 네임서버 자체를 다른 서비스로 변경한 경우에만 변경한 곳에서
                  입력합니다.
                </div>
              </div>

              <div id="provider-guides" className="scroll-mt-24 pt-5">
                <p className="text-[13px] font-bold text-[#3182f6]">업체별 설정 위치</p>
                <h3 className="mt-2 text-[22px] font-bold tracking-[-0.045em] text-[#191f28]">
                  현재 사용 중인 업체의 DNS 메뉴를 여세요
                </h3>
                <p className="mt-3 text-[14px] leading-7 text-[#6b7684]">
                  아래 경로는 해당 업체의 네임서버를 사용 중일 때 기준입니다. 메뉴 명칭이 바뀌었거나 직접 입력
                  메뉴가 없다면 공식 안내 링크 또는 고객센터를 이용하세요.
                </p>
                <div className="mt-5 divide-y divide-[#e8edf5] border-y border-[#e8edf5]">
                  {localizedDnsProviders.map((provider) => (
                    <div
                      key={provider.name}
                      className="grid gap-4 py-5 sm:grid-cols-[180px_minmax(0,1fr)_auto] sm:items-center"
                    >
                      <div className="flex items-center gap-3">
                        <span className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-[11px] border border-[#e5e8ef] bg-white">
                          <Image
                            src={provider.logo}
                            width={28}
                            height={28}
                            alt={`${provider.name} 로고`}
                            className="h-7 w-7 object-contain"
                          />
                        </span>
                        <span>
                          <span className="block text-[15px] font-bold text-[#191f28]">{provider.name}</span>
                          <span className="mt-0.5 block text-[12px] text-[#8b95a1]">{provider.type}</span>
                        </span>
                      </div>
                      <div>
                        <p className="text-[14px] font-semibold leading-6 text-[#333d4b]">{provider.path}</p>
                        <p className="mt-1 text-[12px] leading-5 text-[#7b8490]">{provider.note}</p>
                      </div>
                      <a
                        href={provider.helpUrl}
                        target="_blank"
                        rel="noreferrer"
                        className="text-[13px] font-bold text-[#3182f6] transition-colors hover:text-[#1b64da]"
                      >
                        공식 안내 ↗
                      </a>
                    </div>
                  ))}
                </div>
              </div>

              <p className="pt-5">
                위치를 찾았다면 도메인 연결 화면에서 현재 도메인 전용 레코드를 복사합니다. MX는 메일 수신
                경로를, SPF·DKIM·DMARC는 발신 인증과 위변조 방지 정책을 설정합니다.
              </p>
              <ol className="grid gap-3 text-[15px] text-[#4e5968] sm:grid-cols-3">
                {["도메인·대표 메일 저장", "화면의 DNS 값 복사", "연결 상태 확인"].map((item, index) => (
                  <li key={item} className="rounded-[16px] border border-[#e5e8ef] bg-white px-4 py-4">
                    <span className="text-[13px] font-bold text-[#3182f6]">0{index + 1}</span>
                    <p className="mt-2 font-bold tracking-[-0.02em] text-[#191f28]">{item}</p>
                  </li>
                ))}
              </ol>
            </div>
          </StepSection>

          <StepSection id="records" number={3} subtitle={ui("DNS 레코드")} title={ui("MX, SPF, DKIM, DMARC를 화면에 표시된 값으로 등록하세요")}>
            <div className="overflow-x-auto rounded-[18px] border border-[#e5e8ef] bg-white">
              <table className="min-w-[860px] text-left text-[14px]">
                <thead className="border-b border-[#edf1f7] bg-[#f9fafc] text-[#6b7684]">
                  <tr>
                    <th className="px-4 py-3 font-bold">유형</th>
                    <th className="px-4 py-3 font-bold">호스트</th>
                    <th className="px-4 py-3 font-bold">값</th>
                    <th className="px-4 py-3 font-bold">우선순위</th>
                    <th className="px-4 py-3 font-bold">TTL</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#edf1f7]">
                  {localizedDnsRecords.map((record) => (
                    <tr key={`${record.type}-${record.host}`}>
                      <td className="px-4 py-4 align-top font-bold text-[#3182f6]">{record.type}</td>
                      <td className="px-4 py-4 align-top font-semibold text-[#191f28]">{record.host}</td>
                      <td className="px-4 py-4 align-top">
                        <code className="break-all rounded-[8px] bg-[#f6f8fb] px-2 py-1 font-mono text-[13px] leading-6 text-[#333d4b]">
                          {record.value}
                        </code>
                        <p className="mt-2 text-[13px] leading-5 text-[#6b7684]">{record.note}</p>
                      </td>
                      <td className="px-4 py-4 align-top text-[#6b7684]">{record.priority}</td>
                      <td className="px-4 py-4 align-top text-[#6b7684]">{record.ttl}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p id="check" className="mt-4 scroll-mt-24 text-[14px] leading-6 text-[#6b7684]">
              위 값은 현재 표준 형식입니다. DKIM 공개키는 도메인마다 다르므로 실제 등록 시에는 오피셜메일 도메인
              연결 화면의 호스트·값을 그대로 사용하세요. DNS 제공사에서 @를 지원하지 않으면 호스트를 비워두거나
              루트 도메인을 입력합니다.
            </p>
            <div className="mt-4 rounded-[14px] bg-[#f6f8fb] px-4 py-3 text-[13px] leading-6 text-[#58616f]">
              DKIM은 사용(권장)과 미사용을 선택할 수 있습니다. 긴 TXT 등록이 어려운 DNS는 1024-bit 호환 키를
              다시 발급할 수 있으며, 키를 바꾸면 기존 DKIM 값을 새 값으로 교체해야 합니다.
            </div>
          </StepSection>

          <AdsenseContentAd
            className="my-2 sm:my-4"
            format="in-article"
            locale={locale}
            slot={getAdsenseSlot("guide")}
          />

          <StepSection id="mailbox" number={4} subtitle={ui("메일함 사용법")} title={ui("연결 후에는 실제 수신과 발송 흐름을 점검하세요")}>
            <ul className="space-y-3">
              {localizedMailboxTasks.map((task) => (
                <li key={task} className="flex gap-3 text-[16px] leading-7 text-[#4e5968]">
                  <span className="mt-1.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#e8f3ff] text-[#3182f6]">
                    <svg viewBox="0 0 24 24" fill="none" className="h-3.5 w-3.5" aria-hidden="true">
                      <path d="m5 12.5 4.2 4.2L19 6.8" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.4" />
                    </svg>
                  </span>
                  <span>{task}</span>
                </li>
              ))}
            </ul>
            <div className="mt-6 rounded-[16px] border border-[#dbe7fb] bg-[#f6f9ff] px-5 py-5 text-[14px] leading-7 text-[#4e5968]">
              <p className="font-bold text-[#191f28]">{ui("첨부파일과 수신 메일 크기")}</p>
              <p className="mt-2">{ui("무료 플랜은 일반 첨부 합계와 수신 메일 전체가 각각 메일당 최대 25MB입니다. 대용량 첨부는 제공하지 않습니다.")}</p>
              <p className="mt-2">{ui("성장 플랜은 일반 첨부 합계와 수신 메일 전체가 각각 메일당 최대 40MB입니다. 대용량 첨부는 파일당 250MB까지 링크로 보내며 30일 또는 다운로드 100회 중 먼저 도달하면 만료됩니다.")}</p>
              <p className="mt-2">{ui("보낸 대용량 파일은 파일서랍 용량을 함께 사용합니다. 받은 실제 첨부는 원본 메일에서 불러오고, 외부 서비스의 대용량 다운로드 링크는 원본 메일에서 확인하세요.")}</p>
            </div>
          </StepSection>

          <StepSection id="ai" number={5} subtitle={ui("AI 요약 릴레이")} title={ui("메일을 열기 전에 핵심 내용을 먼저 받으세요")}>
            <p className="mb-5 text-[15px] leading-7 text-[#58616f]">
              AI 요약 릴레이는 성장 플랜 기능이며 대표 관리자와 일반 멤버가 각자 본인 계정에서 별도로 설정합니다.
            </p>
            <div className="grid gap-4 sm:grid-cols-2">
              {localizedAiSteps.map((step, index) => (
                <div key={step.title} className="rounded-[18px] border border-[#e5e8ef] bg-white p-5">
                  <span className="text-[13px] font-bold text-[#3182f6]">STEP {index + 1}</span>
                  <h3 className="mt-3 text-[18px] font-bold tracking-[-0.035em] text-[#191f28]">{step.title}</h3>
                  <p className="mt-3 text-[15px] leading-7 text-[#58616f]">{step.body}</p>
                </div>
              ))}
            </div>
          </StepSection>

          <StepSection id="team" number={6} subtitle={ui("팀 운영")} title={ui("대표 관리자와 멤버 권한을 분리해서 운영하세요")}>
            <div className="divide-y divide-[#e8edf5] rounded-[18px] border border-[#e5e8ef] bg-white">
              {localizedTeamRows.map((row) => (
                <div key={row.title} className="grid gap-2 px-5 py-5 sm:grid-cols-[150px_1fr] sm:gap-5">
                  <p className="font-bold tracking-[-0.03em] text-[#191f28]">{row.title}</p>
                  <p className="text-[15px] leading-7 text-[#58616f]">{row.body}</p>
                </div>
              ))}
            </div>
          </StepSection>

          <StepSection id="auto-send" number={7} subtitle={ui("자동발송 예약")} title={ui("반복 발송이 필요한 메일은 예약 목록으로 관리하세요")}>
            <div className="rounded-[18px] border border-[#e5e8ef] bg-white p-5">
              <p className="text-[16px] leading-8 text-[#4e5968]">
                {ui("받는 사람을 대기 목록에 추가하고, 제목·본문 세트를 저장해두면 설정된 주기마다 발송 대기 중인 대상에게 순차적으로 발송합니다. 이미 발송 완료된 대상은 로그에 남고, 다시 추가하면 새 대기 건으로 관리할 수 있습니다. 기능은 성장 플랜 계정별로 각각 설정합니다. 예약을 켜면 1분 뒤 첫 발송을 시작하고, 이후에는 선택한 발송 주기에 맞춰 대기 건의 예상 시각을 다시 계산합니다.")}
              </p>
              <div className="mt-5 grid gap-3 sm:grid-cols-3">
                {["매일·매주·매월·직접 설정", "회차당 1~30건", "하루 최대 30건"].map((item) => (
                  <div key={item} className="rounded-[14px] bg-[#f6f8fb] px-4 py-3 text-[14px] font-bold text-[#333d4b]">
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </StepSection>

          <AdsenseContentAd
            className="my-2 sm:my-4"
            format="horizontal"
            locale={locale}
            slot={getAdsenseSlot("guideBanner")}
          />

          <StepSection id="integrations" number={8} subtitle={ui("외부 연동")} title={ui("IMAP 또는 POP3 방식으로 외부 메일 앱을 연결하세요")}>
            <p className="text-[15px] leading-7 text-[#58616f]">
              {ui("Outlook 등 외부 메일 앱의 IMAP·POP3·SMTP 연결과 발송 API는 성장 플랜부터 제공합니다. 무료 플랜에서도 오피셜메일 웹·앱은 이용할 수 있습니다. 외부 연결에는 계정 로그인 비밀번호와 다른 전용 비밀번호를 설정하세요.")}
            </p>
            <div className="mt-6 border-y border-[#dbe7fb] bg-[#f6f9ff] px-5 py-5">
              <p className="text-[15px] font-bold text-[#191f28]">{ui("필요한 수신 방식에 맞춰 선택하세요")}</p>
              <div className="mt-4 grid gap-3 sm:grid-cols-2">
                <div className="rounded-[12px] bg-[#3182f6] px-4 py-3 text-[14px] font-bold text-white">
                  IMAP
                  <span className="mt-1 block text-[12px] font-medium text-white/80">{ui("메일함·폴더·읽음 상태를 동기화")}</span>
                </div>
                <div className="rounded-[12px] border border-[#cfe0ff] bg-white px-4 py-3 text-[14px] font-bold text-[#2f6df6]">
                  POP3
                  <span className="mt-1 block text-[12px] font-medium text-[#7183a1]">{ui("받은메일함을 기기로 내려받기")}</span>
                </div>
              </div>
              <ol className="mt-5 space-y-2 text-[14px] leading-6 text-[#4e5968]">
                <li><strong className="text-[#333d4b]">1.</strong> {ui("계정 추가에서 오피셜메일 전체 주소를 입력합니다.")}</li>
                <li><strong className="text-[#333d4b]">2.</strong> {ui("외부 연동에서 전용 비밀번호를 설정합니다.")}</li>
                <li><strong className="text-[#333d4b]">3.</strong> {ui("동기화가 필요하면 IMAP, 내려받기가 필요하면 POP3를 선택합니다.")}</li>
                <li><strong className="text-[#333d4b]">4.</strong> {ui("선택한 탭에 표시된 서버·포트·보안 방식을 입력합니다.")}</li>
              </ol>
            </div>
            <div className="mt-5 flex justify-end border-y border-[#e8edf5] py-4 text-[14px]">
              <Link href="/mail?panel=setup&section=integrations" className="shrink-0 font-bold text-[#3182f6]">
                {ui("외부 연동 열기 →")}
              </Link>
            </div>
            <div className="mt-8 border-t border-[#e8edf5] pt-6">
              <p className="text-[16px] font-bold tracking-[-0.03em] text-[#191f28]">{ui("서비스 발송 API")}</p>
              <p className="mt-2 text-[14px] leading-6 text-[#58616f]">
                {ui("자체 서비스에서는 외부 연동 화면에서 API 키와 요청 예시를 복사해 서버 메일 발송을 구현할 수 있습니다. 바이브코딩으로 서비스를 만드는 경우 이 규격을 AI 코딩 도구에 전달하고 “주문 완료 메일 발송 기능을 연결해줘”라고 요청해 구현 시간을 줄일 수 있습니다. AI가 설정을 대신하는 것은 아니므로 생성된 코드를 검토하고, API 키는 브라우저나 공개 저장소가 아닌 서버 환경변수로 보관하세요.")}
              </p>
              <div className="mt-4 space-y-2 overflow-x-auto border-y border-[#e8edf5] px-4 py-4 font-mono text-[13px] text-[#333d4b]">
                <p>{ui("POST https://mail.officialsite.kr/api/v1/mail/send · Bearer API 키 · 요청당 최대 50명")}</p>
                <p>{ui("GET https://mail.officialsite.kr/api/v1/mail/messages/{messageId} · 발송 상태·로그 조회")}</p>
              </div>
            </div>
          </StepSection>

          <section id="troubleshooting" className="scroll-mt-24 border-b border-[#e8edf5] py-12 sm:py-14">
            <p className="text-[15px] font-bold text-[#3182f6]">{ui("문제 해결")}</p>
            <h2 className="mt-2 text-[30px] font-bold leading-[1.25] tracking-[-0.055em] text-[#191f28] sm:text-[36px]">
              {ui("자주 막히는 지점을 먼저 확인하세요")}
            </h2>
            <div className="mt-8 divide-y divide-[#e8edf5]">
              {localizedTroubleshooting.map((item) => (
                <div key={item.question} className="py-6">
                  <h3 className="text-[18px] font-bold tracking-[-0.035em] text-[#191f28]">{item.question}</h3>
                  <p className="mt-3 text-[15px] leading-7 text-[#58616f]">{item.answer}</p>
                </div>
              ))}
            </div>
          </section>

          <section id="support" className="scroll-mt-24 py-12 sm:py-14">
            <p className="text-[15px] font-bold text-[#3182f6]">{ui("다음 단계")}</p>
            <h2 className="mt-2 text-[30px] font-bold leading-[1.25] tracking-[-0.055em] text-[#191f28] sm:text-[36px]">
              {ui("설정 화면에서 바로 이어서 진행하세요")}
            </h2>
            <div className="mt-7 border-t border-[#e8edf5]">
              {localizedSupportLinks.map((link) => (
                <SupportLink key={link.title} {...link} />
              ))}
            </div>
          </section>
        </article>
      </div>
    </main>
    </ServerStaticUiLocalizer>
  );
}