// Sections for "II. Heróis e Lendas" — cinematic character dossiers.

const ASSET_V = "?v=2"; // ← incrementar este número sempre que substituir imagens

const RANK_TIERS = ["Bronze", "Prata", "Ouro", "Platina", "Diamante"];

const HEROES = [
  {
    id: "lancelot",
    numeral: "I",
    name: "Lancelot",
    epithet: "O Herdeiro da Chama",
    lineage: "Filho de Aiden e Fiama · Irmão de Agni",
    rank: "Bronze",
    artType: "plate",
    main: "assets/herois/lancelot-principal.jpg",
    quote: "Decidi seguir meu caminho… usando esse fogo, criarei o meu próprio legado.",
    body: [
      "Nascido em uma família de lendas. Filho de Aiden e Fiama, fundadores da Ordem da Chama Sagrada, e irmão de Agni — a prodígio que o mundo aprendeu a admirar, e ele, a suportar.",
      "Enquanto sua irmã brilhava como um fenômeno da natureza, Lancelot era apenas… comum. Sem talento herdado, sem o dom que corria no sangue dos seus. Só esforço. Treinou até quebrar o próprio corpo — e então treinou um pouco mais. Insistiu quando todos já haviam seguido em frente.",
      "Porque Lancelot nunca teve o luxo de nascer forte. Ele precisou se tornar forte — golpe após golpe, queda após queda, cicatriz após cicatriz. Não para superar Agni, mas para provar, a si mesmo antes de qualquer outro, que também merecia carregar o nome que herdou.",
    ],
    ficha: [
      ["Classe", "Cavaleiro"],
      ["Arma", "Espada e Escudo"],
      ["Elemento", "Fogo"],
      ["Foco", "Defesa · Proteger os companheiros"],
    ],
    ages: [
      { img: "assets/herois/lancelot-recruta.png", era: "O Início", note: "A espada de madeira. Nenhum dom, apenas teimosia." },
      { img: "assets/herois/lancelot-escudeiro.png", era: "A Forja", note: "O aço e a disciplina. O corpo aprende o preço do esforço." },
      { img: "assets/herois/lancelot-espadachim.png", era: "O Espadachim", note: "A lâmina encontra seu propósito. A força começa a tomar forma." },
      { img: "assets/herois/lancelot-cavaleiro.png", era: "O Legado", note: "Forjado em batalha. O escudo rachado, a chama acesa." },
    ],
    align: "left",
  },
  {
    id: "agni",
    numeral: "II",
    name: "Agni",
    epithet: "A Guerreira Escarlate",
    lineage: "Filha de Aiden e Fiama · Irmã de Lancelot",
    rank: "Platina",
    artType: "plate",
    main: "assets/herois/agni-1.jpg",
    backdrop: "assets/herois/agni-2.jpg",
    quote: "Força é o único idioma que eles entendem.",
    body: [
      "Filha dos fundadores da Ordem da Chama Sagrada e irmã de Lancelot, Agni é lembrada como uma das aventureiras mais lendárias de seu tempo. A mais jovem cavaleira da história da Ordem, prodígio absoluto do fogo, portadora de feitos que ecoam por todo o continente.",
      "De derrotar exércitos inteiros a enfrentar dragões e generais demoníacos, sua presença em campo sempre significou uma só coisa: destruição. Um espírito livre, indomável e feroz, cujo poder e determinação moldam o rumo da própria história.",
      "Aos cinco anos já treinava como recruta. Aos dez, era temida. Aos quinze, a mais jovem cavaleira de que se tem registro. Dominando o fogo como ninguém, conquistou o Rank Platina e o título que ecoa pelo reino: A Guerreira Escarlate.",
      "Hoje atravessa o Reino dos Dragões em busca do Coração Dourado, enfrentando criaturas que fariam qualquer aventureiro recuar. Sua chama não é só poder — é esperança. E jamais deixará de arder.",
    ],
    ficha: [
      ["Classe", "Guerreira"],
      ["Arma", "Espada de duas mãos"],
      ["Elemento", "Fogo"],
      ["Foco", "Ataque brutal"],
    ],
    gallery: [
      { img: "assets/herois/agni-2.jpg", note: "A chama em movimento" },
      { img: "assets/herois/agni-3.jpg", note: "O peso da lâmina escarlate" },
    ],
    align: "right",
  },
  {
    id: "fiama",
    numeral: "III",
    name: "Fiama",
    epithet: "A Fênix Estrategista",
    lineage: "Esposa de Aiden · Mãe de Lancelot e Agni",
    rank: "Diamante",
    artType: "plate",
    main: "assets/herois/fiama-1.jpg",
    backdrop: "assets/herois/fiama-2.jpg",
    quote: "O amor de uma mãe também é estratégia: é guiar com sabedoria e preparar o futuro.",
    body: [
      "À frente da Ordem dos Cavaleiros da Chama Sagrada, Fiama é o cerne tático do Reino. Seus movimentos militares são pura maestria; suas reformas econômicas, vitais. Ela forja heróis e garante que o Reino não apenas resista — mas prospere.",
      "Esposa de Aiden, mãe de Lancelot e Agni, Fiama carrega a Ordem nas mãos e a linhagem no coração. Onde outros enxergam um tabuleiro, ela já enxerga dez jogadas adiante.",
      "Com sua sabedoria estratégica, mostra que o amor de mãe também é astúcia: é guiar com inteligência, antecipar a tempestade e preparar o futuro antes que ele chegue. Uma verdadeira estrategista do coração.",
    ],
    ficha: [
      ["Classe", "Paladina"],
      ["Arma", "Duas espadas curtas"],
      ["Elemento", "Fogo e Luz"],
      ["Foco", "Estrategista da equipe"],
    ],
    gallery: [
      { img: "assets/herois/fiama-2.jpg", note: "Lâminas gêmeas, mente única" },
      { img: "assets/herois/fiama-3.jpg", note: "A fênix em fúria" },
    ],
    align: "left",
  },
  {
    id: "aiden",
    numeral: "IV",
    name: "Aiden",
    epithet: "O Duque da Fortaleza Rubra",
    lineage: "Esposo de Fiama · Pai de Lancelot e Agni",
    rank: "Diamante",
    artType: "plate",
    main: "assets/herois/aiden-3.jpg",
    backdrop: "assets/herois/aiden-1.jpg",
    quote: "Guerreiros são forjados no fogo.",
    body: [
      "Aiden, o Duque da Fortaleza Rubra, é uma figura que desafia todas as convenções. Ele acredita que a verdadeira força nasce da forja mais intensa — e que a dor é a única mestra capaz de ensinar o valor da proteção. Sob essa filosofia inabalável, submeteu os próprios filhos a treinamentos que beiram o brutal.",
      "Órfão de guerra, Paladino da Luz e um Rank Diamante inquestionável, Aiden não promete a ausência do sofrimento — mas a capacidade de suportá-lo e triunfar. Sua vida é a prova de que apenas os mais resilientes resistem e florescem.",
      "Mas seriam seus métodos um sacrifício necessário para moldar heróis capazes de vencer demônios? Ou uma crueldade que deixa cicatrizes profundas na alma? Essa é a questão que ecoa pelos salões da Fortaleza Rubra — e que talvez nem o próprio Duque saiba responder.",
    ],
    ficha: [
      ["Classe", "Paladino"],
      ["Arma", "Espada e Escudo"],
      ["Elemento", "Fogo e Luz"],
      ["Foco", "Ataque e Defesa"],
    ],
    gallery: [
      { img: "assets/herois/aiden-1.jpg", note: "A chama que protege" },
      { img: "assets/herois/aiden-2.jpg", note: "Contra a escuridão" },
    ],
    align: "right",
  },
];

