import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "서비스 이용약관 | Talkbaram",
  description: "Talkbaram의 서비스 이용약관",
};

const sections = [
  { id: "purpose", title: "1. 목적" },
  { id: "def", title: "2. 용어의 정의" },
  { id: "account", title: "3. 계정 및 인증" },
  { id: "service", title: "4. 서비스의 제공 및 변경" },
  { id: "user-duty", title: "5. 이용자의 의무" },
  { id: "fee", title: "6. 요금·결제·환불" },
  { id: "content", title: "7. 콘텐츠의 권리와 책임" },
  { id: "restriction", title: "8. 이용제한" },
  { id: "disclaimer", title: "9. 면책" },
  { id: "governing", title: "10. 준거법 및 분쟁" },
  { id: "notice", title: "11. 고지 및 약관변경" },
  { id: "contact", title: "12. 문의처" },
];

export default function TermsPage() {
  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="purpose" 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="def" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[1].title}</h2>
            <ul className="mt-3 list-disc pl-5 text-gray-700">
              <li>“서비스”: 회사가 제공하는 모든 제품 및 기능</li>
              <li>“이용자”: 약관에 동의하고 서비스를 이용하는 자</li>
              <li>“콘텐츠”: 이용자가 서비스에 업로드하거나 생성한 정보</li>
            </ul>
          </section>

          <section id="account" 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">
              <li>이용자는 정확한 정보를 제공하고, 계정 보안을 유지해야 합니다.</li>
              <li>OAuth 계정 연동 시 해당 제공자의 약관도 적용됩니다.</li>
            </ul>
          </section>

          <section id="service" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[3].title}</h2>
            <p className="mt-3 text-gray-700">
              회사는 안정적인 서비스를 위해 변경·중단·점검을 실시할 수 있으며, 중요한 변경은 사전 고지합니다.
            </p>
          </section>

          <section id="user-duty" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[4].title}</h2>
            <ul className="mt-3 list-disc pl-5 text-gray-700">
              <li>법령, 약관, 공지 준수</li>
              <li>타인의 권리를 침해하는 행위 금지(저작권, 개인정보 등)</li>
              <li>서비스의 비정상적 이용(역컴파일, 자동화 남용 등) 금지</li>
            </ul>
          </section>

          <section id="fee" 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="content" 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="restriction" 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="disclaimer" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[8].title}</h2>
            <ul className="mt-3 list-disc pl-5 text-gray-700">
              <li>천재지변, 네트워크 장애 등 불가항력에 대한 책임 제한</li>
              <li>이용자의 귀책 사유로 인한 손해에 대한 책임 제한</li>
            </ul>
          </section>

          <section id="governing" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[9].title}</h2>
            <p className="mt-3 text-gray-700">
              본 약관은 대한민국 법률에 따르며, 분쟁은 민사소송법상 관할 법원에 제기합니다.
            </p>
          </section>

          <section id="notice" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[10].title}</h2>
            <p className="mt-3 text-gray-700">
              약관의 변경은 시행 7일 전(중요 변경 시 30일 전) 공지합니다. 변경 이후에도 서비스를 계속 이용하면 변경에 동의한 것으로 봅니다.
            </p>
          </section>

          <section id="contact" className="scroll-mt-24">
            <h2 className="text-xl font-semibold">{sections[11].title}</h2>
            <div className="mt-3 rounded-xl border p-4">
              <p className="text-gray-700">
                고객센터: <a href="mailto:support@talkbaram.com" className="underline">support@talkbaram.com</a>
              </p>
              <p className="text-gray-700">운영시간: 평일 10:00 ~ 17:00 (점심 12:00 ~ 13:00)</p>
            </div>
          </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="/privacy"
            className="rounded-xl bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-black"
          >
            개인정보 처리방침 보기
          </a>
        </footer>
      </section>
    </main>
  );
}