// landing.jsx - головна сторінка Azoth
function Landing({ onEnter }) {
  const disc = window.DISCIPLINES;
  return (
    <div className="app-screen view-enter ld">
      {/* top bar */}
      <header className="ld__top">
        <div className="ld__brand">
          <SigilMark size={30} live />
          <span className="wordmark" style={{ fontSize: "1.05rem" }}>AZOTH</span>
        </div>
        <nav className="ld__nav">
          <a className="ld__navlink" href="#disciplines">Дисципліни</a>
          <a className="ld__navlink" href="#word">Слово</a>
          <button className="btn btn--ghost" onClick={() => onEnter("login")}>Увійти</button>
          <button className="btn" onClick={() => onEnter("register")}>Почати коло</button>
        </nav>
      </header>

      {/* hero */}
      <section className="ld__hero">
        <div className="ld__sigil-wrap rise" style={{ animationDelay: ".1s" }}>
          <Sigil size={400} />
        </div>
        <div className="ld__hero-text">
          <div className="eyebrow rise" style={{ animationDelay: ".2s" }}>Quod est inferius · sicut quod est superius</div>
          <h1 className="ld__title rise" style={{ animationDelay: ".35s" }}>
            Запитуй. Я знаю<br />те, що <em>сховано</em>.
          </h1>
          <p className="ld__lede script rise" style={{ animationDelay: ".5s" }}>
            Azoth AI — закритий консультант для езотериків-практиків.
            Розбирай клієнтські запити, перевіряй джерела, готуй сесії,
            розклади, обряди й символічні трактування в одному тихому голосі.
          </p>
          <div className="ld__cta rise" style={{ animationDelay: ".65s" }}>
            <button className="btn btn--solid" onClick={() => onEnter("register")}>Увійти в коло</button>
            <button className="btn btn--ghost" onClick={() => onEnter("login")}>У мене вже є ім'я →</button>
          </div>
        </div>
      </section>

      {/* disciplines */}
      <section className="ld__section" id="disciplines">
        <div className="rule" style={{ maxWidth: 1080, margin: "0 auto 2.6rem" }}>
          <span className="rule__mark">✦</span>
          <span className="eyebrow" style={{ letterSpacing: ".3em" }}>Шість напрямів практики</span>
          <span className="rule__mark">✦</span>
        </div>
        <div className="ld__grid">
          {disc.map((d, i) => (
            <article key={d.id} className="disc-card rise" style={{ animationDelay: `${0.1 * i}s` }}
                     onClick={() => onEnter("register")}>
              <span className="disc-card__glyph">{d.glyph}</span>
              <div className="disc-card__lat">{d.lat}</div>
              <h3 className="disc-card__name">{d.name}</h3>
              <p className="disc-card__blurb">{d.blurb}</p>
            </article>
          ))}
        </div>
      </section>

      {/* word / quote */}
      <section className="ld__word" id="word">
        <div className="ld__word-inner">
          <span className="ld__quote-mark">“</span>
          <p className="ld__quote">
            Я не замінюю твою практику — я загострюю її. Назви запит,
            традицію, карту, число чи знак, і ми відділимо джерело від
            домислу, символ від шуму, ризик від дії.
          </p>
          <div className="ld__sign">— Azoth AI</div>
        </div>
      </section>

      {/* footer */}
      <footer className="ld__foot">
        <div className="ld__brand">
          <SigilMark size={22} />
          <span className="wordmark" style={{ fontSize: ".85rem", letterSpacing: ".3em" }}>AZOTH</span>
        </div>
        <span className="ld__foot-note">Інструмент для езотериків-практиків: консультації, сесії, джерела.</span>
        <span className="ld__foot-note">MMXXVI</span>
      </footer>
    </div>
  );
}
Object.assign(window, { Landing });