// "use client";
// import React, { useEffect, useState } from "react";
// import { useTranslations } from "next-intl";
// import { getSettingBySlug } from "@/lib/actions/globalSettingsActions";
// import { toast, ToastContainer } from "react-toastify";
// import { getStoredLocale } from "@/lib/getLocale";

// export default function PrivacyPolicy() {
//   const t = useTranslations();
//   const [privacyPolicy, setPrivacyPolicy] = useState<any>(null);
//   const locale = getStoredLocale();

//   useEffect(() => {
//     (async () => {
//       try {
//         const slug = "privacy-policy";
//         const result = await getSettingBySlug(slug);
//         setPrivacyPolicy(result?.data?.setting);
//       } catch (error: any) {
//         toast.error(
//           error?.response?.data?.message ||
//             t("validation.error_getting_privacy_policy")
//         );
//       }
//     })();
//   }, [locale]);

//   return (
//     <>
//       <ToastContainer />
//       <div className="mb-5">
//         <h2 className="text-4xl font-bold mb-2">
//           {privacyPolicy?.display_name || t("privacy.privacy_policy_title")}
//         </h2>
//         <div
//           className="text-neutrals600 text-sm"
//           dangerouslySetInnerHTML={{
//             __html: privacyPolicy?.value || t("privacy.privacy_policy_description"),
//           }}
//         />
//       </div>
//     </>
//   );
// }


