// src/pages/PrivacyPage.tsx
import React, {useEffect} from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { useSingleton } from "cms/factory";
import { DocumentRenderer, DocumentRendererProps } from "@keystone-6/document-renderer";
import arrowRight from "../../imgs/arrow_right.svg";
import { s_Text40_700, s_Text24_700, s_f_Text18_400, Text18_500, Text24_500 } from "../Typography";

type CmsPrivacy = {
  id: string;
  title: string;
  content?: { document: { content: any } } | null;
};

const PRIVACY_SEL = `
  id
  title
  content { document }
`;

const Privacy: React.FC = () => {
  const { data: privacy } = useSingleton<CmsPrivacy>("Privacy", PRIVACY_SEL);

  useEffect(() => {
    if (privacy?.title) {
      document.title = privacy.title;
    } else {
      document.title = "Privacy Policy";
    }
  }, [privacy?.title]);

  return (
    <>
      <Wrap>
        <BackBtn as={Link} to="/">
          <ArrowIcon src={arrowRight} alt="Back" />
          Back
        </BackBtn>
        {privacy?.content && (
          <DocumentRenderer
            document={privacy.content?.document as unknown as DocumentRendererProps["document"]}
            renderers={{
              block: {
                heading: ({ level, children }) => {
                  if (level === 1) return <Title as="h1">{children}</Title>;
                  if (level === 2) return <SubTitle as="h2">{children}</SubTitle>;
                  if (level === 3) return <SubSubTitle as="h3">{children}</SubSubTitle>;
                  return <p>{children}</p>;
                },
                paragraph: ({ children }) => <Paragraph>{children}</Paragraph>,
              },
              inline: {
                link: ({ children, href }) => (
                  <a
                    href={href}
                    style={{ color: "#16a34a", textDecoration: "underline" }}
                  >
                    {children}
                  </a>
                ),
              },
            }}
          />
        )}
      </Wrap>
      
    </>
  );
};

export default Privacy;

/* ================= styles ================= */

const Wrap = styled.div`
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  text-align: left;
`;

const BackBtn = styled(Text24_500)`
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  cursor: pointer;
  color: #1d2023;
  text-decoration: none;
`;

const ArrowIcon = styled.img`
  width: 5px;
  height: 10px;
  transform: rotate(180deg); /* отзеркалили */
  margin-right:8px;
`;


const Title = styled(s_Text40_700)`
  margin-bottom: 24px;
  text-align: left;
`;

const SubTitle = styled(s_Text24_700)`
  margin: 24px 0 16px;
  text-align: left;
`;

const SubSubTitle = styled(s_f_Text18_400)`
  margin: 16px 0 12px;
  font-weight: 700;
  text-align: left;
`;

const Paragraph = styled.p`
  font-family: "GTAmerica", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 16px;
  @media (max-width: 768px) {
    font-size: 16px;
    line-height: 20px;
  }
`;


