//! Unified Privacy Page Component

use leptos::prelude::*;
use rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;

#[component]
pub fn UnifiedPrivacyPage(
    #[prop(default = rustelo_core_lib::config::get_default_language().to_string())]
    _language: String,
    #[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
) -> impl IntoView {
    // Clean closure pattern that works with Leptos ownership model
    // Use DRY content accessor helper
    let content = create_content_provider_reactive(lang_content.clone());

    view! {
        <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-900">
          <div class="container mx-auto px-4 py-16">
            <div class="max-w-4xl mx-auto">
              // Header
              <div class="text-center mb-ds-12">
                <h1 class="text-4xl md:text-5xl font-bold ds-text dark:ds-text mb-ds-4">
                  {content.t("privacy-title")}
                </h1>
                <p class="text-xl ds-text-secondary mb-2">
                  {content.t("privacy-subtitle")}
                </p>
                <p class="ds-caption ds-text-muted">
                  {content.t("privacy-effective-date")}
                </p>
              </div>

              // Content
              <div class="ds-bg ds-rounded-xl shadow-xl p-8 md:p-12">
                <div class="prose prose-lg dark:prose-invert max-w-none">
                  <p class="ds-body ds-text-secondary mb-8 leading-relaxed">
                    {content.t("privacy-intro")}
                  </p>

                  // Information We Collect
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("privacy-information-we-collect")}
                  </h2>

                  <h3 class="ds-heading-4 ds-text mt-ds-6 mb-3">
                    {content.t("privacy-information-you-provide")}
                  </h3>
                  <ul class="list-disc list-inside ds-text-secondary mb-ds-4 space-y-ds-2">
                    <li>{content.t("privacy-information-you-provide-text")}</li>
                    <li>{content.t("privacy-project-details-text")}</li>
                    <li>{content.t("privacy-communication-preferences-text")}</li>
                  </ul>

                  <h3 class="ds-heading-4 ds-text mt-ds-6 mb-3">
                    {content.t("privacy-automatically-collected-information")}
                  </h3>
                  <ul class="list-disc list-inside ds-text-secondary mb-6 space-y-ds-2">
                    <li>{content.t("privacy-website-usage-data")}</li>
                    <li>{content.t("privacy-technical-information-ip")}</li>
                    <li>{content.t("privacy-cookies-tracking")}</li>
                  </ul>

                  // How We Use Your Information
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("privacy-how-we-use-information")}
                  </h2>
                  <p class="ds-text-secondary mb-ds-4">
                    {content.t("privacy-how-we-use-text")}
                  </p>
                  <ul class="list-disc list-inside ds-text-secondary mb-6 space-y-ds-2">
                    <li>{content.t("privacy-respond-to-inquiries")}</li>
                    <li>{content.t("privacy-improve-website")}</li>
                    <li>{content.t("privacy-send-updates")}</li>
                    <li>{content.t("privacy-ensure-security")}</li>
                    <li>{content.t("privacy-comply-legal")}</li>
                  </ul>

                  // Your Rights
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("privacy-your-rights")}
                  </h2>
                  <p class="ds-text-secondary mb-ds-4">
                    {content.t("privacy-your-rights-text")}
                  </p>
                  <ul class="list-disc list-inside ds-text-secondary mb-6 space-y-ds-2">
                    <li>{content.t("privacy-access-review")}</li>
                    <li>{content.t("privacy-request-corrections")}</li>
                    <li>{content.t("privacy-request-deletion")}</li>
                    <li>{content.t("privacy-opt-out-marketing")}</li>
                  </ul>

                  // Contact Information
                  <h2 class="text-2xl font-bold ds-text dark:ds-text mt-8 mb-ds-4">
                    {content.t("privacy-contact-us")}
                  </h2>
                  <p class="ds-text-secondary mb-ds-4">
                    {content.t("privacy-contact-privacy-text")}
                  </p>
                  <div class=" ds-rounded-lg p-4 mb-6">
                    <p class="ds-text-secondary"><strong>{content.t("privacy-email")}:</strong> {content.t("legal-contact-email")}</p>
                    <p class="ds-text-secondary"><strong>{content.t("privacy-address")}:</strong> {content.t("legal-business-address")}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    }
}
