<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Projects -- Vekt Studio</title>
<style>
:root{
  --bg:#14110f; --panel:#1e1a16; --panel2:#241e18; --border:#2e2822;
  --text:#e8e0d4; --muted:#a89a86; --gold:#c98d5a; --gold-hi:#dda671;
  --red:#8a2b2b; --green:#6f9e6f; --amber:#c9a25a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
h1,h2,h3,.brand,footer{font-family:Georgia,"Times New Roman",serif;}
a{color:inherit;text-decoration:none}
/* ---------- NAV ---------- */
header.nav{display:flex;align-items:center;gap:28px;padding:14px 26px;
  border-bottom:1px solid var(--border);background:#171310;position:sticky;top:0;z-index:40;}
.brand{font-size:20px;letter-spacing:.5px;color:var(--text)}
.brand span{color:var(--gold)}
nav.links{display:flex;gap:20px;flex:1}
nav.links a{font-size:14px;color:var(--muted);padding:4px 2px;border-bottom:2px solid transparent}
nav.links a:hover{color:var(--text)}
nav.links a.active{color:var(--gold);border-bottom-color:var(--gold)}
.badge{font-size:11px;letter-spacing:1.5px;padding:4px 12px;border-radius:20px;
  border:1px solid var(--border);color:var(--muted);background:var(--panel)}
.badge.pro{color:#14110f;background:var(--gold);border-color:var(--gold);font-weight:700}
/* ---------- LAYOUT ---------- */
.wrap{display:grid;grid-template-columns:1fr 340px;gap:22px;max-width:1320px;
  margin:0 auto;padding:26px;}
@media(max-width:980px){.wrap{grid-template-columns:1fr}}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;margin-bottom:18px}
.pagehead h1{margin:0 0 6px;font-size:30px;font-weight:600}
.pagehead .sub{margin:0;color:var(--muted);font-size:14px;max-width:560px;line-height:1.5}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stats{color:var(--muted);font-size:13px;margin:0 0 16px}
/* ---------- BUTTONS ---------- */
.btn{background:var(--gold);color:#14110f;border:1px solid var(--gold);border-radius:8px;
  padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.btn.ghost:hover{background:rgba(201,141,90,.12)}
.btn.danger{background:var(--red);border-color:var(--red);color:#f3e6e6}
.btn.danger:hover{background:#a03535}
.btn.big{width:100%;padding:13px;font-size:15px}
select,input[type=text],input[type=password],input[type=email],textarea{
  background:var(--panel2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 11px;font-size:14px;font-family:inherit}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--gold)}
label.f{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px;letter-spacing:.4px}
/* ---------- GRID ---------- */
.gridzone{position:relative;min-height:280px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.grid.locked{filter:blur(7px);pointer-events:none;user-select:none}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s;position:relative}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.thumb{width:100%;aspect-ratio:4/3;background:#0e0c0a;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.noimg{flex-direction:column;gap:8px;color:var(--muted);font-size:12px}
.folder{width:52px;height:36px;background:var(--panel2);border:1px solid var(--border);
  border-radius:4px;position:relative}
.folder::before{content:"";position:absolute;top:-7px;left:4px;width:22px;height:8px;
  background:var(--panel2);border:1px solid var(--border);border-bottom:none;
  border-radius:3px 3px 0 0}
.cbody{padding:12px 14px 14px}
.cname{font-size:15px;font-weight:600;margin:0 22px 6px 0;font-family:Georgia,serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta{font-size:12px;color:var(--muted);line-height:1.6}
.pill{display:inline-block;font-size:10px;letter-spacing:1px;text-transform:uppercase;
  padding:3px 9px;border-radius:12px;margin-top:8px;border:1px solid}
.pill.draft{color:var(--muted);border-color:var(--border)}
.pill.complete{color:var(--green);border-color:var(--green)}
.pill.shipped{color:var(--gold);border-color:var(--gold)}
.dots{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--border);background:rgba(20,17,15,.85);color:var(--text);
  font-size:16px;line-height:1;cursor:pointer}
.dots:hover{border-color:var(--gold);color:var(--gold)}
.menu{position:absolute;top:44px;right:10px;background:var(--panel2);
  border:1px solid var(--border);border-radius:10px;min-width:150px;z-index:20;
  box-shadow:0 10px 30px rgba(0,0,0,.5);overflow:hidden}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;
  color:var(--text);padding:10px 14px;font-size:13px;cursor:pointer;font-family:inherit}
.menu button:hover{background:rgba(201,141,90,.14)}
.menu button.danger{color:#e0a0a0}
.rename-in{width:92%;margin:0 0 6px;padding:5px 8px;font-size:14px}
.empty{border:1px dashed var(--border);border-radius:12px;padding:46px 20px;
  text-align:center;color:var(--muted);font-size:14px;line-height:1.7;grid-column:1/-1}
.lock overlay{}
.lockov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;z-index:10;text-align:center;padding:20px}
.lockov h2{margin:0;font-size:24px}
.lockov p{margin:0;color:var(--muted);font-size:14px;max-width:420px;line-height:1.6}
/* ---------- ASSISTANT ---------- */
.assist{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;height:fit-content;
  position:sticky;top:78px}
.assist-head{padding:14px 16px;border-bottom:1px solid var(--border)}
.assist-head h2{margin:0 0 10px;font-size:18px}
.assist-head select{width:100%}
.chat{height:320px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:rgba(201,141,90,.18);border:1px solid rgba(201,141,90,.4)}
.msg.agent{align-self:flex-start;background:var(--panel2);border:1px solid var(--border)}
.msg.note{align-self:center;background:none;border:1px dashed var(--border);
  color:var(--muted);font-size:12px}
.typing{align-self:flex-start;color:var(--muted);font-size:13px;font-style:italic}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 12px}
.quick button{background:var(--panel2);border:1px solid var(--border);color:var(--muted);
  border-radius:8px;padding:8px 6px;font-size:11.5px;cursor:pointer;font-family:inherit}
.quick button:hover{color:var(--gold);border-color:var(--gold)}
.chat-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border)}
.chat-input input{flex:1}
.chat-input button{background:var(--gold);border:none;color:#14110f;font-weight:600;
  border-radius:8px;padding:0 16px;cursor:pointer;font-family:inherit}
.chat-input button:hover{background:var(--gold-hi)}
/* ---------- MODALS ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,6,5,.82);display:none;
  align-items:center;justify-content:center;z-index:100;padding:20px}
.overlay.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:16px;
  width:100%;max-width:430px;padding:28px;position:relative;
  box-shadow:0 24px 70px rgba(0,0,0,.6);max-height:92vh;overflow-y:auto}
.modal.small{max-width:380px}
.modal h2{margin:0 0 4px;font-size:24px;color:var(--gold)}
.modal h3{margin:0 0 10px;font-size:19px}
.modal .tag{color:var(--muted);font-size:13px;margin:0 0 16px;line-height:1.5}
.modal ul{margin:0 0 18px;padding-left:18px;color:var(--text);font-size:14px;line-height:2}
.modal ul li::marker{color:var(--gold)}
.modal .x{position:absolute;top:12px;right:14px;background:none;border:none;
  color:var(--muted);font-size:22px;cursor:pointer}
.modal .x:hover{color:var(--text)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal input{width:100%}
.err{color:#e09090;font-size:12.5px;min-height:18px;margin:8px 0}
.mrow{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--gold);color:var(--text);
  padding:13px 22px;border-radius:12px;font-size:14px;z-index:200;display:none;
  box-shadow:0 12px 40px rgba(0,0,0,.55);max-width:90vw;text-align:center}
.toast.show{display:block}
/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border);margin-top:30px;padding:26px;
  text-align:center;color:var(--muted);font-size:14px;line-height:1.7}
footer b{color:var(--gold);font-weight:600}
</style>
</head>
<body>

<header class="nav">
  <div class="brand">Vekt <span>Studio</span></div>
  <nav class="links">
    <a href="/">Vekt</a>
    <a href="viewer.html">Tools</a>
    <a href="index.html">Create</a>
    <a href="/terms">Terms</a>
    <a href="index.html" class="active">Studio</a>
  </nav>
  <span class="badge" id="subBadge">FREE</span>
</header>

<div class="wrap">
  <main>
    <div class="pagehead">
      <div>
        <h1>Your Projects</h1>
        <p class="sub">We have built the ultimate AI studio -- without the media agency price.
        Organize generated and imported graphics into folders, then open them in the Viewer,
        preview them at scale, and ship them to a print house.</p>
      </div>
      <div class="actions">
        <select id="importTarget" title="Import destination project"></select>
        <button class="btn ghost" id="importBtn">Import Gallery</button>
        <button class="btn" id="newBtn">New Project</button>
      </div>
    </div>
    <p class="stats" id="statsLine"></p>

    <div class="gridzone">
      <div class="grid" id="grid"></div>
      <div class="lockov" id="lockOv" style="display:none">
        <h2>Subscribe to unlock your project folders</h2>
        <p>Vekt Pro gives you unlimited project folders to house every graphic you create,
        from social sizes to full building wraps. Just Vekt it.</p>
        <button class="btn" id="viewPlansBtn">View Plans</button>
      </div>
    </div>
  </main>

  <aside class="assist">
    <div class="assist-head">
      <h2>Vekt Assist</h2>
      <select id="persona">
        <option>Prompt Coach</option>
        <option>Dimension Agent</option>
        <option>Preflight Agent</option>
        <option>Legal Cop</option>
      </select>
    </div>
    <div class="chat" id="chat"></div>
    <div class="quick">
      <button data-q="pop">Make my prompt pop</button>
      <button data-q="billboard">What size for a billboard?</button>
      <button data-q="preflight">Preflight this graphic</button>
      <button data-q="tm">Trademark check</button>
    </div>
    <div class="chat-input">
      <input type="text" id="chatIn" placeholder="Ask Vekt Assist..." autocomplete="off">
      <button id="chatSend">Send</button>
    </div>
  </aside>
</div>

<footer>

  <b>Just Vekt it.</b>
</footer>

<input type="file" id="fileInput" accept="image/*" multiple style="display:none">

<!-- PAYWALL MODAL -->
<div class="overlay" id="paywall">
  <div class="modal">
    <button class="x" id="payClose" aria-label="Close">&times;</button>
    <h2>Vekt Pro -- $19/mo</h2>
    <p class="tag">We have built the ultimate AI studio -- without the media agency price.</p>
    <ul>
      <li>Unlimited generations</li>
      <li>Project folders</li>
      <li>All print sizes</li>
      <li>Billboards to building wraps</li>
      <li>Trademark sweep</li>
      <li>Print-house shipping</li>
    </ul>
    <form id="payForm" novalidate>
      <label class="f" for="ccName">Name on card</label>
      <input type="text" id="ccName" autocomplete="cc-name">
      <label class="f" for="ccNum">Card number</label>
      <input type="text" id="ccNum" inputmode="numeric" autocomplete="cc-number" placeholder="4242 4242 4242 4242">
      <div class="row2">
        <div>
          <label class="f" for="ccExp">Expiry MM/YY</label>
          <input type="text" id="ccExp" inputmode="numeric" autocomplete="cc-exp" placeholder="MM/YY">
        </div>
        <div>
          <label class="f" for="ccCvc">CVC</label>
          <input type="text" id="ccCvc" inputmode="numeric" autocomplete="cc-csc" placeholder="123">
        </div>
      </div>
      <div class="err" id="payErr"></div>
      <button class="btn big" id="payBtn" type="submit">Pay $19/mo</button>
    </form>
  </div>
</div>

<!-- CONFIRM MODAL -->
<div class="overlay" id="confirmOv">
  <div class="modal small">
    <h3 id="confirmTitle">Please confirm</h3>
    <p id="confirmMsg" style="color:var(--muted);font-size:14px;line-height:1.6;margin:0"></p>
    <div class="mrow">
      <button class="btn ghost" id="confirmNo">Cancel</button>
      <button class="btn danger" id="confirmYes">Delete</button>
    </div>
  </div>
</div>

<div class="toast" id="toast"></div>

<script>
(function(){
"use strict";
/* ================= STATE ================= */
function loadProjects(){
  try{
    var p=JSON.parse(localStorage.getItem("vekt.projects")||"[]");
    if(!Array.isArray(p)) p=[];
    p.forEach(function(pr){
      if(!Array.isArray(pr.images)) pr.images=[];
      if(!pr.status) pr.status="draft";
    });
    return p;
  }catch(e){ return []; }
}
function saveProjects(p){ localStorage.setItem("vekt.projects",JSON.stringify(p)); }
function isSub(){ return localStorage.getItem("vekt.subscriber")==="true"; }
function uid(){ return "id-"+Date.now().toString(36)+"-"+Math.random().toString(36).slice(2,9); }
function esc(s){ return String(s==null?"":s).replace(/[&<>"']/g,function(c){
  return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]; }); }
