import React from 'react';
import { useTranslation } from 'react-i18next';

// Helper to safely get array translations
const getItems = (value: unknown): string[] => {
  return Array.isArray(value) ? value : [];
};

const PrivacyPolicyPage: React.FC = () => {
  const { t } = useTranslation();

  return (
    <div>
      {/* Header Section */}
      <section className="py-20 lg:py-28 bg-gradient-to-br from-white via-brand-50/30 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
            {t('marketing.privacyPolicy.title')}
          </h1>
          <p className="text-xl text-gray-600 dark:text-gray-400">
            {t('marketing.privacyPolicy.lastUpdated')}
          </p>
        </div>
      </section>

      {/* Content Section */}
      <section className="py-16 bg-white dark:bg-gray-900">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="prose prose-lg dark:prose-invert max-w-none">

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section1.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section1.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section2.title')}</h2>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mt-6 mb-3">{t('marketing.privacyPolicy.section2.subsection1.title')}</h3>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.privacyPolicy.section2.subsection1.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section2.subsection1.items', { returnObjects: true })).map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mt-6 mb-3">{t('marketing.privacyPolicy.section2.subsection2.title')}</h3>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.privacyPolicy.section2.subsection2.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section2.subsection2.items', { returnObjects: true })).map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section3.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.privacyPolicy.section3.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section3.items', { returnObjects: true })).map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section4.title')}</h2>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mt-6 mb-3">{t('marketing.privacyPolicy.section4.subsection1.title')}</h3>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section4.subsection1.items', { returnObjects: true })).map((item, index) => (
                // Content from translation files (trusted source, not user input)
                <li key={index} dangerouslySetInnerHTML={{ __html: item }} />
              ))}
            </ul>

            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mt-6 mb-3">{t('marketing.privacyPolicy.section4.subsection2.title')}</h3>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section4.subsection2.items', { returnObjects: true })).map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section5.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.privacyPolicy.section5.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section5.items', { returnObjects: true })).map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section5.disclaimer')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section6.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section6.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section7.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.privacyPolicy.section7.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section7.items', { returnObjects: true })).map((item, index) => (
                // Content from translation files (trusted source, not user input)
                <li key={index} dangerouslySetInnerHTML={{ __html: item }} />
              ))}
            </ul>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section7.contact')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section8.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              {t('marketing.privacyPolicy.section8.intro')}
            </p>
            <ul className="list-disc pl-6 text-gray-600 dark:text-gray-400 mb-6">
              {getItems(t('marketing.privacyPolicy.section8.items', { returnObjects: true })).map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section8.disclaimer')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section9.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section9.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section10.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section10.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section11.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section11.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section12.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section12.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section13.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section13.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section14.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section14.content')}
            </p>

            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4">{t('marketing.privacyPolicy.section15.title')}</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              {t('marketing.privacyPolicy.section15.intro')}
            </p>
            <p className="text-gray-600 dark:text-gray-400 mb-2">
              <strong>{t('marketing.privacyPolicy.section15.emailLabel')}</strong> {t('marketing.privacyPolicy.section15.email')}
            </p>
            <p className="text-gray-600 dark:text-gray-400 mb-2">
              <strong>{t('marketing.privacyPolicy.section15.dpoLabel')}</strong> {t('marketing.privacyPolicy.section15.dpo')}
            </p>
            <p className="text-gray-600 dark:text-gray-400 mb-6">
              <strong>{t('marketing.privacyPolicy.section15.websiteLabel')}</strong> {t('marketing.privacyPolicy.section15.website')}
            </p>

          </div>
        </div>
      </section>
    </div>
  );
};

export default PrivacyPolicyPage;
