<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your account | Phantomline</title>
<meta name="description" content="Sign in with Google to view your Phantomline license keys, manage subscriptions, and update settings." />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#0B0F11" />
<meta name="robots" content="noindex" />
<!-- Supabase config consumed by /static/account.js. Both are publishable values
     (the URL is the project's REST endpoint; the anon key is the public,
     RLS-gated browser key). Keeping config in <meta> instead of inline JS lets
     the CSP stay strict — no 'unsafe-inline' on script-src needed. -->
<meta name="supabase-url" content="{{ supabase_url }}" />
<meta name="supabase-anon-key" content="{{ supabase_anon_key }}" />
<link rel="icon" type="image/png" href="{{ '/static/phantomline-favicon.png' | versioned }}" />
<link rel="apple-touch-icon" href="{{ '/static/phantomline-logo-square.png' | versioned }}" />
<link rel="stylesheet" href="{{ '/static/landing.css' | versioned }}" />
<style>
  /* Account portal — brand-aligned with the 2026-05 landing redesign.
     Uses landing.css tokens (--ink, --paper, --brand, --rule). Article.css
     was dropped from this page — it forced Cormorant Garamond on headlines
     which clashed with the Geist direction. */

  .acct-shell { max-width: 760px; margin: 0 auto; padding: 0 16px; }
  .acct-header {
    display: flex; align-items: center; gap: 16px;
    margin: 8px 0 24px; padding: 20px 0;
    background: transparent; border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .acct-avatar {
    width: 44px; height: 44px; border-radius: 0;
    background: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: var(--ink); font-size: 17px;
    font-family: var(--font-mono);
    flex-shrink: 0; overflow: hidden;
  }
  .acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .acct-id { flex: 1; min-width: 0; }
  .acct-id .name {
    font-family: var(--font-sans);
    font-weight: 600; font-size: 16px;
    line-height: 1.2; letter-spacing: -0.01em;
    color: var(--paper);
  }
  .acct-id .email {
    color: var(--text-2); font-size: 13px;
    line-height: 1.3; word-break: break-all;
    font-family: var(--font-mono);
  }
  .ghost-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--paper); padding: 8px 14px; border-radius: 0;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600;
    text-transform: lowercase; letter-spacing: 0.02em;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center;
    transition: color 160ms ease, border-color 160ms ease;
  }
  .ghost-btn:hover { border-color: var(--brand); color: var(--brand); }

  .tabbar {
    display: flex; gap: 0; margin: 0 0 24px;
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
  }
  .tabbar button {
    background: transparent; border: 0;
    color: var(--text-2);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: lowercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 160ms ease, border-color 160ms ease;
  }
  .tabbar button:hover { color: var(--paper); }
  .tabbar button[aria-selected="true"] {
    color: var(--paper);
    border-bottom-color: var(--brand);
  }

  /* Cards: hairline blocks instead of chunky panels. */
  .card {
    background: transparent; border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding: 20px 0 24px;
    margin: 0;
  }
  .card + .card { padding-top: 24px; }
  .card h3 {
    font-family: var(--font-sans);
    margin: 0 0 8px; font-size: 17px; font-weight: 600;
    letter-spacing: -0.01em; color: var(--paper);
  }
  .card .meta { color: var(--text-2); font-size: 13px; margin: 0 0 14px; line-height: 1.55; }
  .card .meta:last-child { margin-bottom: 0; }

  .pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500;
    padding: 3px 8px; border-radius: 0;
    background: var(--brand-faint);
    color: var(--brand);
    margin-left: 8px; vertical-align: middle;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .pill.expired { background: rgba(220,120,120,0.14); color: #e08f8f; }
  .pill.founding { background: rgba(232, 160, 74, 0.12); color: var(--signal); }
  .pill.tier { background: var(--brand-faint); color: var(--brand); margin-left: 0; }

  .key-box {
    font-family: var(--font-mono);
    font-size: 12px; word-break: break-all;
    background: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 12px 14px; margin: 10px 0 12px;
    color: var(--paper-dim);
  }
  .row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .row-actions .cta { min-height: 38px; padding: 0 16px; font-size: 12px; }

  #signin-card {
    text-align: left;
    padding: 32px 0;
  }
  #signin-card h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--paper);
  }
  #signin-card .gbtn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 600; font-size: 14px;
    cursor: pointer; border: 1px solid var(--paper);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  #signin-card .gbtn:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
  #signin-card .gbtn svg { width: 18px; height: 18px; }

  #status {
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.02em;
    margin: 8px 0; min-height: 18px;
  }
  #status.error { color: #e08f8f; }
  #status.success { color: var(--brand); }

  .empty {
    background: transparent;
    border: 1px dashed var(--rule-strong);
    border-radius: 0;
    padding: 22px;
    text-align: left;
    color: var(--text-2);
    font-size: 14px;
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
  }
  .stat {
    background: transparent; border: 0;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding: 14px 16px;
  }
  .stat .label {
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.16em; font-weight: 500;
  }
  .stat .value {
    font-family: var(--font-mono);
    font-size: 22px; font-weight: 500;
    margin-top: 6px; color: var(--paper);
    letter-spacing: -0.01em;
  }

  .invoice-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--rule);
    gap: 12px;
  }
  .invoice-row:first-child { border-top: 0; }
  .invoice-row .desc { font-size: 13px; flex: 1; min-width: 0; }
  .invoice-row .desc .num {
    color: var(--text-2); font-size: 11px;
    font-family: var(--font-mono); letter-spacing: 0.02em;
  }
  .invoice-row .amt {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    font-size: 13px; color: var(--paper);
  }
  .invoice-row a {
    color: var(--brand); font-size: 12px;
    text-decoration: none; white-space: nowrap;
    font-family: var(--font-mono); font-weight: 500;
  }
  .invoice-row a:hover { color: var(--brand-deep); }

  .danger-zone { border-color: rgba(220,120,120,0.25); }
  .danger-zone h3 { color: #e08f8f; }

  /* Page header — override any prior article.css rules so headline uses
     the new Plex sans direction, not Cormorant Garamond. */
  .acct-shell .article-head h1 {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: var(--paper) !important;
  }
  .acct-shell .article-head .article-lede {
    font-family: var(--font-sans);
    color: var(--text-2);
  }
</style>
</head>
<body>
<a class="skip-to-main" href="#main">Skip to main content</a>
<div class="wrap">
  <nav class="top">
    <a class="brand" href="/" aria-label="Phantomline home">
      <img class="brand-img" src="{{ '/static/phantomline-logo-primary.png' | versioned }}" alt="Phantomline" width="220" height="32" />
    </a>
    <div class="navlinks">
      <a href="/alternatives">Alternatives</a>
      <a href="/pricing">Pricing</a>
      <a href="/blog">Blog</a>
      <a href="/account" aria-current="page">Account</a>
      <a class="cta" href="/app">Open Studio</a>
    </div>
  </nav>

  <main id="main">
    <div class="acct-shell">
      <header class="article-head" style="margin-bottom: 14px;">
        <div class="eyebrow">Account</div>
        <h1 style="font-size: 28px; margin: 4px 0 6px;">Your Phantomline account</h1>
        <p class="article-lede" style="font-size: 14px; margin: 0;">
          View licenses, manage billing, and update settings. Phantomline still works offline without an account.
        </p>
      </header>

      <div id="status" role="status" aria-live="polite"></div>

      <!-- Signed-out state: Google button -->
      <section id="signin-card" class="card" hidden>
        <h2 style="margin: 0 0 6px; font-size: 18px;">Sign in or sign up</h2>
        <p class="meta" style="margin: 0 0 22px;">
          New here? Continue with Google to spin up a free account — 5 renders/month, no card. Already bought? We'll match the Google email to your Stripe receipt.
        </p>
        <button class="gbtn" id="google-btn" type="button">
          <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
            <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.79 2.72v2.26h2.9c1.7-1.57 2.69-3.88 2.69-6.62Z"/>
            <path fill="#34A853" d="M9 18c2.43 0 4.46-.81 5.95-2.18l-2.9-2.26c-.8.54-1.84.86-3.05.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"/>
            <path fill="#FBBC05" d="M3.97 10.72A5.4 5.4 0 0 1 3.68 9c0-.6.1-1.18.29-1.72V4.95H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.05l3.01-2.33Z"/>
            <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"/>
          </svg>
          Continue with Google
        </button>
      </section>

      <!-- Signed-in state: header + tabs + tab panels -->
      <section id="signed-in" hidden>
        <div class="acct-header">
          <div class="acct-avatar" id="acct-avatar"></div>
          <div class="acct-id">
            <div class="name" id="acct-name">Loading…</div>
            <div class="email" id="acct-email"></div>
          </div>
          <button class="ghost-btn" id="signout-btn" type="button">Sign out</button>
        </div>

        <nav class="tabbar" role="tablist" aria-label="Account sections">
          <button role="tab" id="tab-overview" data-tab="overview" aria-selected="true"  aria-controls="panel-overview" tabindex="0">Overview</button>
          <button role="tab" id="tab-licenses" data-tab="licenses" aria-selected="false" aria-controls="panel-licenses" tabindex="-1">Licenses</button>
          <button role="tab" id="tab-billing"  data-tab="billing"  aria-selected="false" aria-controls="panel-billing"  tabindex="-1">Billing</button>
          <button role="tab" id="tab-settings" data-tab="settings" aria-selected="false" aria-controls="panel-settings" tabindex="-1">Settings</button>
        </nav>

        <!-- Overview ----------------------------------------------------- -->
        <div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" data-panel="overview">
          <div class="card">
            <h3>Account at a glance</h3>
            <div class="stat-grid" id="overview-stats">
              <div class="stat"><div class="label">Tier</div><div class="value" id="ov-tier">—</div></div>
              <div class="stat"><div class="label">Licenses</div><div class="value" id="ov-licenses">—</div></div>
              <div class="stat"><div class="label">Founding</div><div class="value" id="ov-founding">—</div></div>
            </div>
          </div>
          <div class="card">
            <h3>Quick actions</h3>
            <div class="row-actions">
              <a class="cta" href="/app">Open Studio</a>
              <a class="cta secondary" href="/pricing">See pricing</a>
              <button class="cta secondary" id="ov-portal-btn" type="button">Manage subscription</button>
            </div>
            <p class="meta" style="margin-top: 12px;">
              Bought with a different email? Contact
              <a href="mailto:support@phantomline.xyz">support@phantomline.xyz</a> with your Stripe receipt.
            </p>
          </div>
          <!-- Desktop activation card. Hidden by default; account.js shows it
               only on hosted phantomline.xyz (not localhost). Has three states:
                 - probing (shown briefly while we check localhost:5000)
                 - running (Phantomline detected → big actionable button)
                 - not_running (server down or not installed → coaching panel)
               The state is set by account.js via data-state on the card root. -->
          <div class="card" id="desktop-activate-card" data-state="probing" hidden>
            <h3 id="desktop-card-title">Running the desktop app?</h3>

            <!-- State: probing -->
            <p class="meta" data-card-state="probing">
              Checking whether Phantomline is running on this computer&hellip;
            </p>

            <!-- State: running (server detected on localhost:5000) -->
            <div data-card-state="running" hidden>
              <p class="meta" style="color: var(--brand);">
                <strong>&#10003; Phantomline detected on this computer.</strong> Click below to activate your license locally.
              </p>
              <div class="row-actions">
                <a class="cta signal" href="http://localhost:5000/account" target="_blank" rel="noopener">Open in desktop app &rarr;</a>
              </div>
            </div>

            <!-- State: not_running -->
            <div data-card-state="not_running" hidden>
              <p class="meta">
                Phantomline isn&rsquo;t running yet on this computer. Start it first, then click "I started it &mdash; retry."
              </p>
              <div class="row-actions">
                <button class="cta secondary" id="desktop-show-launch-btn" type="button">Show me how to start it</button>
                <button class="cta" id="desktop-retry-btn" type="button">I started it &mdash; retry</button>
              </div>

              <!-- Hidden until "Show me how to start it" is clicked -->
              <div id="desktop-launch-help" hidden style="margin-top: 16px; padding: 16px; border: 1px solid var(--rule); border-radius: 0; background: var(--ink-2);">
                <p class="meta" style="margin-top: 0;"><strong>Easiest:</strong> double-click the launcher</p>
                <ul class="meta" style="margin: 6px 0 16px 18px; padding: 0;">
                  <li><strong>Windows:</strong> double-click <code>start-phantomline.bat</code> in your Phantomline folder.</li>
                  <li><strong>macOS:</strong> double-click <code>start-phantomline.command</code> (right-click &rarr; Open the first time, since it&rsquo;s unsigned).</li>
                  <li><strong>Linux:</strong> run <code>./start-phantomline.sh</code> from the Phantomline folder.</li>
                </ul>

                <p class="meta"><strong>Or via terminal:</strong></p>
                <pre style="background: var(--ink); border: 1px solid var(--rule); padding: 10px; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; margin: 4px 0 16px;">cd path/to/phantomline
python server.py</pre>

                <p class="meta" style="margin-bottom: 0;">
                  Don&rsquo;t have it installed yet? <a href="/install/phantomline" style="color: var(--brand);">Install Phantomline desktop</a> &rarr; takes ~3 minutes.
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- Licenses ----------------------------------------------------- -->
        <div role="tabpanel" id="panel-licenses" aria-labelledby="tab-licenses" data-panel="licenses" hidden>
          <div id="licenses-list"></div>
        </div>

        <!-- Billing ------------------------------------------------------ -->
        <div role="tabpanel" id="panel-billing" aria-labelledby="tab-billing" data-panel="billing" hidden>
          <div class="card">
            <h3>Subscription</h3>
            <p class="meta" id="billing-sub-status">Checking…</p>
            <div class="row-actions">
              <button class="cta secondary" id="billing-portal-btn" type="button">Open Stripe portal</button>
            </div>
          </div>
          <div class="card">
            <h3>Invoices</h3>
            <div id="invoices-list" class="meta">Loading invoices…</div>
          </div>
        </div>

        <!-- Settings ----------------------------------------------------- -->
        <div role="tabpanel" id="panel-settings" aria-labelledby="tab-settings" data-panel="settings" hidden>
          <div class="card">
            <h3>Email</h3>
            <p class="meta">Your account is keyed to your Google email. To change it, sign out and sign in with the new account, then email support to migrate licenses.</p>
            <div class="row-actions">
              <a class="cta secondary" href="mailto:support@phantomline.xyz?subject=Migrate%20Phantomline%20license%20to%20new%20email">Email support</a>
            </div>
          </div>
          <div class="card">
            <h3>Session</h3>
            <p class="meta">Sign out of this browser. Your license stays valid in the desktop app — only the web account session ends.</p>
            <div class="row-actions">
              <button class="ghost-btn" id="settings-signout-btn" type="button">Sign out</button>
            </div>
          </div>
          <div class="card danger-zone">
            <h3>Delete account</h3>
            <p class="meta">Removing your web account doesn't refund or revoke purchased licenses — your desktop app keeps working with the keys you already have. Email support to fully delete data.</p>
            <div class="row-actions">
              <a class="ghost-btn" href="mailto:support@phantomline.xyz?subject=Delete%20my%20Phantomline%20account">Email support</a>
            </div>
          </div>
        </div>

      </section>
    </div>
  </main>

  {% include "_footer.html" %}
</div>

<script type="module" src="{{ '/static/account.js' | versioned }}"></script>

</body>
</html>