function fmtDate(t){ try{ return new Date(t).toLocaleDateString(undefined,{year:"numeric",month:"short",day:"numeric"}); }catch(e){ return ""; } }
function sig(ms){ var c=new AbortController(); setTimeout(function(){c.abort();},ms); return c.signal; }

/* ================= DOM ================= */
var grid=document.getElementById("grid"),
    lockOv=document.getElementById("lockOv"),
    statsLine=document.getElementById("statsLine"),
    subBadge=document.getElementById("subBadge"),
    importTarget=document.getElementById("importTarget"),
    fileInput=document.getElementById("fileInput"),
    toastEl=document.getElementById("toast"),
    paywall=document.getElementById("paywall"),
    confirmOv=document.getElementById("confirmOv");

var toastTimer=null;
function toast(msg){
  toastEl.textContent=msg;
  toastEl.classList.add("show");
  clearTimeout(toastTimer);
  toastTimer=setTimeout(function(){toastEl.classList.remove("show");},3800);
}

/* ================= PAYWALL ================= */
var pendingAction=null;
function gate(fn){ if(isSub()){ fn(); } else { pendingAction=fn; paywall.classList.add("open"); } }

document.getElementById("payClose").addEventListener("click",function(){
  paywall.classList.remove("open"); pendingAction=null;
});

