import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Layout from "../components/layout";

// Importamos ambas versiones de la política
import { policy as policyES } from "../../public/locales/es/policy";
import { policy as policyEN } from "../../public/locales/en/policy";

const PolicyPage = ({ currentPolicy }) => {
  const { t: translate } = useTranslation();

  const blocks = currentPolicy.split("\n\n");

  return (
    <Layout title={translate("footer.privacy") || "Privacy Policy"}>
      <div className="layout py-10">
        <h2 className="font-inter font-bold text-2xl py-2">
          {translate("footer.privacy") || "Privacy Policy"}
        </h2>
        <div className="space-y-4">
          {blocks.map((block, index) => {
            const cleaned = block.trim();
            const isTitle =
              cleaned.length < 100 && /^[A-ZÁÉÍÓÚÑ0-9 ,.-]+$/.test(cleaned);

            if (isTitle) {
              return (
                <h3
                  key={index}
                  className="font-semibold text-lg pt-6 border-t border-gray-200"
                >
                  {cleaned}
                </h3>
              );
            }

            return <p key={index}>{cleaned.replace(/\n/g, " ")}</p>;
          })}
        </div>
      </div>
    </Layout>
  );
};

export async function getStaticProps({ locale }) {
  const currentPolicy = locale === "en" ? policyEN : policyES;

  return {
    props: {
      ...(await serverSideTranslations(locale)),
      currentPolicy,
    },
  };
}

export default PolicyPage;
