'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useTranslation } from 'react-i18next'
import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import Footer from '@/components/Footer'

const SECTIONS_WITH_ITEMS = [1, 2, 3, 4, 5, 6, 7] as const
const SECTION_ITEM_COUNTS: Record<number, number> = { 1: 2, 2: 2, 3: 2, 4: 4, 5: 4, 6: 2, 7: 2 }
const SECTIONS_WITH_CONTENT = [8, 9, 10, 11, 12, 13, 14] as const

export default function TermsPage() {
    const { t } = useTranslation()
    const [sidebarOpen, setSidebarOpen] = useState(false)

    return (
        <div className="min-h-screen min-w-[375px] bg-white dark:bg-[#0c0d0e] text-[#17191c] dark:text-gray-50 flex overflow-x-auto transition-colors">
            <Sidebar mode="drawer" isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />

            <div className="flex-1 min-h-screen w-full max-w-full overflow-x-hidden">
                <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />

                <main className="pt-[65px] pb-12 md:pb-16 bg-gradient-to-b from-[#f0f2f7] to-[#f5f6fa] dark:from-[#08090c] dark:to-[#050608] min-h-[calc(100vh-65px)]">
                    <article className="max-w-3xl lg:max-w-none mx-auto px-4 sm:px-6 lg:px-8 pt-8 md:pt-12">
                        {/* Hero header */}
                        <header className="text-center mb-10 md:mb-14">
                            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-[#17191c] dark:text-white mb-3">
                                {t('common.terms')}
                            </h1>
                            <p className="text-base md:text-lg text-slate-600 dark:text-gray-400 max-w-xl mx-auto leading-relaxed">
                                {t('terms.intro')}
                            </p>
                        </header>

                        {/* Content card */}
                        <div className="bg-white dark:bg-[#0c0d0e] rounded-2xl border border-slate-200/80 dark:border-gray-800 shadow-sm dark:shadow-none overflow-hidden">
                            <div className="p-6 sm:p-8 md:p-10 space-y-10 md:space-y-12">
                                {SECTIONS_WITH_ITEMS.map((n) => (
                                    <section key={n} className="space-y-3">
                                        <h2 className="text-lg font-semibold text-[#17191c] dark:text-white flex items-center gap-2">
                                            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[#0182FF]/10 dark:bg-[#0182FF]/20 text-[#0182FF] text-sm font-bold">{n}</span>
                                            {t(`terms.section${n}.title`)}
                                        </h2>
                                        <ul className="space-y-2.5 pl-9 list-none">
                                            {Array.from({ length: SECTION_ITEM_COUNTS[n] }, (_, i) => i + 1).map((i) => (
                                                <li key={i} className="relative text-[15px] leading-relaxed text-slate-600 dark:text-gray-400 pl-4 before:absolute before:left-0 before:top-[0.55em] before:h-1.5 before:w-1.5 before:rounded-full before:bg-[#0182FF]/70 dark:before:bg-[#0182FF]/80">
                                                    {t(`terms.section${n}.item${i}`)}
                                                </li>
                                            ))}
                                        </ul>
                                    </section>
                                ))}

                                {SECTIONS_WITH_CONTENT.map((n) => (
                                    <section key={n} className="space-y-3">
                                        <h2 className="text-lg font-semibold text-[#17191c] dark:text-white flex items-center gap-2">
                                            <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[#0182FF]/10 dark:bg-[#0182FF]/20 text-[#0182FF] text-sm font-bold">{n}</span>
                                            {t(`terms.section${n}.title`)}
                                        </h2>
                                        <p className="text-[15px] leading-relaxed text-slate-600 dark:text-gray-400 pl-9">
                                            {t(`terms.section${n}.content`)}
                                        </p>
                                    </section>
                                ))}

                                <section className="space-y-3">
                                    <h2 className="text-lg font-semibold text-[#17191c] dark:text-white flex items-center gap-2">
                                        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[#0182FF]/10 dark:bg-[#0182FF]/20 text-[#0182FF] text-sm font-bold">15</span>
                                        {t('terms.section15.title')}
                                    </h2>
                                    <p className="text-[15px] leading-relaxed text-slate-600 dark:text-gray-400 pl-9">
                                        <Link href="mailto:support@gplive.com" className="text-[#0182FF] dark:text-blue-400 hover:underline">
                                            support@gplive.com
                                        </Link>
                                    </p>
                                </section>
                            </div>
                        </div>
                    </article>
                </main>

                <Footer />
            </div>
        </div>
    )
}