var ccNum=document.getElementById("ccNum"),
    ccExp=document.getElementById("ccExp"),
    ccCvc=document.getElementById("ccCvc"),
    ccName=document.getElementById("ccName"),
    payErr=document.getElementById("payErr"),
    payBtn=document.getElementById("payBtn");

ccNum.addEventListener("input",function(){
  ccNum.value=ccNum.value.replace(/\D/g,"").slice(0,16).replace(/(.{4})/g,"$1 ").trim();
});
ccExp.addEventListener("input",function(){
  var v=ccExp.value.replace(/\D/g,"").slice(0,4);
  ccExp.value = v.length>2 ? v.slice(0,2)+"/"+v.slice(2) : v;
});
ccCvc.addEventListener("input",function(){
  ccCvc.value=ccCvc.value.replace(/\D/g,"").slice(0,4);
});

document.getElementById("payForm").addEventListener("submit",function(e){
  e.preventDefault();
  payErr.textContent="";
  var digits=ccNum.value.replace(/\D/g,"");
  if(!ccName.value.trim()){ payErr.textContent="Enter the name on the card."; return; }
  if(digits.length<15){ payErr.textContent="Enter a valid card number."; return; }
  if(!/^(0[1-9]|1[0-2])\/\d{2}$/.test(ccExp.value)){ payErr.textContent="Enter expiry as MM/YY."; return; }
  if(!/^\d{3,4}$/.test(ccCvc.value)){ payErr.textContent="Enter the 3 or 4 digit CVC."; return; }
  payBtn.disabled=true;
  payBtn.textContent="Processing payment...";
  setTimeout(function(){
    localStorage.setItem("vekt.subscriber","true");
    payBtn.disabled=false;
    payBtn.textContent="Pay $19/mo";
    paywall.classList.remove("open");
    refreshBadge();
    renderProjects();
    toast("You are subscribed. Welcome to Vekt Pro.");
    var fn=pendingAction; pendingAction=null;
    if(fn) fn();
  },2500);
});

