import { useTranslation } from "react-i18next";
import Navbar from "../Components/Navbar/Navbar";
import Footer from "../Components/Footer/Footer";

const PP = () => {
     const { t } = useTranslation("PP")
    
  return (
    <div className="min-h-screen">
      <Navbar />
      <div className="container mx-auto px-4 py-12">
        <h1 className="text-3xl font-bold text-center mb-6">{t("pp.pageTitle")}</h1>
        <div className="shadow-md rounded-lg p-8">
          <p className="mb-4">{t("pp.lastUpdated")}</p>
          <p className="mb-4">{t("pp.introText")}</p>
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp1.title")}</h2>
          {t("pp.pp1.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp2.title")}</h2>
          {t("pp.pp2.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp3.title")}</h2>
          {t("pp.pp3.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp4.title")}</h2>
          {t("pp.pp4.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp5.title")}</h2>
          {t("pp.pp5.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp6.title")}</h2>
          {t("pp.pp6.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp7.title")}</h2>
          {t("pp.pp7.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp8.title")}</h2>
          {t("pp.pp8.desc").split("\n\n").map((paragraph, index) => (
            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
              <span key={index}>{line}<br/></span>
            ))}</p>
          ))}
        </div>
      </div>
      <Footer/>
    </div>
  );
};

export default PP;