import type { Metadata } from "next";
import Link from "next/link";
import { PublicBlogHeader } from "@/components/public-blog-header";
import { SiteFooter } from "@/components/site-footer";
import { getPublicSiteAbsoluteUrl } from "@/lib/mail-urls";
import { getPublishedMarketingBlogPosts } from "@/lib/marketing-blog";

export const dynamic = "force-dynamic";

const blogUrl = getPublicSiteAbsoluteUrl("/blog");

export const metadata: Metadata = {
  title: "기업메일·도메인 메일 운영 가이드 | 오피셜메일",
  description: "기업메일 만들기, 도메인 연결, MX·SPF·DKIM 설정, Gmail 반송 해결, 쇼핑몰 메일 운영까지 실제 업무 기준으로 정리한 오피셜메일 가이드입니다.",
  alternates: {
    canonical: blogUrl,
    languages: {
      "ko-KR": blogUrl,
      "x-default": blogUrl,
    },
  },
  openGraph: {
    title: "기업메일·도메인 메일 운영 가이드 | 오피셜메일",
    description: "도메인 연결부터 Gmail 반송 해결까지 사업용 메일을 운영하는 실제 방법을 정리했습니다.",
    url: blogUrl,
    siteName: "오피셜메일",
    locale: "ko_KR",
    type: "website",
    images: [{ url: getPublicSiteAbsoluteUrl("/images/officialmail-og.png"), width: 1200, height: 630 }],
  },
};

function formatDate(value: string | null) {
  if (!value) return "";

  return new Intl.DateTimeFormat("ko-KR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(new Date(value));
}

export default async function BlogIndexPage() {
  const posts = await getPublishedMarketingBlogPosts();
  const featuredPost = posts[0] ?? null;
  const otherPosts = posts.slice(1);

  return (
    <main className="min-h-screen bg-white text-[#16233c]">
      <PublicBlogHeader />
      <section className="border-b border-[#edf1f6] bg-[radial-gradient(circle_at_78%_18%,rgba(185,212,255,0.34),transparent_30%),linear-gradient(180deg,#f9fbff_0%,#ffffff_100%)]">
        <div className="mx-auto w-full max-w-[1420px] px-4 pb-16 pt-14 sm:px-8 sm:pb-20 sm:pt-20 xl:px-10">
          <p className="text-[13px] font-semibold tracking-[-0.02em] text-[#2f6df6]">OFFICIALMAIL GUIDE</p>
          <h1 className="mt-4 max-w-[800px] text-balance text-[38px] font-semibold leading-[1.12] tracking-[-0.075em] text-[#16233c] sm:text-[54px]">
            사업용 메일을 제대로 시작하고 운영하는 방법
          </h1>
          <p className="mt-6 max-w-[650px] text-[16px] leading-8 text-[#64748b] sm:text-[18px]">
            도메인 연결, 발신 인증, 고객 문의 정리, 팀 메일함까지. 실제로 검색하게 되는 문제를 해결 순서대로 정리합니다.
          </p>
        </div>
      </section>

      <section className="mx-auto w-full max-w-[1420px] px-4 py-12 sm:px-8 sm:py-16 xl:px-10">
        {featuredPost ? (
          <article className="border-y border-[#dfe8f6] py-7 sm:py-10">
            <div className="grid gap-8 lg:grid-cols-[190px_minmax(0,1fr)_120px] lg:items-end">
              <div>
                <p className="text-[12px] font-semibold text-[#2f6df6]">{featuredPost.status === "published" ? featuredPost.keywords[0] || featuredPost.authorName : "새 가이드"}</p>
                <p className="mt-2 text-[12px] text-[#7b8da8]">{formatDate(featuredPost.publishedAt)} · {featuredPost.authorName}</p>
              </div>
              <div>
                <Link href={`/blog/${featuredPost.slug}`} className="group block">
                  <h2 className="text-balance text-[28px] font-semibold leading-[1.2] tracking-[-0.065em] text-[#16233c] transition-colors group-hover:text-[#2f6df6] sm:text-[38px]">
                    {featuredPost.title}
                  </h2>
                  <p className="mt-4 max-w-[760px] text-[15px] leading-7 text-[#64748b] sm:text-[16px]">{featuredPost.excerpt}</p>
                </Link>
              </div>
              <Link href={`/blog/${featuredPost.slug}`} className="inline-flex h-10 items-center justify-center self-start border-b border-[#2f6df6] text-[13px] font-semibold text-[#2f6df6] transition-colors hover:border-[#174fca] hover:text-[#174fca] lg:self-end">
                읽기 →
              </Link>
            </div>
          </article>
        ) : (
          <div className="border-y border-[#edf1f6] py-16 text-center text-[14px] text-[#74849f]">발행된 가이드를 준비하고 있습니다.</div>
        )}

        <div className="mt-2 divide-y divide-[#edf1f6]">
          {otherPosts.map((post, index) => (
            <article key={post.id} className="grid gap-4 py-7 sm:grid-cols-[80px_minmax(0,1fr)_150px] sm:items-start sm:py-9">
              <p className="text-[12px] font-semibold text-[#8a99b0]">{String(index + 2).padStart(2, "0")}</p>
              <div className="min-w-0">
                <p className="text-[12px] font-semibold text-[#2f6df6]">{post.keywords[0] || "기업메일 가이드"}</p>
                <Link href={`/blog/${post.slug}`} className="group mt-2 block">
                  <h2 className="text-[21px] font-semibold leading-8 tracking-[-0.045em] text-[#243555] transition-colors group-hover:text-[#2f6df6] sm:text-[26px]">{post.title}</h2>
                  <p className="mt-3 max-w-[760px] text-[14px] leading-7 text-[#70819d]">{post.excerpt}</p>
                </Link>
              </div>
              <div className="flex items-center justify-between gap-3 text-[12px] text-[#8190a6] sm:block sm:text-right">
                <time>{formatDate(post.publishedAt)}</time>
                <Link href={`/blog/${post.slug}`} className="ml-auto inline-flex font-semibold text-[#526784] transition-colors hover:text-[#2f6df6] sm:mt-3">자세히 보기 →</Link>
              </div>
            </article>
          ))}
        </div>
      </section>
      <SiteFooter className="border-t border-[#edf1f6] pt-12" />
    </main>
  );
}