function refreshBadge(){
  if(isSub()){ subBadge.textContent="PRO"; subBadge.classList.add("pro"); }
  else{ subBadge.textContent="FREE"; subBadge.classList.remove("pro"); }
}

/* ================= CONFIRM MODAL ================= */
var confirmCb=null;
function confirmBox(title,msg,yesLabel,cb){
  document.getElementById("confirmTitle").textContent=title;
  document.getElementById("confirmMsg").textContent=msg;
  document.getElementById("confirmYes").textContent=yesLabel||"Delete";
  confirmCb=cb;
  confirmOv.classList.add("open");
}
document.getElementById("confirmNo").addEventListener("click",function(){
  confirmOv.classList.remove("open"); confirmCb=null;
});
document.getElementById("confirmYes").addEventListener("click",function(){
  confirmOv.classList.remove("open");
  var cb=confirmCb; confirmCb=null;
  if(cb) cb();
});

/* ================= RENDER GRID ================= */
function renderProjects(){
  var ps=loadProjects();
  var sub=isSub();
  var total=ps.reduce(function(a,p){return a+p.images.length;},0);
  statsLine.textContent = ps.length+" project folder"+(ps.length===1?"":"s")+
    " / "+total+" graphic"+(total===1?"":"s")+" stored";

  /* import target select */
  var prev=importTarget.value;
  importTarget.innerHTML="";
  ps.forEach(function(p){
    var o=document.createElement("option");
    o.value=p.id; o.textContent=p.name;
    importTarget.appendChild(o);
  });
  if(prev && ps.some(function(p){return p.id===prev;})) importTarget.value=prev;
  importTarget.disabled=!sub;

  grid.innerHTML="";
  if(ps.length===0){
    if(sub){
      grid.innerHTML='<div class="empty">No projects yet.<br>Select <b>New Project</b> to create your first folder, or import images with <b>Import Gallery</b>. Graphics you generate in the Artroom and save will appear here.</div>';
    }else{
      for(var i=0;i<3;i++){
        var sk=document.createElement("div");
        sk.className="card";
        sk.innerHTML='<div class="thumb noimg"><div class="folder"></div><span>Project folder</span></div>'+
          '<div class="cbody"><p class="cname">Project folder</p>'+
          '<div class="cmeta">Your saved graphics live here</div>'+
          '<span class="pill draft">draft</span></div>';
        grid.appendChild(sk);
      }
    }
  }else{
    ps.forEach(function(p){ grid.appendChild(buildCard(p)); });
  }

  if(sub){ grid.classList.remove("locked"); lockOv.style.display="none"; }
  else{ grid.classList.add("locked"); lockOv.style.display="flex"; }
}

