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

import { SiteFooter } from "@/components/site-footer";

export const metadata: Metadata = {
  title: "구독 해지 및 환불정책 | 오피셜메일",
  description: "오피셜메일 성장 플랜과 도메인 설정 대행의 해지, 청약철회, 환불 기준을 안내합니다.",
};

const policyRows = [
  ["상품", "오피셜메일 성장 플랜"],
  ["결제금액", "사용자 1명당 월 4,290원(VAT 포함)"],
  ["서비스 제공기간", "각 결제일로부터 1개월"],
  ["갱신 방식", "매월 같은 결제일에 등록 카드로 자동결제"],
  ["해지 방법", "오피셜메일 로그인 → 설정 → 결제 및 구독에서 다음 결제 전 언제든 중지"],
] as const;

export default function RefundPolicyPage() {
  return (
    <div className="min-h-screen bg-white text-[#111a33]">
      <header className="border-b border-[#e7edf6] px-4 py-5 sm:px-8 xl:px-10">
        <div className="mx-auto flex w-full max-w-[1420px] items-center justify-between gap-4">
          <Link href="/" className="text-[18px] font-extrabold tracking-[-0.04em] text-[#2f6df6]">
            오피셜메일
          </Link>
          <Link href="/terms" className="text-[13px] font-semibold text-[#67758d] hover:text-[#2f6df6]">
            이용약관
          </Link>
        </div>
      </header>

      <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-[980px]">
          <p className="text-[12px] font-bold uppercase tracking-[0.16em] text-[#2f6df6]">
            CANCELLATION &amp; REFUND
          </p>
          <h1 className="mt-3 text-[34px] font-extrabold tracking-[-0.06em] sm:text-[44px]">
            구독 해지 및 환불정책
          </h1>
          <p className="mt-4 max-w-[760px] text-[15px] leading-7 text-[#61708a]">
            결제 전 상품 가격과 제공기간을 확인할 수 있으며, 구독 중에도 다음 결제 전 언제든 자동갱신을 중지할 수 있습니다.
          </p>

          <dl className="mt-10 overflow-hidden rounded-[22px] border border-[#dfe7f3] bg-[#fbfcff]">
            {policyRows.map(([label, value]) => (
              <div key={label} className="grid gap-2 border-b border-[#e7edf6] px-5 py-4 last:border-b-0 sm:grid-cols-[180px_1fr] sm:px-7">
                <dt className="text-[13px] font-bold text-[#3f5578]">{label}</dt>
                <dd className="text-[14px] leading-6 text-[#5d6d86]">{value}</dd>
              </div>
            ))}
          </dl>

          <div className="mt-12 divide-y divide-[#e5ebf4] border-y border-[#e5ebf4]">
            <section className="py-8">
              <h2 className="text-[20px] font-bold tracking-[-0.03em]">정기구독 해지</h2>
              <p className="mt-3 text-[15px] leading-8 text-[#5f6f89]">
                해지는 즉시 접수되며 다음 자동결제가 중지됩니다. 이미 결제한 이용기간은 만료일까지 사용할 수 있습니다. 즉시 무료 플랜 전환을 요청하면 미사용 잔여일을 일할 계산해 환불합니다.
              </p>
            </section>
            <section className="py-8">
              <h2 className="text-[20px] font-bold tracking-[-0.03em]">7일 이내 전액 청약철회</h2>
              <p className="mt-3 text-[15px] leading-8 text-[#5f6f89]">
                결제일로부터 7일 이내이고 해당 결제기간에 메일 송수신 등 유료 서비스를 사용하지 않은 경우 전액 환불을 요청할 수 있습니다. 사용 이력이 있으면 이용분을 제외한 잔여기간을 기준으로 계산합니다.
              </p>
            </section>
            <section className="py-8">
              <h2 className="text-[20px] font-bold tracking-[-0.03em]">환불 처리기간</h2>
              <p className="mt-3 text-[15px] leading-8 text-[#5f6f89]">
                회사가 환불을 승인하면 등록된 결제수단으로 취소합니다. 카드사 매입 이후의 취소 또는 부분 취소는 카드사 정책에 따라 영업일 기준 3~4일 정도 걸릴 수 있습니다.
              </p>
            </section>
            <section className="py-8">
              <h2 className="text-[20px] font-bold tracking-[-0.03em]">도메인 설정 대행</h2>
              <p className="mt-3 text-[15px] leading-8 text-[#5f6f89]">
                도메인 1개당 10,890원(VAT 포함)의 1회 서비스입니다. 작업 시작 전에는 전액 취소할 수 있으며, DNS 설정 작업이 완료된 뒤에는 서비스 하자나 중복 결제를 제외하고 환불되지 않습니다.
              </p>
            </section>
          </div>

          <section className="mt-10 rounded-[20px] bg-[#edf4ff] px-6 py-6 sm:px-8">
            <h2 className="text-[17px] font-bold text-[#214f9b]">문의 및 환불 요청</h2>
            <p className="mt-2 text-[14px] leading-7 text-[#4c6387]">
              결제 설정의 구독 관리 메뉴를 이용하거나{" "}
              <a href="mailto:admin@officialsite.kr" className="font-bold underline underline-offset-4">
                admin@officialsite.kr
              </a>
              로 대표 메일 주소와 요청 사유를 보내주세요.
            </p>
          </section>
        </div>
      </main>

      <SiteFooter className="border-t border-[#e7edf6] pt-10" />
    </div>
  );
}