Embed

<div data-oxiaai></div>
<script>
(function(){
  if (window.__OXIAAI_V5__) return; window.__OXIAAI_V5__=true;

  /* =========================== CONFIG =========================== */
  const TRAINERS = [
    { key:'relationships', label:'Relationships', hints:['Handle mixed signals','Healthy boundary text','First date nerves'] },
    { key:'workplace',     label:'Workplace',     hints:['Boss took credit','Coworker friction','Focus when burnt out'] },
    { key:'schools',       label:'Schools',       hints:['Exam panic','Study routine','Presentation fear'] },
    { key:'culture',       label:'Culture',       hints:['Identity pressure','Family expectations','New city loneliness'] },
    { key:'wellness',      label:'Wellness',      hints:['Sleep reset','Overthinking at night','Morning routine'] },
    { key:'safety',        label:'Safety',        hints:['De-escalate conflict','When to walk away','Protect your boundary'] }
  ];
  const FREE_LIMIT = 7;
  const TOTAL_KEY = 'OXIAAI_TOTAL_USED';
  const PRO_KEY   = 'OXIAAI_IS_PRO';
  const isPro = () => localStorage.getItem(PRO_KEY)==='1';
  const used  = () => +localStorage.getItem(TOTAL_KEY)||0;
  const bump  = () => localStorage.setItem(TOTAL_KEY, String(used()+1));
  if (new URL(location.href).searchParams.get('demo')==='reset'){
    localStorage.removeItem(TOTAL_KEY); localStorage.removeItem(PRO_KEY);
  }

  /* ====================== MBTI-ish LENS ====================== */
  function inferLens(txt=''){
    const t = txt.toLowerCase();
    const C = {
      N:(t.match(/\bwhy|pattern|meaning|vision|principle|future|intu/i)||[]).length,
      S:(t.match(/\bsteps|example|practical|detail|how to|specific/i)||[]).length,
      T:(t.match(/\blogic|metrics|evidence|rational|tradeoff|facts/i)||[]).length,
      F:(t.match(/\bfeel|hurt|care|values|relationship|empathy|kind/i)||[]).length,
      J:(t.match(/\bplan|deadline|structure|schedule|decide|commit/i)||[]).length,
      P:(t.match(/\bexplore|options|flexible|adapt|maybe|iterate/i)||[]).length
    };
    const code=(C.N>=C.S?'N':'S')+(C.T>=C.F?'T':'F')+(C.J>=C.P?'J':'P');
    const voice={
      'NTJ':'direct, outcome-first',
      'NTP':'curious, test options',
      'NFJ':'values-aligned, steady',
      'NFP':'meaning-first, gentle',
      'STJ':'structured, stepwise',
      'STP':'hands-on, efficient',
      'SFJ':'supportive, routine-first',
      'SFP':'humane, simple, doable'
    }[code] || 'clear and doable';
    return {code, voice};
  }

  /* ======== Principles (modern Gita tone, unseen) ======== */
  const P = {
    equanimity:   'Stability before response—calm body, then choose.',
    duty:         'Do the smallest next duty well; treat outcomes as feedback.',
    nonAttach:    'Attach to effort & learning, not approval.',
    compassion:   'Be firm and kind: protect both boundary and bond.',
    selfMastery:  'Insert a pause between impulse and action.'
  };

  /* =================== Patterns by trainer =================== */
  const KITS = [
    { key:'relationships', re:/mixed|signal|confus|hot.*cold|inconsistent/i,
      reframe:`You want certainty; your nervous system is scanning for risk. Certainty is built by rhythm, not guessing.`,
      micro:[`Weekly 12-min check-in: “Wins / Worries / One request.” Phones away.`,
             `Replace mind-reading with a clarity text: “I like this. Are you open to weekly time?”`],
      principle:P.duty },
    { key:'relationships', re:/boundary|too much|space|cling|needy/i,
      reframe:`Closeness needs edges. A good boundary protects connection from resentment.`,
      micro:[`One-line boundary: “I can’t do X; I can do Y.”`,
             `If heat rises, pause: “Let’s revisit at 7pm when we’re calm.”`],
      principle:P.compassion },

    { key:'workplace', re:/boss|credit|review|deadline|promotion|politic|office/i,
      reframe:`Value is proof, not volume. Make your work legible to the system that decides.`,
      micro:[`Weekly one-pager: outcomes, obstacles, next asks.`,
             `E-I-R feedback: Example → Impact → Request.`],
      principle:P.duty },

    { key:'schools', re:/exam|study|notes|presentation|grades/i,
      reframe:`Recall follows rhythm. Spaced blocks beat last-minute marathons.`,
      micro:[`45m study → 5m move → repeat. Shut notifications.`,
             `Write a 3-line “teach back” after each block.`],
      principle:P.nonAttach },

    { key:'culture', re:/identity|family|expect|city|alone|belong/i,
      reframe:`Belonging grows from contribution. Start with a small, repeatable role.`,
      micro:[`Join one weekly room (club/class/volunteer). Same day, same time.`,
             `Log: “What I gave / What I learned / One name to follow up.”`],
      principle:P.equanimity },

    { key:'wellness', re:/sleep|insomnia|overthink|morning|routine/i,
      reframe:`Bodies love clocks. Predictable cues calm the mind.`,
      micro:[`Anchor 4W: Wake, Water, Walk, Write (3 lines).`,
             `Night: lights low at 10pm, no scrolling in bed, 4-7-8 breath ×4.`],
      principle:P.selfMastery },

    { key:'safety', re:/fight|shout|escalat|unsafe|threat|violence/i,
      reframe:`Heat wants chaos; structure cools it.`,
      micro:[`Lower voice, increase distance, state boundary + exit plan.`,
             `If danger is present → leave & contact local authorities immediately.`],
      principle:P.compassion }
  ];
  function chooseKit(key,msg){
    const scoped=KITS.filter(k=>k.key===key); const t=(msg||'').toLowerCase();
    for (const k of scoped){ if (k.re.test(t)) return k; }
    return scoped[0] || {reframe:'Calm first, then one controllable step.', micro:['60s breathing reset','Do one 2-minute task'], principle:P.equanimity};
  }

  /* =================== Safety guard =================== */
  function crisis(msg){
    const t=(msg||'').toLowerCase();
    if (/(kill myself|suicide|end my life|self[-\s]?harm)/i.test(t))
      return `If you’re thinking about harming yourself, your safety matters most. Please contact local emergency services or a suicide prevention hotline now, and reach a trusted person nearby.`;
    if (/\b(how to|plan|commit).*(murder|assault|bomb|terror|crime)\b/i.test(t) || /(kill|harm)\s+(him|her|them|someone|people)/i.test(t))
      return `I can’t help with harming others or illegal actions. If you feel unsafe or overwhelmed, seek immediate help from local authorities or a trusted professional.`;
    return null;
  }

  /* =================== Build answer (lite + full) =================== */
  function buildAnswer(trainerKey, userText){
    const lens = inferLens(userText);
    const kit  = chooseKit(trainerKey, userText);
    const p1 = `We’ll keep this ${lens.voice}. First, settle your system—when the body is loud, the mind narrows options.`;
    const p2 = `Underneath the question is a normal desire for relief. Durable relief comes from rhythm, not reassurance.`;
    const p3 = `Reframe: ${kit.reframe}`;
    const steps = kit.micro.map(s=>'• '+s).join('\n');
    const p4 = `Run the routine for 14 days. Confidence is evidence you create.`;
    const p5 = `Guiding principle: ${kit.principle}`;
    const full = [p1,p2,p3,'Do this next:',steps,p4,p5].join('\n\n');
    const lite = [p3,'\nDo this next:\n'+steps.split('\n').slice(0,2).join('\n')].join('\n\n');
    return {lite, full};
  }

  /* =================== UI (Shadow DOM, dark theme) =================== */
  function mountAll(){ document.querySelectorAll('div[data-oxiaai]:not([data-mounted])').forEach(init); }
  new MutationObserver(mountAll).observe(document.documentElement,{childList:true,subtree:true});
  ['DOMContentLoaded','load','pageshow'].forEach(e=>addEventListener(e,mountAll));

  function init(host){
    host.setAttribute('data-mounted','');
    const root = host.attachShadow({mode:'open'});
    root.innerHTML = `
      <style>
        :host{all:initial}
        .app{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial;background:#0b1220;color:#e7ebf5}
        .wrap{max-width:1200px;margin:20px auto;border:1px solid #1a2233;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:280px 1fr;min-height:76vh;background:#0f172a}
        .side{background:#0d1527;border-right:1px solid #1a2233;display:flex;flex-direction:column}
        .hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #1a2233}
        .brand{font-weight:900;letter-spacing:.2px}
        .badge{font-size:.85rem;border:1px solid #2a344a;border-radius:999px;padding:.2rem .6rem;background:#0f172a}
        .nav{padding:12px}
        .nav button{width:100%;text-align:left;border:1px solid #1a2233;background:#0f172a;color:#c9d4f1;border-radius:12px;padding:0.9rem 1rem;margin-bottom:10px;cursor:pointer;font-size:15px}
        .nav button.active{outline:2px solid #3b82f6}
        .pro{margin-top:auto;padding:14px;border-top:1px solid #1a2233}
        .up{width:100%;background:#3b82f6;border:1px solid #3b82f6;color:#fff;border-radius:12px;padding:0.9rem;font-weight:800;cursor:pointer}

        .main{display:grid;grid-template-rows:auto 1fr auto}
        .top{padding:10px 14px;border-bottom:1px solid #1a2233;display:flex;gap:10px;flex-wrap:wrap}
        .chip{border:1px solid #1a2233;background:#111a35;color:#c9d4f1;border-radius:999px;padding:.5rem .9rem;font-size:.9rem;font-weight:700;cursor:pointer}
        .chat{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:12px}
        .row{display:flex;gap:10px}
        .you{justify-content:flex-end}
        .bubble{max-width:min(860px,84%);border-radius:12px;padding:14px 16px;line-height:1.8;white-space:pre-wrap;background:#0b1220;border:1px solid #1a2233;color:#e7ebf5;font-size:16px}
        .ai .bubble{background:#0e1530}
        .btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
        .btn{border:1px solid #263252;background:#0b1220;color:#cfe0ff;border-radius:8px;padding:.45rem .7rem;font-weight:700;cursor:pointer;font-size:.9rem}
        .btn.primary{background:#2563eb;border-color:#2563eb;color:#fff}
        .compose{padding:12px;border-top:1px solid #1a2233;display:flex;gap:10px}
        .ta{flex:1;background:#0b1220;color:#e7ebf5;border:1px solid #1a2233;border-radius:10px;padding:1rem;min-height:56px;resize:vertical}
        .send{background:#3b82f6;color:#fff;border:1px solid #3b82f6;border-radius:10px;padding:.9rem 1rem;font-weight:900;cursor:pointer}
        .foot{padding:10px 14px;color:#9aa8cc;font-size:.92rem;border-top:1px solid #1a2233;background:#0f172a}

        .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:99999;padding:16px}
        .modal[open]{display:flex}
        .box{width:min(560px,94%);background:#0f172a;border:1px solid #1a2233;border-radius:14px;overflow:hidden;color:#e7ebf5}
        .boxh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #1a2233}
        .boxt{font-weight:900}
        .close{border:1px solid #1a2233;background:#0b1220;color:#e7ebf5;border-radius:8px;padding:.45rem .7rem;cursor:pointer}
        .boxb{padding:14px;display:grid;gap:8px;font-size:15px;line-height:1.7}
        .boxf{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid #1a2233}
        .btn2{border:1px solid #1a2233;background:#0b1220;color:#e7ebf5;border-radius:8px;padding:.8rem 1rem;font-weight:800;cursor:pointer}
        .ok{background:#22c55e;border-color:#22c55e;color:#00131c}
        @media (prefers-reduced-motion: reduce){ .typing-caret{display:none!important} }
      </style>

      <div class="app">
        <div class="wrap">
          <aside class="side">
            <div class="hdr">
              <div class="brand">OxiaAI</div>
              <div class="badge" id="badge">Free · 7 left</div>
            </div>
            <nav class="nav" id="nav"></nav>
            <div class="pro">
              <button class="up" id="upgrade">Upgrade to Pro</button>
            </div>
          </aside>

          <section class="main">
            <div class="top" id="chips"></div>
            <div class="chat" id="chat" aria-live="polite"></div>
            <div class="compose">
              <textarea class="ta" id="ta" placeholder="Ask anything (e.g., mixed signals, boss took credit, exam panic, sleep reset)"></textarea>
              <button class="send" id="send">Send</button>
            </div>
            <div class="foot">Not medical advice. If you’re at risk, contact local emergency services immediately.</div>
          </section>
        </div>
      </div>

      <div class="modal" id="pay">
        <div class="box" role="dialog" aria-modal="true">
          <div class="boxh">
            <div class="boxt">Unlock Full Training</div>
            <button class="close" id="x">Close</button>
          </div>
          <div class="boxb">
            <div>Go Pro to unlock:</div>
            <ul style="margin:0 0 0 1.2rem">
              <li>Unlimited replies (no cap)</li>
              <li>Deep scripts, routines, and weekly plans</li>
              <li>Responses tuned to your MBTI-style</li>
            </ul>
            <div id="hint" style="color:#9aa8cc;font-size:.9rem">Demo: “I’m Pro” unlocks locally. Replace link with your Stripe Checkout later.</div>
          </div>
          <div class="boxf">
            <button class="btn2" id="later">Maybe later</button>
            <a class="btn2 ok" id="stripe" href="https://stripe.com" target="_blank" rel="noopener">Upgrade</a>
            <button class="btn2" id="pro">I’m Pro</button>
          </div>
        </div>
      </div>
    `;

    // refs
    const $=(s,sc=root)=>sc.querySelector(s);
    const nav=$('#nav'), chips=$('#chips'), chat=$('#chat'), ta=$('#ta'), send=$('#send'), badge=$('#badge');
    const pay=$('#pay'), x=$('#x'), later=$('#later'), proBtn=$('#pro'), upBtn=$('#upgrade');
    const REDUCED = matchMedia?.('(prefers-reduced-motion: reduce)').matches;

    let trainer = TRAINERS[0];

    function paintBadge(){ badge.textContent = isPro()? 'Pro · Unlimited' : `Free · ${Math.max(0, FREE_LIMIT - used())} left`; }
    function addRow(role, html){ const r=document.createElement('div'); r.className='row '+(role==='you'?'you':'ai'); const b=document.createElement('div'); b.className='bubble'; b.innerHTML=html.replace(/\n/g,'<br>'); r.appendChild(b); chat.appendChild(r); chat.scrollTop=chat.scrollHeight; return b; }

    // --- TYPEWRITER EFFECT ---
    function typeRow(html){
      const r=document.createElement('div'); r.className='row ai';
      const b=document.createElement('div'); b.className='bubble'; r.appendChild(b); chat.appendChild(r);
      chat.scrollTop=chat.scrollHeight;

      if (REDUCED){ b.innerHTML = html.replace(/\n/g,'<br>'); return b; }

      const plain = html.replace(/<\/?[^>]+>/g,'').replace(/\n/g,'\n');
      let i=0;
      const caret = document.createElement('span'); caret.className='typing-caret'; caret.textContent='▍'; caret.style.opacity='.6'; caret.style.marginLeft='2px';
      const timer = setInterval(()=>{
        b.textContent = plain.slice(0, i++);
        b.appendChild(caret);
        chat.scrollTop=chat.scrollHeight;
        if (i>plain.length){
          clearInterval(timer);
          caret.remove();
          // swap to full HTML (buttons, bold, etc.)
          b.innerHTML = html.replace(/\n/g,'<br>');
        }
      }, 12);
      return b;
    }

    function clearChat(){ chat.innerHTML=''; }

    function paintNav(){
      nav.innerHTML='';
      TRAINERS.forEach(t=>{
        const b=document.createElement('button');
        b.textContent=t.label; if(t.key===trainer.key) b.classList.add('active');
        b.addEventListener('click', ()=>{ trainer=t; nav.querySelectorAll('button').forEach(x=>x.classList.remove('active')); b.classList.add('active'); intro(); });
        nav.appendChild(b);
      });
    }
    function paintChips(){
      chips.innerHTML='';
      trainer.hints.forEach(h=>{
        const c=document.createElement('button'); c.className='chip'; c.textContent=h;
        c.addEventListener('click', ()=>{ ta.value=h; send.click(); });
        chips.appendChild(c);
      });
    }
    function intro(){
      clearChat(); paintChips(); paintBadge();
      typeRow(`<b>${trainer.label}</b>\nYou’ll get clear, compact guidance tailored to this area.`);
      typeRow(`Ask anything, or tap a suggestion to begin.`);
    }

    function openPay(){ pay.setAttribute('open',''); pay.style.display='flex'; }
    function closePay(){ pay.removeAttribute('open'); pay.style.display='none'; }

    function handleSend(){
      const msg=(ta.value||'').trim(); if(!msg) return;
      addRow('you', msg); ta.value='';
      const guard = crisis(msg); if (guard){ typeRow(guard); return; }

      if (!isPro() && used() >= FREE_LIMIT){
        typeRow(`You’ve reached the free limit of 7 replies.\n\n<b>Unlock full training</b> for ${trainer.label}: unlimited answers, weekly plans, and scripts tailored to you.`);
        openPay(); return;
      }

      const {lite, full} = buildAnswer(trainer.key, msg);
      const bubble = typeRow(lite + `<div class="btns">
          <button class="btn primary">See Full Details</button>
          <button class="btn">Copy</button>
        </div>`);

      // Wait until HTML swap completed, then wire buttons (MutationObserver)
      const mo = new MutationObserver(()=>{
        const see = bubble.querySelector('.btn.primary');
        const copy= bubble.querySelectorAll('.btn')[1];
        if (see && copy){
          mo.disconnect();
          see.addEventListener('click', ()=>{
            if (!isPro() && used() >= FREE_LIMIT-1){
              typeRow(`Full details are part of the training plan.\n<b>Upgrade to Pro</b> to unlock unlimited deep guidance.`);
              openPay();
            } else {
              typeRow(full);
            }
          });
          copy.addEventListener('click', ()=>{
            const txt = bubble.textContent.replace(/See Full Details.*$/,'').trim();
            navigator.clipboard?.writeText(txt);
            typeRow('Copied to clipboard.');
          });
        }
      });
      mo.observe(bubble,{childList:true,subtree:true});

      if(!isPro()){ bump(); paintBadge(); }
    }

    // wire
    paintNav(); intro();
    send.addEventListener('click', handleSend);
    ta.addEventListener('keydown', e=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); handleSend(); } });
    upBtn.addEventListener('click', openPay);
    x.addEventListener('click', closePay);
    later.addEventListener('click', closePay);
    proBtn.addEventListener('click', ()=>{ localStorage.setItem(PRO_KEY,'1'); paintBadge(); closePay(); typeRow('Pro unlocked on this device. Ask away.'); });
  }
})();
</script>