  
    
<head>
<meta charset=&quot;utf-8&quot; />
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, viewport-fit=cover&quot; />
<title>JP Med Spa — Chat</title>
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; />
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin />
<link href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&amp;family=Jost:wght@300;400;500;600&amp;display=swap&quot; rel=&quot;stylesheet&quot; />
<style>
  :root{
    --bg:#faf6ef; --surface:#fffdf8; --surface-2:#f7f1e5; --ink:#3a332a; --ink-soft:#6f6455;
    --gold:#b08d4f; --gold-deep:#96743c; --gold-soft:#e9dcbf; --line:#e3d9c6;
    --shadow:0 10px 30px rgba(120,96,55,.12);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:&quot;Jost&quot;,&quot;Avenir Next&quot;,&quot;Segoe UI&quot;,sans-serif;display:flex;flex-direction:column}
  header{padding:16px 20px 12px;text-align:center;border-bottom:1px solid var(--line);background:var(--surface)}
  .brand{font-family:&quot;Cormorant Garamond&quot;,Georgia,serif;font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 4px}
  header h1{font-family:&quot;Cormorant Garamond&quot;,Georgia,serif;font-weight:600;font-size:24px;margin:0}
  header p{margin:4px 0 0;color:var(--ink-soft);font-size:13.5px;font-weight:300}
  #log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;max-width:720px;width:100%;margin:0 auto}
  .msg{max-width:85%;padding:11px 15px;border-radius:16px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
  .msg.bot{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start;box-shadow:var(--shadow)}
  .msg.me{background:var(--gold);color:#241c10;border-bottom-right-radius:6px;align-self:flex-end;font-weight:500}
  .msg a{color:var(--gold-deep);font-weight:600}
  .msg.me a{color:#241c10}
  .chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start}
  .chip{appearance:none;font:inherit;font-size:13.5px;cursor:pointer;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:7px 13px}
  .chip:hover{border-color:var(--gold)}
  .typing{align-self:flex-start;color:var(--ink-soft);font-size:14px;padding:4px 6px}
  form{display:flex;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);max-width:720px;width:100%;margin:0 auto}
  input[type=text]{flex:1;font:inherit;font-size:16px;padding:12px 15px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);outline:none}
  input[type=text]:focus{border-color:var(--gold)}
  button.send{appearance:none;font:inherit;font-weight:600;cursor:pointer;background:var(--gold);color:#241c10;border:none;border-radius:999px;padding:12px 20px}
  button.send:disabled{opacity:.5;cursor:default}
  .note{max-width:720px;margin:0 auto;padding:0 16px 10px;font-size:12px;color:var(--ink-soft);text-align:center}
</style>
</head>
<body>
<header>
  <p class=&quot;brand&quot;>JP Med Spa</p>
  <h1>Ask us anything</h1>
  <p>Hours, treatments, consultations — answered instantly. For medical concerns, call (919) 426-8031.</p>
</header>

<div id=&quot;log&quot;></div>
<p class=&quot;note&quot;>This assistant gives general information only and can't quote treatment prices or diagnose. Consultations are with Jin Pak, PA.</p>

<form id=&quot;form&quot;>
  <input type=&quot;text&quot; id=&quot;input&quot; placeholder=&quot;Type your question…&quot; autocomplete=&quot;off&quot; />
  <button class=&quot;send&quot; id=&quot;send&quot; type=&quot;submit&quot;>Send</button>
</form>

<script>
/* ================================================================
   CONFIG — set RELAY_URL to the deployed relay endpoint (POST
   {messages:[{role,content}...]} -> {reply:&quot;...&quot;}). The OpenAI API
   key lives ONLY on the relay, never in this page.
   ================================================================ */
var CONFIG = { RELAY_URL: &quot;https://jp-med-spa-chatbot.jpmedspaoffice.workers.dev&quot; };

var log = document.getElementById('log');
var form = document.getElementById('form');
var input = document.getElementById('input');
var sendBtn = document.getElementById('send');
var chatHistory = [];

function linkify(text){
  var esc = text.replace(/&amp;/g,'&amp;amp;').replace(/</g,'&amp;lt;').replace(/>/g,'&amp;gt;');
  return esc.replace(/(https?:\/\/[^\s)]+)/g, '<a href=&quot;$1&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;>$1</a>');
}
function addMsg(text, who){
  var d = document.createElement('div');
  d.className = 'msg ' + who;
  d.innerHTML = linkify(text);
  log.appendChild(d);
  log.scrollTop = log.scrollHeight;
  return d;
}
function addChips(){
  var wrap = document.createElement('div');
  wrap.className = 'chips';
  ['What are your hours?','How does the $75 consultation work?','Which treatment is right for me?','Do you offer laser hair removal?'].forEach(function(q){
    var b = document.createElement('button');
    b.type = 'button'; b.className = 'chip'; b.textContent = q;
    b.onclick = function(){ input.value = q; form.requestSubmit(); };
    wrap.appendChild(b);
  });
  log.appendChild(wrap);
}
function setBusy(b){
  sendBtn.disabled = b; input.disabled = b;
}
form.addEventListener('submit', function(e){
  e.preventDefault();
  var text = input.value.trim();
  if(!text) return;
  input.value = '';
  addMsg(text, 'me');
  chatHistory.push({role:'user', content:text});
  if(!CONFIG.RELAY_URL){
    addMsg(&quot;Thanks for your message! Our chat assistant is almost ready — please call us at (919) 426-8031 or send a consultation request at jpmedspa.com/contact and we'll be happy to help.&quot;, 'bot');
    return;
  }
  setBusy(true);
  var typing = document.createElement('div');
  typing.className = 'typing'; typing.textContent = 'Typing…';
  log.appendChild(typing); log.scrollTop = log.scrollHeight;
  fetch(CONFIG.RELAY_URL, {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({messages: chatHistory})
  }).then(function(r){ return r.json(); }).then(function(data){
    typing.remove(); setBusy(false);
    var reply = (data &amp;&amp; data.reply) ? data.reply : &quot;Sorry, I couldn't get an answer just now. Please call us at (919) 426-8031.&quot;;
    addMsg(reply, 'bot');
    chatHistory.push({role:'assistant', content:reply});
    input.focus();
  }).catch(function(){
    typing.remove(); setBusy(false);
    addMsg(&quot;Sorry, something went wrong. Please call us at (919) 426-8031 and we'll help right away.&quot;, 'bot');
  });
});

addMsg(&quot;Hi, welcome to JP Med Spa — Raleigh's first K-beauty med spa. Ask me about treatments, hours, or booking a consultation with Jin Pak, PA.&quot;, 'bot');
addChips();
input.focus();
</script>
</body>
</html>
" style="width:100%;height:760px;border:0;display:block;" title="JP Med Spa Chat">
  
  
JP MED SPA SKIN SOLUTIONS

ADDRESS

314 W MILLBROOK RD STE 117

RALEIGH N.C. 27609

PHONE

(919) 426-8031

EMAIL

JPMEDSPA@GMAIL.COM

SOCIALS