function buildCard(p){
  var card=document.createElement("div");
  card.className="card";
  card.dataset.id=p.id;
  var n=p.images.length;
  var thumbHtml = n>0
    ? '<div class="thumb"><img src="'+p.images[0].b64+'" alt=""></div>'
    : '<div class="thumb noimg"><div class="folder"></div><span>No images yet</span></div>';
  card.innerHTML =
    thumbHtml+
    '<button class="dots" title="Project options">&#8942;</button>'+
    '<div class="menu" style="display:none">'+
      '<button data-act="rename">Rename</button>'+
      '<button data-act="complete">Mark Complete</button>'+
      '<button data-act="shipped">Mark Shipped</button>'+
      '<button class="danger" data-act="delete">Delete</button>'+
    '</div>'+
    '<div class="cbody">'+
      '<p class="cname">'+esc(p.name)+'</p>'+
      '<div class="cmeta">'+n+' graphic'+(n===1?"":"s")+'<br>Created '+esc(fmtDate(p.created))+'</div>'+
      '<span class="pill '+esc(p.status)+'">'+esc(p.status)+'</span>'+
    '</div>';
  return card;
}

/* ================= GRID INTERACTIONS ================= */
function closeMenus(){
  grid.querySelectorAll(".menu").forEach(function(m){ m.style.display="none"; });
}
document.addEventListener("click",function(e){
  if(!e.target.classList.contains("dots")) closeMenus();
});

