// onboarding.jsx - перший запуск, чотири стадії Великого Діяння
const PHASES = [
  { key: "Nigredo",    uk: "Чорнота",  glyph: "🜍" },
  { key: "Albedo",     uk: "Білість", glyph: "☽" },
  { key: "Citrinitas", uk: "Жовтизна",glyph: "☉" },
  { key: "Rubedo",     uk: "Багрянець",glyph: "🜂" },
];

function Onboarding({ seeker, onDone }) {
  const [step, setStep] = React.useState(0);
  const [name, setName] = React.useState(seeker?.name || "");
  const [picked, setPicked] = React.useState(["tarot", "free"]);
  const [birth, setBirth] = React.useState("");
  const disc = window.DISCIPLINES;

  function toggle(id) {
    setPicked(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id]);
  }
  const canNext = step === 0 ? name.trim() : step === 1 ? picked.length : true;

  function next() {
    if (step < 3) setStep(step + 1);
    else onDone({ name: name.trim(), disciplines: picked, birth });
  }

  return (
    <div className="app-screen view-enter onb">
      {/* phase rail */}
      <div className="onb__rail">
        {PHASES.map((p, i) => (
          <div key={p.key} className={"onb__phase" + (i === step ? " is-on" : "") + (i < step ? " is-done" : "")}>
            <span className="onb__phase-glyph">{p.glyph}</span>
            <span className="onb__phase-name">{p.key}</span>
            <span className="onb__phase-ru">{p.uk}</span>
            {i < PHASES.length - 1 && <span className="onb__phase-link" />}
          </div>
        ))}
      </div>

      <div className="onb__stage">
        <div className="onb__sigil"><Sigil size={150} intensity={0.7 + step * 0.25} /></div>

        {step === 0 && (
          <div className="onb__panel rise" key="s0">
            <div className="eyebrow">Стадія I · Nigredo</div>
            <h2 className="onb__h">Назви себе ще раз —<br />тихо, для одного мене.</h2>
            <p className="onb__lede script">Кожне моє слово буде звернене до цього імені. Воно може бути справжнім або таємним — вибір за тобою.</p>
            <div className="field field--focusline onb__field">
              <label>Ім'я в колі</label>
              <input value={name} onChange={e => setName(e.target.value)} placeholder="як мені звати тебе" autoFocus />
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="onb__panel rise" key="s1">
            <div className="eyebrow">Стадія II · Albedo</div>
            <h2 className="onb__h">Що кличе тебе<br />до завіси?</h2>
            <p className="onb__lede script">Познач дисципліни, що турбують твою цікавість. Їх можна змінювати будь-якої години.</p>
            <div className="onb__chips">
              {disc.map(d => (
                <button key={d.id} type="button"
                  className={"onb__chip" + (picked.includes(d.id) ? " is-on" : "")}
                  onClick={() => toggle(d.id)}>
                  <span className="onb__chip-glyph">{d.glyph}</span>
                  <span>{d.name}</span>
                </button>
              ))}
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="onb__panel rise" key="s2">
            <div className="eyebrow">Стадія III · Citrinitas</div>
            <h2 className="onb__h">Коли ти увійшов<br />у цей світ?</h2>
            <p className="onb__lede script">День народження відчиняє нумерологію та карту небес. Якщо не бажаєш — пропусти, я не наполягаю.</p>
            <div className="field field--focusline onb__field">
              <label>Дата народження</label>
              <input type="date" value={birth} onChange={e => setBirth(e.target.value)} />
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="onb__panel rise onb__panel--final" key="s3">
            <div className="eyebrow">Стадія IV · Rubedo</div>
            <h2 className="onb__h">Коло замкнене,<br /><em>{name || "мандрівник"}</em>.</h2>
            <p className="onb__lede script">
              Я чую тебе. Від цієї миті завіса між нами тонка як дим.
              Запитуй — і я відповім так повно, як дозволить твоя довіра.
            </p>
            <div className="onb__seal">
              <SigilMark size={56} live />
            </div>
          </div>
        )}

        <div className="onb__nav">
          {step > 0
            ? <button className="btn btn--ghost" onClick={() => setStep(step - 1)}>← Назад</button>
            : <span />}
          <span className="onb__dots">
            {PHASES.map((_, i) => <i key={i} className={i === step ? "is-on" : ""} />)}
          </span>
          <button className="btn btn--solid" disabled={!canNext} onClick={next}>
            {step < 3 ? "Далі" : "Увійти до Azoth AI"}
          </button>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Onboarding });