import type { Metadata } from "next";
import Link from "next/link";
import {
  OfficialMailGuideSidebar,
  type GuideSidebarGroup,
} from "@/components/official-mail-guide-sidebar";
import {
  getPublicSiteAbsoluteUrl,
  OFFICIAL_MAIL_GUIDE_URL,
} from "@/lib/mail-urls";

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

export const metadata: Metadata = {
  title: "오피셜메일 가이드 | 도메인 연결과 메일 운영 시작하기",
  description:
    "오피셜메일에서 회사 도메인 메일을 연결하고, DNS 인증, 팀 메일함, AI 요약 릴레이, 자동발송 예약까지 설정하는 공식 가이드입니다.",
  keywords: [
    "오피셜메일 가이드",
    "도메인 메일 연결",
    "기업메일 설정",
    "MX 설정",
    "SPF 설정",
    "DKIM 설정",
    "AI 메일 요약",
    "메일 자동발송",
  ],
  alternates: {
    canonical: OFFICIAL_MAIL_GUIDE_URL,
    languages: {
      "ko-KR": OFFICIAL_MAIL_GUIDE_URL,
      "x-default": OFFICIAL_MAIL_GUIDE_URL,
    },
  },
  openGraph: {
    title: "오피셜메일 가이드",
    description:
      "도메인 연결부터 AI 요약 릴레이까지 오피셜메일을 실제 업무에 적용하는 방법을 단계별로 확인하세요.",
    images: [
      {
        url: ogImageUrl,
        width: 1200,
        height: 630,
        alt: "오피셜메일 가이드",
      },
    ],
    url: OFFICIAL_MAIL_GUIDE_URL,
    siteName: "오피셜메일",
    locale: "ko_KR",
    type: "article",
  },
  twitter: {
    card: "summary_large_image",
    title: "오피셜메일 가이드",
    description:
      "도메인 연결부터 AI 요약 릴레이까지 오피셜메일을 실제 업무에 적용하는 방법을 단계별로 확인하세요.",
    images: [ogImageUrl],
  },
  robots: {
    index: true,
    follow: true,
  },
};

