grain-pwa / src / components / pages / grain-privacy.js

import { LitElement, html, css } from 'lit';
import '../atoms/grain-icon.js';

export class GrainPrivacy extends LitElement {
  static styles = css`
    :host {
      display: block;
      width: 100%;
      max-width: var(--feed-max-width);
      min-height: 100%;
      padding-bottom: 80px;
      background: var(--color-bg-primary);
      align-self: center;
    }
    .header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-sm);
    }
    @media (min-width: 600px) {
      .header {
        padding-left: 0;
        padding-right: 0;
      }
    }
    .back-button {
      background: none;
      border: none;
      padding: 8px;
      cursor: pointer;
      color: var(--color-text-primary);
      margin-left: -8px;
    }
    h1 {
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin: 0;
    }
    .content {
      padding: 0 var(--space-sm);
    }
    @media (min-width: 600px) {
      .content {
        padding: 0;
      }
    }
    .last-updated {
      font-size: var(--font-size-xs);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-lg);
    }
    section {
      margin-bottom: var(--space-lg);
    }
    h2 {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin: 0 0 var(--space-xs) 0;
    }
    p {
      font-size: var(--font-size-xs);
      color: var(--color-text-secondary);
      line-height: 1.5;
      margin: 0 0 var(--space-sm) 0;
    }
    a {
      color: var(--color-accent);
    }
    code {
      background: var(--color-bg-elevated);
      padding: 2px 4px;
      border-radius: 4px;
      font-size: var(--font-size-xs);
    }
  `;

  #goBack() {
    history.back();
  }

  render() {
    return html`
      <div class="header">
        <button class="back-button" @click=${this.#goBack}>
          <grain-icon name="back" size="20"></grain-icon>
        </button>
        <h1>Privacy Policy</h1>
      </div>
      <div class="content">
        <p class="last-updated">Last Updated: June 3, 2025</p>

        <section>
          <h2>Data Storage and Access</h2>
          <p>
            Your data is stored on the AT Protocol. If you use a <code>grain.social</code> handle,
            it may be stored on our PDS. We do not store or access data beyond the protocol's standard behavior.
          </p>
        </section>

        <section>
          <h2>Public Data</h2>
          <p>
            All content on Grain is public. Private uploads are not currently supported.
          </p>
        </section>

        <section>
          <h2>EXIF Metadata</h2>
          <p>
            We optionally collect and display EXIF metadata from your photos. At upload time, you can choose
            whether to allow this metadata to be collected. The metadata is stored according to standard
            AT Protocol storage mechanisms and is not retained outside the protocol or used for other purposes.
            We do not collect GPS or location data from your photos.
          </p>
          <p>
            You can learn more about the types of metadata commonly embedded in photos at
            <a href="https://exiv2.org/tags.html" target="_blank" rel="noopener noreferrer">exiv2.org</a>.
          </p>
        </section>

        <section>
          <h2>Analytics</h2>
          <p>
            We use <a href="https://www.goatcounter.com/" target="_blank" rel="noopener noreferrer">Goatcounter</a>
            for analytics. It is privacy-focused: no IP addresses, cookies, or personal data is collected.
          </p>
        </section>

        <section>
          <h2>No Ads or Tracking</h2>
          <p>
            We do not serve ads, use third-party tracking, or sell user data.
          </p>
        </section>

        <section>
          <h2>Children's Privacy</h2>
          <p>
            Grain is not intended for users under 13 years of age.
          </p>
        </section>

        <section>
          <h2>Changes to Policy</h2>
          <p>
            This policy may be updated. Material changes will be communicated via the app or site.
          </p>
        </section>

        <section>
          <h2>Contact</h2>
          <p>
            For privacy questions, contact us at
            <a href="mailto:[e-mail]">[e-mail]</a>.
          </p>
        </section>
      </div>
    `;
  }
}

customElements.define('grain-privacy', GrainPrivacy);