import { policy } from '../consts/policy';

function PolicyPage() {
  return (
    <div className="grid grid-cols-12 py-10 gap-y-10">
      <p className="col-span-8 font-medium heading1">
        
        Политика в отношении обработки персональных данных
      </p>
      <p className="col-span-8 text2">
        Настоящая политика обработки персональных данных составлена в
        соответствии с требованиями Федерального закона от 27.07.2006. № 152-ФЗ
        "О персональных данных" (далее — Закон о персональных данных) и
        определяет порядок обработки персональных данных и меры по обеспечению
        безопасности персональных данных. Предпринимает их "ГРАФФИНТЕРАКТИВ"
        (далее — Оператор).
      </p>
      <ol className="grid grid-cols-4 col-span-full gap-x-4">
        {policy.map(({ content, title }, index) => (
          <PolicyItem
            content={content}
            index={index}
            title={title}
            key={index}
          />
        ))}
      </ol>
      <div className="flex flex-col col-span-8 gap-y-2">
        <p className="font-medium heading2">Сведения об операторе:</p>
        <div className="col-span-8 text2">
          <p>ООО «ГРАФФИНТЕРАКТИВ»</p> <p>ИНН 6679043968</p>
          <p>Адрес: г. Екатеринбург, ул. Московская 47, офис 33 </p>
        </div>
      </div>
    </div>
  );
}

function PolicyItem({
  content,
  title,
  index,
}: {
  title: string;
  index: number;
  content: (
    | string
    | { title: string; content: string[]; enumeration?: boolean }
  )[];
}) {
  return (
    <li className="col-span-full grid grid-cols-4 py-6 border-t border-[#3D425C] last:border-b">
      <p className="col-span-1 pr-5 font-medium heading2">
        {index + 1}. {title}
      </p>
      <div className="col-span-2 col-start-2 space-y-4 text2">
        {content.map((item, index1) =>
          typeof item !== 'string' ? (
            <div className="space-y-2" key={index1}>
              <p className="flex gap-x-1">
                <span>
                  {index + 1}.{index1 + 1}.
                </span>
                {item.title}
              </p>
              {item.content.map((contentItem, index2) => (
                <p className="flex gap-x-1 ml-[44px]" key={index2}>
                  {item.enumeration ? (
                    <span>
                      {index + 1}.{index1 + 1}.{index2 + 1}
                    </span>
                  ) : (
                    <span>•</span>
                  )}
                  {contentItem}
                </p>
              ))}
            </div>
          ) : (
            <p key={index} className="flex gap-x-1">
              <span>
                {index + 1}.{index1 + 1}
              </span>
              {item}
            </p>
          ),
        )}
      </div>
    </li>
  );
}

export default PolicyPage;
