// app/privacy/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "개인정보 처리방침 | Talkbaram",
  description: "Talkbaram의 개인정보 처리방침",
};

const sections = [
  { id: "intro", title: "1. 총칙" },
  { id: "collect", title: "2. 수집하는 개인정보 항목과 방법" },
  { id: "use", title: "3. 개인정보의 이용 목적" },
  { id: "retention", title: "4. 보유 및 이용기간" },
  { id: "third", title: "5. 제3자 제공 및 처리위탁" },
  { id: "rights", title: "6. 이용자 및 법정대리인의 권리" },
  { id: "security", title: "7. 안전성 확보조치" },
  { id: "overseas", title: "8. 국외 이전(해당 시)" },
  { id: "contact", title: "9. 문의처" },
  { id: "update", title: "10. 고지의 의무" },
];

export default function PrivacyPage() {
  return (
    <main className="h-screen bg-white overflow-y-auto">
      <section className="mx-auto max-w-3xl px-4 py-12">
        {/* Header */}
        <header className="mb-8 rounded-2xl border bg-gray-50 p-6 shadow-sm">
          <h1 className="text-2xl font-bold tracking-tight">개인정보 처리방침</h1>
          <p className="mt-2 text-sm text-gray-600">
            everflow(이하 “회사”)은 이용자의 개인정보를 소중히 여기며 관련 법령을 준수합니다.
          </p>
          <div className="mt-3 inline-flex items-center gap-2 rounded-xl bg-white px-3 py-1.5 text-xs text-gray-500 ring-1 ring-gray-200">
            <span>시행일</span>
            <span className="font-medium">2025-08-01</span>
            <span className="mx-1">•</span>
            <span>최종 업데이트</span>
            <span className="font-medium">2025-08-20</span>
          </div>
        </header>

        {/* TOC */}
        <nav className="mb-10 grid gap-2 rounded-2xl border p-4 text-sm shadow-sm">
          <span className="mb-1 font-semibold text-gray-700">목차</span>
          <ul className="grid grid-cols-1 gap-1 sm:grid-cols-2">
            {sections.map((s) => (
              <li key={s.id}>
                <a
                  href={`#${s.id}`}
                  className="inline-block rounded-lg px-2 py-1 hover:bg-gray-50 hover:text-gray-900 text-gray-600"
                >
                  {s.title}
                </a>
              </li>
            ))}
          </ul>
        </nav>

        {/* Body */}
        <article className="space-y-10">
          <section id="intro" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[0].title}</h2>
            <p className="mt-3 leading-7 text-gray-700">
              본 처리방침은 서비스 제공과정에서 처리되는 개인정보의 수집·이용·보관·파기 등 전반을 설명합니다.
            </p>
          </section>

          <section id="collect" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[1].title}</h2>
            <div className="mt-3 grid gap-4">
              <div className="rounded-xl border p-4">
                <h3 className="font-medium">수집 항목(필수)</h3>
                <ul className="mt-2 list-disc pl-5 text-gray-700">
                  <li>계정: 이메일, 비밀번호(또는 OAuth 식별자)</li>
                  <li>서비스 이용기록: 접속 일시, IP, 기기/브라우저 정보</li>
                </ul>
              </div>
              <div className="rounded-xl border p-4">
                <h3 className="font-medium">수집 항목(선택)</h3>
                <ul className="mt-2 list-disc pl-5 text-gray-700">
                  <li>프로필: 이름, 프로필 이미지, 연락처</li>
                  <li>마케팅 수신 동의 여부</li>
                </ul>
              </div>
              <div className="rounded-xl border p-4">
                <h3 className="font-medium">수집 방법</h3>
                <p className="mt-2 text-gray-700">
                  회원가입, 서비스 이용 중 생성, 고객문의 처리, 제휴를 통한 수집(사전 동의 기반) 등
                </p>
              </div>
            </div>
          </section>

          <section id="use" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[2].title}</h2>
            <ul className="mt-3 list-disc pl-5 text-gray-700 leading-7">
              <li>서비스 제공 및 유지·관리</li>
              <li>고객문의 응대, 공지사항 전달</li>
              <li>보안, 부정사용 방지, 서비스 품질 개선 및 통계</li>
              <li>이벤트/마케팅 안내(별도 동의 시)</li>
            </ul>
          </section>

          <section id="retention" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[3].title}</h2>
            <p className="mt-3 text-gray-700">
              원칙적으로 목적 달성 시 즉시 파기합니다. 단, 관계 법령에 따라 아래 기간 보관할 수 있습니다.
            </p>
            <ul className="mt-2 list-disc pl-5 text-gray-700">
              <li>계약/청약철회 기록: 5년</li>
              <li>대금 결제 및 재화 공급 기록: 5년</li>
              <li>소비자 불만 또는 분쟁 처리 기록: 3년</li>
              <li>로그기록/IP 등 통신사실 확인자료: 3개월</li>
            </ul>
          </section>

          <section id="third" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[4].title}</h2>
            <p className="mt-3 text-gray-700">
              법령 근거 또는 이용자 동의가 있는 경우에 한해 제3자 제공 또는 처리위탁을 할 수 있습니다.
            </p>
            <div className="mt-3 rounded-xl border p-4">
              <h3 className="font-medium">처리위탁(예시)</h3>
              <ul className="mt-2 list-disc pl-5 text-gray-700">
                <li>인프라 운영: 클라우드 호스팅 사업자</li>
                <li>알림/이메일 발송: 메시징 서비스 사업자</li>
              </ul>
            </div>
          </section>

          <section id="rights" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[5].title}</h2>
            <p className="mt-3 text-gray-700">
              이용자는 언제든지 개인정보 조회·수정·삭제·처리정지를 요청할 수 있습니다. 계정 메뉴 또는 아래
              문의처를 통해 요청하실 수 있습니다.
            </p>
          </section>

          <section id="security" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[6].title}</h2>
            <ul className="mt-3 list-disc pl-5 text-gray-700">
              <li>암호화 전송 및 저장</li>
              <li>접근권한 최소화 및 접근통제</li>
              <li>정기적 보안 점검 및 교육</li>
            </ul>
          </section>

          <section id="overseas" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[7].title}</h2>
            <p className="mt-3 text-gray-700">
              국외 이전이 필요한 경우 이전받는 자, 이전국가, 이전 일시/방법, 보유·이용기간 등을 사전에 고지하고 동의를 받습니다.
            </p>
          </section>

          <section id="contact" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[8].title}</h2>
            <div className="mt-3 rounded-xl border p-4">
              <p className="text-gray-700">
                개인정보 보호책임자: <span className="font-medium">홍길동</span>
              </p>
              <p className="text-gray-700">
                이메일: <a href="mailto:privacy@talkbaram.com" className="underline">privacy@talkbaram.com</a>
              </p>
              <p className="text-gray-700">주소: 서울특별시 …</p>
            </div>
          </section>

          <section id="update" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[9].title}</h2>
            <p className="mt-3 text-gray-700">
              본 처리방침이 변경되는 경우, 시행 7일 전(중요 변경 시 30일 전) 서비스 공지사항을 통해 안내합니다.
            </p>
          </section>
        </article>

        {/* Footer CTA */}
        <footer className="mt-12 flex items-center justify-between rounded-2xl border bg-gray-50 p-5">
          <span className="text-sm text-gray-600">
            본 문서는 안내용 템플릿입니다. 서비스 실정에 맞게 수정하세요.
          </span>
          <a
            href="/terms"
            className="rounded-xl bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-black"
          >
            서비스 약관 보기
          </a>
        </footer>
      </section>
    </main>
  );
}