// Sections for "V. Classes" page — under construction with preview.

const CLASSES_DATA = [
  { name: "Cavaleiro", glyph: "⚔", desc: "Guerreiro nobre e leal, mestre da espada e do escudo." },
  { name: "Guerreiro", glyph: "🛡", desc: "Força bruta e resistência — a linha de frente de qualquer batalha." },
  { name: "Feiticeiro", glyph: "✦", desc: "Canaliza magia elemental pura através da vontade e do instinto." },
  { name: "Arqueiro", glyph: "➶", desc: "Precisão mortal à distância, olhos que nunca perdem o alvo." },
  { name: "Mago", glyph: "◈", desc: "Estudioso das artes arcanas, domina feitiços complexos e antigos." },
  { name: "Sacerdote", glyph: "✙", desc: "Guardião da fé e da cura, elo entre os mortais e o divino." },
  { name: "Lanceiro", glyph: "⟠", desc: "Alcance e técnica — controla o campo de batalha com a lança." },
  { name: "Assassino", glyph: "◇", desc: "Sombra e silêncio. Ataca onde ninguém espera." },
  { name: "Monge", glyph: "☯", desc: "Disciplina corporal e espiritual forjadas em anos de meditação." },
  { name: "Bardo", glyph: "♪", desc: "A música como arma — inspira aliados e desestabiliza inimigos." },
  { name: "Druida", glyph: "❧", desc: "Guardião da natureza, invoca as forças da terra e da vida." },
  { name: "Samurai", glyph: "刀", desc: "Honra acima de tudo. A katana é uma extensão da alma." },
];

// ---------- Hero ----------
function ClassesHero({ intensity }) {
  return (
    <section className="chapter-hero">
      <div className="chapter-hero-bg" />
      <window.EmberCanvas intensity={intensity} />

      <div className="chapter-hero-inner reveal">
        <div className="chapter-eyebrow">
          <span className="line" />
          <span className="eyebrow">Capítulo V · Os Caminhos</span>
          <span className="line" />
        </div>

        <h1 className="chapter-title">
          As <span className="em">Classes</span>
        </h1>

        <p className="chapter-lede">
          Doze caminhos forjados pela tradição, pelo combate e pela fé. Cada classe
          representa uma filosofia de luta, um modo de vida — e um destino diferente
          dentro do <em>Grande Continente</em>.
        </p>

        <p className="chapter-sub">
          De cavaleiros blindados a assassinos das sombras, de magos eruditos a samurais
          honrados — todo aventureiro começa escolhendo o caminho que vai trilhar.
        </p>

        <div className="chapter-breadcrumbs">
          <a href="index.html">Início</a>
          <span className="sep">/</span>
          <a href="index.html#mundo">O Mundo</a>
          <span className="sep">/</span>
          <span className="current">Classes</span>
        </div>
      </div>

      <div className="scroll-hint">
        <span>Conheça os caminhos</span>
        <span className="line" />
      </div>
    </section>
  );
}

// ---------- WIP badge ----------
function WipBanner() {
  return (
    <div className="wip-banner reveal">
      <div className="wip-banner-inner">
        <span className="wip-icon">⚒</span>
        <div className="wip-banner-text">
          <span className="wip-banner-title">Página em construção</span>
          <span className="wip-banner-sub">
            Os dossiês completos de cada classe estão sendo forjados. Por enquanto,
            conheça os doze caminhos disponíveis no universo de O Legado do Fogo.
          </span>
        </div>
      </div>
    </div>
  );
}

// ---------- Class card ----------
function ClassCard({ cls, index }) {
  return (
    <div
      className="class-card reveal"
      style={{ transitionDelay: (index * 60) + "ms" }}
    >
      <div className="class-card-glyph">{cls.glyph}</div>
      <h3 className="class-card-name">{cls.name}</h3>
      <p className="class-card-desc">{cls.desc}</p>
      <span className="class-card-badge">Em breve</span>
    </div>
  );
}

// ---------- Preview grid ----------
function ClassesPreview() {
  return (
    <section className="classes-preview">
      <WipBanner />

      <div className="classes-head reveal">
        <span className="eyebrow">Roster de Classes</span>
        <h2>Doze caminhos, <span className="em">um destino</span></h2>
        <p>
          Cada classe possui habilidades únicas, armas prediletas e um papel
          distinto no campo de batalha. Escolha com sabedoria — o caminho
          define o aventureiro.
        </p>
      </div>

      <div className="classes-grid">
        {CLASSES_DATA.map((cls, i) => (
          <ClassCard key={cls.name} cls={cls} index={i} />
        ))}
      </div>

      <div className="classes-elements reveal">
        <div className="classes-elements-head">
          <span className="eyebrow">Sistema Elemental</span>
          <p>Cada classe pode ser afinada a um dos sete elementos do mundo.</p>
        </div>
        <div className="elements-row">
          {[
            { name: "Fogo", glyph: "△", color: "#e8622c" },
            { name: "Água", glyph: "▽", color: "#3b8bba" },
            { name: "Terra", glyph: "◇", color: "#8b7355" },
            { name: "Vento", glyph: "◁", color: "#7fb590" },
            { name: "Raio", glyph: "⚡", color: "#d4a832" },
            { name: "Luz", glyph: "✦", color: "#e8d5a3" },
            { name: "Escuridão", glyph: "✶", color: "#8a6fb0" },
          ].map((el) => (
            <div key={el.name} className="element-tag">
              <span className="element-glyph" style={{ color: el.color }}>{el.glyph}</span>
              <span className="element-name">{el.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Outro ----------
function ClassesOutro() {
  return (
    <section className="chapter-outro">
      <div className="outro-rule" />
      <p className="outro-quote reveal">
        "A classe não define o herói — mas o herói honra a classe que escolheu."
      </p>
      <div className="outro-attr reveal">
        <span className="line" />
        <span>Manual do Aventureiro · O Grande Continente</span>
        <span className="line" />
      </div>

      <div className="outro-actions reveal">
        <a href="Organizações.html" className="btn btn-ghost">
          <span className="arrow">←</span> Organizações
        </a>
        <a href="Bestiario.html" className="btn btn-primary">
          Bestiário <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { ClassesHero, ClassesPreview, ClassesOutro });