"use client";
import Image from "next/image";

import CommonBanner from "../../../components/CommonBanner";
import CtaSection from "../../../components/CtaSection";
import { useModal } from "../../../lib/modal-system/ModalContext";
import useFetchPrivacyPolicy from "../../../hooks/features/public/useFetchPrivacyPolicy";
import RichText from "../../../components/ui/RichText";
import SomethingWentWrong from "../../../components/SomethingWentWrong";

export default function PrivacyPolicyPage() {
  const { openModal } = useModal();
  const { content, loading, error, isError } = useFetchPrivacyPolicy();

  if (loading) {
    return <PrivacyPolicySkeleton />;
  }

  if (isError) {
    return <SomethingWentWrong />;
  }

  return (
    <>
      <div className="relative overflow-hidden pt-36 md:pt-40 xl:pt-44 2xl:pt-48">
        <div className="absolute inset-0 -z-10">
          <Image
            src="/images/common-banner-bg.png"
            alt="Hero Background"
            fill
            priority
            className="object-cover"
          />
        </div>

        <CommonBanner
          badge="Privacy Policy"
          // title='Privacy <span class="text-gradient">Policy</span>'
        />

        <RichText
          content={content}
          className="container-k pb-16 md:pb-20 xl:pb-28"
        />
      </div>
    </>
  );
}

function PrivacyPolicySkeleton() {
  return (
    <div className="animate-pulse">
      <div className="relative overflow-hidden">
        {/* Background placeholder */}
        <div className="absolute inset-0 -z-10 bg-gray-200" />

        {/* Banner Skeleton */}
        <section className="container-k py-16 md:py-20 xl:py-28">
          <div className="mx-auto max-w-4xl text-center">
            {/* Badge */}
            <div className="mx-auto mb-6 h-9 w-36 rounded-full bg-gray-200" />

            {/* Title */}
            <div className="mx-auto h-12 w-80 max-w-full rounded bg-gray-200 md:h-16 md:w-130" />

            {/* Optional subtitle/description */}
            <div className="mx-auto mt-6 space-y-3">
              <div className="mx-auto h-5 w-96 max-w-full rounded bg-gray-200" />
              <div className="mx-auto h-5 w-72 rounded bg-gray-200" />
            </div>
          </div>
        </section>
      </div>

      {/* Content Skeleton */}
      <div className="container-k py-16 md:py-20 xl:py-28 space-y-8">
        <div className="space-y-4">
          <div className="h-6 w-48 rounded bg-gray-200" />
          <div className="h-4 w-full rounded bg-gray-200" />
          <div className="h-4 w-full rounded bg-gray-200" />
          <div className="h-4 w-3/4 rounded bg-gray-200" />
        </div>
        <div className="space-y-4">
          <div className="h-6 w-64 rounded bg-gray-200" />
          <div className="h-4 w-full rounded bg-gray-200" />
          <div className="h-4 w-full rounded bg-gray-200" />
          <div className="h-4 w-5/6 rounded bg-gray-200" />
          <div className="h-4 w-2/3 rounded bg-gray-200" />
        </div>
        <div className="space-y-4">
          <div className="h-6 w-40 rounded bg-gray-200" />
          <div className="h-4 w-full rounded bg-gray-200" />
          <div className="h-4 w-1/2 rounded bg-gray-200" />
        </div>
      </div>
    </div>
  );
}