grid.addEventListener("click",function(e){
  var card=e.target.closest(".card");
  if(!card) return;
  var id=card.dataset.id;
  if(!id) return;

  if(e.target.classList.contains("dots")){
    e.stopPropagation();
    var menu=card.querySelector(".menu");
    var open=menu.style.display==="block";
    closeMenus();
    menu.style.display=open?"none":"block";
    return;
  }
  var actBtn=e.target.closest(".menu button");
  if(actBtn){
    e.stopPropagation();
    closeMenus();
    handleMenu(id,actBtn.dataset.act,card);
    return;
  }
  if(e.target.classList.contains("rename-in")) return;

  gate(function(){ location.href="viewer.html?project="+encodeURIComponent(id); });
});

function handleMenu(id,act,card){
  var ps=loadProjects();
  var p=ps.find(function(x){return x.id===id;});
  if(!p) return;
  if(act==="rename"){ startRename(card,p); return; }
  if(act==="delete"){
    confirmBox("Delete project",
      "Delete \""+p.name+"\" and all "+p.images.length+" graphic(s) inside it? This cannot be undone.",
      "Delete",
      function(){
        saveProjects(loadProjects().filter(function(x){return x.id!==id;}));
        renderProjects();
        toast("Project deleted.");
      });
    return;
  }
  if(act==="complete"||act==="shipped"){
    p.status=act;
    p.updated=Date.now();
    saveProjects(ps);
    renderProjects();
    toast("\""+p.name+"\" marked "+act+".");
  }
}

function startRename(card,p){
  var nameEl=card.querySelector(".cname");
  if(!nameEl) return;
  var input=document.createElement("input");
  input.type="text";
  input.className="rename-in";
  input.value=p.name;
  nameEl.replaceWith(input);
  input.focus(); input.select();
  var finished=false;
  function done(save){
    if(finished) return;
    finished=true;
    if(save){
      var v=input.value.trim();
      if(v){
        var ps=loadProjects();
        var q=ps.find(function(x){return x.id===p.id;});
        if(q){ q.name=v; q.updated=Date.now(); saveProjects(ps); }
      }
    }
    renderProjects();
  }
  input.addEventListener("keydown",function(e){
    if(e.key==="Enter") done(true);
    if(e.key==="Escape") done(false);
    e.stopPropagation();
  });
  input.addEventListener("blur",function(){ done(true); });
  input.addEventListener("click",function(e){ e.stopPropagation(); });
}

/* ================= NEW PROJECT ================= */
function doNewProject(){
  var ps=loadProjects();
  var p={id:uid(),name:"Untitled Project "+(ps.length+1),created:Date.now(),updated:Date.now(),status:"draft",images:[]};
  ps.push(p);
  saveProjects(ps);
  location.href="viewer.html?project="+encodeURIComponent(p.id);
}
document.getElementById("newBtn").addEventListener("click",function(){ gate(doNewProject); });
document.getElementById("viewPlansBtn").addEventListener("click",function(){
  pendingAction=null;
  paywall.classList.add("open");
});

