// components/account.el - Account dashboard page.
// Client-rendered: El serves the HTML shell, JS handles auth + data.

from founding_badge import { founding_badge, founding_badge_css }

fn account_page(supabase_url: String, supabase_anon_key: String) -> String {
    return "<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>My Account - Neuron</title>
  <meta name=\"description\" content=\"Manage your Neuron account, view your plan, and access your founding member details.\">
  <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/assets/favicon-16.png\">
  <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/favicon-32.png\">
  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #FAFAF8;
      --bg2:     #F0F0EC;
      --card:    #FFFFFF;
      --navy:    #0052A0;
      --navy-d:  rgba(0,82,160,.06);
      --navy-m:  rgba(0,82,160,.12);
      --navy-b:  rgba(0,82,160,.20);
      --navy-65: rgba(0,82,160,.65);
      --navy-85: rgba(0,82,160,.85);
      --t1:      #0D0D14;
      --t2:      #3A3A4A;
      --t3:      #6B6B7E;
      --t4:      rgba(13,13,20,.35);
      --border:  rgba(0,0,0,.07);
      --border2: rgba(0,0,0,.13);
      --head:    'Playfair Display', Georgia, serif;
      --body:    'IBM Plex Sans', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }
    html, body {
      background: var(--bg);
      color: var(--t1);
      font-family: var(--body);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(rgba(0,0,0,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.022) 1px, transparent 1px);
      background-size: 48px 48px;
    }

    /* ── NAV ─────────────────────────────────────────────────────────────────── */

    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(250,250,248,.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo img { height: 2rem; width: auto; display: block; }

    .nav-back {
      font-family: var(--body);
      font-size: 0.675rem;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--t3);
      text-decoration: none;
      transition: color 200ms;
    }
    .nav-back:hover { color: var(--t1); }

    /* ── PAGE LAYOUT ─────────────────────────────────────────────────────────── */

    .page-shell {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      padding: 6rem 2rem 4rem;
    }

    .page-inner {
      max-width: 680px;
      margin: 0 auto;
    }

    .page-heading {
      margin-bottom: 2.5rem;
    }

    .page-eyebrow {
      font-family: var(--body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--navy-65);
      margin-bottom: 0.75rem;
    }

    .page-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--t1);
    }

    /* ── SECTIONS ────────────────────────────────────────────────────────────── */

    .account-section {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    /* ── CARDS ───────────────────────────────────────────────────────────────── */

    .card-dark {
      background: var(--card);
      border: 1px solid rgba(0,0,0,.07);
      box-shadow: 0 2px 12px rgba(13,13,20,.04);
      padding: 2rem;
    }

    .card-label {
      font-family: var(--body);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--navy-65);
      margin-bottom: 1.25rem;
    }

    /* ── PLAN CARD ───────────────────────────────────────────────────────────── */

    .plan-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .plan-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 0.375rem;
    }

    .plan-status {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--navy);
      background: rgba(0,82,160,.07);
      border: 1px solid rgba(0,82,160,.18);
      padding: 0.3rem 0.75rem;
    }

    .plan-status-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--navy);
      flex-shrink: 0;
    }

    .plan-meta {
      margin-top: 1.25rem;
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .plan-meta-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .plan-meta-label {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--t3);
    }

    .plan-meta-value {
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--t1);
    }

    /* ── TIMELINE CARD ───────────────────────────────────────────────────────── */

    .timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .timeline-item {
      display: flex;
      gap: 1.25rem;
      padding-bottom: 1.5rem;
      position: relative;
    }

    .timeline-item:last-child {
      padding-bottom: 0;
    }

    .timeline-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 1.5rem;
    }

    .timeline-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--navy);
      background: var(--bg);
      flex-shrink: 0;
      margin-top: 3px;
    }

    .timeline-dot.filled {
      background: var(--navy);
    }

    .timeline-line {
      flex: 1;
      width: 1px;
      background: rgba(0,82,160,.15);
      margin-top: 4px;
    }

    .timeline-content {
      flex: 1;
      padding-bottom: 0.25rem;
    }

    .timeline-date {
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--navy-65);
      margin-bottom: 0.375rem;
    }

    .timeline-text {
      font-family: var(--body);
      font-weight: 400;
      font-size: 0.9rem;
      color: var(--t1);
      line-height: 1.6;
    }

    .timeline-sub {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.8125rem;
      color: var(--t2);
      line-height: 1.6;
      margin-top: 0.25rem;
    }

    /* ── DEVICES CARD ────────────────────────────────────────────────────────── */

    .devices-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .device-icon {
      width: 2.5rem;
      height: 2.5rem;
      border: 1px solid rgba(0,82,160,.18);
      background: rgba(0,82,160,.04);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .devices-count {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--t1);
    }

    .devices-sub {
      font-size: 0.8125rem;
      color: var(--t2);
    }

    .devices-note {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.8125rem;
      color: var(--t3);
      line-height: 1.65;
      border-top: 1px solid var(--border);
      padding-top: 1rem;
      margin-top: 0.5rem;
    }

    /* ── BADGE SECTION ───────────────────────────────────────────────────────── */

    .badge-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
    }

    .badge-caption {
      margin-top: 1.25rem;
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--t3);
      text-align: center;
    }

    /* ── SIGN-IN SECTION ─────────────────────────────────────────────────────── */

    .signin-wrap {
      min-height: 60vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 3rem 1rem;
    }

    .signin-icon {
      width: 4rem;
      height: 4rem;
      border: 1px solid rgba(0,82,160,.20);
      background: rgba(0,82,160,.04);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
    }

    .signin-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 0.75rem;
    }

    .signin-sub {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.9375rem;
      color: var(--t2);
      max-width: 24rem;
      margin: 0 auto 2rem;
      line-height: 1.65;
    }

    .signin-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      width: 100%;
      box-sizing: border-box;
      font-family: var(--body);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--t1);
      background: var(--card);
      border: 1px solid var(--border2);
      padding: 0.875rem 1.5rem;
      cursor: pointer;
      transition: border-color 200ms, background 200ms, box-shadow 200ms;
      text-decoration: none;
    }
    .signin-btn:hover {
      border-color: rgba(0,82,160,.35);
      background: rgba(0,82,160,.03);
      box-shadow: 0 2px 8px rgba(0,82,160,.08);
    }

    /* ── BUTTONS ─────────────────────────────────────────────────────────────── */

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      color: #fff;
      background: var(--navy);
      padding: 1rem 2rem;
      border: none;
      cursor: pointer;
      transition: background 300ms, box-shadow 300ms;
      box-shadow: 0 2px 16px rgba(0,82,160,.20);
    }
    .btn-primary:hover { background: #0078D4; }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--t2);
      background: transparent;
      padding: 0.875rem 1.75rem;
      border: 1px solid var(--border2);
      cursor: pointer;
      transition: border-color 300ms, color 300ms;
    }
    .btn-ghost:hover { border-color: rgba(0,82,160,.35); color: var(--t1); }

    /* ── ACTION ROW ──────────────────────────────────────────────────────────── */

    .action-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .action-row-right {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    /* ── USER CHIP ───────────────────────────────────────────────────────────── */

    .user-chip {
      display: flex;
      align-items: center;
      gap: 0.625rem;
    }

    .user-avatar {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: rgba(0,82,160,.12);
      border: 1px solid rgba(0,82,160,.20);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--navy);
      overflow: hidden;
      flex-shrink: 0;
    }

    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .user-email {
      font-size: 0.8125rem;
      color: var(--t2);
    }

    /* ── LOADING STATE ───────────────────────────────────────────────────────── */

    .skeleton {
      background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.05) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.4s infinite;
      border-radius: 3px;
    }

    @keyframes skeleton-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ── DIVIDER ─────────────────────────────────────────────────────────────── */

    .navy-line {
      height: 1px;
      background: linear-gradient(90deg, rgba(0,82,160,.30) 0%, rgba(0,82,160,.08) 100%);
    }

    /* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

    /* ── FAMILY SECTION ─────────────────────────────────────────────────────── */

    .acct-section-header {
      margin-bottom: 1.25rem;
    }

    .acct-input {
      display: block;
      width: 100%;
      font-family: var(--body);
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--t1);
      background: var(--bg);
      border: 1px solid var(--border2);
      padding: 0.75rem 1rem;
      margin-bottom: 0.625rem;
      outline: none;
      transition: border-color 200ms;
    }
    .acct-input:focus { border-color: rgba(0,82,160,.45); }
    .acct-input::placeholder { color: var(--t4); }

    @media (max-width: 600px) {
      .plan-row { flex-direction: column; }
      .card-dark { padding: 1.5rem; }
      .page-shell { padding: 5.5rem 1.25rem 3rem; }
    }

    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 2px; }
    ::-webkit-scrollbar-thumb:hover { background: #0078D4; }

    /* ── ACCOUNT HEADER ──────────────────────────────────────────────────────── */

    .acct-email { font-family: var(--body); font-size: .875rem; color: var(--t2); font-weight: 300; }
    .acct-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }

    /* ── PREORDER BADGE ──────────────────────────────────────────────────────── */

    .status-badge-preorder { display: inline-flex; align-items: center; gap: .375rem; font-size: .65rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #92600A; background: rgba(146,96,10,.08); border: 1px solid rgba(146,96,10,.2); padding: .3rem .75rem; }

    /* ── DOWNLOAD BUTTON DISABLED ────────────────────────────────────────────── */

    .download-btn-disabled { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--body); font-size: .75rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--t3); background: var(--bg2); padding: 1rem 2rem; border: 1px solid var(--border2); cursor: not-allowed; }

    /* ── PLAN BILLING NOTE ───────────────────────────────────────────────────── */

    .plan-billing-note { font-family: var(--body); font-size: .8125rem; font-weight: 300; color: var(--t2); margin-top: 1rem; line-height: 1.6; }
    .plan-billing-link { color: var(--navy-65); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: none; font-family: var(--body); font-size: .8125rem; font-weight: 300; padding: 0; }
    .plan-billing-link:hover { color: var(--navy); }

    /* ── DOWNLOAD CARD ───────────────────────────────────────────────────────── */

    .download-status { font-size: .65rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--t3); margin-bottom: .75rem; }
    .download-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--t1); margin-bottom: .5rem; }
    .download-body { font-family: var(--body); font-weight: 300; font-size: .875rem; color: var(--t2); line-height: 1.7; margin-bottom: 1.5rem; }

    /* ── ROADMAP SECTION ─────────────────────────────────────────────────────── */

    .roadmap-list { display: flex; flex-direction: column; gap: 0; }
    .roadmap-phase { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
    .roadmap-phase-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .875rem; }
    .roadmap-phase-label { font-family: var(--body); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
    .roadmap-phase-date { font-family: var(--body); font-size: .7rem; font-weight: 400; color: var(--t3); letter-spacing: .06em; }
    .roadmap-items { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
    .roadmap-items li { font-family: var(--body); font-size: .875rem; font-weight: 300; color: var(--t2); line-height: 1.6; padding-left: 1rem; position: relative; }
    .roadmap-items li::before { content: \"-\"; position: absolute; left: 0; color: var(--navy-65); }

    /* ── SIGN OUT SECTION ────────────────────────────────────────────────────── */

    .signout-section { padding-top: 1rem; display: flex; justify-content: flex-end; }
  </style>
</head>
<body>

<!-- ── Nav ──────────────────────────────────────────────────────────────────── -->
<nav id=\"nav\">
  <div class=\"nav-inner\">
    <a href=\"/\" class=\"nav-logo\" aria-label=\"Neuron home\">
      <img src=\"/assets/brand/neuron-wordmark-on-light.png\"
           srcset=\"/assets/brand/neuron-wordmark-on-light@2x.png 2x\"
           alt=\"Neuron\" height=\"28\">
    </a>
    <a href=\"/\" class=\"nav-back\">&#8592; Home</a>
  </div>
</nav>

<!-- ── Page shell ────────────────────────────────────────────────────────────── -->
<div class=\"page-shell\">
  <div class=\"page-inner\">

    <!-- Sign-in section (shown when not authenticated) -->
    <div id=\"signin-section\">
      <div class=\"signin-wrap\">
        <div class=\"signin-icon\">
          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(0,82,160,.70)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
            <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>
            <circle cx=\"12\" cy=\"7\" r=\"4\"/>
          </svg>
        </div>
        <h1 class=\"signin-title\">Sign in to view your account</h1>
        <p class=\"signin-sub\">Use the same sign-in method you used when you signed up.</p>
        <!-- Single width-controlled container for ALL sign-in options -->
        <div style=\"width:100%;max-width:20rem;margin:0 auto;display:flex;flex-direction:column;gap:.75rem\">
          <button type=\"button\" class=\"signin-btn\" id=\"btn-google\" onclick=\"signInWith('google')\">
            <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\">
              <path d=\"M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z\" fill=\"#4285F4\"/>
              <path d=\"M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z\" fill=\"#34A853\"/>
              <path d=\"M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z\" fill=\"#FBBC05\"/>
              <path d=\"M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z\" fill=\"#EA4335\"/>
            </svg>
            Continue with Google
          </button>
          <button type=\"button\" class=\"signin-btn\" id=\"btn-github\" onclick=\"signInWith('github')\">
            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">
              <path d=\"M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z\"/>
            </svg>
            Continue with GitHub
          </button>

          <div style=\"display:flex;align-items:center;gap:1rem;margin:.125rem 0\">
            <div style=\"flex:1;height:1px;background:var(--border2)\"></div>
            <span style=\"font-family:var(--body);font-size:.75rem;color:var(--t3);letter-spacing:.06em\">or</span>
            <div style=\"flex:1;height:1px;background:var(--border2)\"></div>
          </div>

          <input type=\"email\" id=\"acct-email-input\" placeholder=\"Email address\" autocomplete=\"email\"
            style=\"font-family:var(--body);font-size:.875rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid var(--border2);padding:.875rem 1rem;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box\">
          <input type=\"password\" id=\"acct-pass-input\" placeholder=\"Password\" autocomplete=\"current-password\"
            style=\"font-family:var(--body);font-size:.875rem;font-weight:300;color:var(--t1);background:#fff;border:1px solid var(--border2);padding:.875rem 1rem;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box\">
          <button type=\"button\" id=\"acct-signin-btn\" onclick=\"signInWithEmail()\"
            style=\"font-family:var(--body);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--navy);border:none;padding:.875rem 1rem;cursor:pointer;transition:background .2s;width:100%;box-sizing:border-box\">
            Sign in
          </button>
          <p style=\"font-family:var(--body);font-size:.8rem;font-weight:300;color:var(--t3);text-align:center\">
            New here? <a href=\"/checkout\" style=\"color:var(--navy)\">Choose a plan to get started</a>
          </p>
          <p id=\"acct-email-msg\" style=\"display:none;font-size:.8rem;text-align:center;margin-top:.25rem\"></p>
        </div>
      </div>
    </div>

    <!-- Dashboard section (shown when authenticated) -->
    <div id=\"dashboard-section\" style=\"display:none\">

      <!-- Account header row -->
      <div class=\"acct-header-row\">
        <div>
          <p class=\"page-eyebrow\" style=\"margin-bottom:.375rem\">Account</p>
          <h1 class=\"page-title\" style=\"margin-bottom:.5rem\">Your Account</h1>
          <p class=\"acct-email\" id=\"acct-header-email\"></p>
        </div>
        <div style=\"padding-top:.25rem\">
          <button type=\"button\" class=\"btn-ghost\" id=\"signout-btn-top\" onclick=\"signOut()\">Sign out</button>
        </div>
      </div>

      <div class=\"account-section\">

        <!-- Plan card -->
        <div class=\"card-dark\" id=\"plan-card\">
          <p class=\"card-label\">Your Plan</p>
          <div class=\"plan-row\">
            <div>
              <p class=\"plan-name\" id=\"plan-name-el\">Loading...</p>
              <div id=\"plan-status-el\"></div>
              <div id=\"plan-billing-note-el\"></div>
            </div>
          </div>
          <div class=\"plan-meta\" id=\"plan-meta-el\"></div>
        </div>

        <!-- Roadmap (only shown for founding members) -->
        <div id=\"roadmap-section\" style=\"display:none\">
          <div class=\"card-dark\">
            <p class=\"card-label\">Product Roadmap</p>
            <p style=\"font-family:var(--body);font-weight:300;font-size:.875rem;color:var(--t2);line-height:1.7;margin-bottom:1.5rem\">As a Founding Member, you have visibility into what we're building. This is the real roadmap &mdash; not marketing.</p>
            <div class=\"roadmap-list\">
              <!-- Phase 1 -->
              <div class=\"roadmap-phase\">
                <div class=\"roadmap-phase-header\">
                  <span class=\"roadmap-phase-label\">Now shipping</span>
                  <span class=\"roadmap-phase-date\">Q3 2026</span>
                </div>
                <ul class=\"roadmap-items\">
                  <li>macOS and Windows clients</li>
                  <li>Persistent memory &mdash; local, encrypted</li>
                  <li>Bring your own API keys (OpenAI, Anthropic, Grok)</li>
                  <li>Neuron Inference &mdash; priced below the major APIs</li>
                  <li>Gmail, Slack, Google Calendar connectors</li>
                  <li>VS Code extension</li>
                  <li>Founding member badge in-app</li>
                </ul>
              </div>
              <!-- Phase 2 -->
              <div class=\"roadmap-phase\">
                <div class=\"roadmap-phase-header\">
                  <span class=\"roadmap-phase-label\">Following launch</span>
                  <span class=\"roadmap-phase-date\">Q4 2026</span>
                </div>
                <ul class=\"roadmap-items\">
                  <li>Process and knowledge packets</li>
                  <li>Local inference via Ollama</li>
                  <li>Additional connectors &mdash; GitHub, Notion, Linear, more</li>
                  <li>Mobile companion app</li>
                  <li>Family accounts</li>
                </ul>
              </div>
              <!-- Phase 3 -->
              <div class=\"roadmap-phase\" style=\"border-bottom:none\">
                <div class=\"roadmap-phase-header\">
                  <span class=\"roadmap-phase-label\">2027</span>
                  <span class=\"roadmap-phase-date\">H1 2027</span>
                </div>
                <ul class=\"roadmap-items\">
                  <li>Imprints &mdash; starting with C-suite (CEO, CTO, CFO, CMO, COO)</li>
                  <li>Enterprise accounts</li>
                  <li>Plugin marketplace (open to developers)</li>
                  <li>API access for power users</li>
                </ul>
              </div>
            </div>
            <p style=\"font-family:var(--body);font-weight:300;font-size:.75rem;color:var(--t3);margin-top:1.5rem;line-height:1.7\">This roadmap is directional, not a commitment. Founding Members shape what gets built and when through their feedback and votes. Your input has real weight.</p>
          </div>
        </div>

        <!-- Family plan section (only shown for founding members) -->
        <div id=\"family-section\" style=\"display:none\">
          <div class=\"card-dark\">
            <div class=\"acct-section-header\">
              <p class=\"card-label\">Family members</p>
              <p style=\"font-size:.8125rem;font-weight:300;color:var(--t2);line-height:1.65\">Add up to 5 children to your Founding Member plan. $10/month per child.</p>
            </div>
            <div id=\"family-list\"></div>
            <div id=\"add-child-form\">
              <input type=\"email\" id=\"child-email\" placeholder=\"Child's email\" class=\"acct-input\">
              <input type=\"number\" id=\"child-dob-year\" placeholder=\"Birth year (e.g. 2012)\" min=\"1990\" max=\"2007\" class=\"acct-input\">
              <label style=\"display:flex;gap:.5rem;align-items:flex-start;cursor:pointer;margin:.75rem 0\">
                <input type=\"checkbox\" id=\"family-attest\" style=\"margin-top:.2rem;accent-color:var(--navy)\">
                <span style=\"font-size:.8rem;color:var(--t2)\">I confirm this person is a minor under my care and is using this account under my supervision.</span>
              </label>
              <button class=\"btn-primary\" onclick=\"addFamilyMember()\" style=\"padding:.75rem 1.5rem\">Add family member</button>
              <p id=\"family-msg\" style=\"display:none;font-size:.8rem;margin-top:.5rem\"></p>
            </div>
          </div>
        </div>

        <!-- Founding badge (only shown for founding members) -->
        <div id=\"badge-section\" style=\"display:none\">
          <div class=\"card-dark\" style=\"padding:2.5rem 2rem;text-align:center;border-top:3px solid var(--navy);background:linear-gradient(135deg,rgba(0,82,160,.03) 0%,rgba(0,82,160,.06) 100%)\">
            <p class=\"card-label\" style=\"margin-bottom:1.5rem;letter-spacing:.25em\">Your Founding Member Badge</p>
            <div id=\"badge-html-container\" style=\"display:flex;justify-content:center;margin-bottom:1.5rem\"></div>
            <p style=\"font-family:var(--body);font-weight:300;font-size:.8125rem;color:var(--t3);line-height:1.7;max-width:24rem;margin:0 auto\">
              This badge will appear in the Neuron app at launch. Your number is permanent.
            </p>
          </div>
        </div>

        <!-- What happens next -->
        <div class=\"card-dark\" id=\"timeline-card\">
          <p class=\"card-label\">What happens next</p>
          <div class=\"timeline\">
            <div class=\"timeline-item\">
              <div class=\"timeline-left\">
                <div class=\"timeline-dot filled\"></div>
                <div class=\"timeline-line\"></div>
              </div>
              <div class=\"timeline-content\">
                <p class=\"timeline-date\">Now</p>
                <p class=\"timeline-text\">Your preorder is confirmed.</p>
                <p class=\"timeline-sub\">A confirmation email has been sent to your address. Thank you for being here early.</p>
              </div>
            </div>
            <div class=\"timeline-item\">
              <div class=\"timeline-left\">
                <div class=\"timeline-dot filled\" style=\"background:rgba(0,82,160,.4);border-color:rgba(0,82,160,.4)\"></div>
                <div class=\"timeline-line\"></div>
              </div>
              <div class=\"timeline-content\">
                <p class=\"timeline-date\" style=\"color:var(--navy);font-weight:600\">Within 30 days</p>
                <p class=\"timeline-text\">Neuron for Mac &amp; Windows ships.</p>
                <p class=\"timeline-sub\">You'll receive an email with your download link and license key. macOS and Windows simultaneously.</p>
              </div>
            </div>
            <div class=\"timeline-item\">
              <div class=\"timeline-left\">
                <div class=\"timeline-dot\"></div>
              </div>
              <div class=\"timeline-content\">
                <p class=\"timeline-date\">Q3 2026</p>
                <p class=\"timeline-text\">Neuron Inference launches.</p>
                <p class=\"timeline-sub\">Our own inference layer, priced below the major APIs. No setup required - it activates automatically for your plan.</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Download -->
        <div class=\"card-dark\" style=\"border-top:3px solid var(--navy)\">
          <p class=\"card-label\">Download</p>
          <p class=\"download-status\" style=\"color:var(--navy)\">Shipping within 30 days</p>
          <p class=\"download-title\">Neuron for Mac &amp; Windows</p>
          <p class=\"download-body\">macOS and Windows simultaneously. You'll receive a download link and license key by email the moment it ships. Nothing to do right now.</p>
          <button type=\"button\" class=\"download-btn-disabled\" disabled aria-disabled=\"true\">
            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
              <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>
              <polyline points=\"7 10 12 15 17 10\"/>
              <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/>
            </svg>
            Download arriving soon
          </button>
        </div>

        <!-- Devices -->
        <div class=\"card-dark\">
          <p class=\"card-label\">Devices</p>
          <div class=\"devices-row\">
            <div class=\"device-icon\">
              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(0,82,160,.70)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">
                <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/>
                <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"/>
                <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"/>
              </svg>
            </div>
            <div>
              <p class=\"devices-count\">2 devices included with your plan</p>
              <p class=\"devices-sub\">Currently: Setup at launch</p>
            </div>
          </div>
          <p class=\"devices-note\">Device activation happens when you install. Your license key will be in your launch email.</p>
        </div>

        <!-- Sign out -->
        <div class=\"signout-section\">
          <button type=\"button\" class=\"btn-ghost\" id=\"signout-btn\" onclick=\"signOut()\">Sign out</button>
        </div>

      </div>
    </div>

  </div>
</div>

<script src=\"https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js\"></script>
<script>
(function() {
  'use strict';

  var SUPABASE_URL = '" + supabase_url + "';
  var SUPABASE_ANON_KEY = '" + supabase_anon_key + "';

  var sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
    auth: { flowType: 'implicit' }
  });

  // ── Helpers ────────────────────────────────────────────────────────────────

  function show(id) {
    var el = document.getElementById(id);
    if (el) el.style.display = '';
  }

  function hide(id) {
    var el = document.getElementById(id);
    if (el) el.style.display = 'none';
  }

  function setText(id, text) {
    var el = document.getElementById(id);
    if (el) el.textContent = text;
  }

  function setHtml(id, html) {
    var el = document.getElementById(id);
    if (el) el.innerHTML = html;
  }

  // ── Sign-in ────────────────────────────────────────────────────────────────

  window.signInWith = async function(provider) {
    var btn = document.getElementById('btn-' + provider);
    if (btn) { btn.disabled = true; btn.style.opacity = '0.6'; }
    try {
      var result = await sb.auth.signInWithOAuth({
        provider: provider,
        options: {
          redirectTo: window.location.origin + '/account'
        }
      });
      if (result.error) {
        if (btn) { btn.disabled = false; btn.style.opacity = '1'; }
        console.error('Sign-in error:', result.error.message);
      }
    } catch (e) {
      if (btn) { btn.disabled = false; btn.style.opacity = '1'; }
      console.error('Sign-in failed:', e);
    }
  };

  // ── Email sign-in ──────────────────────────────────────────────────────────

  window.signInWithEmail = async function() {
    var email = document.getElementById('acct-email-input').value.trim();
    var pass = document.getElementById('acct-pass-input').value;
    var msg = document.getElementById('acct-email-msg');
    var signinBtn = document.getElementById('acct-signin-btn');
    if (!sb) { msg.style.display='block'; msg.style.color='#c44'; msg.textContent='Loading... try again in a moment.'; return; }
    if (!email || !pass) {
      msg.style.display = 'block'; msg.style.color = '#c44';
      msg.textContent = 'Please enter your email and password.'; return;
    }
    if (signinBtn) { signinBtn.disabled = true; signinBtn.textContent = 'Signing in...'; }
    // Try sign in first, then sign up if not found
    var result = await sb.auth.signInWithPassword({ email: email, password: pass });
    if (result.error) {
      if (result.error.message && result.error.message.toLowerCase().includes('invalid')) {
        // Try sign up
        var signupResult = await sb.auth.signUp({
          email: email, password: pass,
          options: { emailRedirectTo: window.location.origin + '/account' }
        });
        if (signupResult.error) {
          msg.style.display = 'block'; msg.style.color = '#c44';
          msg.textContent = signupResult.error.message; return;
        }
        msg.style.display = 'block'; msg.style.color = 'var(--navy)';
        msg.textContent = 'Check your email to confirm your account.'; return;
      }
      if (signinBtn) { signinBtn.disabled = false; signinBtn.textContent = 'Sign in'; }
      msg.style.display = 'block'; msg.style.color = '#c44';
      msg.textContent = result.error.message; return;
    }
    window.location.reload();
  };

  // ── Sign-out ───────────────────────────────────────────────────────────────

  window.signOut = async function() {
    var btn = document.getElementById('signout-btn');
    var btnTop = document.getElementById('signout-btn-top');
    if (btn) { btn.disabled = true; btn.textContent = 'Signing out...'; }
    if (btnTop) { btnTop.disabled = true; btnTop.textContent = 'Signing out...'; }
    await sb.auth.signOut();
    show('signin-section');
    hide('dashboard-section');
    if (btn) { btn.disabled = false; btn.textContent = 'Sign out'; }
    if (btnTop) { btnTop.disabled = false; btnTop.textContent = 'Sign out'; }
  };

  // ── Render plan card ───────────────────────────────────────────────────────

  async function renderPlanCard(row) {
    var plan = (row && row.plan) ? row.plan : 'free';
    var memberNum = (row && row.member_number) ? row.member_number : null;
    var source = (row && row.source) ? row.source : '';
    var createdAt = (row && row.created_at) ? row.created_at : null;

    // Plan display name
    var planNames = { 'founding': 'Founding Member', 'professional': 'Professional', 'free': 'Free' };
    var planDisplay = planNames[plan] || 'Free';

    // Status
    var statusLabel = 'Preorder';
    if (plan === 'free') statusLabel = 'Active';

    setText('plan-name-el', planDisplay);

    // Status badge
    var statusHtml = '';
    if (plan === 'founding' || plan === 'professional') {
      statusHtml += '<span class=\"status-badge-preorder\" style=\"margin-top:.625rem;display:inline-flex\">' +
        '<svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg>' +
        'Launching within 30 days</span>';
    } else {
      statusHtml += '<span class=\"plan-status\" style=\"margin-top:.625rem;display:inline-flex\"><span class=\"plan-status-dot\"></span>' + statusLabel + '</span>';
    }
    setHtml('plan-status-el', statusHtml);

    // Billing note (replaces, never appends - this function may run more than once on auth state changes)
    var billingNote = '';
    if (plan === 'founding') {
      billingNote = '<p class=\"plan-billing-note\">Lifetime &middot; Never billed again</p>';
    } else if (plan === 'professional') {
      billingNote = '<p class=\"plan-billing-note\">Billed monthly &middot; <button class=\"plan-billing-link\" onclick=\"window.location.href=\\\'/contact\\\'\">Cancel</button></p>';
    } else {
      billingNote = '<p class=\"plan-billing-note\">On the waitlist</p>';
    }
    setHtml('plan-billing-note-el', billingNote);

    // Meta
    var meta = '';
    if (createdAt) {
      var d = new Date(createdAt);
      var dateStr = d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
      meta += '<div class=\"plan-meta-item\"><span class=\"plan-meta-label\">Joined</span><span class=\"plan-meta-value\">' + dateStr + '</span></div>';
    }
    if (memberNum) {
      meta += '<div class=\"plan-meta-item\"><span class=\"plan-meta-label\">Member number</span><span class=\"plan-meta-value\">#' + memberNum + ' of 1,000</span></div>';
    }
    if (meta) {
      setHtml('plan-meta-el', meta);
    }

    // Founding badge - always show for founding members, with member number if assigned
    if (plan === 'founding') {
      var badgeSection = document.getElementById('badge-section');
      var badgeContainer = document.getElementById('badge-html-container');
      if (badgeSection) badgeSection.style.display = '';
      var badgeN = memberNum || 0;
      fetch('/api/founding-badge?n=' + badgeN)
        .then(function(r) { return r.text(); })
        .then(function(html) {
          if (badgeContainer) badgeContainer.innerHTML = html;
        })
        .catch(function() {});
    }

    // Show roadmap for founding members
    var roadmapSection = document.getElementById('roadmap-section');
    if (plan === 'founding' && roadmapSection) roadmapSection.style.display = '';

    // Family section
    if (plan === 'founding') {
      document.getElementById('family-section').style.display = 'block';
      var session = await sb.auth.getSession();
      var userEmail = session.data.session && session.data.session.user ? session.data.session.user.email : '';
      if (userEmail) loadFamilyMembers(userEmail);
    }
  }

  // ── Family plan ────────────────────────────────────────────────────────────

  async function loadFamilyMembers(parentEmail) {
    var r = await fetch('/api/family/members?parent_email=' + encodeURIComponent(parentEmail));
    var members = await r.json();
    var list = document.getElementById('family-list');
    if (!list) return;
    if (!members || !members.length) {
      list.innerHTML = '<p style=\"color:var(--t3);font-size:.875rem;margin-bottom:1rem\">No family members yet.</p>';
      return;
    }
    list.innerHTML = members.map(function(m) {
      return '<div style=\"display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border)\">' +
        '<div><p style=\"font-size:.875rem;color:var(--t1)\">' + m.child_email + '</p>' +
        '<p style=\"font-size:.75rem;color:var(--t3);text-transform:uppercase;letter-spacing:.06em\">' + m.status + '</p></div>' +
        '<button onclick=\"removeFamilyMember(\\\'' + m.child_email + '\\\')\" style=\"background:none;border:none;color:var(--t3);cursor:pointer;font-size:.75rem\">Remove</button>' +
        '</div>';
    }).join('');
  }

  window.addFamilyMember = async function() {
    var email = document.getElementById('child-email').value.trim();
    var year = document.getElementById('child-dob-year').value;
    var attest = document.getElementById('family-attest').checked;
    var msg = document.getElementById('family-msg');
    if (!email || !year || !attest) {
      msg.style.display = 'block'; msg.style.color = '#c44';
      msg.textContent = 'Please fill in all fields and confirm the attestation.'; return;
    }
    if (parseInt(year) < 2008) {
      msg.style.display = 'block'; msg.style.color = '#c44';
      msg.textContent = 'Child must be under 18. Birth year must be 2008 or later.'; return;
    }
    var session = await sb.auth.getSession();
    var parentEmail = session.data.session && session.data.session.user ? session.data.session.user.email : '';
    var r = await fetch('/api/family/invite', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({parent_email: parentEmail, child_email: email, child_dob_year: parseInt(year), attested: true})
    });
    var d = await r.json();
    msg.style.display = 'block';
    if (d.ok) {
      msg.style.color = 'var(--navy)';
      msg.textContent = 'Invitation sent to ' + email + '. They will receive an email to set up their account.';
      document.getElementById('child-email').value = '';
      document.getElementById('child-dob-year').value = '';
      document.getElementById('family-attest').checked = false;
      loadFamilyMembers(parentEmail);
    } else {
      msg.style.color = '#c44';
      msg.textContent = d.error || 'Something went wrong.';
    }
  };

  window.removeFamilyMember = async function(childEmail) {
    var session = await sb.auth.getSession();
    var parentEmail = session.data.session && session.data.session.user ? session.data.session.user.email : '';
    await fetch('/api/family/remove', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({parent_email: parentEmail, child_email: childEmail})
    });
    loadFamilyMembers(parentEmail);
  };

  // ── Render user info ───────────────────────────────────────────────────────

  function renderUserChip(user) {
    var email = user.email || '';
    var avatarEl = document.getElementById('user-avatar-el');
    var emailEl = document.getElementById('user-email-el');
    var headerEmailEl = document.getElementById('acct-header-email');

    if (emailEl) emailEl.textContent = email;
    if (headerEmailEl) headerEmailEl.textContent = email;

    var avatarUrl = user.user_metadata && user.user_metadata.avatar_url;
    if (avatarEl) {
      if (avatarUrl) {
        avatarEl.innerHTML = '<img src=\"' + avatarUrl + '\" alt=\"\" referrerpolicy=\"no-referrer\">';
      } else {
        // Initials fallback
        var initial = email ? email.charAt(0).toUpperCase() : '?';
        avatarEl.textContent = initial;
      }
    }
  }

  // ── Load waitlist data ─────────────────────────────────────────────────────

  async function loadWaitlistData(email) {
    try {
      var sess = await sb.auth.getSession();
      var token = sess.data && sess.data.session ? sess.data.session.access_token : '';
      if (!token) { showNoPlan(); return; }

      var r = await fetch('/api/my-plan', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ access_token: token })
      });
      var row = await r.json();

      if (!row || !row.plan) { showNoPlan(); return; }
      renderPlanCard(row);
    } catch (e) {
      showNoPlan();
    }
  }

  // ── No plan — show pricing ─────────────────────────────────────────────────

  function showNoPlan() {
    var el = document.getElementById('plan-card');
    if (!el) return;
    el.innerHTML = '<div class=\"card-label\">Your plan</div>' +
      '<p style=\"font-family:var(--body);font-weight:500;font-size:1.125rem;color:var(--t1);margin-bottom:.75rem\">No active plan</p>' +
      '<p style=\"font-family:var(--body);font-weight:300;font-size:.9rem;color:var(--t2);line-height:1.7;margin-bottom:1.5rem\">You have an account but no plan selected yet. Pick one below to preorder.</p>' +
      '<div style=\"display:flex;gap:1rem;flex-wrap:wrap\">' +
        '<a href=\"/checkout?plan=founding\" class=\"btn-primary\" style=\"padding:.75rem 1.5rem\">Founding Member - $199 &#8594;</a>' +
        '<a href=\"/checkout?plan=professional\" class=\"btn-ghost\" style=\"padding:.75rem 1.5rem\">Professional - $19/mo</a>' +
        '<a href=\"/checkout?plan=free\" class=\"btn-ghost\" style=\"padding:.75rem 1.5rem\">Free tier</a>' +
      '</div>';
  }

  // ── Show dashboard ─────────────────────────────────────────────────────────

  function showDashboard(user) {
    hide('signin-section');
    show('dashboard-section');
    renderUserChip(user);
    loadWaitlistData(user.email);
  }

  // ── Init ───────────────────────────────────────────────────────────────────

  async function init() {
    var result = await sb.auth.getSession();
    var session = result.data && result.data.session;

    if (session && session.user) {
      showDashboard(session.user);
    } else {
      show('signin-section');
      hide('dashboard-section');
    }

    // Listen for auth changes (e.g. OAuth redirect return)
    sb.auth.onAuthStateChange(function(event, session) {
      if (session && session.user) {
        showDashboard(session.user);
      } else {
        show('signin-section');
        hide('dashboard-section');
      }
    });
  }

  init();

})();
</script>

</body>
</html>"
}
