'use client'

import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import { useGetSiteSetting } from './hooks/usePrivacyData'
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import { ShieldTick } from 'iconsax-react'
import Link from 'next/link'

const PrivacyPage: NextPage = () => {

    const { data } = useGetSiteSetting('policyContent')

    return (
        <Layout>
            <div className="mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 max-w-full overflow-x-hidden">
                {/* Breadcrumb */}
                <div className="mb-6 sm:mb-8">
                    <Breadcrumb>
                        <BreadcrumbList>
                            <BreadcrumbItem>
                                <BreadcrumbLink asChild>
                                    <Link href="/" className="text-gray-600 hover:text-gray-800">
                                        خانه
                                    </Link>
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            <BreadcrumbSeparator className='rotate-180' />
                            <BreadcrumbItem>
                                <BreadcrumbPage className="text-gray-800 font-medium">
                                    حریم خصوصی
                                </BreadcrumbPage>
                            </BreadcrumbItem>
                        </BreadcrumbList>
                    </Breadcrumb>
                </div>

                {/* عنوان اصلی */}
                <div className="text-center mb-8 sm:mb-12">
                    <div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-primary/10 rounded-full mb-4 sm:mb-6">
                        <ShieldTick
                            color='#DA2129'
                            size={32}
                            className="sm:w-10 sm:h-10 text-primary"
                        />
                    </div>
                    <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 mb-3 sm:mb-4">
                        سیاست‌های حفظ حریم خصوصی
                    </h1>
                    <p className="text-gray-600 text-sm sm:text-base max-w-2xl mx-auto leading-relaxed">
                        اطلاعاتی درباره نحوه جمع‌آوری، استفاده و حفاظت از داده‌های شخصی شما در پلتفرم ما
                    </p>
                </div>

                <Separator className="mb-8 sm:mb-12" />

                {/* محتوای اصلی */}
                {data?.results ? (
                    <div className="bg-white rounded-lg border border-gray-100 shadow-sm p-4 sm:p-6 lg:p-8">
                        <div
                            className="prose prose-sm sm:prose-base lg:prose-lg prose-gray max-w-none
                                prose-headings:text-gray-800 prose-headings:font-bold
                                prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-4
                                prose-li:text-gray-700 prose-li:leading-relaxed
                                prose-strong:text-gray-800 prose-strong:font-semibold
                                prose-ul:space-y-2 prose-ol:space-y-2"
                            dangerouslySetInnerHTML={{ __html: data.results.siteSetting.policyContent }}
                        />
                    </div>
                ) : (
                    <div className="bg-white rounded-lg border border-gray-100 shadow-sm p-8 text-center">
                        <div className="inline-flex items-center justify-center w-12 h-12 bg-gray-100 rounded-full mb-4">
                            <ShieldTick size={20} className="text-gray-400" />
                        </div>
                        <p className="text-gray-500 text-sm sm:text-base">
                            در حال بارگذاری اطلاعات...
                        </p>
                    </div>
                )}

                {/* بخش تماس برای سوالات بیشتر */}
                <div className="mt-8 sm:mt-12 bg-gradient-to-r from-primary/5 to-primary/10 rounded-lg p-4 sm:p-6 lg:p-8 text-center">
                    <h3 className="text-lg sm:text-xl font-semibold text-gray-800 mb-3 sm:mb-4">
                        سوالی دارید؟
                    </h3>
                    <p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed max-w-2xl mx-auto">
                        اگر در مورد سیاست‌های حفظ حریم خصوصی سوال یا نگرانی دارید،
                        می‌توانید با تیم پشتیبانی ما تماس بگیرید.
                    </p>
                    <Link
                        href="/contact"
                        className="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg hover:bg-primary/90 transition-colors text-sm sm:text-base font-medium"
                    >
                        تماس با ما
                    </Link>
                </div>
            </div>
        </Layout>
    )
}

export default PrivacyPage