/* ================= IMPORT GALLERY ================= */
document.getElementById("importBtn").addEventListener("click",function(){
  gate(function(){ fileInput.click(); });
});
fileInput.addEventListener("change",function(){
  var files=Array.prototype.slice.call(fileInput.files||[]);
  fileInput.value="";
  if(!files.length) return;
  var ps=loadProjects();
  var p=ps.find(function(x){return x.id===importTarget.value;});
  if(!p){
    p={id:uid(),name:"Imported",created:Date.now(),updated:Date.now(),status:"draft",images:[]};
    ps.push(p);
  }
  var remaining=files.length, failed=0;
  files.forEach(function(f){
    var r=new FileReader();
    r.onload=function(){
      p.images.push({id:uid(),b64:r.result,prompt:"Imported image: "+(f.name||"file"),
        size:"",quality:"",created:Date.now(),tools:[]});
      p.updated=Date.now();
      finish();
    };
    r.onerror=function(){ failed++; finish(); };
    r.readAsDataURL(f);
  });
  function finish(){
    remaining--;
    if(remaining===0){
      saveProjects(ps);
      importTarget.value=p.id;
      renderProjects();
      var got=files.length-failed;
      if(got>0) toast("Imported "+got+" image"+(got===1?"":"s")+" into \""+p.name+"\".");
      if(failed>0) toast(failed+" file(s) could not be read. Try a different image file.");
    }
  }
});

/* ================= VEKT ASSIST ================= */
var chat=document.getElementById("chat"),
    chatIn=document.getElementById("chatIn"),
    personaSel=document.getElementById("persona");

var PREFIX={
  "Prompt Coach":"You are the Prompt Coach, an expert at writing vivid, production-ready image generation prompts for large-format print. ",
  "Dimension Agent":"You are the Dimension Agent, an expert in large-format print dimensions, DPI, viewing distance, tiling, bleed, and safe areas. ",
  "Preflight Agent":"You are the Preflight Agent, an expert in print production preflight: resolution, color, bleed, safe area, and export formats for print houses. ",
  "Legal Cop":"You are the Legal Cop, an expert in trademark risk and brand-safety review for printed graphics. "
};

function addMsg(role,text){
  var d=document.createElement("div");
  d.className="msg "+role;
  d.textContent=text;
  chat.appendChild(d);
  chat.scrollTop=chat.scrollHeight;
  return d;
}
function addNote(text){
  var d=document.createElement("div");
  d.className="msg note";
  d.textContent=text;
  chat.appendChild(d);
  chat.scrollTop=chat.scrollHeight;
}
function addTyping(){
  var d=document.createElement("div");
  d.className="typing";
  d.textContent="Vekt Assist is thinking...";
  chat.appendChild(d);
  chat.scrollTop=chat.scrollHeight;
  return d;
}

function sendChat(message){
  if(!message.trim()) return;
  addMsg("user",message);
  var persona=personaSel.value;
  var typing=addTyping();
  fetch("/api/chat",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({message:PREFIX[persona]+message,source:"vekt"}),
    signal:sig(120000)
  }).then(function(res){
    if(!res.ok) throw new Error("chat http "+res.status);
    return res.json();
  }).then(function(data){
    typing.remove();
    var reply=data.reply ||
      (data.choices&&data.choices[0]&&data.choices[0].message&&data.choices[0].message.content) ||
      null;
    if(reply) addMsg("agent",reply);
    else addMsg("agent","Sorry, we are in development now. Check back soon.");
  }).catch(function(){
    typing.remove();
    addMsg("agent","Sorry, we are in development now. Check back soon.");
  });
}

document.getElementById("chatSend").addEventListener("click",function(){
  var v=chatIn.value; chatIn.value=""; sendChat(v);
});
chatIn.addEventListener("keydown",function(e){
  if(e.key==="Enter"){ var v=chatIn.value; chatIn.value=""; sendChat(v); }
});

function findFirstImage(){
  var ps=loadProjects(), found=null;
  ps.forEach(function(p){
    p.images.forEach(function(im){ if(!found && im.b64) found=im; });
  });
  return found;
}
function latestPrompt(){
  var ps=loadProjects(), best=null;
  ps.forEach(function(p){
    p.images.forEach(function(im){
      if(im.prompt && im.prompt.indexOf("Imported image")!==0){
        if(!best || (im.created||0)>(best.created||0)) best=im;
      }
    });
  });
  return best?best.prompt:null;
}

