{{template "header" .}}
<style>
html[data-home="tv"] .header, html[data-home="tv"] .led, html[data-home="tv"] .site-foot, html[data-home="tv"] .sidebar { display:none !important; }
html[data-home="tv"], html[data-home="tv"] body, html[data-home="tv"] .layout, html[data-home="tv"] .main {
  margin:0 !important; padding:0 !important; overflow:auto !important; height:100% !important; background:#050308;
}
.tv-pro { position:relative; min-height:100dvh; background:#050308; color:#eef7ff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 16px 48px; }
.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:720px; width:100%; }
.tv-pro img.mark { width:72px; height:72px; border-radius:50%; box-shadow:0 0 28px #ffd36a99; margin-bottom:10px; }
.tv-pro .kicker { letter-spacing:.34em; text-transform:uppercase; color:#ffd36a; font-size:12px; font-weight:700; margin:0 0 6px; }
.tv-pro .level {
  margin: 0 auto 18px; max-width: 560px; padding: 12px 16px;
  border-radius: 12px; background: #0c1016cc; border: 1px solid #ffd36a55;
  color: #ffd36a; font-size: 18px; font-weight: 700; letter-spacing: .02em;
}
.tv-pro p { color:#c5ced6; margin:0 0 14px; }
.tv-pro .ok { color:#12b886; font-weight:700; margin-bottom:14px; }
.tv-pro .alert { color:#ff6b7d; margin-bottom:14px; }
.tv-pro .go {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:280px; min-height:64px; padding:16px 28px; border-radius:16px;
  background:linear-gradient(180deg,#ffd36a,#f59f00); color:#1a1200;
  font-size:22px; font-weight:800; text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 10px 32px #ffd36a66;
}
.tv-pro .go:hover { filter:brightness(1.08); }
.tv-pro a.back { display:inline-block; margin-top:18px; color:#9aa3ad; text-decoration:none; }
.tv-skus { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 22px; text-align:left; }
.tv-sku { padding:14px; border-radius:14px; background:#0c1016cc; border:1px solid #ffd36a33; }
.tv-sku b { display:block; color:#ffd36a; font-size:15px; }
.tv-sku .l$ { font-size:22px; font-weight:800; color:#fff; margin:4px 0; }
.tv-sku em { display:block; font-style:normal; color:#9aa3ad; font-size:12px; line-height:1.4; }
.tv-pro .keybox { margin:12px auto 0; max-width:520px; padding:12px; border-radius:10px; background:#07080c; border:1px solid #ffd36a44; font-size:12px; word-break:break-all; text-align:left; color:#d6f6ff; }
.tv-pro .key-form { margin:18px auto 8px; max-width:520px; text-align:left; }
.tv-pro .key-form label { display:block; color:#ffd36a; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin:0 0 8px; }
.tv-pro .key-form textarea {
  width:100%; min-height:96px; box-sizing:border-box; padding:14px;
  border-radius:12px; background:#07080c; border:1px solid #ffd36a55;
  color:#eef7ff; font-size:16px; line-height:1.4; resize:vertical;
}
.tv-pro .key-form .go { width:100%; margin-top:12px; }
.tv-pro .host { margin-top:14px; background:linear-gradient(180deg,#2ee6a6,#157aa0); color:#041018; box-shadow:0 10px 32px #2ee6a666; }
@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">
    <img class="mark" src="/static/img/logo.png" alt="Deimos">
    <p class="kicker">Deimos.TV</p>
    <h1>Buy Deimos.TV Pro</h1>
    <p class="level">{{.MemberLevel}}</p>
    {{if .OK}}<p class="ok">{{.OK}}</p>{{end}}
    {{if .Error}}<p class="alert">{{.Error}}</p>{{end}}

    {{if .Issued.Key}}
      <p>Save this key. Paste it under License on Windows or Mac if you use the desktop player.</p>
      <div class="keybox">{{.Issued.Key}}</div>
      <p class="meta" style="margin-top:10px">This TV is locked to <b>one account</b>. A second login cannot mint from it.</p>
      <a class="go" href="/">Home</a>
    {{else if .ClaimTok}}
      {{if .User}}
        <p>This code is from <b>your</b> TV. It unlocks <b>one Cinema account only</b>. A second account on this set is refused.</p>
        <form method="post" action="/pro">
          <input type="hidden" name="claim" value="{{.ClaimTok}}">
          <button class="go" type="submit">Activate this TV</button>
        </form>
      {{else}}
        <p>Sign in with the account that should own Pro, then activate.</p>
        <a class="go" href="/login?next={{urlquery (printf "/pro?claim=%s" .ClaimTok)}}">Sign in to activate</a>
      {{end}}
      <a class="back" href="/">Home</a>
    {{else if and .License.Pro (not .IsSuper)}}
      <p class="ok">{{.License.Reason}}</p>
      <a class="go" href="/">Home</a>
    {{else}}
      {{if .License.Pro}}<p class="ok">{{.License.Reason}}</p>{{end}}
      <p>Software shop is $7 / month, $49 / year, $129 lifetime (Windows & Mac).<br>
         The <b>TV you bought</b> is a different product — Pro is included at the Linden price on the box.</p>
      <div class="tv-skus">
        {{range .TVProducts}}
        <div class="tv-sku">
          <b>{{.Name}}</b>
          <div class="l$">{{.Linden}} L$</div>
          <em>{{.Blurb}}</em>
        </div>
        {{end}}
      </div>
      {{if .Cinema}}
        {{if .User}}
        <form class="key-form" method="post" action="/pro">
          <label for="key">Paste a shop key</label>
          <textarea id="key" name="key" rows="3" placeholder="Paste the key from your Deimos.TV receipt"></textarea>
          <button class="go" type="submit">Activate key</button>
        </form>
        {{else}}
        <p>Sign in first if you have a shop key to paste.</p>
        <a class="go" href="/login?next=/pro">Sign in</a>
        {{end}}
        {{if .IsSuper}}
          <p>Or turn Pro on for this host copy (no key). Members use <b>TV Menu → Go Pro</b> on the set they bought.</p>
          <form method="post" action="/pro"><button class="go host" type="submit">Host Pro on</button></form>
        {{else}}
          <p>Bought a TV? Use <b>TV Menu → Go Pro</b> on that set. Owner only. One account per TV. Max 3 TVs per avatar.</p>
        {{end}}
      {{else if not .User}}
        <p>Windows and Mac: buy a shop key, then paste it under License.</p>
        <a class="go" href="{{.ShopURL}}/#pricing">Buy a shop key</a>
      {{else}}
        <p>This player does not mint keys. Buy on the shop, then paste.</p>
        <a class="go" href="{{.ShopURL}}/#pricing">Buy a shop key</a>
      {{end}}
      <a class="back" href="/">Home</a>
    {{end}}
  </div>
</div>
{{template "footer" .}}