<%

var inv   = locals.invite || {};
var ws    = inv.workspace || null;
var staff = ['staff', 'admin'].includes(inv.role);
var svcs  = locals.services && locals.services.length ? locals.services : [];
var MOD   = locals.MODULES || {};

var badge = (ws && ws.badge) || ((ws && ws.name) || '?').trim().slice(0, 2).toUpperCase();
var accent = (ws && ws.accentColor) || '#124F70';

var expires = inv.expiresAt ? new Date(inv.expiresAt) : null;
%>
<style>

  .auth{display:grid; grid-template-columns:520px minmax(0,1fr); min-height:100vh; background:var(--surface)}
  @media(max-width:1000px){ .auth{grid-template-columns:minmax(0,1fr)} }

  .auth-form{display:flex; flex-direction:column; padding:26px 40px 30px}
  @media(max-width:520px){ .auth-form{padding:22px 20px 26px} }
  .auth-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:auto}

  .auth-back{font-size:var(--fs-sm); font-weight:600; color:var(--teal-600); display:inline-flex; align-items:center; gap:6px}
  .auth-back:hover{text-decoration:underline}

  .auth-card{width:100%; max-width:360px; margin:0 auto; padding:22px 0 0}

  .lockup{display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:26px}

  .lockup img.vx{height:46px; width:auto; display:block}
  .lockup .sep{width:1px; height:34px; background:var(--line); flex:none}
  .lockup .cl{height:40px; width:auto; max-width:140px; object-fit:contain; display:block}

  .lockup .cl-fallback{height:40px; min-width:40px; padding:0 11px; border-radius:10px; color:#fff;
    font-family:'Unbounded',sans-serif; font-size:var(--fs-md); font-weight:400; letter-spacing:.02em;
    display:inline-flex; align-items:center; justify-content:center}

  .auth-card h1{font-family:'Unbounded',sans-serif; font-size:var(--fs-xl); font-weight:400; line-height:1.28;
    letter-spacing:-.02em; margin:0; text-align:center}

  .auth-card .lead{color:var(--muted); margin:9px 0 24px; font-size:var(--fs-base); text-align:center; line-height:1.6}
  .auth-card .lead b{color:var(--ink)}

  .field{margin-bottom:14px}

  .field label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted); display:block; margin-bottom:7px}

  .input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:8px;
    background:var(--surface); font-size:var(--fs-base); color:var(--ink); font-family:inherit}
  .input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}

  .hint{font-size:var(--fs-xs); color:var(--muted-2); margin-top:6px}

  .err-box{background:var(--neg-tint); color:var(--neg); font-size:var(--fs-base); font-weight:600;
    padding:10px 13px; border-radius:8px; margin-bottom:16px}

  .auth-foot{margin-top:20px; font-size:var(--fs-xs); color:var(--muted-2); text-align:center; line-height:1.7}
  .auth-foot a{color:var(--teal-600); font-weight:600}

  .auth-by{margin-top:auto; padding-top:26px; text-align:center; font-size:var(--fs-xs); color:var(--muted-2)}

  .inv-stage{background:linear-gradient(160deg,#091122,#182748); color:#fff; position:relative;
    overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:64px 68px}
  @media(max-width:1000px){ .inv-stage{display:none} }

  .inv-stage::before{content:""; position:absolute; width:700px; height:700px; border-radius:50%;
    background:radial-gradient(circle, rgba(0,125,137,.20), transparent 68%); top:-22%; right:-14%}
  .inv-stage::after{content:""; position:absolute; width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle, rgba(120,192,60,.13), transparent 66%); bottom:-24%; left:-12%}
  .inv-in{position:relative; z-index:1; max-width:520px}

  .inv-eyebrow{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.62); margin-bottom:16px}

  .inv-in h2{font-family:'Unbounded',sans-serif; font-weight:400; font-size:var(--fs-2xl); line-height:1.22;
    letter-spacing:-.02em; margin:0}
  .inv-in h2 em{font-style:normal; color:var(--green)}

  .inv-in .sub{margin-top:14px; font-size:var(--fs-base); line-height:1.7; color:rgba(255,255,255,.80); max-width:440px}

  .inv-mods{margin-top:34px; display:flex; flex-direction:column; gap:2px}
  .inv-mod{display:flex; gap:13px; align-items:flex-start; padding:13px 0;
    border-top:1px solid rgba(255,255,255,.10)}
  .inv-mod:last-child{border-bottom:1px solid rgba(255,255,255,.10)}
  .inv-mod .tick{flex:none; width:19px; height:19px; border-radius:50%; margin-top:1px;
    background:rgba(120,192,60,.16); display:flex; align-items:center; justify-content:center}

  .inv-mod b{display:block; font-size:var(--fs-base); font-weight:600; letter-spacing:-.01em}

  .inv-mod span{display:block; font-size:var(--fs-sm); line-height:1.55; color:rgba(255,255,255,.66); margin-top:3px}

  .inv-by{position:absolute; left:68px; bottom:38px; z-index:1;
    font-size:var(--fs-sm); color:rgba(255,255,255,.55); letter-spacing:.02em}
