---
import Base from '../layouts/Base.astro';
import PageHeader from '../components/PageHeader.astro';

import { deletionRow } from '../data/collection.mjs';
import { legal } from '../data/legal.mjs';
import { brand } from '../lib/brand.mjs';

/**
 * `/delete-account/` — the page Google Play is given for account deletion
 * (docs/website/ACCOUNT_DELETION.md §4.5, AD2).
 *
 * ---------------------------------------------------------------------------------------
 * IT EXPLAINS; IT CANNOT PERFORM
 * ---------------------------------------------------------------------------------------
 * Play needs one deletion address from whoever publishes the app, and that is us. But we
 * hold no account: every community runs its own site, and the account lives there. So this
 * page says where the button is on the website and in the app, what goes and what stays,
 * and who to ask when you cannot sign in, which is that community's operator and never us
 * (D86). We have no access to any community's site, so offering to help would promise
 * something we cannot do.
 *
 * What goes and what stays is not written here. It is the `deletion` row in
 * `src/data/collection.mjs`, the same row `/privacy` section 3 renders, so the two pages
 * cannot disagree about what a deletion takes.
 */
const title = 'Delete your account';
const description =
  `How to delete an account you use in the ${brand.siteName} Android app or on a ` +
  `${brand.siteName} community site, what is deleted, and what is kept.`;

const row = deletionRow();
const { goes, stays, staff } = row.deletion;

const surfaces = [
  {
    id: 'on-the-website',
    eyebrow: 'On the website',
    heading: 'Your community’s site',
    steps: [
      'Sign in to the site.',
      'Open “Account”. Staff open “Account” in the admin panel instead.',
      'Scroll to the bottom, to “Delete my account”, and press “Delete my account…”.',
      'Type your username, then your password, and a two-factor code if the account has two-factor sign-in on.',
      'Press “Delete my account”. You are signed out everywhere, and the site says the account has been deleted.',
    ],
  },
  {
    id: 'in-the-app',
    eyebrow: 'In the app',
    heading: `The ${brand.siteName} app`,
    steps: [
      'Sign in, if you are not already.',
      'Open the menu and choose “My account”.',
      'Scroll to the bottom and tap “Delete my account…”.',
      'Type your username, then your password, and a two-factor code if the account has two-factor sign-in on.',
      'Tap “Delete my account”. The app forgets the account and returns to sign-in, saying it has been deleted.',
    ],
  },
];
---

<Base title={title} description={description}>
  <PageHeader eyebrow="Account deletion" title="Deleting your account">
    <p>
      For the {brand.siteName} Android app, and for the community sites it connects to. We
      are {brand.siteName}, the project that makes both.
    </p>
    <p>
      You can delete your account yourself, on the website or in the app. It is deleted at
      once: there is no waiting period and nothing to cancel.
    </p>
  </PageHeader>

  <section class="page section legal-meta">
    <p class="legal-meta__line">
      <span class="chip chip--version">Last updated {legal.lastUpdated}</span>
      <a class="legal-meta__link" href="/privacy/#deployments">The same list is on the privacy page</a>
    </p>
  </section>

  <section class="page section">
    <div class="panel del-who">
      <h2>Your account is with your community, not with us</h2>
      <p>
        The app ships pointed at nothing. On first run it asks for the address of a
        {' '}{brand.siteName} site, and that site is run by whoever runs that community. Your
        account lives there, under their control. We hold no account for you and have no
        copy of one, so the deletion happens on that site, and you are the one who does it.
      </p>
    </div>
  </section>

  <section class="page section" id="how">
    <h2 class="del-h2">How to delete it</h2>
    <p class="prose del-lede">
      The same steps on both, and either one deletes the account everywhere: deleting it in
      the app also deletes it on the website, and the other way round.
    </p>

    <div class="del-grid">
      {
        surfaces.map((surface) => (
          <div class="panel del-surface" id={surface.id}>
            <p class="eyebrow">{surface.eyebrow}</p>
            <h3>{surface.heading}</h3>
            <ol class="del-steps">
              {surface.steps.map((step) => (
                <li>{step}</li>
              ))}
            </ol>
          </div>
        ))
      }
    </div>

    <ul class="del-notes">
      <li>
        <strong>A password is required.</strong> If you only ever signed in with Google,
        Discord or Steam and never set a password, set one in the Password section of the
        same page first.
      </li>
      <li>
        <strong>The only admin cannot delete themselves.</strong> Make someone else an admin
        first, so the site is never left with nobody to run it.
      </li>
    </ul>
  </section>

  <section class="page section" id="what-goes">
    <div class="del-cols">
      <div class="panel del-list">
        <p class="eyebrow">Deleted</p>
        <h2>What goes with the account</h2>
        <ul>
          {goes.map((item) => <li>{item[0].toUpperCase() + item.slice(1)}.</li>)}
        </ul>
        <p class="del-list__foot">{row.retention.detail}</p>
      </div>

      <div class="panel del-list">
        <p class="eyebrow">Kept</p>
        <h2>What stays, and for how long</h2>
        <ul class="del-kept">
          {
            stays.map((entry) => (
              <li>
                {entry.what}
                <span class="del-kept__keep">
                  <span class="del-kept__label">How long</span>
                  {entry.keep}
                </span>
              </li>
            ))
          }
        </ul>
        <p class="del-list__foot">{staff}</p>
      </div>
    </div>
  </section>

  <section class="page section" id="cannot-sign-in">
    <div class="panel del-who">
      <h2>If you cannot sign in</h2>
      <ol class="del-steps">
        <li>
          Use “Forgot your password?” on the sign-in page, on the website or in the app. It
          works if your account has an email address and the site can send email.
        </li>
        <li>
          Otherwise, ask the community that runs the site. Its operator can delete any
          account from the admin panel, and the result is the same as deleting it yourself.
        </li>
      </ol>
      <p class="del-who__note">
        We cannot do it for you. We hold no account, and we have no access to any
        community’s site.
      </p>
    </div>
  </section>
