/* global React, CookiesPage */

function PrivacyPage({ setPage, sub }) {
  if (sub === 'cookies') {
    return <CookiesPage setPage={setPage} />;
  }

  return (
    <section className="section container fade-in">
      <div className="eyebrow">Privacy & Cookies</div>
      <h1 style={{ marginTop: 6 }}>Privacy policy</h1>
      <p style={{ color: 'var(--muted)' }}><strong>Effective date:</strong> April 14, 2026</p>

      <div className="card" style={{ display: 'grid', gap: 14, marginTop: 12 }}>
        <section>
          <h3>1) Data controller and contact</h3>
          <p style={{ color: 'var(--subtle)' }}>
            ShasteGames (&quot;ShasteGames&quot;, &quot;we&quot;, &quot;us&quot;) is the data controller for processing described in this policy.
            For privacy requests, contact <a href="mailto:support@shastes.com">support@shastes.com</a>.
          </p>
        </section>

        <section>
          <h3>2) Data we collect</h3>
          <ul style={{ color: 'var(--subtle)', marginTop: 8 }}>
            <li><strong>Patreon OAuth profile data:</strong> account identifier and profile attributes returned by Patreon OAuth, plus your email if provided by Patreon.</li>
            <li><strong>Email address:</strong> used for account/support communication where available.</li>
            <li><strong>ShasteCoins state:</strong> wallet balance and related progression/account economy state.</li>
            <li><strong>Game progress data:</strong> saves, milestones, referral progress, achievements, and progression status.</li>
            <li><strong>Server log data:</strong> IP address and standard request metadata in server/security logs.</li>
            <li><strong>Analytics events:</strong> event telemetry associated with experiment/action #29 (for example, assignment and primary-action events).</li>
          </ul>
        </section>

        <section>
          <h3>3) Lawful bases</h3>
          <ul style={{ color: 'var(--subtle)', marginTop: 8 }}>
            <li><strong>Consent:</strong> for optional analytics cookies/events and related measurement where consent is required.</li>
            <li><strong>Legitimate interests:</strong> to run, secure, maintain, and improve ShasteGames, including fraud prevention, troubleshooting, account integrity, and service analytics that are strictly necessary for operations.</li>
          </ul>
        </section>

        <section>
          <h3>4) Retention</h3>
          <p style={{ color: 'var(--subtle)' }}>
            We retain account-related personal data while your account is active and for up to <strong>24 months after inactivity</strong>,
            unless a longer retention period is required for legal, security, or dispute-resolution reasons.
          </p>
        </section>

        <section>
          <h3>5) Processors and third parties</h3>
          <ul style={{ color: 'var(--subtle)', marginTop: 8 }}>
            <li><strong>Cloudflare</strong> (hosting/network/security services),</li>
            <li><strong>Patreon</strong> (OAuth identity/authentication),</li>
            <li><strong>Discord</strong> (community and support integrations, where used).</li>
          </ul>
        </section>

        <section>
          <h3>6) Your rights</h3>
          <ul style={{ color: 'var(--subtle)', marginTop: 8 }}>
            <li>Access your personal data,</li>
            <li>Rectify inaccurate data,</li>
            <li>Request deletion,</li>
            <li>Request portability of data you provided,</li>
            <li>Object to certain processing,</li>
            <li>Lodge a complaint with a supervisory authority.</li>
          </ul>
        </section>

        <section>
          <h3>7) Cookies and similar technologies</h3>
          <p style={{ color: 'var(--subtle)' }}>
            We use essential cookies/storage for authentication and optional analytics storage only when consent is granted.
          </p>
          <table style={{ width: '100%', marginTop: 10 }}>
            <thead>
              <tr>
                <th style={{ textAlign: 'left' }}>Cookie / Storage</th>
                <th style={{ textAlign: 'left' }}>Type</th>
                <th style={{ textAlign: 'left' }}>Purpose</th>
                <th style={{ textAlign: 'left' }}>Retention</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Auth JWT (token storage)</td>
                <td>Essential</td>
                <td>Maintains authenticated sessions and account access.</td>
                <td>Until logout / token expiry</td>
              </tr>
              <tr>
                <td>Analytics consented events</td>
                <td>Optional analytics</td>
                <td>Measures product usage, including action #29 related events.</td>
                <td>Based on consent and event retention rules</td>
              </tr>
            </tbody>
          </table>
        </section>
      </div>

      <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
        <a className="btn" href="#privacy/cookies">Cookie settings</a>
        <button type="button" className="btn btn--ghost" onClick={() => setPage('home')}>Back to hub</button>
      </div>
    </section>
  );
}

Object.assign(window, { PrivacyPage });