Burnzee

{lang ? lang.name + " guide" : "Your guide"}

{connected ? ( /* ===== LIVE CHAT ===== */

{msgs.map((m, i) =>

{m.role !== "user" ? : null} {m.content}

)} {busy ?

Burnzee is thinking…

: null}

{canReteach ?

: null} {msgs.length <= 1 ?

{suggestions.map((s, i) => )}

: null}

setInput(e.target.value)}
            onKeyDown={(e) => {if (e.key === "Enter" && !e.shiftKey) {e.preventDefault();send();}}} />
              <button className="helen-send" onClick={() => send()} disabled={busy || !input.trim()} aria-label="Send">
                <Icon name="send" size={20} />
              </button>
            </div>
          </div>) : (

/* ===== SCRIPTED FALLBACK (no backend yet) ===== */
        <>
            <div className="helen-thread">
              {scriptLines.slice(0, shown).map((t, i) =>
            <div key={i} className="helen-bubble"><span className="helen-tick" style={{ background: accent }} />{t}</div>
            )}
              {shown >= scriptLines.length && canReteach ?
            <div className="helen-bubble helen-offer">
                  <span className="helen-tick" style={{ background: accent }} />
                  Want me to re-teach <b>{secLabel}</b>? I'll refresh the page with fresh material.
                </div> :
            null}
            </div>
            {shown < scriptLines.length ?
          <button className="helen-more" onClick={() => setShown((s) => s + 1)} style={{ color: accent }}>Go on…</button> :
          null}
            {canReteach ?
          <button className="helen-reteach" onClick={reteach} style={{ borderColor: accent, color: accent }}>
                <Icon name="refresh" size={18} /> Re-teach {secLabel} with new material
              </button> :
          null}
            <div className="helen-setup">
              <b>Want Burnzee to actually talk back?</b> Connect Burnzee to your AI and he'll hold real conversations, quiz you, and remember across sessions. <button className="link-helen" onClick={onOpenSettings}>Set up Burnzee →</button>
            </div>
          </>)
        }
      </aside>
    </>);

}

/* ---------- SETTINGS (connect to your Cloudflare Worker) ---------- */
function SettingsModal({ open, onClose }) {
  const api = window.LPApi;
  const [cfg, setCfg] = useStateS(() => api ? api.config() : { url: "", key: "", model: "google/gemini-flash-1.5", profile: "default" });
  const [test, setTest] = useStateS(null); // {ok, msg}
  const [testing, setTesting] = useStateS(false);
  useEffectS(() => {if (open && api) setCfg(api.config());setTest(null);}, [open]);
  if (!open) return null;

return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h2 className="modal-title">Connect Burnzee</h2>
          <button className="iconbtn" onClick={onClose}>✕</button>
        </div>
        <p className="modal-sub">Point the app at your Cloudflare Worker. These settings stay on this device only — your API key never leaves the Worker.</p>

<div className="field">
          <label className="field-label">Worker URL</label>
          <input className="field-input" value={cfg.url} placeholder="https://language-partner-worker.you.workers.dev"
          onChange={(e) => setCfg({ ...cfg, url: e.target.value })} />
          <div className="field-hint">The address Wrangler printed when you deployed the Worker.</div>
        </div>

<div className="field">
          <label className="field-label">Passphrase</label>
          <input className="field-input" type="password" value={cfg.key} placeholder="your APP_PASSPHRASE"
          onChange={(e) => setCfg({ ...cfg, key: e.target.value })} />
          <div className="field-hint">The same phrase you set with <code>wrangler secret put APP_PASSPHRASE</code>.</div>
        </div>

<div className="field">
          <label className="field-label">Model</label>
          <select className="field-select" value={cfg.model} onChange={(e) => setCfg({ ...cfg, model: e.target.value })}>
            {api.MODELS.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
          </select>
          <div className="field-hint">Cheapest first. You can change this anytime.</div>
        </div>

<div className="field">
          <label className="field-label">Profile (for syncing progress)</label>
          <input className="field-input" value={cfg.profile} placeholder="default"
          onChange={(e) => setCfg({ ...cfg, profile: e.target.value })} />
          <div className="field-hint">Leave as “default” unless you keep separate profiles.</div>
        </div>

<div className="modal-actions">
          <button className="btn-primary" onClick={save}>Save</button>
          <button className="btn-text" onClick={runTest} disabled={testing || !cfg.url || !cfg.key}>{testing ? "Testing…" : "Test connection"}</button>
          {test ? <div className={"test-result " + (test.ok ? "ok" : "no")}>{test.msg}</div> : null}
        </div>

<div className="modal-foot">Everything runs on your own Cloudflare account. See DEPLOY.md for setup and PRIVACY.md for what is and isn't stored.</div>
      </div>
    </div>);

}

Object.assign(window, { Dashboard, LanguagePage, BurnzeePanel, SettingsModal, SECTION_META });

{greeting}

{lang.name}