document.querySelectorAll(".quick button").forEach(function(btn){
  btn.addEventListener("click",function(){
    var q=btn.dataset.q;
    if(q==="pop"){
      var base=latestPrompt()||"a bold brand visual for outdoor display";
      sendChat("Improve this prompt for a large-format advertising graphic and return only the improved prompt: "+base);
    }else if(q==="billboard"){
      sendChat("What size should I choose for a standard roadside billboard, and what DPI, resolution, and tile budget does it need?");
    }else if(q==="preflight"){
      sendChat("Give me a concise preflight checklist for sending a large-format graphic to a print house.");
    }else if(q==="tm"){
      trademarkCheck();
    }
  });
});

function trademarkCheck(){
  var img=findFirstImage();
  if(!img){
    addNote("Trademark check needs a graphic. Import an image above or generate one in the Artroom first.");
    return;
  }
  addMsg("user","Trademark check");
  var typing=addTyping();
  var b64=String(img.b64).replace(/^data:[^;]+;base64,/,"");
  fetch("/legal/review",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({image_b64:b64,surface:"vekt"}),
    signal:sig(120000)
  }).then(function(res){
    if(!res.ok) throw new Error("legal http "+res.status);
    return res.json();
  }).then(function(r){
    typing.remove();
    if(r.error){ addMsg("agent","Trademark sweep unavailable -- retry. Detail: "+r.error); return; }
    var out="Trademark sweep verdict: "+(r.verdict||"UNKNOWN")+". "+(r.reason||"");
    if(r.warnings&&r.warnings.length) out+=" Warnings: "+r.warnings.join("; ");
    if(r.verdict==="HOLD"&&r.web_hits&&r.web_hits.length){
      out+=" Conflicting matches: "+r.web_hits.slice(0,3).map(function(h){
        return (h.title||"match")+" ("+(h.link||"")+")";
      }).join("; ")+".";
    }
    if(r.fix) out+=" Suggested fix: "+r.fix;
    addMsg("agent",out.trim());
  }).catch(function(){
    typing.remove();
    addMsg("agent","Trademark sweep unavailable -- retry.");
  });
}

/* ================= INIT ================= */
addNote("Vekt Assist ready. Pick a persona, ask a question, or use a quick action below.");
refreshBadge();
renderProjects();
})();
</script>

<script>
/* vkt-content-protection -- deterrence layer (context/save/drag/keyboard) */
(function(){
  function block(e){ e.preventDefault(); return false; }
  document.addEventListener('contextmenu', block);
  document.addEventListener('dragstart', block);
  document.addEventListener('drop', block);
  document.addEventListener('keydown', function(e){
    var k = (e.key||'').toLowerCase();
    if((e.ctrlKey||e.metaKey) && ['c','s','u','p','a'].indexOf(k)>=0){ e.preventDefault(); }
  });
  if(!document.getElementById('vkt-prot-notice')){
    var n=document.createElement('div');
    n.id='vkt-prot-notice';
    n.style.cssText='position:fixed;left:0;bottom:0;width:100%;background:#14110f;border-top:1px solid #2e2822;color:#a89c8c;font:11px/1.5 system-ui;text-align:center;padding:4px 8px;z-index:9999;';
    n.textContent='Flipbookie / Vekt content is protected. Artwork may only be duplicated as jpeg/png from your account; saving or re-publishing the page is not permitted.';
    document.body.appendChild(n);
  }
})();
</script>

<div class="vkt-social" style="text-align:center;padding:20px 0 10px;font-size:13px;color:var(--muted,#a89c8c);">
  Follow Flipbookie &middot;
  <a href="https://www.instagram.com/" target="_blank" rel="noopener" style="color:var(--gold,#c98d5a);">Instagram</a> &middot;
  <a href="https://www.facebook.com/" target="_blank" rel="noopener" style="color:var(--gold,#c98d5a);">Facebook</a> &middot;
  <a href="https://wa.me/" target="_blank" rel="noopener" style="color:var(--gold,#c98d5a);">WhatsApp</a> &middot;
  <a href="https://vekt.it/studio/views.html" target="_blank" rel="noopener" style="color:var(--gold,#c98d5a);">Wall of Fame</a>
</div>
<script src="/api/billing/static/billing.js"></script></body>
</html>