{{define "sync-gate"}}
<style>
.sync-gate {
  position: relative; z-index: 8; margin: 12px 0 0;
  padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(180deg, #1a1408ee, #0c1016f2);
  border: 1px solid #ffd36a66; color: #f4ead4;
}
.sync-gate h2 { margin: 0 0 8px; font-size: 22px; }
.sync-gate .skus button, .sync-gate .skus .go, .sync-gate .btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding: 10px 16px; border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(180deg,#ffd36a,#f59f00); color:#1a1200; font-weight:800;
  text-decoration:none; margin-right:8px;
}
.sync-gate .btn-outline {
  background: transparent; border: 1px solid #ffd36a99; color: #ffd36a;
}
.sync-gate .skus { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin:12px 0; }
.sync-gate .skus button { width:100%; margin:0; }
.sync-gate .agree { display:flex; gap:8px; align-items:flex-start; font-size:13px; margin:8px 0; text-align:left; }
.sync-gate .kicker { letter-spacing:.2em; text-transform:uppercase; font-size:12px; color:#e8c36a; margin:0 0 6px; }
.sync-gate .meta { font-size:13px; color:#cbb894; }
@media (max-width:700px){ .sync-gate .skus { grid-template-columns: 1fr; } }
body.cinema .sync-gate, .tv.cinema .sync-gate {
  position: fixed; left: 28px; right: 28px; bottom: 96px; max-width: 560px;
  z-index: 30; pointer-events: auto;
}
</style>
{{if not .License.Pro}}
<div class="sync-gate" id="sync-gate">
  <p class="kicker">Watch together</p>
  <h2>Your own seat</h2>
  <p>Any number of people can play in sync. Each account needs Pro — from <b>their own TV</b> (one account per set) or a <b>guest key bought on this screen</b>.</p>
  {{if .User}}
  <form method="post" action="/pay">
    <label class="agree"><input type="checkbox" name="s3_agree" value="1" required> <span>I will use my own S3 or disk. Deimos does not host my files.</span></label>
    <div class="skus">
      <button type="submit" name="sku" value="month">$7 / mo</button>
      <button type="submit" name="sku" value="pro">$49 / year</button>
      <button type="submit" name="sku" value="life">$129 life</button>
    </div>
  </form>
  <p class="meta"><a href="/pro">I bought a TV — activate that set</a></p>
  {{else}}
  <p>
    <a class="btn btn-green" href="/login?next={{urlquery .ClaimTok}}">Sign in</a>
    <a class="btn btn-outline" href="/register?next={{urlquery .ClaimTok}}">Create account</a>
  </p>
  {{end}}
  <p><button type="button" class="btn btn-outline" id="sync-gate-skip">Watch without sync</button></p>
</div>
<script>
(function(){
  var g = document.getElementById('sync-gate');
  var s = document.getElementById('sync-gate-skip');
  if (s && g) s.onclick = function(){ g.style.display = 'none'; };
})();
</script>
{{end}}
{{end}}