// ---------- Rank gem (small seal) ----------
function RankGem({ rank, size = 46 }) {
  return (
    <span className="rank-gem" data-rank={rank.toLowerCase()} style={{ width: size, height: size }}>
      <svg viewBox="0 0 48 48" width={size} height={size} aria-hidden="true">
        <path className="rank-gem-shape" d="M24 3 L42 13 L42 35 L24 45 L6 35 L6 13 Z" />
        <path className="rank-gem-facet" d="M24 3 L24 45 M6 13 L42 35 M42 13 L6 35" />
        <circle className="rank-gem-core" cx="24" cy="24" r="5" />
      </svg>
    </span>
  );
}

// ---------- Rank ladder ----------
function RankLadder({ rank }) {
  const idx = RANK_TIERS.indexOf(rank);
  return (
    <div className="rank-ladder" data-rank={rank.toLowerCase()}>
      <div className="rank-ladder-head">
        <span className="rank-ladder-label">Ranking de Aventureiro</span>
        <span className="rank-ladder-tier">{rank}</span>
      </div>
      <div className="rank-track">
        {RANK_TIERS.map((t, i) => (
          <div
            key={t}
            className={"rank-step" + (i <= idx ? " filled" : "") + (i === idx ? " current" : "")}
            data-tier={t.toLowerCase()}
          >
            <span className="rank-step-bar" />
            <span className="rank-step-name">{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Chapter hero ----------
function HeroesChapterHero({ intensity }) {
  return (
    <section className="hsec-hero">
      <div className="hsec-hero-bg" />
      <window.EmberCanvas intensity={intensity} />

      <div className="hsec-hero-figure" aria-hidden="true">
        <img src={"assets/herois/lancelot-toposite.png" + ASSET_V} alt="" />
      </div>

      <div className="hsec-hero-inner reveal">
        <div className="chapter-eyebrow">
          <span className="line" />
          <span className="eyebrow">Capítulo II · O Mundo</span>
          <span className="line" />
        </div>

        <h1 className="chapter-title">
          Heróis<br />
          <span className="em">e Lendas</span>
        </h1>

        <p className="chapter-lede">
          A linhagem que acendeu a <em>Chama Sagrada</em> e a geração que agora deve
          provar-se digna dela. Quatro nomes que o continente jamais esqueceu — forjados
          em treino, sangue e juramento.
        </p>

        <p className="chapter-sub">
          De um menino comum com uma espada de madeira à Guerreira Escarlate que faz
          exércitos recuarem: estas são as histórias por trás da Ordem dos Cavaleiros
          da Chama Sagrada.
        </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">Heróis e Lendas</span>
        </div>
      </div>

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

// ---------- Roster ----------
function HeroesRoster() {
  return (
    <section className="roster">
      <div className="atlas-rule" />
      <div className="roster-grid">
        {HEROES.map((h, i) => (
          <a key={h.id} href={"#" + h.id} className="roster-card reveal" style={{ transitionDelay: (i * 80) + "ms" }}>
            <div className="roster-thumb">
              <img src={h.main + ASSET_V} alt={h.name} style={h.artType === "figure" ? { objectFit: "contain" } : null} />
              <div className="roster-thumb-veil" />
              <span className="roster-numeral">{h.numeral}</span>
            </div>
            <div className="roster-meta">
              <h3 className="roster-name">{h.name}</h3>
              <p className="roster-epithet">{h.epithet}</p>
              <span className="roster-rank" data-rank={h.rank.toLowerCase()}>
                <RankGem rank={h.rank} size={16} /> {h.rank}
              </span>
            </div>
          </a>
        ))}
      </div>
      <div className="atlas-rule" />
    </section>
  );
}

// ---------- Hero art ----------
function HeroArt({ hero }) {
  if (hero.artType === "figure") {
    return (
      <div className="hero-figure">
        <div className="hero-figure-numeral" aria-hidden="true">{hero.numeral}</div>
        <div className="hero-figure-glow" data-rank={hero.rank.toLowerCase()} />
        <img className="hero-figure-img" src={hero.main + ASSET_V} alt={hero.name} />
        <div className="hero-figure-plinth" />
      </div>
    );
  }
  return (
    <figure className="hero-plate">
      <img src={hero.main + ASSET_V} alt={hero.name} />
      <div className="hero-plate-grad" />
      <div className="hero-plate-frame" />
      <div className="hero-plate-numeral" aria-hidden="true">{hero.numeral}</div>
    </figure>
  );
}

// ---------- Lancelot triptych ----------
function AgesTriptych({ ages }) {
  return (
    <div className="ages reveal">
      <div className="ages-head">
        <span className="rule" />
        <span className="ages-title">As Quatro Eras de Lancelot</span>
        <span className="rule" />
      </div>
      <div className="ages-grid">
        {ages.map((a, i) => (
          <figure key={i} className="age-card reveal" style={{ transitionDelay: (i * 110) + "ms" }}>
            <div className="age-figure">
              <div className="age-glow" />
              <img src={a.img + ASSET_V} alt={a.era} />
            </div>
            <figcaption>
              <span className="age-step">{String(i + 1).padStart(2, "0")}</span>
              <span className="age-era">{a.era}</span>
              <span className="age-note">{a.note}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  );
}

// ---------- Gallery (scene heroes) ----------
function HeroGallery({ gallery }) {
  return (
    <div className="hero-gallery reveal">
      {gallery.map((g, i) => (
        <figure key={i} className="hero-gallery-item reveal" style={{ transitionDelay: (i * 100) + "ms" }}>
          <img src={g.img + ASSET_V} alt={g.note} />
          <figcaption>{g.note}</figcaption>
        </figure>
      ))}
    </div>
  );
}

// ---------- Hero dossier ----------
function HeroDossier({ hero, index }) {
  const flipped = hero.align === "right";
  return (
    <section
      className={"hero-dossier" + (flipped ? " flipped" : "")}
      id={hero.id}
      data-rank={hero.rank.toLowerCase()}
    >
      {hero.backdrop && (
        <div className="hero-backdrop" style={{ backgroundImage: `url("${hero.backdrop + ASSET_V}")` }} aria-hidden="true" />
      )}
      <div className="hero-backdrop-veil" aria-hidden="true" />

      <div className="hero-dossier-grid">
        <div className="hero-art-col reveal">
          <HeroArt hero={hero} />
        </div>

        <div className="hero-text-col reveal">
          <div className="hero-tag">
            <span className="hero-tag-num">Herói · {hero.numeral}</span>
            <span className="rule" />
            <span className="hero-tag-of">{String(index + 1).padStart(2, "0")} / 04</span>
          </div>

          <div className="hero-nameplate">
            <div>
              <h2 className="hero-name">{hero.name}</h2>
              <p className="hero-epithet">{hero.epithet}</p>
              <p className="hero-lineage">{hero.lineage}</p>
            </div>
            <div className="hero-seal" data-rank={hero.rank.toLowerCase()}>
              <RankGem rank={hero.rank} size={52} />
              <span className="hero-seal-tier">{hero.rank}</span>
            </div>
          </div>

          {hero.quote && (
            <blockquote className="hero-quote">
              <span className="hero-quote-mark" aria-hidden="true">“</span>
              {hero.quote}
            </blockquote>
          )}

          <div className="hero-body">
            {hero.body.map((p, i) => <p key={i}>{p}</p>)}
          </div>

          <div className="ficha">
            <div className="ficha-head">
              <span className="ficha-mark" aria-hidden="true">✦</span>
              <span>Ficha de Aventureiro</span>
            </div>
            <dl className="ficha-list">
              {hero.ficha.map(([k, v]) => (
                <div key={k} className="ficha-row">
                  <dt>{k}</dt>
                  <dd>{v}</dd>
                </div>
              ))}
            </dl>
            <RankLadder rank={hero.rank} />
          </div>
        </div>
      </div>

      {hero.ages ? <AgesTriptych ages={hero.ages} /> : null}
      {hero.gallery ? <HeroGallery gallery={hero.gallery} /> : null}
    </section>
  );
}

// ---------- Outro ----------
function HeroesOutro() {
  return (
    <section className="chapter-outro">
      <div className="outro-rule" />
      <p className="outro-quote reveal">
        “Lendas não nascem prontas. São marteladas, uma cicatriz de cada vez, até que o
        nome que carregam deixe de ser herança — e passe a ser conquista.”
      </p>
      <div className="outro-attr reveal">
        <span className="line" />
        <span>Crônica da Chama Sagrada</span>
        <span className="line" />
      </div>

      <div className="outro-actions reveal">
        <a href="index.html#mundo" className="btn btn-ghost">
          <span className="arrow">←</span> Voltar ao Mundo
        </a>
        <a href="Livros.html" className="btn btn-primary">
          Ler a saga <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, {
  HEROES, HeroesChapterHero, HeroesRoster, HeroDossier, HeroesOutro,
});