const sidebarGroups = [
  {
    label: "시작",
    items: [
      { href: "#start", label: "오피셜메일 시작하기" },
      { href: "#choose", label: "운영 방식 선택" },
    ],
  },
  {
    label: "도메인 연결",
    items: [
      { href: "#domain", label: "DNS 연결 순서" },
      { href: "#records", label: "필수 레코드" },
      { href: "#check", label: "연결 상태 확인" },
    ],
  },
  {
    label: "메일 운영",
    items: [
      { href: "#mailbox", label: "메일함 사용법" },
      { href: "#ai", label: "AI 요약 릴레이" },
      { href: "#team", label: "팀 계정 관리" },
      { href: "#auto-send", 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 dnsRecords = [
  {
    type: "MX",
    host: "@",
    value: "mx1.officialsite.kr",
    note: "받는 메일을 오피셜메일 서버로 보내는 핵심 레코드입니다.",
    ttl: "3600",
  },
  {
    type: "TXT",
    host: "@",
    value: "v=spf1 include:mx1.officialsite.kr -all",
    note: "오피셜메일에서 발송한 메일임을 수신 서버가 확인할 수 있게 합니다.",
    ttl: "3600",
  },
  {
    type: "TXT",
    host: "mx1.officialsite.kr",
    value: "v=spf1 ip4:115.68.219.179 -all",
    note: "오피셜메일 운영 DNS에 설정되는 공통 SPF입니다. 일반 사용자 도메인에는 위 @ SPF만 등록하면 됩니다.",
    ttl: "3600",
  },
  {
    type: "TXT",
    host: "om1._domainkey",
    value: "관리 화면에 표시되는 DKIM 공개키",
    note: "도메인별로 값이 달라집니다. 반드시 도메인 연결 화면의 값을 복사하세요.",
    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: "DNS가 계속 불일치로 보여요",
    answer:
      "레코드 값의 따옴표, 공백, SPF include 값을 먼저 확인하세요. DNS 제공사에 따라 반영까지 10분에서 24시간이 걸릴 수 있습니다.",
  },
  {
    question: "메일 수신은 되는데 발송 신뢰도가 낮아요",
    answer:
      "SPF와 DKIM이 모두 일치해야 합니다. 사용자 도메인은 v=spf1 include:mx1.officialsite.kr -all을 유지하고, 오피셜메일 운영 DNS에는 mx1.officialsite.kr TXT v=spf1 ip4:115.68.219.179 -all이 설정되어 있어야 합니다.",
  },
  {
    question: "AI 요약 메일이 늦게 와요",
    answer:
      "수신 감지 워커와 AI 릴레이 워커가 실행 중인지 확인하세요. 실패 시에는 요약 실패 안내와 함께 원문 릴레이가 발송됩니다.",
  },
  {
    question: "멤버가 결제 메뉴를 볼 수 없어요",
    answer:
      "결제 및 구독, 도메인 연결, 멤버 관리는 대표 관리자만 접근합니다. 멤버는 본인 메일함 기능과 개인 자동화 설정을 사용합니다.",
  },
];

const supportLinks = [
  {
    title: "도메인 연결을 바로 진행할까요?",
    body: "관리 화면에서 현재 도메인의 MX, SPF, DKIM 상태를 확인하세요.",
    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() {
  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]">
        오피셜메일
      </span>
    </span>
  );
}

function MenuIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="1.8"
      className="h-5 w-5"
      aria-hidden="true"
    >
      <path d="M4.5 7h15" />
      <path d="M4.5 12h15" />
      <path d="M4.5 17h15" />
    </svg>
  );
}

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 function OfficialMailGuidePage() {
  return (
    <main className="min-h-screen bg-white text-[#191f28]">
      <header className="fixed inset-x-0 top-0 z-50 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="/" aria-label="오피셜메일 홈으로 이동">
            <OfficialMailLogo />
          </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="#troubleshooting" className="transition-colors hover:text-[#3182f6]">
              문제 해결
            </a>
          </nav>
          <div className="hidden items-center gap-3 lg:flex">
            <div className="flex h-9 w-[190px] items-center justify-between rounded-[12px] bg-[#f6f8fb] px-3 text-[13px] text-[#8b95a1]">
              <span>가이드 검색</span>
              <span className="rounded-[7px] bg-white px-1.5 py-0.5 text-[11px] text-[#6b7684]">Ctrl K</span>
            </div>
            <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>
          <button
            type="button"
            aria-label="가이드 메뉴 열기"
            className="inline-flex h-10 w-10 items-center justify-center rounded-[12px] text-[#4e5968] md:hidden"
          >
            <MenuIcon />
          </button>
        </div>
      </header>

      <OfficialMailGuideSidebar groups={sidebarGroups} />

      <div className="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=assistant"
                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]">
              DNS 설정은 도메인 구매처에서 진행합니다. 오피셜메일 관리 화면은 입력해야 할 값을 보여주고,
              반영 상태를 검증합니다.
            </div>
          </div>

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

          <StepSection id="domain" number={2} subtitle="도메인 연결" title="DNS 레코드를 추가하고 연결 상태를 확인하세요">
            <div className="space-y-5 text-[16px] leading-8 text-[#4e5968]">
              <p>
                도메인 연결은 메일을 받을 서버, 발신 인증, 위변조 방지 서명을 도메인 DNS에 등록하는 과정입니다.
                관리 화면에서 도메인을 입력하면 필요한 레코드와 현재 일치 여부를 확인할 수 있습니다.
              </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="필수 레코드" title="MX, SPF, DKIM 세 가지를 정확히 등록하세요">
            <div className="overflow-x-auto rounded-[18px] border border-[#e5e8ef] bg-white">
              <table className="min-w-[720px] 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">TTL</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#edf1f7]">
                  {dnsRecords.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="rounded-[8px] bg-[#f6f8fb] px-2 py-1 font-mono text-[13px] 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.ttl}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p id="check" className="mt-4 scroll-mt-24 text-[14px] leading-6 text-[#6b7684]">
              DNS 제공사마다 입력 방식이 다릅니다. 호스트가 @로 표시되지 않는 곳은 비워두거나 도메인명을
              직접 입력해야 할 수 있습니다.
            </p>
          </StepSection>

          <StepSection id="mailbox" number={4} subtitle="메일함 사용법" title="연결 후에는 실제 수신과 발송 흐름을 점검하세요">
            <ul className="space-y-3">
              {mailboxTasks.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>
          </StepSection>

          <StepSection id="ai" number={5} subtitle="AI 요약 릴레이" title="메일을 열기 전에 핵심 내용을 먼저 받으세요">
            <div className="grid gap-4 sm:grid-cols-2">
              {aiSteps.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="팀 운영" title="대표 관리자와 멤버 권한을 분리해서 운영하세요">
            <div className="divide-y divide-[#e8edf5] rounded-[18px] border border-[#e5e8ef] bg-white">
              {teamRows.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="자동발송 예약" title="반복 발송이 필요한 메일은 예약 목록으로 관리하세요">
            <div className="rounded-[18px] border border-[#e5e8ef] bg-white p-5">
              <p className="text-[16px] leading-8 text-[#4e5968]">
                받을 사람을 대기 목록에 추가하고, 제목·본문 세트를 저장해두면 설정된 주기마다 발송 대기 중인
                대상에게 순차적으로 발송합니다. 이미 발송 완료된 대상은 로그에 남고, 다시 추가하면 새 대기 건으로
                관리할 수 있습니다.
              </p>
              <div className="mt-5 grid gap-3 sm:grid-cols-3">
                {["매일·매주·매월", "직접 주기 설정", "최대 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>

          <section id="troubleshooting" className="scroll-mt-24 border-b border-[#e8edf5] py-12 sm:py-14">
            <p className="text-[15px] font-bold text-[#3182f6]">문제 해결</p>
            <h2 className="mt-2 text-[30px] font-bold leading-[1.25] tracking-[-0.055em] text-[#191f28] sm:text-[36px]">
              자주 막히는 지점을 먼저 확인하세요
            </h2>
            <div className="mt-8 divide-y divide-[#e8edf5]">
              {troubleshooting.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]">다음 단계</p>
            <h2 className="mt-2 text-[30px] font-bold leading-[1.25] tracking-[-0.055em] text-[#191f28] sm:text-[36px]">
              설정 화면에서 바로 이어서 진행하세요
            </h2>
            <div className="mt-7 border-t border-[#e8edf5]">
              {supportLinks.map((link) => (
                <SupportLink key={link.title} {...link} />
              ))}
            </div>
          </section>
        </article>
      </div>
    </main>
  );
}