// Sections specific to "O Grande Continente" page

const REALMS = [
  {
    id: "humanos",
    numeral: "I",
    name: "Reino dos Humanos",
    epithet: "Da Chama Sagrada e da Coragem Comum",
    sigil: "crown",
    align: "left",
    image: "assets/reino-humanos.png",
    placeholder: "Capital Real · Reino dos Humanos",
    body: [
      "O Reino dos Humanos é uma terra de vastos contrastes, onde cidades prósperas convivem com aldeias humildes, e campos férteis são protegidos por muralhas imponentes. Governado por uma monarquia que valoriza ordem e progresso, o reino é um pilar de resistência contra as forças externas que ameaçam sua paz.",
      "A capital, com seu imponente castelo e ruas de pedra, é o centro político e econômico, enquanto as regiões periféricas enfrentam desafios constantes — desde invasões até desastres naturais. Apesar disso, o povo humano é conhecido por sua resiliência e criatividade, confiando na proteção da Ordem dos Cavaleiros da Chama Sagrada e na coragem dos aventureiros da Guilda.",
      "O Reino dos Humanos é um símbolo de esperança, onde cada morador luta para construir um futuro melhor enquanto enfrenta os desafios de um mundo mágico e perigoso.",
    ],
    traits: [
      ["Capital", "Cidadela Real"],
      ["Ordem", "Cavaleiros da Chama"],
      ["Símbolo", "Coragem · Resiliência"],
    ],
  },
  {
    id: "demonios",
    numeral: "II",
    name: "Reino dos Demônios",
    epithet: "Onde o Caos é Lei e o Ar Pulsa em Sombra",
    sigil: "horns",
    align: "right",
    image: "assets/reino-demonios.png",
    placeholder: "Vales Áridos · Reino dos Demônios",
    body: [
      "O Reino dos Demônios é uma terra sombria e desolada, onde o caos e a ambição moldam cada aspecto de sua existência. Cercado por penhascos íngremes e vales áridos, esse território é um lugar onde até o ar parece pulsar com uma energia maléfica. Os demônios lutam incessantemente por poder, utilizando magia proibida em sua busca por supremacia.",
      "Poucos aventureiros ousaram se aventurar por essas terras amaldiçoadas — e ainda menos retornaram para contar suas histórias.",
      "Os demônios são a maior ameaça ao Grande Continente, liderando invasões brutais que colocam os outros reinos em constante alerta. Alimentados pela ambição e pelo desejo de conquistar, eles trazem destruição por onde passam, tornando seu reino um símbolo de medo e desafio para todos que habitam as terras ao redor.",
    ],
    traits: [
      ["Terreno", "Penhascos · Vales áridos"],
      ["Magia", "Proibida · Sombria"],
      ["Símbolo", "Caos · Ambição"],
    ],
  },
  {
    id: "dragoes",
    numeral: "III",
    name: "Reino dos Dragões",
    epithet: "Tronos de Pedra, Tesouros de Fogo",
    sigil: "scale",
    align: "left",
    image: "assets/reino-dragoes.png",
    placeholder: "Montanhas Ancestrais · Reino dos Dragões",
    body: [
      "O Reino dos Dragões é uma terra de montanhas majestosas e vales envoltos em mistério. Aqui, os dragões governam com sabedoria e força, protegendo as tradições ancestrais e os segredos de sua magia única. Conhecidos por sua grandiosidade e imponência, os dragões também carregam um profundo interesse por riquezas e poder.",
      "O ouro é mais do que um símbolo de prestígio para eles — é uma conexão com sua essência mágica, acumulado em vastos tesouros escondidos em cavernas e fortalezas. Ambiciosos e vigilantes, os dragões equilibram sua busca por domínio com a proteção de seu território e de suas tradições.",
      "O centro do reino é um lugar de grande poder, onde o equilíbrio entre destruição e criação define o destino de todos que se aproximam.",
    ],
    traits: [
      ["Terreno", "Cordilheiras · Cavernas"],
      ["Magia", "Ancestral · Elemental"],
      ["Símbolo", "Sabedoria · Poder"],
    ],
  },
  {
    id: "floresta",
    numeral: "IV",
    name: "Floresta Negra",
    epithet: "Onde a Magia Sussurra entre as Raízes",
    sigil: "leaf",
    align: "left",
    image: "assets/floresta-negra.png",
    placeholder: "Coração da Mata · Floresta Negra",
    body: [
      "A Floresta Negra é um lugar de mistério absoluto, onde árvores ancestrais se erguem como sentinelas e a luz se filtra em fios de âmbar entre folhas que nunca caem. Cogumelos luminescentes pulsam em tons de água e esmeralda, marcando trilhas que mudam de lugar conforme a vontade da floresta.",
      "Aqui sobreviveram as ruínas de uma civilização esquecida, devoradas pelas raízes e cobertas de musgo. Druidas, criaturas féericas e magões errantes buscam esses lugares em peregrinação, em busca de conhecimentos que os reinos guerreiros já não lembram.",
      "Aventureiros falam da Floresta Negra com voz baixa: dizem que ela observa, que escolhe quem segue adiante e quem volta. Quem se perde por seus caminhos pode encontrar respostas — ou nunca mais ser visto.",
    ],
    traits: [
      ["Terreno", "Mata densa · Ruínas"],
      ["Magia", "Natural · Féerica"],
      ["Símbolo", "Mistério · Sabedoria"],
    ],
  },
  {
    id: "devastadas",
    numeral: "V",
    name: "Terras Devastadas",
    epithet: "Cicatrizes que o Tempo Não Apaga",
    sigil: "shatter",
    align: "right",
    image: "assets/terras-devastadas.png",
    placeholder: "Solo Rachado · Terras Devastadas",
    body: [
      "As Terras Devastadas são um lugar onde o tempo e o conflito deixaram cicatrizes profundas. Localizadas entre as grandes províncias do reino, essas terras áridas são marcadas por solo rachado, montanhas desgastadas e ruínas esquecidas de antigas civilizações. Outrora uma região próspera, tornaram-se o cenário de batalhas épicas, hoje lembradas apenas em lendas.",
      "Cercadas por mistérios e perigos, as Terras Devastadas são conhecidas por abrigar criaturas sombrias e forças ocultas. Apenas os mais corajosos aventureiros se atrevem a cruzar esses domínios, em busca de glória ou respostas para segredos enterrados no passado. Dizem que aqueles que sobrevivem a esse lugar retornam transformados, carregando o peso de suas experiências e das revelações que ali encontraram.",
      "As Terras Devastadas permanecem como um símbolo de decadência e persistência — um lembrete sombrio do preço da ambição e do poder.",
    ],
    traits: [
      ["Terreno", "Ruínas · Solo rachado"],
      ["Habitantes", "Criaturas sombrias"],
      ["Símbolo", "Decadência · Persistência"],
    ],
  },
];

