/*
 *  FirstRun.tsx
 *  Zyquo Cloud Web
 *
 *  Author: Simon-Pierre Boucher
 *  Mail: contact@spboucher.ai
 *
 *  First-run welcome: clean, honest, transparent about local storage.
 */

import { useStore } from '../state/store'
import ZyquoGlyph from './ZyquoGlyph'

export default function FirstRun() {
  const updateSettings = useStore((s) => s.updateSettings)
  const openSettings = useStore((s) => s.openSettings)

  return (
    <div className="overlay">
      <div className="panel" style={{ width: 520 }}>
        <div className="settings-content" style={{ padding: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
            <ZyquoGlyph size={56} />
          </div>
          <h3 style={{ textAlign: 'center', fontSize: 18 }}>Welcome to Zyquo Cloud</h3>
          <p style={{ color: 'var(--z-text-secondary)', textAlign: 'center', marginTop: 4 }}>
            Every cloud model, one beautiful chat — running entirely in your browser.
          </p>
          <div className="first-run-note" style={{ marginTop: 16 }}>
            <span>
              <strong>No account. No backend. Nothing leaves this device.</strong>
            </span>
            <span>
              Your API keys and conversation history are stored <strong>in this browser</strong>
              {' '}(localStorage / IndexedDB) and are sent only to the AI provider you choose,
              directly. Keys in browser storage aren't a secure vault — anyone with access to this
              browser profile could read them. An optional passphrase lock is available in
              Settings → Advanced.
            </span>
            <span>Add a provider API key to begin.</span>
          </div>
          <div className="first-run-actions" style={{ marginTop: 16 }}>
            <button
              className="button"
              onClick={() => updateSettings({ firstRunAcknowledged: true })}
            >
              Explore first
            </button>
            <button
              className="button primary"
              onClick={() => {
                updateSettings({ firstRunAcknowledged: true })
                openSettings('providers')
              }}
            >
              Add a key
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}