</style>

<div class="auth">
  <div class="auth-form">
    <div class="auth-top">
      <a class="auth-back" href="https://www.voctos.com/">
        <svg viewBox="0 0 12 12" width="11" height="11" fill="none" aria-hidden="true"><path d="M7.5 2.5L4 6l3.5 3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Return to voctos.com
      </a>
    </div>

    <div class="auth-card">

      <div class="lockup">
        <img class="vx" src="/img/voctos-logo.png" alt="VOCTOS">
        <% if (ws) { %>
          <span class="sep" aria-hidden="true"></span>
          <% if (ws.logoUrl) { %>
            <img class="cl" src="<%= ws.logoUrl %>" alt="<%= ws.name %>">
          <% } else { %>
            <span class="cl-fallback" style="background:<%= accent %>" title="<%= ws.name %>"><%= badge %></span>
          <% } %>
        <% } %>
      </div>

      <h1><%= staff ? 'Join the VOCTOS team' : 'Create your account' %></h1>
      <div class="lead">
        <% if (staff) { %>
          You've been invited to the agency portal as <b><%= inv.role %></b>.
        <% } else if (ws) { %>
          <b><%= ws.name %></b>'s portal, run by VOCTOS. Set a password and you're in.
        <% } else { %>
          Set a password and you're in.
        <% } %>
        <br>Signing in as <b><%= inv.email %></b>
      </div>

      <% if (flash && flash.error && flash.error.length) { %><div class="err-box" role="alert" aria-live="assertive"><%= flash.error[0] %></div><% } %>

      <form method="POST" action="/invite/<%= token %>">
        <div class="field">
          <label for="nm">Your name</label>
          <input class="input" id="nm" name="name" value="<%= inv.name || '' %>" placeholder="Full name"
                 autocomplete="name" autofocus required>
        </div>
        <div class="field">
          <label for="pw">Choose a password</label>
          <input class="input" id="pw" type="password" name="password" minlength="8"
                 placeholder="At least 8 characters" autocomplete="new-password" required>
          <div class="hint">Eight characters or more. Nobody at VOCTOS can see it.</div>
        </div>
        <button class="btn btn-primary" style="width:100%; padding:12px" type="submit">Create account &amp; enter →</button>
      </form>

      <div class="auth-foot">
        <% if (expires) { %>This link works until <b><%= h.dateOnly(expires) %></b> and can only be used once.<br><% } %>
        Not expecting this? <a href="https://www.voctos.com/contact/">Tell us</a> and we'll cancel it.
      </div>
    </div>

    <div class="auth-by">one search · more worth</div>
  </div>

  <div class="inv-stage">
    <div class="inv-in">
      <div class="inv-eyebrow"><%= staff ? 'Agency access' : 'Your client portal' %></div>
      <% if (staff) { %>
        <h2>Every client, <em>one place</em>.</h2>
        <div class="sub">Delivery, reporting and the work behind it, for every client you're put on.</div>
      <% } else { %>
        <h2>Welcome<%= ws ? ',' : '' %><br><em><%= ws ? ws.name : 'aboard' %></em>.</h2>
        <div class="sub">Everything we do for you, as it happens. No monthly PDF, no waiting for a call to find out where things stand.</div>
      <% } %>

      <% if (!staff && svcs.length) { %>
        <div class="inv-mods">
          <% svcs.forEach(function (s) { var m = MOD[s]; if (!m) return; %>
            <div class="inv-mod">
              <span class="tick" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11" fill="none"><path d="M2.5 6.2 4.8 8.5 9.5 3.8" stroke="#78C03C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
              <span><b><%= m.name %></b><span><%= m.value %></span></span>
            </div>
          <% }) %>
        </div>
      <% } %>
    </div>
    <div class="inv-by">portal.voctos.com</div>
  </div>
</div>