// ---------- Sigils (geometric heraldic marks) ----------
function Sigil({ kind, size = 56 }) {
  const stroke = "currentColor";
  const sw = 1.1;
  const inner = {
    crown: (
      <g fill="none" stroke={stroke} strokeWidth={sw} strokeLinejoin="round">
        <path d="M14 30 L18 16 L24 24 L32 12 L40 24 L46 16 L50 30 Z" />
        <path d="M14 34 L50 34" />
        <circle cx="24" cy="22" r="1.4" fill={stroke} stroke="none" />
        <circle cx="32" cy="14" r="1.6" fill={stroke} stroke="none" />
        <circle cx="40" cy="22" r="1.4" fill={stroke} stroke="none" />
      </g>
    ),
    horns: (
      <g fill="none" stroke={stroke} strokeWidth={sw} strokeLinejoin="round">
        <path d="M14 14 Q22 22 26 32 Q22 26 16 24 Q12 22 14 14 Z" />
        <path d="M50 14 Q42 22 38 32 Q42 26 48 24 Q52 22 50 14 Z" />
        <path d="M22 36 L32 44 L42 36" />
        <circle cx="32" cy="32" r="2" fill={stroke} stroke="none" />
      </g>
    ),
    scale: (
      <g fill="none" stroke={stroke} strokeWidth={sw} strokeLinejoin="round">
        <path d="M32 10 Q44 18 44 32 Q44 46 32 54 Q20 46 20 32 Q20 18 32 10 Z" />
        <path d="M26 22 Q32 26 38 22" />
        <path d="M24 30 Q32 36 40 30" />
        <path d="M26 38 Q32 42 38 38" />
        <circle cx="32" cy="16" r="1.4" fill={stroke} stroke="none" />
      </g>
    ),
    shatter: (
      <g fill="none" stroke={stroke} strokeWidth={sw} strokeLinejoin="round">
        <circle cx="32" cy="32" r="20" />
        <path d="M18 18 L32 32 L46 16" />
        <path d="M32 32 L24 50" />
        <path d="M32 32 L46 46" />
        <path d="M14 36 L20 32" />
      </g>
    ),
    leaf: (
      <g fill="none" stroke={stroke} strokeWidth={sw} strokeLinejoin="round">
        <path d="M32 10 Q48 22 44 40 Q40 52 32 54 Q24 52 20 40 Q16 22 32 10 Z" />
        <path d="M32 14 L32 52" />
        <path d="M32 22 L40 26" />
        <path d="M32 30 L42 34" />
        <path d="M32 38 L40 42" />
        <path d="M32 22 L24 26" />
        <path d="M32 30 L22 34" />
        <path d="M32 38 L24 42" />
      </g>
    ),
  }[kind];

  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true">
      <circle cx="32" cy="32" r="29" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
      {inner}
    </svg>
  );
}

// ---------- Reveal (reused from main app via window.useReveal) ----------

