frontend/src/pages/Privacy.jsx

import React from "react";
import privacyPolicyData from "../data/privacyPolicyData";

const PrivacyPolicyPage = () => {
  return (
    <div className="container" style={{ margin: '0 auto', padding: '24px', maxWidth: '1200px' }}>
      {/* Title */}
      <header>
        <h1 style={{ fontSize: '2.5rem', fontWeight: '600', color: '#3267B9', marginBottom: '1rem', textAlign: 'center' }}>
          {privacyPolicyData.title}
        </h1>
      </header>

      {/* Introduction */}
      <section id="introduction" style={{ marginBottom: '2rem' }}>
        <p style={{ fontSize: '1.1rem', color: '#A0AEC0', lineHeight: '1.6' }}>
          <strong>Introduction:</strong> {privacyPolicyData.introduction}
        </p>
        <p style={{ fontSize: '1.1rem', color: '#A0AEC0', lineHeight: '1.6' }}>
          <strong>Consent:</strong> {privacyPolicyData.consentMessage}
        </p>
      </section>

      {/* Table of Contents */}
      <section id="table-of-contents" style={{ marginBottom: '2rem' }}>
        <h2 style={{ fontSize: '1.75rem', fontWeight: '600', color: 'white', marginBottom: '1rem' }}>Table of Contents</h2>
        <ul style={{ listStyleType: 'none', paddingLeft: '0' }}>
          {privacyPolicyData.tableOfContents.map((item, index) => (
            <li key={index} style={{ marginBottom: '0.75rem' }}>
              <a href={item.link} style={{ fontSize: '1.1rem', color: '#3267B9', textDecoration: 'none' }}>
                {item.title}
              </a>
            </li>
          ))}
        </ul>
      </section>

      {/* Privacy Policy Content */}
      <section id="privacy-policy-content" style={{ marginBottom: '3rem' }}>
        <h2 style={{ fontSize: '1.75rem', fontWeight: '600', color: 'white', marginBottom: '1.5rem' }}>
          Privacy Policy Details
        </h2>

        {/* Definitions */}
        <section id="definitions" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            Definitions used in this Policy
          </h3>
          <dl style={{ color: '#A0AEC0', marginLeft: '1rem' }}>
            {privacyPolicyData.sections.definitions.map((item, index) => (
              <div key={index} style={{ marginBottom: '1rem' }}>
                <dt style={{ fontWeight: '600', color: '#3267B9', fontSize: '1.2rem' }}>{item.term}</dt>
                <dd style={{ fontSize: '1rem', marginLeft: '1.5rem' }}>{item.definition}</dd>
              </div>
            ))}
          </dl>
        </section>

        {/* Data Protection Principles */}
        <section id="data-protection-principles" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            Data protection principles we follow
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'disc', color: '#A0AEC0' }}>
            {privacyPolicyData.sections.dataProtectionPrinciples.map((principle, index) => (
              <li key={index} style={{ marginBottom: '0.75rem', fontSize: '1rem' }}>{principle}</li>
            ))}
          </ul>
        </section>

        {/* Data Subject Rights */}
        <section id="data-subject-rights" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            What rights do you have regarding your Personal Data
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'none', color: '#A0AEC0' }}>
            {Object.entries(privacyPolicyData.sections.dataSubjectRights).map(([key, value], index) => (
              <li key={index} style={{ marginBottom: '1rem', fontSize: '1rem' }}>
                <strong style={{ color: '#3267B9' }}>{key}:</strong> {value}
              </li>
            ))}
          </ul>
        </section>

        {/* Data We Gather */}
        <section id="data-we-gather" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            What Personal Data we gather about you
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'disc', color: '#A0AEC0' }}>
            {privacyPolicyData.sections.dataWeGather.map((data, index) => (
              <li key={index} style={{ marginBottom: '0.75rem', fontSize: '1rem' }}>{data}</li>
            ))}
          </ul>
        </section>

        {/* How We Use Data */}
        <section id="how-we-use-data" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            How we use your Personal Data
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'disc', color: '#A0AEC0' }}>
            {privacyPolicyData.sections.howWeUseData.map((usage, index) => (
              <li key={index} style={{ marginBottom: '0.75rem', fontSize: '1rem' }}>{usage}</li>
            ))}
          </ul>
        </section>

        {/* Who Can Access Data */}
        <section id="who-can-access" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            Who else has access to your Personal Data
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'disc', color: '#A0AEC0' }}>
            {privacyPolicyData.sections.whoCanAccessData.map((access, index) => (
              <li key={index} style={{ marginBottom: '0.75rem', fontSize: '1rem' }}>{access}</li>
            ))}
          </ul>
        </section>

        {/* How We Secure Data */}
        <section id="how-we-secure-data" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            How we secure your data
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'disc', color: '#A0AEC0' }}>
            {privacyPolicyData.sections.howWeSecureData.map((security, index) => (
              <li key={index} style={{ marginBottom: '0.75rem', fontSize: '1rem' }}>{security}</li>
            ))}
          </ul>
        </section>

        {/* Children Section */}
        <section id="children" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            Children's Privacy
          </h3>
          <p style={{ fontSize: '1rem', color: '#A0AEC0' }}>{privacyPolicyData.sections.children[0]}</p>
        </section>

        {/* Cookies and Technologies */}
        <section id="cookies-and-technologies" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            Information about cookies
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'disc', color: '#A0AEC0' }}>
            {privacyPolicyData.sections.cookiesAndTechnologies.map((cookie, index) => (
              <li key={index} style={{ marginBottom: '0.75rem', fontSize: '1rem' }}>{cookie}</li>
            ))}
          </ul>
        </section>

        {/* Contact Information */}
        <section id="contact-information" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            Contact Information
          </h3>
          <p style={{ fontSize: '1rem', color: '#A0AEC0' }}>
            If you have any questions, contact us at <a href={`mailto:${privacyPolicyData.sections.contactInformation.supervisoryAuthority}`} style={{ color: '#3267B9' }}>
              {privacyPolicyData.sections.contactInformation.supervisoryAuthority}
            </a>
          </p>
        </section>

        {/* Changes to Policy */}
        <section id="changes-to-policy" style={{ marginBottom: '2rem' }}>
          <h3 style={{ fontSize: '1.5rem', fontWeight: '600', color: 'white' }}>
            Changes to this Privacy Policy
          </h3>
          <ul style={{ paddingLeft: '1.5rem', listStyleType: 'disc', color: '#A0AEC0' }}>
            {privacyPolicyData.sections.changesToPolicy.map((change, index) => (
              <li key={index} style={{ marginBottom: '0.75rem', fontSize: '1rem' }}>{change}</li>
            ))}
          </ul>
        </section>
      </section>
    </div>
  );
};

export default PrivacyPolicyPage;