{{template "header" .}}
<style>
.tv-pro { position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; text-align:center; padding:28px 16px; }
.tv-pro video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tv-pro .veil { position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 50% 40%, transparent 10%, #000a 80%); }
.tv-pro .box { position:relative; z-index:2; max-width:640px; width:100%; }
.tv-pro h1 { margin:0 0 10px; font-size:30px; }
.tv-skus { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; text-align:left; }
.tv-sku { padding:14px; border-radius:14px; background:#0c1016cc; border:1px solid #ffd36a33; }
.tv-sku b { color:#ffd36a; display:block; }
.tv-sku .l$ { font-size:22px; font-weight:800; margin:4px 0; }
.tv-sku em { font-style:normal; color:#9aa3ad; font-size:12px; }
.tv-sku button, .tv-sku .go {
  width:100%; margin-top:10px; min-height:44px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(180deg,#ffd36a,#f59f00); color:#1a1200; font-weight:800;
}
@media (max-width:700px){ .tv-skus { grid-template-columns:1fr; } }
</style>
<div class="tv-pro">
  <video autoplay muted loop playsinline poster="/static/cinema/bg.jpg"><source src="/static/cinema/bg.mp4" type="video/mp4"></video>
  <div class="veil"></div>
  <div class="box">
    <p class="kicker">Guest key</p>
    <h1>Watch together</h1>
    <p>You do not need to mint from someone else’s TV. Buy a Pro key for <b>this account</b>, then join the party. TVs still mint <b>one account each</b>.</p>
    {{if .License.Pro}}
      <p class="ok">Pro is already on. <a class="btn btn-green" href="/party">Open watch together</a></p>
    {{else}}
      <form method="post" action="/pay">
        <label class="agree-row" style="text-align:left;margin:12px 0">
          <input type="checkbox" name="s3_agree" value="1" required>
          <span>I will use my own S3 or disk for files I upload. Deimos does not host my videos.</span>
        </label>
        <div class="tv-skus">
          <div class="tv-sku">
            <b>Monthly</b>
            <div class="l$">$7</div>
            <em>Guest Pro · ~32 days</em>
            <button type="submit" name="sku" value="month">Buy monthly</button>
          </div>
          <div class="tv-sku">
            <b>Yearly</b>
            <div class="l$">$49</div>
            <em>Guest Pro · 1 year</em>
            <button type="submit" name="sku" value="pro">Buy yearly</button>
          </div>
          <div class="tv-sku">
            <b>Lifetime</b>
            <div class="l$">$129</div>
            <em>Never expires</em>
            <button type="submit" name="sku" value="life">Buy lifetime</button>
          </div>
        </div>
      </form>
      <p class="meta">Own a Deimos TV? <a href="/pro">Activate that set instead</a> (one account per TV).</p>
    {{end}}
    <p><a href="/party">Back to watch together</a></p>
  </div>
</div>
{{template "footer" .}}