"use client";
import React, { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { getSettingBySlug } from "@/lib/actions/globalSettingsActions";
import { toast, ToastContainer } from "react-toastify";
import { getStoredLocale } from "@/lib/getLocale";
import { Shield, Lock, Eye, FileText, Clock, Mail } from "lucide-react";

export default function PrivacyPolicy() {
  const t = useTranslations();
  const [privacyPolicy, setPrivacyPolicy] = useState<any>({
    display_name: "Privacy Policy",
    value: ``
  });
  const locale = getStoredLocale();
  const isRTL = locale === 'ar' || locale === 'he' || locale === 'fa' || locale === 'ur';

  useEffect(() => {
    (async () => {
      try {
        const slug = "privacy-policy";
        const result = await getSettingBySlug(slug);
        if (result?.data?.setting) {
          setPrivacyPolicy(result.data.setting);
        }
      } catch (error: any) {
        toast.error(
          error?.response?.data?.message ||
            t("validation.error_getting_privacy_policy")
        );
      }
    })();
  }, [locale]);

  const features = [
    {
      icon: <Shield className="w-5 h-5 sm:w-6 sm:h-6" />,
      title: "Data Protection",
      description: "Your information is protected with industry-standard security"
    },
    {
      icon: <Lock className="w-5 h-5 sm:w-6 sm:h-6" />,
      title: "Secure Storage",
      description: "All data is encrypted and stored securely"
    },
    {
      icon: <Eye className="w-5 h-5 sm:w-6 sm:h-6" />,
      title: "Transparency",
      description: "Clear information about how we use your data"
    },
    {
      icon: <FileText className="w-5 h-5 sm:w-6 sm:h-6" />,
      title: "Your Rights",
      description: "Full control over your personal information"
    }
  ];

  return (
    <>
      <ToastContainer />
      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-darkbg dark:to-background" dir={isRTL ? 'rtl' : 'ltr'}>
        
        {/* Header Section */}
        <div className="bg-primary500 dark:bg-primary400 text-white px-6">
          <div className="max-w-w1660 mx-auto py-12 sm:py-16">
            <div className="flex flex-row items-center gap-2 mb-4">
              <Shield className="w-8 h-8 sm:w-10 sm:h-10 flex-shrink-0" />
              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold">
                {privacyPolicy?.display_name || t("privacy.privacy_policy_title")}
              </h1>
            </div>
            <p className="text-blue-100 dark:text-blue-200 text-base sm:text-lg max-w-2xl">
              We are committed to protecting your privacy and ensuring the security of your personal information.
            </p>
            <div className="flex items-center gap-2 mt-6 text-blue-100 dark:text-blue-200">
              <Clock className="w-4 h-4" />
              <span className="text-sm">Last Updated: December 24, 2025</span>
            </div>
          </div>
        </div>

        <div className="px-6">
          <div className="max-w-w1660 mx-auto">
              {/* Features Grid */}
              <div className="-mt-8 sm:-mt-12 mb-8 sm:mb-12">
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                  {features.map((feature, index) => (
                    <div
                      key={index}
                      className="bg-white dark:bg-card rounded-xl p-5 sm:p-6 shadow-lg hover:shadow-xl dark:shadow-none dark:border dark:border-darkborder transition-all duration-300"
                    >
                      <div className="w-10 h-10 sm:w-12 sm:h-12 bg-primary100 dark:bg-primary400/20 rounded-lg flex items-center justify-center text-primary600 dark:text-primary300 mb-3 sm:mb-4">
                        {feature.icon}
                      </div>
                      <h3 className="font-semibold text-neutrals800 dark:text-white mb-1 text-sm sm:text-base">
                        {feature.title}
                      </h3>
                      <p className="text-xs sm:text-sm text-neutrals600 dark:text-neutrals400">
                        {feature.description}
                      </p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Main Content */}
              <div className="pb-12 sm:pb-16">
                <div className="bg-white dark:bg-card rounded-xl sm:rounded-2xl shadow-lg dark:shadow-none dark:border dark:border-darkborder p-5 sm:p-8">
                  {/* Table of Contents */}
                  <div className="bg-neutrals50 dark:bg-darkbg rounded-lg sm:rounded-xl p-4 mb-6 sm:mb-8">
                    <h2 className="font-semibold text-base sm:text-lg text-neutrals800 dark:text-white mb-3 flex items-center gap-2">
                      <FileText className="w-4 h-4 sm:w-5 sm:h-5" />
                      Table of Contents
                    </h2>
                    <ul className={`space-y-2 text-xs sm:text-sm text-neutrals700 dark:text-neutrals300 ${isRTL ? 'mr-4' : 'ml-4'}`}>
                      <li className="hover:text-primary600 dark:hover:text-primary400 cursor-pointer transition-colors">{isRTL ? '← ' : '→ '}Information We Collect</li>
                      <li className="hover:text-primary600 dark:hover:text-primary400 cursor-pointer transition-colors">{isRTL ? '← ' : '→ '}How We Use Your Information</li>
                      <li className="hover:text-primary600 dark:hover:text-primary400 cursor-pointer transition-colors">{isRTL ? '← ' : '→ '}Information Sharing and Disclosure</li>
                      <li className="hover:text-primary600 dark:hover:text-primary400 cursor-pointer transition-colors">{isRTL ? '← ' : '→ '}Data Security</li>
                      <li className="hover:text-primary600 dark:hover:text-primary400 cursor-pointer transition-colors">{isRTL ? '← ' : '→ '}Your Rights</li>
                      <li className="hover:text-primary600 dark:hover:text-primary400 cursor-pointer transition-colors">{isRTL ? '← ' : '→ '}Cookies and Tracking</li>
                      <li className="hover:text-primary600 dark:hover:text-primary400 cursor-pointer transition-colors">{isRTL ? '← ' : '→ '}Changes to This Policy</li>
                    </ul>
                  </div>

                  {/* Privacy Policy Content */}
                  <div 
                    className="privacy-content prose prose-sm sm:prose-base lg:prose-lg max-w-none dark:text-neutrals100"
                    dangerouslySetInnerHTML={{
                      __html: privacyPolicy?.value || "<p>Loading privacy policy...</p>",
                    }}
                  />

                  {/* Contact Section */}
                  <div className="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-neutrals200 dark:border-darkborder">
                    <div className="bg-gray-300/10 dark:bg-primary400/10 rounded-lg sm:rounded-xl p-4 sm:p-5">
                      <div className="flex flex-col sm:flex-row items-start gap-4">
                        <div className="w-10 h-10 sm:w-12 sm:h-12 bg-primary600 dark:bg-primary400 rounded-lg flex items-center justify-center text-white flex-shrink-0">
                          <Mail className="w-5 h-5 sm:w-6 sm:h-6" />
                        </div>
                        <div className="flex-1 w-full">
                          <h3 className="font-semibold text-neutrals800 dark:text-white mb-2 text-sm sm:text-base">
                            Questions About Privacy?
                          </h3>
                          <p className="text-neutrals700 dark:text-neutrals300 mb-4 text-xs sm:text-sm">
                            If you have any questions about this Privacy Policy or our data practices, please don't hesitate to contact us.
                          </p>
                          <button className="bg-primary600 dark:bg-primary400 text-white px-5 sm:px-6 py-2 sm:py-2.5 rounded-lg hover:bg-primary800 dark:hover:bg-primary600 transition-colors font-medium text-sm w-full sm:w-auto">
                            Contact Privacy Team
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>


        <style jsx>{`
          .privacy-content :global(h3) {
            color: #1E293B;
            font-size: 1.125rem;
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            padding-top: 1rem;
            border-top: 2px solid #E2E8F0;
          }

          :global(.dark) .privacy-content :global(h3) {
            color: #F1F5F9;
            border-top-color: #2e3242;
          }

          :global([dir="rtl"]) .privacy-content :global(h3) {
            text-align: right;
          }
          
          .privacy-content :global(h3:first-child) {
            margin-top: 0;
            border-top: none;
            padding-top: 0;
          }
          
          .privacy-content :global(p) {
            color: #475569;
            line-height: 1.7;
            margin-bottom: 1rem;
            font-size: 0.875rem;
          }

          :global(.dark) .privacy-content :global(p) {
            color: #CBD5E1;
          }

          :global([dir="rtl"]) .privacy-content :global(p) {
            text-align: right;
          }
          
          .privacy-content :global(ul) {
            color: #475569;
            margin-bottom: 1rem;
          }

          :global([dir="ltr"]) .privacy-content :global(ul) {
            margin-left: 1.25rem;
            margin-right: 0;
          }

          :global([dir="rtl"]) .privacy-content :global(ul) {
            margin-right: 1.25rem;
            margin-left: 0;
            text-align: right;
          }

          :global(.dark) .privacy-content :global(ul) {
            color: #CBD5E1;
          }
          
          .privacy-content :global(li) {
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
          }
          
          .privacy-content :global(strong) {
            color: #1E293B;
            font-weight: 600;
          }

          :global(.dark) .privacy-content :global(strong) {
            color: #F1F5F9;
          }

          @media (min-width: 640px) {
            .privacy-content :global(h3) {
              font-size: 1.25rem;
              margin-top: 2rem;
            }

            .privacy-content :global(li) {
              font-size: 0.9375rem;
            }

            :global([dir="ltr"]) .privacy-content :global(ul) {
              margin-left: 1.5rem;
            }
            
            :global([dir="rtl"]) .privacy-content :global(ul) {
              margin-right: 1.5rem;
            }
            
            .privacy-content :global(ul) {
              margin-bottom: 1.5rem;
            }

            .privacy-content :global(p) {
              font-size: 0.9375rem;
              line-height: 1.75;
              margin-bottom: 1.25rem;
            }
          }

          @media (min-width: 1024px) {
            .privacy-content :global(li) {
              font-size: 1rem;
            }

            .privacy-content :global(h3) {
              font-size: 1.5rem;
            }

            .privacy-content :global(p) {
              font-size: 1rem;
              line-height: 1.8;
              margin-bottom: 1.5rem;
            }
          }
        `}</style>
      </div>
    </>
  );
}