"use client";

import { Shield } from "lucide-react";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { useAuthStore } from "@/lib/store/auth-store";

interface PolicySection {
  titleHi: string;
  titleEn: string;
  contentHi: string[];
  contentEn: string[];
}

const sections: PolicySection[] = [
  {
    titleHi: "डेटा संग्रह",
    titleEn: "Data Collection",
    contentHi: [
      "हम आपके द्वारा पंजीकरण के समय दिया गया व्यक्तिगत डेटा एकत्र करते हैं, जैसे नाम, ईमेल, फ़ोन नंबर, संस्थान और पदनाम।",
      "शोधपत्र जमा करते समय आपके द्वारा अपलोड की गई फ़ाइलें और मेटाडेटा भी संग्रहित किया जाता है।",
      "मंच के उपयोग से सम्बंधित तकनीकी जानकारी जैसे IP पता, ब्राउज़र प्रकार और लॉग डेटा स्वतः एकत्र होता है।",
    ],
    contentEn: [
      "We collect personal data you provide during registration, such as name, email, phone number, institution, and designation.",
      "Files and metadata uploaded during paper submission are also stored.",
      "Technical information related to platform usage such as IP address, browser type, and log data is collected automatically.",
    ],
  },
  {
    titleHi: "डेटा का उपयोग",
    titleEn: "Data Usage",
    contentHi: [
      "आपका व्यक्तिगत डेटा खाता प्रबंधन, शोधपत्र समीक्षा प्रक्रिया और संचार के लिए उपयोग किया जाता है।",
      "हम आपके डेटा का उपयोग मंच को बेहतर बनाने और उपयोगकर्ता अनुभव में सुधार के लिए भी करते हैं।",
      "आपका डेटा बिना आपकी सहमति के किसी तीसरे पक्ष के साथ साझा नहीं किया जाता, सिवाय कानूनी आवश्यकताओं के।",
    ],
    contentEn: [
      "Your personal data is used for account management, the paper review process, and communication.",
      "We also use your data to improve the platform and enhance user experience.",
      "Your data is not shared with third parties without your consent, except as required by law.",
    ],
  },
  {
    titleHi: "डेटा भंडारण एवं सुरक्षा",
    titleEn: "Data Storage & Security",
    contentHi: [
      "आपका डेटा सुरक्षित सर्वरों पर एन्क्रिप्टेड रूप में संग्रहित किया जाता है।",
      "हम उद्योग-मानक सुरक्षा उपायों का उपयोग करते हैं जिसमें SSL/TLS एन्क्रिप्शन, एक्सेस कंट्रोल और नियमित सुरक्षा ऑडिट शामिल हैं।",
      "शोधपत्र और समीक्षा डेटा को प्रकाशन प्रक्रिया पूरी होने के बाद भी अभिलेखीय उद्देश्यों के लिए सुरक्षित रखा जाता है।",
    ],
    contentEn: [
      "Your data is stored in encrypted form on secure servers.",
      "We use industry-standard security measures including SSL/TLS encryption, access controls, and regular security audits.",
      "Paper and review data is retained for archival purposes even after the publication process is complete.",
    ],
  },
  {
    titleHi: "उपयोगकर्ता अधिकार",
    titleEn: "User Rights",
    contentHi: [
      "आपको अपने व्यक्तिगत डेटा तक पहुँच, उसमें सुधार और उसे हटाने का अधिकार है।",
      "आप किसी भी समय अपने खाते को निष्क्रिय कर सकते हैं और डेटा हटाने का अनुरोध कर सकते हैं।",
      "प्रकाशित शोधपत्रों के संदर्भ में, शैक्षणिक अभिलेख की अखंडता बनाए रखने के लिए कुछ डेटा बनाए रखा जा सकता है।",
      "किसी भी गोपनीयता सम्बंधी प्रश्न या अनुरोध के लिए कृपया privacy@shodhsanchayan.org पर संपर्क करें।",
    ],
    contentEn: [
      "You have the right to access, correct, and delete your personal data.",
      "You can deactivate your account at any time and request data deletion.",
      "For published papers, some data may be retained to maintain the integrity of the academic record.",
      "For any privacy-related questions or requests, please contact privacy@shodhsanchayan.org.",
    ],
  },
];

export default function PrivacyPage() {
  const language = useAuthStore((s) => s.language);
  const hi = language === "hi";

  return (
    <div className="min-h-[60vh] bg-gray-50">
      {/* Header */}
      <section className="bg-indigo-600 py-12 text-white">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <Breadcrumb
            items={[
              { label: hi ? "होम" : "Home", href: "/" },
              { label: hi ? "गोपनीयता नीति" : "Privacy Policy" },
            ]}
          />
          <div className="mt-6 text-center">
          <Shield className="mx-auto h-10 w-10 mb-3" />
          <h1 className="text-3xl font-bold">
            {hi ? "गोपनीयता नीति" : "Privacy Policy"}
          </h1>
          <p className="mt-2 text-indigo-100">
            {hi
              ? "आपकी गोपनीयता हमारे लिए महत्वपूर्ण है"
              : "Your privacy is important to us"}
          </p>
        </div>
        </div>

      </section>

      <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8 space-y-10">
        <p className="text-sm text-gray-500">
          {hi ? "अंतिम अद्यतन: मार्च 2026" : "Last updated: March 2026"}
        </p>

        {sections.map((section, i) => (
          <section key={i}>
            <h2 className="text-xl font-bold text-gray-900 mb-3">
              {`${i + 1}. ${hi ? section.titleHi : section.titleEn}`}
            </h2>
            <div className="rounded-lg bg-white p-6 shadow-sm border border-gray-200">
              <ul className="space-y-3">
                {(hi ? section.contentHi : section.contentEn).map((item, j) => (
                  <li key={j} className="flex gap-2 text-sm text-gray-700 leading-relaxed">
                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-500" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}