<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Download Ambient — Earn with Your Idle Mac</title>
    <meta name="description" content="Download Ambient for macOS. Your Apple Silicon Mac transcribes audio while you sleep and earns a payout for every fragment it processes.">
    <link rel="stylesheet" href="/static/styles.css">
    <style>
      /* ── Download hero ───────────────────────────────────────────────── */
      .download-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 48px 0 36px;
        align-items: start;
      }
      @media (max-width: 640px) {
        .download-hero { grid-template-columns: 1fr; }
      }

      .dl-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(122, 211, 178, 0.1);
        border: 1px solid rgba(122, 211, 178, 0.3);
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 0.8rem;
        color: var(--mint);
        letter-spacing: 0.06em;
        margin-bottom: 24px;
      }
      .dl-badge::before { content: "●"; font-size: 0.5rem; }

      .dl-version {
        font-size: 0.82rem;
        color: var(--muted);
        margin-top: 10px;
      }

      .dl-req {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 20px;
      }
      .req-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        color: var(--muted);
        background: rgba(255,255,255,0.04);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px 12px;
      }

      /* ── Steps ──────────────────────────────────────────────────────── */
      .steps {
        display: grid;
        gap: 12px;
        margin-top: 32px;
      }
      .step {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 16px;
        align-items: start;
        padding: 20px;
        border: 1px solid var(--line);
        background: var(--bg-elevated);
        backdrop-filter: blur(20px);
        border-radius: 20px;
      }
      .step-num {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(208, 167, 110, 0.12);
        border: 1px solid rgba(208, 167, 110, 0.3);
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--gold-strong);
        flex-shrink: 0;
      }
      .step-body strong {
        display: block;
        margin-bottom: 4px;
        font-size: 0.95rem;
      }
      .step-body p {
        margin: 0;
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.6;
      }

      /* ── Menu bar preview ───────────────────────────────────────────── */
      .menubar-preview {
        padding: 28px;
        display: grid;
        gap: 0;
      }
      .menubar-strip {
        background: rgba(30, 34, 44, 0.95);
        border-radius: 12px 12px 0 0;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        border-bottom: 1px solid var(--line);
        font-size: 0.82rem;
        color: var(--muted);
      }
      .menubar-icon {
        font-size: 1rem;
        color: var(--text);
      }
      .menubar-dropdown {
        background: rgba(30, 34, 44, 0.98);
        border: 1px solid var(--line);
        border-radius: 0 0 16px 16px;
        overflow: hidden;
      }
      .menu-row {
        padding: 10px 18px;
        font-size: 0.88rem;
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .menu-row:last-child { border-bottom: none; }
      .menu-row.active { color: var(--mint); }
      .menu-row.muted { color: var(--muted); }
      .menu-row.sep { padding: 0; border-bottom: 1px solid var(--line); }
      .menu-val { color: var(--gold-strong); font-variant-numeric: tabular-nums; }

      /* ── Gatekeeper notice ──────────────────────────────────────────── */
      .notice {
        background: rgba(208, 167, 110, 0.07);
        border: 1px solid rgba(208, 167, 110, 0.25);
        border-radius: 16px;
        padding: 20px 24px;
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.7;
        margin-top: 28px;
      }
      .notice strong { color: var(--gold-strong); }

      /* ── Developer section ──────────────────────────────────────────── */
      .dev-section {
        margin-top: 64px;
        padding-top: 48px;
        border-top: 1px solid var(--line);
      }
    </style>
  </head>
  <body>
    <div class="shell">
      <header class="nav">
        <a class="brand" href="/">
          <span class="brand-mark">HC</span>
          <span>Ambient</span>
        </a>
        <nav class="nav-links">
          <a href="/">Overview</a>
          <a href="/earn">Earn</a>
          <a href="/trust">Why it's safe</a>
          <a href="/manager/login">Manager</a>
        </nav>
      </header>

      <main>
        <!-- ── Download hero ───────────────────────────────────────── -->
        <section class="download-hero">
          <div class="hero-copy">
            <div class="dl-badge">Now available — Beta</div>
            <h1 class="page-title">Your Mac earns<br>while you sleep.</h1>
            <p class="lead" style="margin-top: 20px;">
              Ambient runs quietly in your menu bar. When your screen locks, it transcribes
              audio in 60-second fragments using your GPU — and pays you for each one.
            </p>

            <div style="margin-top: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;">
              <a class="button" href="__APP_DOWNLOAD_URL__"
                 style="font-size: 1.05rem; padding: 16px 28px; display: inline-flex; align-items: center; gap: 10px;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 16l-6-6h4V4h4v6h4l-6 6zm-6 2h12v2H6v-2z"/>
                </svg>
                Download for Mac
              </a>
              <span class="dl-version">The button always uses Ambient's website download path. If beta access is not enabled for your account yet, use the CLI developer path below.</span>
            </div>

            <div class="dl-req">
              <span class="req-chip">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12z"/></svg>
                Apple Silicon (M1 or later)
              </span>
              <span class="req-chip">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/></svg>
                macOS 13 Ventura or later
              </span>
              <span class="req-chip">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
                Internet (one-time model download)
              </span>
            </div>
          </div>

          <!-- ── Menu bar preview ──────────────────────────────────── -->
          <div class="hero-panel menubar-preview">
            <div class="panel-kicker">What you'll see</div>
            <div style="margin-top: 16px;">
              <div class="menubar-strip">
                <span style="margin-right: auto; font-size: 0.75rem;">◎ Working</span>
                <span class="menubar-icon">◎</span>
              </div>
              <div class="menubar-dropdown">
                <div class="menu-row active">◎ Working</div>
                <div class="menu-row">Pending payout: <span class="menu-val">$2.43</span></div>
                <div class="menu-row muted">Shards: 127</div>
                <div class="menu-row sep" style="height:1px;"></div>
                <div class="menu-row">Pause</div>
                <div class="menu-row sep" style="height:1px;"></div>
                <div class="menu-row muted">Open Dashboard…</div>
                <div class="menu-row muted">Quit Ambient</div>
              </div>
            </div>
            <div style="margin-top: 20px; font-size: 0.82rem; color: var(--muted); line-height: 1.6;">
              Lives in your menu bar. Invisible when idle. Click to see earnings or pause anytime.
            </div>
          </div>
        </section>

        <!-- ── Setup steps ─────────────────────────────────────────── -->
        <section class="section">
          <div class="section-header">
            <div>
              <div class="eyebrow">Setup</div>
              <h2 class="section-title">Three steps, then done.</h2>
            </div>
          </div>

          <div class="steps">
            <div class="step">
              <div class="step-num">1</div>
              <div class="step-body">
                <strong>Download the Mac app</strong>
                <p>Download <code>Ambient.dmg</code> from this website, then drag Ambient to your Applications folder.</p>
              </div>
            </div>
            <div class="step">
              <div class="step-num">2</div>
              <div class="step-body">
                <strong>__SETUP_STEP_TWO_TITLE__</strong>
                <p>__SETUP_STEP_TWO_BODY__</p>
              </div>
            </div>
            <div class="step">
              <div class="step-num">3</div>
              <div class="step-body">
                <strong>Go about your day</strong>
                <p>When your screen locks and your Mac is on AC power, Ambient works in the background. Earnings accumulate in the menu bar while you sleep.</p>
              </div>
            </div>
          </div>

          <div class="notice">
            <strong>Beta note — Gatekeeper warning on first open.</strong><br>
            We're not yet code-signed with Apple. On first launch, macOS will say it can't verify the app.
            To open it: <strong>right-click Ambient → Open → Open</strong>. You only need to do this once.
            Code signing is coming before the public release.
          </div>
        </section>

        <!-- ── Privacy callout ─────────────────────────────────────── -->
        <section class="section">
          <div class="callout">
            <div class="eyebrow">Privacy</div>
            <h2 class="section-title">You process fragments, not recordings.</h2>
            <p class="lead">
              Each job is sliced into 60-second fragments before dispatch. Your Mac never receives
              a full recording — only a short clip with no metadata about the sender.
              Audio is processed in memory and discarded. Nothing is written to disk.
            </p>
            <div style="margin-top: 28px;">
              <a class="ghost-button" href="/trust">How sharding keeps audio private →</a>
            </div>
          </div>
        </section>

        <!-- ── Developer / CLI path ────────────────────────────────── -->
        <section class="section dev-section">
          <div class="section-header">
            <div>
              <div class="eyebrow">For developers</div>
              <h2 class="section-title">Prefer the terminal?</h2>
            </div>
            <p class="section-note">
              Same worker, same protocol — installed into a Python venv instead of an .app bundle.
            </p>
          </div>
          <div class="grid grid-2">
            <article class="code-panel">
              <h3>One-line install</h3>
              <pre><code id="install-command">__INSTALL_COMMAND__</code></pre>
              <div class="inline-actions">
                <button class="button" id="copy-install-command" type="button">Copy</button>
                <a class="ghost-button" href="/install.sh">Inspect script</a>
              </div>
              <p class="hint" id="copy-install-status" aria-live="polite"></p>
              <p class="helper">__INSTALL_HELPER_HTML__</p>
            </article>
            <article class="code-panel">
              <h3>Useful commands</h3>
              <pre><code>~/.hive-compute/venv/bin/hive status
~/.hive-compute/venv/bin/hive doctor
~/.hive-compute/venv/bin/hive logs
~/.hive-compute/venv/bin/hive start --no-idle-check</code></pre>
              <p class="helper">
                <code>doctor</code> checks config, Keychain, LaunchAgent wiring, and coordinator
                reachability. <code>--no-idle-check</code> is useful for testing.
              </p>
            </article>
          </div>
        </section>
      </main>

      <footer class="footer">
        Ambient Beta · <a href="/trust" style="opacity:0.6;">Privacy</a> · <a href="https://github.com/sburl/Ambient" style="opacity:0.6;">GitHub</a>
      </footer>
    </div>

    <script src="/static/download.js"></script>
  </body>
</html>
