// LinkedClean — Privacidade page

function LCPrivacidade() {
  const { LCB, LCBHeadline } = window;

  const H2 = ({ children, mt = 56 }) => (
    <h2 style={{
      fontFamily: LCB.fontSans,
      fontSize: 32, fontWeight: 700,
      letterSpacing: '-0.025em', lineHeight: 1.15,
      color: LCB.ink, margin: `${mt}px 0 24px`,
    }}>{children}</h2>
  );

  const P = ({ children }) => (
    <p style={{
      fontFamily: LCB.fontSans,
      fontSize: 18, lineHeight: 1.65,
      color: LCB.ink60,
      letterSpacing: '-0.005em',
      margin: '0 0 18px',
    }}>{children}</p>
  );

  const Code = ({ children }) => (
    <code style={{
      fontFamily: LCB.fontMono, fontSize: '0.92em',
      color: LCB.ink, background: LCB.ink05,
      padding: '2px 6px', borderRadius: 4,
      letterSpacing: 0,
    }}>{children}</code>
  );

  const dontList = [
    'Não manda o conteúdo dos posts pra servidor nenhum.',
    'Não tem analytics. Sem Google Analytics, sem Mixpanel, sem pixel.',
    'Não pede login. Conta não existe.',
    <>Não toca em outra aba ou site. Só roda no feed (<Code>www.linkedin.com/feed/*</Code>).</>,
    'Não usa a API do LinkedIn. Só esconde elementos no DOM da página.',
  ];

  const perms = [
    {
      name: 'host_permissions: www.linkedin.com/feed/*',
      desc: 'Pra rodar o detector no feed do LinkedIn. A extensão não tem acesso a outras páginas (perfis, empresas, vagas, mensagens).',
    },
    {
      name: 'storage',
      desc: 'Pra guardar categorias ligadas e contadores localmente. Nada sincronizado.',
    },
    {
      name: 'activeTab',
      desc: 'Pra mostrar o pop-up quando você clica no ícone.',
    },
  ];

  return (
    <div>
      {/* HERO */}
      <section style={{
        background: '#FFFFFF',
        paddingTop: 96, paddingBottom: 96,
        paddingLeft: 56, paddingRight: 56,
        textAlign: 'center',
      }}>
        <div style={{ maxWidth: 1000, margin: '0 auto' }}>
          <div style={{
            fontFamily: LCB.fontSans,
            fontSize: 11, fontWeight: 600, color: LCB.ink60,
            textTransform: 'uppercase', letterSpacing: '0.14em',
            marginBottom: 24,
          }}>Privacidade</div>

          <LCBHeadline size={72} align="center" maxWidth={900}>
            Tudo roda no seu navegador
          </LCBHeadline>

          <p style={{
            fontFamily: LCB.fontSans,
            fontSize: 22, fontWeight: 400,
            color: LCB.ink60, lineHeight: 1.4,
            letterSpacing: '-0.01em',
            margin: '28px auto 0', maxWidth: 680,
          }}>
            Sem servidor. Sem login. Sem analytics. Nada do que você lê no LinkedIn sai do seu navegador.
          </p>
        </div>
      </section>

      {/* CORPO */}
      <section style={{
        background: LCB.paper,
        paddingTop: 96, paddingBottom: 96,
        paddingLeft: 56, paddingRight: 56,
        borderTop: `1px solid ${LCB.ink10}`,
      }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <H2 mt={0}>O que a extensão faz</H2>
          <P>
            Quando você abre o LinkedIn, o detector roda no seu navegador. Lê o conteúdo dos posts visíveis, classifica em uma das categorias, e se a categoria estiver ligada, esconde o post na página.
          </P>
          <P>
            Suas preferências (categorias ligadas, contadores) ficam em <Code>chrome.storage.local</Code>. Local ao navegador. Não sincroniza. Não sai.
          </P>

          <H2>O que ela não faz</H2>
          <ul style={{
            margin: 0, padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            {dontList.map((item, i) => (
              <li key={i} style={{
                fontFamily: LCB.fontSans,
                fontSize: 18, lineHeight: 1.6,
                color: LCB.ink60,
                letterSpacing: '-0.005em',
                display: 'flex', gap: 12, alignItems: 'baseline',
              }}>
                <span style={{
                  color: LCB.ink, fontWeight: 700, flexShrink: 0,
                  fontSize: 14, lineHeight: 1.6,
                }}>✕</span>
                <span>{item}</span>
              </li>
            ))}
          </ul>

          <H2>Permissões</H2>
          <P>
            Quando você instala, o Chrome lista o que a extensão pede. É isso aqui:
          </P>
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 18,
            marginTop: 8,
          }}>
            {perms.map((p, i) => (
              <div key={i} style={{
                background: '#FFFFFF',
                border: `1px solid ${LCB.ink10}`,
                borderRadius: LCB.rMd,
                padding: '18px 20px',
              }}>
                <div style={{
                  fontFamily: LCB.fontMono, fontSize: 13, fontWeight: 600,
                  color: LCB.ink, marginBottom: 6,
                  letterSpacing: 0,
                }}>{p.name}</div>
                <div style={{
                  fontFamily: LCB.fontSans, fontSize: 15,
                  color: LCB.ink60, lineHeight: 1.5,
                  letterSpacing: '-0.005em',
                }}>{p.desc}</div>
              </div>
            ))}
          </div>

          <H2>Como verificar</H2>
          <P>
            Abre o DevTools enquanto usa. Na aba <Code>Network</Code>: nenhuma requisição saindo pra servidor da gente. Na aba <Code>Application</Code>: só preferências locais.
          </P>
          <P>
            A única permissão de host é o feed do LinkedIn (<Code>www.linkedin.com/feed/*</Code>). Sem histórico, sem outras páginas do LinkedIn, sem outros sites.
          </P>

          <H2>Contato</H2>
          <P>
            Achou algo errado ou quer reportar vulnerabilidade?{' '}
            <a href="mailto:hello@linkedclean.app" style={{
              color: LCB.ink, textDecoration: 'underline', fontWeight: 500,
            }}>hello@linkedclean.app</a>.
          </P>
          <P>
            Se um dia mudar algo aqui (telemetria, login, qualquer coisa), vai estar escrito nesta página com a versão em que mudou, e vai ser opt-in explícito. Nunca por default.
          </P>

          <div style={{
            marginTop: 56,
            paddingTop: 24,
            borderTop: `1px solid ${LCB.ink10}`,
            fontFamily: LCB.fontMono, fontSize: 12,
            color: LCB.ink40, letterSpacing: 0,
          }}>
            Última atualização: {window.LC_LAST_UPDATED} · v{window.LC_VERSION}
          </div>
        </div>
      </section>
    </div>
  );
}
window.LCPrivacidade = LCPrivacidade;