</Base>

<style>
  /* The header strip, as /privacy and /terms render it. Astro scopes component styles, so
     each legal page carries its own copy (see the note in terms.astro). */
  /* Unlike /privacy, a panel follows the strip directly, so it keeps some room below. */
  .legal-meta {
    padding-top: 0;
    padding-bottom: 1.25rem;
  }

  .legal-meta__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
  }

  .legal-meta__link {
    color: var(--dim);
    font-size: 0.9rem;
  }

  .del-h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  }

  .del-lede {
    margin: 0 0 1.75rem;
    color: var(--muted);
  }

  /* The two panels that frame the page: who holds the account, and who to ask. Gold edge,
     as /app's prerequisite panel, because each is a fact about the product rather than a
     warning. */
  .del-who {
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-color: var(--gold-deep);
  }

  .del-who h2 {
    margin: 0 0 0.7rem;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
  }

  .del-who p,
  .del-who li {
    max-width: var(--measure);
    color: var(--muted);
  }

  .del-who p {
    margin: 0;
  }

  /* The one sentence a reader who skims must not miss, so it is brighter than the rest. */
  .del-who .del-who__note {
    margin-top: 1rem;
    color: var(--ink);
  }

  .del-grid,
  .del-cols {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  }

  .del-surface,
  .del-list {
    padding: clamp(1.1rem, 3vw, 1.75rem);
  }

  .del-surface h3 {
    margin: 0 0 0.8rem;
    font-size: 1.15rem;
  }

  .del-list h2 {
    margin: 0 0 0.8rem;
    font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  }

  .del-steps {
    margin: 0;
    padding-left: 1.3rem;
    color: var(--muted);
    font-size: 0.97rem;
  }

  .del-steps li + li {
    margin-top: 0.45rem;
  }

  .del-notes {
    margin: 1.25rem 0 0;
    padding-left: 1.2rem;
    max-width: var(--measure);
    color: var(--muted);
    font-size: 0.95rem;
  }

  .del-notes li + li {
    margin-top: 0.5rem;
  }

  .del-list ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    font-size: 0.95rem;
  }

  .del-list li + li {
    margin-top: 0.5rem;
  }

  .del-kept li + li {
    margin-top: 0.9rem;
  }

  .del-kept__keep {
    display: block;
    margin-top: 0.3rem;
    color: var(--dim);
    font-size: 0.88rem;
  }

  .del-kept__label {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .del-list__foot {
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-soft);
    color: var(--dim);
    font-size: 0.88rem;
  }
</style>