// ---------- Page Hero ----------
function ChapterHero({ 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 I · O Mundo</span>
          <span className="line" />
        </div>

        <h1 className="chapter-title">
          O Grande<br />
          <span className="em">Continente</span>
        </h1>

        <p className="chapter-lede">
          Uma terra vasta e diversificada, dividida entre reinos que representam o equilíbrio entre força, magia e mistério. Cada região tem sua própria identidade — os humanos com suas cidades prósperas, os dragões com seu poder ancestral, e os demônios com suas terras sombrias. Além disso, a <em>Floresta Negra</em> guarda segredos ancestrais e as <em>Terras Devastadas</em> marcam um local de lendas e perigos desconhecidos.
        </p>

        <p className="chapter-sub">
          Este continente é o palco de histórias épicas, onde batalhas são travadas, alianças são formadas e heróis emergem para moldar o destino de todos. Um lugar repleto de segredos, desafios e aventuras esperando para serem descobertos.
        </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">O Grande Continente</span>
        </div>
      </div>

      <div className="scroll-hint">
        <span>Adentre o continente</span>
        <span className="line" />
      </div>
    </section>
  );
}

// ---------- Realms Index (atlas) ----------
function RealmsIndex() {
  return (
    <section className="atlas">
      <div className="atlas-rule" />
      <div className="atlas-grid">
        {REALMS.map((r, i) => (
          <a key={r.id} href={"#" + r.id} className="atlas-card reveal" style={{ transitionDelay: (i * 80) + "ms" }}>
            <div className="atlas-numeral">{r.numeral}</div>
            <div className="atlas-sigil"><Sigil kind={r.sigil} size={42} /></div>
            <div className="atlas-name">{r.name}</div>
          </a>
        ))}
      </div>
      <div className="atlas-rule" />
    </section>
  );
}

// ---------- Map ----------
function MapStage() {
  return (
    <section className="map-stage" id="mapa">
      <div className="section-tag reveal">
        <span className="num">Atlas</span>
        <span className="label">Cartografia Oficial</span>
        <span className="rule" />
      </div>

      <h2 className="section-title reveal">
        Cinco <span className="em">domínios</span>, um continente
      </h2>

      <figure className="map-frame reveal">
        <img src="assets/mapa-continente.jpg" alt="Mapa do Grande Continente" />
        <div className="map-vignette" />
        <div className="map-corners" aria-hidden="true">
          <span className="c tl">N</span>
          <span className="c tr">L</span>
          <span className="c bl">O</span>
          <span className="c br">S</span>
        </div>
        <figcaption>
          <span>Mapa do Grande Continente</span>
          <span className="dot">·</span>
          <span>Forjado em pergaminho e cinza</span>
        </figcaption>
      </figure>
    </section>
  );
}

// ---------- Realm Section ----------
function RealmImage({ src, placeholder }) {
  const [failed, setFailed] = React.useState(false);
  return (
    <div className="realm-image">
      {!failed && (
        <img src={src} alt={placeholder} onError={() => setFailed(true)} />
      )}
      {failed && (
        <div className="realm-image-placeholder">
          <div className="ph-pattern" />
          <div className="ph-frame" />
          <div className="ph-content">
            <span className="ph-mark">⌬</span>
            <span className="ph-label">{placeholder}</span>
            <span className="ph-note">Imagem em produção</span>
          </div>
        </div>
      )}
      <div className="realm-image-frame" />
    </div>
  );
}

function RealmSection({ realm, index }) {
  const flipped = realm.align === "right";
  return (
    <section
      className={"realm-section" + (flipped ? " flipped" : "")}
      id={realm.id}
      data-realm={realm.id}
    >
      <div className="realm-grid">
        <div className="realm-text reveal">
          <div className="realm-tag">
            <span className="realm-num">Reino · {realm.numeral}</span>
            <span className="rule" />
            <span className="realm-of">{String(index + 1).padStart(2, "0")} / 05</span>
          </div>

          <div className="realm-headline">
            <div className="realm-sigil-wrap">
              <Sigil kind={realm.sigil} size={64} />
            </div>
            <div>
              <h2 className="realm-name">{realm.name}</h2>
              <p className="realm-epithet">{realm.epithet}</p>
            </div>
          </div>

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

          <dl className="realm-traits">
            {realm.traits.map(([k, v]) => (
              <div key={k} className="trait">
                <dt>{k}</dt>
                <dd>{v}</dd>
              </div>
            ))}
          </dl>
        </div>

        <div className="realm-art reveal">
          <RealmImage src={realm.image} placeholder={realm.placeholder} />
          <div className="realm-numeral-art" aria-hidden="true">{realm.numeral}</div>
        </div>
      </div>
    </section>
  );
}

// ---------- Outro / closing ----------
function ChapterOutro() {
  return (
    <section className="chapter-outro">
      <div className="outro-rule" />
      <p className="outro-quote reveal">
        “O continente é maior que qualquer reino, mais antigo que qualquer rei, e guarda segredos que nem mesmo os dragões ousam recordar.”
      </p>
      <div className="outro-attr reveal">
        <span className="line" />
        <span>Crônica dos Cinco Selos · Prólogo</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="index.html#livros" className="btn btn-primary">
          Ler o livro <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { ChapterHero, RealmsIndex, MapStage, RealmSection, ChapterOutro, REALMS });