
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LoveSync Intelligence - Turn Connection Into Strategy</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link rel="stylesheet" href="/index.css">
<script type="importmap">
{
  "imports": {
    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
    "@google/genai": "https://esm.sh/@google/genai@^1.35.0",
    "react": "https://esm.sh/react@^19.2.3",
    "react/": "https://esm.sh/react@^19.2.3/"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-CPsltALF.js"></script>

<!-- HYBRID GATE: No subscription = locked. BYOK=$4.99/mo. Single=$14.99/mo. All-Access=$29.99/mo -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
#gate-lock{position:fixed;inset:0;background:#0a0a0a;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#gate-lock .gate-card{background:#111;border:1px solid #222;border-radius:16px;padding:40px;max-width:440px;width:92%;text-align:center}
#gate-lock .gate-card h2{color:#f5f5f5;font-size:22px;margin:0 0 8px}
#gate-lock .gate-card p{color:#888;font-size:14px;line-height:1.5;margin:0 0 20px}
#gate-lock .gate-card .pricing{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}
#gate-lock .gate-card .tier{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:16px 12px;flex:1;min-width:120px;cursor:pointer;transition:border-color .2s}
#gate-lock .gate-card .tier:hover{border-color:#00E5FF}
#gate-lock .gate-card .tier.pop{border-color:#00E5FF;background:rgba(0,229,255,0.05)}
#gate-lock .gate-card .tier .tname{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;font-weight:600}
#gate-lock .gate-card .tier .tprice{font-size:22px;color:#f5f5f5;font-weight:800;margin:6px 0}
#gate-lock .gate-card .tier .tdesc{font-size:11px;color:#666}
#gate-lock .gate-card .tier .badge{display:inline-block;background:#00E5FF;color:#000;font-size:9px;font-weight:700;padding:2px 8px;border-radius:3px;margin-bottom:6px;letter-spacing:1px}
#gate-lock .gate-card .gate-btn{display:block;width:100%;padding:12px;background:#00E5FF;color:#000;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;margin-top:12px}
#gate-lock .gate-card .gate-btn:hover{background:#00c2d4}
#gate-lock .gate-card .gate-btn.secondary{background:#1a1a1a;color:#f5f5f5;border:1px solid #333}
#gate-lock .gate-card .sub-link{display:block;margin-top:14px;color:#666;font-size:12px;text-decoration:underline;cursor:pointer}
.byok-btn{position:fixed;bottom:20px;right:20px;width:44px;height:44px;border-radius:50%;background:#1a1a2e;color:#fff;border:none;cursor:pointer;z-index:10000;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .2s}
.byok-btn:hover{transform:scale(1.1)}
.byok-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10001;justify-content:center;align-items:center}
.byok-overlay.active{display:flex}
.byok-modal{background:#fff;border-radius:12px;padding:28px;max-width:420px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.byok-modal h2{margin:0 0 16px;font-size:18px;color:#1a1a2e}
.byok-modal p{font-size:13px;color:#666;margin:8px 0}
.byok-modal label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px;color:#333}
.byok-modal select,.byok-modal input{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box}
.byok-modal .save-btn{margin-top:16px;padding:10px 20px;background:#1a1a2e;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;width:100%}
.byok-modal .save-btn:hover{background:#2d2d4e}
.byok-modal .close-btn{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:#999}
.byok-modal .status{margin-top:8px;font-size:12px;padding:6px;border-radius:4px}
.byok-modal .status.ok{background:#d4edda;color:#155724}
.byok-modal .status.warn{background:#fff3cd;color:#856404}
.byok-modal a{color:#1a1a2e;text-decoration:underline}
.byok-modal .rate-info{margin-top:12px;padding:10px;background:#f0f7ff;border-radius:6px;font-size:12px;color:#1a6dba}
</style>
<!-- Gate Lock Screen -->
<div id="gate-lock">
<div class="gate-card">
<h2>🔒 Subscription Required</h2>
<p>Choose a plan to unlock this app. No free rides — your subscription keeps the AI running.</p>
<div class="pricing">
<div class="tier" data-tier="byok" onclick="gateSelect(this)">
<div class="tname">BYOK</div>
<div class="tprice">$4.99/mo</div>
<div class="tdesc">Use your own API key<br>30 analyses/day</div>
</div>
<div class="tier" data-tier="single" onclick="gateSelect(this)">
<div class="tname">Single App</div>
<div class="tprice">$14.99/mo</div>
<div class="tdesc">We provide the key<br>30 analyses/day</div>
</div>
<div class="tier pop" data-tier="allaccess" onclick="gateSelect(this)">
<div class="badge">MOST POPULAR</div>
<div class="tname">All-Access</div>
<div class="tprice">$29.99/mo</div>
<div class="tdesc">All 46 apps, our key<br>50 analyses/day</div>
</div>
</div>
<button class="gate-btn" onclick="gateSubscribe()">Subscribe Now</button>
<button class="gate-btn secondary" onclick="gateAlreadySub()">I Already Have a Subscription</button>
<span class="sub-link" onclick="gateVerifyEmail()">Verify by Email Instead</span>
</div>
</div>
<!-- BYOK Settings (hidden until subscription verified) -->
<button class="byok-btn" id="byok-toggle" style="display:none" onclick="document.getElementById('byok-settings').classList.add('active')" title="API Settings">
<i class="fas fa-key"></i>
</button>
<div id="byok-settings" class="byok-overlay" onclick="if(event.target===this)this.classList.remove('active')">
<div class="byok-modal">
<button class="close-btn" onclick="document.getElementById('byok-settings').classList.remove('active')">&times;</button>
<h2>API Configuration (BYOK)</h2>
<p>Bring your own API key. Your key stays in your browser only.</p>
<label>Provider</label>
<select id="byok-provider" onchange="byokUpdatePlaceholder()">
<option value="gemini">Google Gemini</option>
<option value="openai">OpenAI</option>
<option value="anthropic">Anthropic (Claude)</option>
<option value="groq">Groq</option>
<option value="deepseek">DeepSeek</option>
</select>
<label>API Key</label>
<input type="password" id="byok-key" placeholder="Paste your Gemini API key here">
<p>Don't have a key? <a href="https://aistudio.google.com/apikey" target="_blank">Get a free Gemini key from Google AI Studio</a></p>
<button class="save-btn" onclick="byokSave()">Save & Connect</button>
<div id="byok-status" class="status" style="display:none"></div>
<div class="rate-info" id="byok-rate-info"></div>
</div>
</div>
<script>
/* HYBRID GATE LOGIC — NO FREE RIDES */
var GATE_WORKER_URL='https://api-gateway-proxy.johntaylor1online.workers.dev';
var PRICING_URL='https://blp-directory.pages.dev'; /* Will be updated when directory page is built */
var APP_NAME=window.location.hostname.split('.')[0];

function gateSelect(el){document.querySelectorAll('#gate-lock .tier').forEach(function(t){t.classList.remove('pop')});el.classList.add('pop')}

function gateSubscribe(){window.open(PRICING_URL,'_blank')}

function gateAlreadySub(){
  var email=prompt('Enter the email associated with your subscription:');
  if(!email)return;
  fetch(GATE_WORKER_URL+'/v1/verify?email='+encodeURIComponent(email)+'&app='+APP_NAME)
    .then(function(r){return r.json()})
    .then(function(d){
      if(d.active){
        localStorage.setItem('blp_sub',JSON.stringify({email:email,tier:d.tier,expires:d.expires,verified:Date.now()}));
        gateUnlock(d.tier);
      }else{
        alert('No active subscription found for that email. Please subscribe first.');
      }
    })
    .catch(function(){alert('Verification service unavailable. Please try again.')});
}

function gateVerifyEmail(){gateAlreadySub()}

function gateUnlock(tier){
  document.getElementById('gate-lock').style.display='none';
  document.getElementById('byok-toggle').style.display='flex';
  var ri=document.getElementById('byok-rate-info');
  var limit=tier==='allaccess'?'50':'30';
  if(ri)ri.textContent='Your plan: '+tier.toUpperCase()+' — '+limit+' analyses/day. Key required for BYOK tier.';
  /* For paid tiers, the Worker proxy provides the key — no manual entry needed */
  if(tier!=='byok'){
    localStorage.setItem('use_worker_proxy','true');
    localStorage.setItem('blp_tier',tier);
  }
}

/* Check existing subscription on load */
(function(){
  var sub=localStorage.getItem('blp_sub');
  if(sub){
    try{
      var s=JSON.parse(sub);
      if(s.verified&&s.expires&&new Date(s.expires)>new Date()){
        /* Re-verify with Worker every 24h */
        if(Date.now()-s.verified<86400000){
          gateUnlock(s.tier);
          return;
        }
      }
    }catch(e){}
  }
  /* No valid subscription — gate stays visible */
})();

/* BYOK settings functions */
function byokUpdatePlaceholder(){var p=document.getElementById('byok-provider').value;var km={gemini:'Paste your Gemini API key',openai:'Paste your OpenAI API key',anthropic:'Paste your Anthropic API key',groq:'Paste your Groq API key',deepseek:'Paste your DeepSeek API key'};document.getElementById('byok-key').placeholder=km[p]||'Paste your API key'}
function byokSave(){var provider=document.getElementById('byok-provider').value;var key=document.getElementById('byok-key').value.trim();var s=document.getElementById('byok-status');if(!key){s.style.display='block';s.className='status warn';s.textContent='Please enter an API key';return}localStorage.setItem('api_provider',provider);localStorage.setItem('gemini_api_key',key);s.style.display='block';s.className='status ok';s.textContent='Key saved! Reloading...';setTimeout(function(){location.reload()},800)}
(function(){var saved=localStorage.getItem('gemini_api_key');if(saved)document.getElementById('byok-key').value=saved;var prov=localStorage.getItem('api_provider');if(prov)document.getElementById('byok-provider').value=prov})();
</script>

<!-- HYBRID GATE v2 — WIRED TO BLP COMMERCE WORKER -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
#gate-lock{position:fixed;inset:0;background:#0a0a0a;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#gate-lock .gate-card{background:#111;border:1px solid #222;border-radius:16px;padding:40px;max-width:460px;width:92%;text-align:center}
#gate-lock .gate-card h2{color:#f5f5f5;font-size:22px;margin:0 0 8px}
#gate-lock .gate-card p{color:#888;font-size:14px;line-height:1.5;margin:0 0 20px}
#gate-lock .gate-card .pricing{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}
#gate-lock .gate-card .tier{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:16px 12px;flex:1;min-width:120px;cursor:pointer;transition:border-color .2s}
#gate-lock .gate-card .tier:hover{border-color:#00E5FF}
#gate-lock .gate-card .tier.pop{border-color:#00E5FF;background:rgba(0,229,255,0.05)}
#gate-lock .gate-card .tier .tname{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;font-weight:600}
#gate-lock .gate-card .tier .tprice{font-size:22px;color:#f5f5f5;font-weight:800;margin:6px 0}
#gate-lock .gate-card .tier .tdesc{font-size:11px;color:#666}
#gate-lock .gate-card .tier .badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:3px;margin-bottom:6px;letter-spacing:1px}
#gate-lock .gate-card .tier .badge.popular{background:#00E5FF;color:#000}
#gate-lock .gate-card .tier .badge.bestvalue{background:#FFD700;color:#000}
#gate-lock .gate-card .gate-btn{display:block;width:100%;padding:12px;background:#00E5FF;color:#000;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;margin-top:12px}
#gate-lock .gate-card .gate-btn:hover{background:#00c2d4}
#gate-lock .gate-card .gate-btn.secondary{background:#1a1a1a;color:#f5f5f5;border:1px solid #333}
#gate-lock .gate-card .sub-link{display:block;margin-top:14px;color:#666;font-size:12px;text-decoration:underline;cursor:pointer}
.byok-btn{position:fixed;bottom:20px;right:20px;width:44px;height:44px;border-radius:50%;background:#1a1a2e;color:#fff;border:none;cursor:pointer;z-index:10000;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .2s}
.byok-btn:hover{transform:scale(1.1)}
#login-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100001;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
#login-modal .modal-card{background:#111;border:1px solid #222;border-radius:12px;padding:30px;max-width:380px;width:90%}
#login-modal h3{color:#f5f5f5;margin:0 0 16px;text-align:center}
#login-modal input{width:100%;padding:10px;background:#1a1a1a;color:#f5f5f5;border:1px solid #333;border-radius:6px;margin-bottom:10px;box-sizing:border-box}
#login-modal button{width:100%;padding:10px;background:#00E5FF;color:#000;border:none;border-radius:6px;font-weight:700;cursor:pointer;margin-bottom:8px}
#login-modal .switch{color:#666;font-size:12px;text-align:center;cursor:pointer}
.usage-bar{position:fixed;top:10px;right:10px;background:#111;color:#888;padding:4px 12px;border-radius:6px;font-size:11px;z-index:10000;border:1px solid #222}
</style>
<script>
(function(){
const COMMERCE='https://blp-commerce.johntaylor1online.workers.dev';
const PROXY='https://api-gateway-proxy.johntaylor1online.workers.dev';
let userEmail=localStorage.getItem('blp_user_email')||'';
let authToken=localStorage.getItem('blp_auth_token')||'';
let subData=null;
const APP_NAME=window.location.hostname.replace('.pages.dev','').replace(/-byok$/,'');

async function checkSub(){
  if(!userEmail){showGate();return;}
  try{
    const r=await fetch(COMMERCE+'/api/check-subscription',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:userEmail,app:APP_NAME})});
    subData=await r.json();
    if(subData.active&&!subData.overLimit){hideGate();updateUsageBar();}
    else if(subData.overLimit){showGate('limit');}
    else{showGate();}
  }catch(e){showGate();}
}

function showGate(reason){var el=document.getElementById('gate-lock');if(el)el.style.display='flex';}
function hideGate(){var el=document.getElementById('gate-lock');if(el)el.style.display='none';}
function updateUsageBar(){
  if(!subData)return;
  var bar=document.getElementById('usage-bar');
  if(bar){bar.textContent=subData.usage+'/'+subData.limit+' this month ('+subData.tier+')';bar.style.color=subData.usage/subData.limit>.8?'#ff4444':'#888';}
}

async function doSignup(email,password,name){
  try{
    const r=await fetch(COMMERCE+'/api/auth/signup',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email,password,name})});
    const d=await r.json();
    if(d.success){localStorage.setItem('blp_user_email',d.email);localStorage.setItem('blp_auth_token',d.token);userEmail=d.email;authToken=d.token;checkSub();return true;}
    alert(d.error||'Signup failed');return false;
  }catch(e){alert('Network error');return false;}
}

async function doLogin(email,password){
  try{
    const r=await fetch(COMMERCE+'/api/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email,password})});
    const d=await r.json();
    if(d.success){localStorage.setItem('blp_user_email',d.email);localStorage.setItem('blp_auth_token',d.token);userEmail=d.email;authToken=d.token;checkSub();return true;}
    alert(d.error||'Login failed');return false;
  }catch(e){alert('Network error');return false;}
}

async function startCheckout(tier){
  if(!userEmail){showLoginModal();return;}
  try{
    const r=await fetch(COMMERCE+'/api/checkout',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:userEmail,tier,app:APP_NAME})});
    const d=await r.json();
    if(d.url){window.open(d.url,'_blank');}else{alert(d.error||'Checkout error');}
  }catch(e){alert('Network error');}
}

function showLoginModal(){
  var m=document.getElementById('login-modal');
  if(m)m.style.display='flex';
}

window.addEventListener('DOMContentLoaded',checkSub);
window.__blp={checkSub,subData,userEmail,authToken,doSignup,doLogin,startCheckout,showLoginModal,APP_NAME};
})();
</script>
<div id="gate-lock"><div class="gate-card"><h2>🚀 AI-Powered Analysis</h2><p>Choose your plan to unlock this app</p><div class="pricing"><div class="tier" onclick="window.__blp.startCheckout('byok')"><span class="badge">STARTER</span><div class="tname">BYOK</div><div class="tprice">$4.99<span style="font-size:12px;color:#666">/mo</span></div><div class="tdesc">Your own API key<br>150 uses/month</div></div><div class="tier pop" onclick="window.__blp.startCheckout('single')"><span class="badge popular">MOST POPULAR</span><div class="tname">Single App</div><div class="tprice">$14.99<span style="font-size:12px;color:#666">/mo</span></div><div class="tdesc">Our key, 1 app<br>300 uses/month</div></div><div class="tier" onclick="window.__blp.startCheckout('allaccess')"><span class="badge bestvalue">BEST VALUE</span><div class="tname">All-Access</div><div class="tprice">$29.99<span style="font-size:12px;color:#666">/mo</span></div><div class="tdesc">Our key, all 46 apps<br>300 uses/app/month</div></div></div><button class="gate-btn" onclick="window.__blp.startCheckout('single')">Subscribe Now</button><button class="gate-btn secondary" onclick="window.__blp.showLoginModal()">I Have an Account</button><div class="sub-link" onclick="var m=document.getElementById('byok-modal');if(m)m.style.display=m.style.display==='flex'?'none':'flex';">Bring Your Own API Key (BYOK)</div></div></div>

<div id="login-modal"><div class="modal-card"><h3>🔑 Sign In</h3><input type="email" id="login-email" placeholder="Email"><input type="password" id="login-password" placeholder="Password"><button onclick="window.__blp.doLogin(document.getElementById('login-email').value,document.getElementById('login-password').value).then(function(ok){if(ok)document.getElementById('login-modal').style.display='none';});">Log In</button><div class="switch" onclick="var c=prompt('Create account\\nEmail:');if(c){var p=prompt('Password (8+ chars):');var n=prompt('Name:');if(p&&p.length>=8)window.__blp.doSignup(c,p,n).then(function(ok){if(ok)document.getElementById('login-modal').style.display='none';});else alert('Password must be 8+ chars');}">New here? Create account</div><div class="switch" onclick="document.getElementById('login-modal').style.display='none'" style="margin-top:8px;color:#444">Cancel</div></div></div>

<div id="byok-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100000;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,sans-serif"><div style="background:#111;border:1px solid #222;border-radius:12px;padding:30px;max-width:400px;width:90%"><h3 style="color:#f5f5f5;margin:0 0 16px">⚙️ API Key Settings</h3><label style="color:#888;font-size:12px;display:block;margin-bottom:4px">Provider</label><select id="api-provider" style="width:100%;padding:10px;background:#1a1a1a;color:#f5f5f5;border:1px solid #333;border-radius:6px;margin-bottom:12px"><option value="gemini">Google Gemini</option><option value="openai">OpenAI</option><option value="anthropic">Anthropic</option><option value="groq">Groq</option><option value="deepseek">DeepSeek</option></select><label style="color:#888;font-size:12px;display:block;margin-bottom:4px">API Key</label><input type="password" id="api-key-input" placeholder="Paste your API key..." style="width:100%;padding:10px;background:#1a1a1a;color:#f5f5f5;border:1px solid #333;border-radius:6px;margin-bottom:12px;box-sizing:border-box"><button onclick="var k=document.getElementById('api-key-input').value;if(k){localStorage.setItem('gemini_api_key',k);document.getElementById('byok-modal').style.display='none';location.reload();}" style="width:100%;padding:10px;background:#00E5FF;color:#000;border:none;border-radius:6px;font-weight:700;cursor:pointer">Save & Reload</button><p style="color:#666;font-size:11px;margin-top:10px;text-align:center"><a href="https://aistudio.google.com/apikey" target="_blank" style="color:#00E5FF">Get a free Gemini key →</a></p><button onclick="document.getElementById('byok-modal').style.display='none'" style="width:100%;padding:8px;background:none;color:#666;border:none;cursor:pointer;margin-top:4px">Cancel</button></div></div>
<button class="byok-btn" onclick="var m=document.getElementById('byok-modal');m.style.display=m.style.display==='flex'?'none':'flex';" title="API Settings">🔑</button>
<div class="usage-bar" id="usage-bar">0/150 this month</div>
<!-- END HYBRID GATE v2 -->
<!-- HYBRID GATE v2 — WIRED TO BLP COMMERCE WORKER -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
#gate-lock{position:fixed;inset:0;background:#0a0a0a;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#gate-lock .gate-card{background:#111;border:1px solid #222;border-radius:16px;padding:40px;max-width:460px;width:92%;text-align:center}
#gate-lock .gate-card h2{color:#f5f5f5;font-size:22px;margin:0 0 8px}
#gate-lock .gate-card p{color:#888;font-size:14px;line-height:1.5;margin:0 0 20px}
#gate-lock .gate-card .pricing{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}
#gate-lock .gate-card .tier{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:16px 12px;flex:1;min-width:120px;cursor:pointer;transition:border-color .2s}
#gate-lock .gate-card .tier:hover{border-color:#00E5FF}
#gate-lock .gate-card .tier.pop{border-color:#00E5FF;background:rgba(0,229,255,0.05)}
#gate-lock .gate-card .tier .tname{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;font-weight:600}
#gate-lock .gate-card .tier .tprice{font-size:22px;color:#f5f5f5;font-weight:800;margin:6px 0}
#gate-lock .gate-card .tier .tdesc{font-size:11px;color:#666}
#gate-lock .gate-card .tier .badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:3px;margin-bottom:6px;letter-spacing:1px}
#gate-lock .gate-card .tier .badge.popular{background:#00E5FF;color:#000}
#gate-lock .gate-card .tier .badge.bestvalue{background:#FFD700;color:#000}
.gate-btn{display:block;width:100%;padding:12px;background:#00E5FF;color:#000;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;margin-top:12px}
.gate-btn:hover{background:#00c2d4}
.gate-btn.secondary{background:#1a1a1a;color:#f5f5f5;border:1px solid #333}
.sub-link{display:block;margin-top:14px;color:#666;font-size:12px;text-decoration:underline;cursor:pointer}
.byok-btn{position:fixed;bottom:20px;right:20px;width:44px;height:44px;border-radius:50%;background:#1a1a2e;color:#fff;border:none;cursor:pointer;z-index:10000;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .2s}
.byok-btn:hover{transform:scale(1.1)}
#login-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100001;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
#login-modal .modal-card{background:#111;border:1px solid #222;border-radius:12px;padding:30px;max-width:380px;width:90%}
#login-modal h3{color:#f5f5f5;margin:0 0 16px;text-align:center}
#login-modal input{width:100%;padding:10px;background:#1a1a1a;color:#f5f5f5;border:1px solid #333;border-radius:6px;margin-bottom:10px;box-sizing:border-box}
#login-modal button{width:100%;padding:10px;background:#00E5FF;color:#000;border:none;border-radius:6px;font-weight:700;cursor:pointer;margin-bottom:8px}
#login-modal .switch{color:#666;font-size:12px;text-align:center;cursor:pointer}
.usage-bar{position:fixed;top:10px;right:10px;background:#111;color:#888;padding:4px 12px;border-radius:6px;font-size:11px;z-index:10000;border:1px solid #222}
</style>
<script>
(function(){
var COMMERCE='https://blp-commerce.johntaylor1online.workers.dev';
var PROXY='https://api-gateway-proxy.johntaylor1online.workers.dev';
var userEmail=localStorage.getItem('blp_user_email')||'';
var authToken=localStorage.getItem('blp_auth_token')||'';
var subData=null;
var APP_NAME=window.location.hostname.replace('.pages.dev','').replace(/-byok$/,'');
function checkSub(){
  if(!userEmail){showGate();return;}
  fetch(COMMERCE+'/api/check-subscription',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:userEmail,app:APP_NAME})}).then(function(r){return r.json();}).then(function(d){
    subData=d;if(d.active&&!d.overLimit){hideGate();updateBar();}else{showGate();}
  }).catch(function(){showGate();});
}
function showGate(){var e=document.getElementById('gate-lock');if(e)e.style.display='flex';}
function hideGate(){var e=document.getElementById('gate-lock');if(e)e.style.display='none';}
function updateBar(){if(!subData)return;var b=document.getElementById('usage-bar');if(b){b.textContent=subData.usage+'/'+subData.limit+' ('+subData.tier+')';b.style.color=subData.usage/subData.limit>.8?'#ff4444':'#888';}}
function doLogin(e,p){fetch(COMMERCE+'/api/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:e,password:p})}).then(function(r){return r.json();}).then(function(d){if(d.success){localStorage.setItem('blp_user_email',d.email);localStorage.setItem('blp_auth_token',d.token);userEmail=d.email;authToken=d.token;document.getElementById('login-modal').style.display='none';checkSub();}else{alert(d.error||'Login failed');}}).catch(function(){alert('Network error');});}
function doSignup(e,p,n){fetch(COMMERCE+'/api/auth/signup',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:e,password:p,name:n})}).then(function(r){return r.json();}).then(function(d){if(d.success){localStorage.setItem('blp_user_email',d.email);localStorage.setItem('blp_auth_token',d.token);userEmail=d.email;authToken=d.token;document.getElementById('login-modal').style.display='none';checkSub();}else{alert(d.error||'Signup failed');}}).catch(function(){alert('Network error');});}
function startCheckout(tier){if(!userEmail){document.getElementById('login-modal').style.display='flex';return;}fetch(COMMERCE+'/api/checkout',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:userEmail,tier:tier,app:APP_NAME})}).then(function(r){return r.json();}).then(function(d){if(d.url){window.open(d.url,'_blank');}else{alert(d.error||'Error');}}).catch(function(){alert('Network error');});}
window.addEventListener('DOMContentLoaded',checkSub);
window.__blp={checkSub:checkSub,startCheckout:startCheckout,doLogin:doLogin,doSignup:doSignup,APP_NAME:APP_NAME};
})();
</script>
<div id="gate-lock"><div class="gate-card"><h2>🚀 AI-Powered Analysis</h2><p>Choose your plan to unlock this app</p><div class="pricing"><div class="tier" onclick="window.__blp.startCheckout('byok')"><span class="badge">STARTER</span><div class="tname">BYOK</div><div class="tprice">$4.99<span style="font-size:12px;color:#666">/mo</span></div><div class="tdesc">Your own API key<br>150 uses/month</div></div><div class="tier pop" onclick="window.__blp.startCheckout('single')"><span class="badge popular">MOST POPULAR</span><div class="tname">Single App</div><div class="tprice">$14.99<span style="font-size:12px;color:#666">/mo</span></div><div class="tdesc">Our key, 1 app<br>300 uses/month</div></div><div class="tier" onclick="window.__blp.startCheckout('allaccess')"><span class="badge bestvalue">BEST VALUE</span><div class="tname">All-Access</div><div class="tprice">$29.99<span style="font-size:12px;color:#666">/mo</span></div><div class="tdesc">Our key, all 46 apps<br>300 uses/app/month</div></div></div><button class="gate-btn" onclick="window.__blp.startCheckout('single')">Subscribe Now</button><button class="gate-btn secondary" onclick="document.getElementById('login-modal').style.display='flex'">I Have an Account</button><div class="sub-link" onclick="var m=document.getElementById('byok-modal');if(m)m.style.display=m.style.display==='flex'?'none':'flex';">Bring Your Own API Key (BYOK)</div></div></div>
<div id="login-modal"><div class="modal-card"><h3>🔑 Sign In</h3><input type="email" id="login-email" placeholder="Email"><input type="password" id="login-password" placeholder="Password"><button onclick="window.__blp.doLogin(document.getElementById('login-email').value,document.getElementById('login-password').value)">Log In</button><div class="switch" onclick="var c=prompt('Email:');if(c){var p=prompt('Password (8+ chars):');var n=prompt('Name:');if(p&&p.length>=8)window.__blp.doSignup(c,p,n);else alert('Password must be 8+ chars');}">New here? Create account</div><div class="switch" onclick="document.getElementById('login-modal').style.display='none'" style="margin-top:8px;color:#444">Cancel</div></div></div>
<div id="byok-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100000;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,sans-serif"><div style="background:#111;border:1px solid #222;border-radius:12px;padding:30px;max-width:400px;width:90%"><h3 style="color:#f5f5f5;margin:0 0 16px">⚙️ API Key Settings</h3><select id="api-provider" style="width:100%;padding:10px;background:#1a1a1a;color:#f5f5f5;border:1px solid #333;border-radius:6px;margin-bottom:12px"><option value="gemini">Google Gemini</option><option value="openai">OpenAI</option><option value="anthropic">Anthropic</option><option value="groq">Groq</option><option value="deepseek">DeepSeek</option></select><input type="password" id="api-key-input" placeholder="Paste your API key..." style="width:100%;padding:10px;background:#1a1a1a;color:#f5f5f5;border:1px solid #333;border-radius:6px;margin-bottom:12px;box-sizing:border-box"><button onclick="var k=document.getElementById('api-key-input').value;if(k){localStorage.setItem('gemini_api_key',k);document.getElementById('byok-modal').style.display='none';location.reload();}" style="width:100%;padding:10px;background:#00E5FF;color:#000;border:none;border-radius:6px;font-weight:700;cursor:pointer">Save & Reload</button><p style="color:#666;font-size:11px;margin-top:10px;text-align:center"><a href="https://aistudio.google.com/apikey" target="_blank" style="color:#00E5FF">Get a free Gemini key →</a></p><button onclick="document.getElementById('byok-modal').style.display='none'" style="width:100%;padding:8px;background:none;color:#666;border:none;cursor:pointer;margin-top:4px">Cancel</button></div></div>
<button class="byok-btn" onclick="var m=document.getElementById('byok-modal');m.style.display=m.style.display==='flex'?'none':'flex';" title="API Settings">🔑</button>
<div class="usage-bar" id="usage-bar">0/150 this month</div>
<!-- END HYBRID GATE v2 -->
</head>
<body class="bg-slate-50 min-h-screen">
  <div id="root"></div>
</body>
</html>
