---
import Title from '~/components/Title.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'

const locale = getLocale(Astro)

const {
  routes: { privacyPolicy },
  layout,
} = getUI(locale)
---

<Layout title={layout.privacyPolicy.title} description={layout.privacyPolicy.description}>
  <main class="mx-auto mt-52 w-1/2 pb-24">
    <Title id="privacy-policy" class="xl:text-6xl">{privacyPolicy.title}</Title>
    <div class="ml-4 font-bold">{privacyPolicy.lastUpdated}</div>
    <Title class="mt-16 text-4xl font-bold" id="introduction">
      {privacyPolicy.sections.introduction.title}
    </Title>
    <p>{privacyPolicy.sections.introduction.body}</p>
    <div class="mx-12 my-12 flex gap-4 font-bold">
      {privacyPolicy.sections.introduction.summary}
    </div>
    <Title class="mt-16 text-4xl font-bold" id="1-information-we-do-not-collect">
      {privacyPolicy.sections.noCollect.title}
    </Title>
    <p>{privacyPolicy.sections.noCollect.body}</p>
    <h3 class="mt-4 text-xl font-bold" id="-1-1-no-telemetry-">
      <strong class="font-bold">{privacyPolicy.sections.noTelemetry.title}</strong>
    </h3>
    <p>{privacyPolicy.sections.noTelemetry.body}</p>
    <p>{privacyPolicy.sections.noTelemetry.body2}</p>
    <h3 class="mt-4 text-xl font-bold" id="-1-2-no-personal-data-collection-">
      <strong class="font-bold">{privacyPolicy.sections.noPersonalData.title}</strong>
    </h3>
    <p>{privacyPolicy.sections.noPersonalData.body}</p>
    <h3 class="mt-4 text-xl font-bold" id="-1-4-no-third-party-tracking-">
      <strong class="font-bold">{privacyPolicy.sections.noThirdParty.title}</strong>
    </h3>
    <p>{privacyPolicy.sections.noThirdParty.body}</p>
    <h3 class="mt-4 text-xl font-bold" id="-1-3-no-third-party-tracking-">
      <strong class="font-bold">{privacyPolicy.sections.externalConnections.title}</strong>
    </h3>
    <p>{privacyPolicy.sections.externalConnections.body}</p>
    <Title class="mt-16 text-4xl font-bold" id="2-information-stored-locally-on-your-device">
      {privacyPolicy.sections.localStorage.title}
    </Title>
    <h3 class="mt-4 text-xl font-bold" id="-2-1-browsing-data-">
      <strong class="font-bold">{privacyPolicy.sections.browsingData.title}</strong>
    </h3>
    <p>{privacyPolicy.sections.browsingData.body}</p>
    <ul>
      <li>
        <strong class="font-bold">{privacyPolicy.sections.cookies.title}</strong>: {
          privacyPolicy.sections.cookies.body
        }
      </li>
      <li>
        <strong class="font-bold">{privacyPolicy.sections.cache.title}</strong>: {
          privacyPolicy.sections.cache.body
        }
      </li>
    </ul>
    <h3 class="mt-4 text-xl font-bold" id="-2-2-settings-and-preferences-">
      <strong class="font-bold">{privacyPolicy.sections.settings.title}</strong>
    </h3>
    <p>{privacyPolicy.sections.settings.body}</p>
    <Title class="mt-16 text-4xl font-bold" id="3-sync-feature">
      {privacyPolicy.sections.sync.title}
    </Title>
    <p>{privacyPolicy.sections.sync.body}</p>
    <ul>
      <li>
        <a class="zen-link" href="https://www.mozilla.org/en-US/privacy/mozilla-accounts/"
          >{privacyPolicy.sections.sync.link1}</a
        >
      </li>
      <li>
        <a
          class="zen-link"
          href="https://support.mozilla.org/en-US/kb/how-firefox-securely-saves-passwords#:~:text=Firefox%20Desktop%20encrypts%20your%20passwords,cryptography%20to%20obscure%20your%20passwords."
          >{privacyPolicy.sections.sync.link2}</a
        >
      </li>
    </ul>
    <Title class="mt-16 text-4xl font-bold" id="4-add-ons-and-mods">
      {privacyPolicy.sections.addons.title}
    </Title>
    <p>{privacyPolicy.sections.addons.body}</p>
    <Title class="mt-16 text-4xl font-bold" id="5-data-security">
      {privacyPolicy.sections.security.title}
    </Title>
    <p>{privacyPolicy.sections.security.body}</p>
    <ul>
      <li>{privacyPolicy.sections.security.note}</li>
    </ul>
    <Title class="mt-16 text-4xl font-bold" id="6-your-control">
      {privacyPolicy.sections.control.title}
    </Title>
    <h3 class="mt-4 text-xl font-bold" id="-6-1-data-deletion-">
      <strong class="font-bold">{privacyPolicy.sections.control.deletionTitle}</strong>
    </h3>
    <p>{privacyPolicy.sections.control.deletionBody}</p>
    <Title class="mt-16 text-4xl font-bold" id="7-our-website-and-services">
      {privacyPolicy.sections.website.title}
    </Title>
    <p>{privacyPolicy.sections.website.body}</p>
    <h3 class="mt-4 text-xl font-bold" id="-7-1-external-links-">
      <strong class="font-bold">{privacyPolicy.sections.website.externalLinksTitle}</strong>
    </h3>
    <p>{privacyPolicy.sections.website.externalLinksBody}</p>
    <Title class="mt-16 text-4xl font-bold" id="8-changes-to-this-privacy-policy">
      {privacyPolicy.sections.changes.title}
    </Title>
    <p>
      {privacyPolicy.sections.changes.body}
    </p>
    <Title class="mt-16 text-4xl font-bold" id="9-other-telemetry-done-by-mozilla-firefox">
      {privacyPolicy.sections.otherTelemetry.title}
    </Title>
    <p>
      {privacyPolicy.sections.otherTelemetry.body}
    </p>
    <ul>
      <li>
        Please check <a class="zen-link" href="https://www.mozilla.org/en-US/privacy/"
          >{privacyPolicy.sections.otherTelemetry.firefoxPrivacyNotice}</a
        >
        {privacyPolicy.sections.otherTelemetry.forMoreInformation}
      </li>
    </ul>
    <Title class="mt-16 text-4xl font-bold" id="10-contact-us">
      {privacyPolicy.sections.contact.title}
    </Title>
    <p>
      {privacyPolicy.sections.contact.body}
    </p>
    <ul>
      <li>
        {privacyPolicy.sections.contact.discord}
        <a class="zen-link" href="https://discord.gg/zen-browser">
          {privacyPolicy.sections.contact.discordLink}
        </a>
      </li>
      <li>
        {privacyPolicy.sections.contact.github}
        <a class="zen-link" href="https://github.com/zen-browser">
          {privacyPolicy.sections.contact.githubLink}
        </a>
      </li>
    </ul>
  </main>
</Layout>
<style>
  p,
  li {
    @apply opacity-55;
  }

  ul {
    @apply mt-4;
  }

  li {
    @apply ml-4 list-disc;
  }
</style>
