// Sections for "IV. Organizações" — heraldic dossiers of the realm's great orders.

const ORGS = [
  {
    id: "chama-sagrada",
    numeral: "I",
    name: "Ordem dos Cavaleiros da Chama Sagrada",
    kind: "Ordem Militar",
    epithet: "Um bastião de proteção e justiça",
    emblem: "assets/orgs/chama-sagrada.png",
    accent: "oklch(0.62 0.19 32)",
    runes: "✦ HONRA · DEVER · CHAMA · HONRA · DEVER · CHAMA · HONRA · DEVER ·",
    align: "left",
    body: [
      "Fundada por Aiden e Fiama, a Ordem dos Cavaleiros da Chama Sagrada surgiu como um bastião de proteção e justiça, especialmente após a devastadora Grande Invasão. Mais do que uma organização militar, a Ordem é um legado vivo de honra, treinamento e combate, dedicada a defender a humanidade contra forças sobrenaturais e invasores.",
      "Ela prepara seus membros com treinamento excepcional, tornando-os mestres nas artes da espada e do combate estratégico. A hierarquia é rigorosa e baseada no mérito: desde recrutas até paladinos, cada membro percorre uma jornada de evolução pessoal e marcial, sob a liderança de estrategistas lendários.",
      "Reconhecida oficialmente pelo Rei, a Ordem atua de forma independente. Sua insígnia abre caminhos por todo o território, garantindo respeito e acesso privilegiado a áreas protegidas — um farol inabalável diante das trevas que ameaçam o Reino.",
    ],
    creed: {
      label: "Os Três Dogmas",
      text: "“Cada cavaleiro é guiado por três dogmas centrais, tão antigos quanto a própria Ordem, que iluminam seus caminhos em tempos de paz e de guerra.”",
    },
    traits: [
      ["Província", "Do fogo"],
      ["Liderança", "Aiden e Fiama"],
      ["Símbolo", "Honra · Dever"],
    ],
  },
  {
    id: "rosa-prateada",
    numeral: "II",
    name: "Aliança da Rosa Prateada",
    kind: "Companhia de Aventureiros",
    epithet: "O pragmatismo acima da glória",
    emblem: "assets/orgs/rosa-prateada.png",
    accent: "oklch(0.8 0.025 280)",
    runes: "❖ CAUTELA · PRESTÍGIO · CAUTELA · PRESTÍGIO · CAUTELA · PRESTÍGIO ·",
    align: "right",
    body: [
      "A Aliança da Rosa Prateada é um grupo de aventureiros de Rank Prata, liderado pela nobre imponente Rose Silverheart. Diferente de outros grupos que buscam glória enfrentando desafios impossíveis, a Rosa Prateada adota uma abordagem pragmática e cuidadosamente planejada, priorizando a segurança de seus membros acima de tudo.",
      "A Aliança mantém laços estreitos com alguns dos nobres mais influentes do reino, que valorizam sua eficiência e confiabilidade. Essas conexões garantem prestígio e respeito — mas também atraem críticas de quem os acusa de favorecer interesses elitistas e se distanciar do espírito altruísta de proteger os mais necessitados.",
      "Esse equilíbrio entre pragmatismo e ambição política torna a Aliança um grupo complexo e muitas vezes incompreendido. Eles são o reflexo das escolhas difíceis que moldam o destino do reino — navegando os intrincados caminhos da honra, do poder e da sobrevivência.",
    ],
    traits: [
      ["Província", "Do Fogo"],
      ["Liderança", "Rose Silverheart"],
      ["Símbolo", "Cautela · Influência"],
    ],
  },
  {
    id: "guilda",
    numeral: "III",
    name: "A Guilda dos Aventureiros",
    kind: "Instituição do Reino",
    epithet: "O coração da aventura e do progresso",
    emblem: "assets/orgs/guilda.png",
    accent: "oklch(0.8 0.13 85)",
    runes: "✦ CORAGEM · EQUIPE · OURO · CORAGEM · EQUIPE · OURO · CORAGEM ·",
    align: "left",
    body: [
      "A Guilda dos Aventureiros é o coração da segurança e do progresso no reino, servindo como ponto de encontro para os mais corajosos indivíduos que enfrentam missões mortais para proteger o povo e preservar a paz.",
      "Suas missões são classificadas em ranks — Bronze, Prata, Ouro, Platina e Diamante. Quanto mais alto o nível, maior o perigo e a recompensa. A Guilda incentiva a formação de grupos, elevando a taxa de sobrevivência e promovendo o trabalho em equipe. Além das recompensas, os aventureiros lucram com os espólios de inimigos derrotados.",
      "Financiada pelo Rei, a Guilda garante que cada aventureiro receba o que lhe é devido, abrindo uma vida de oportunidades: ascensão social e até terras para se aposentar como nobreza. Sua estrutura imponente, de cinco andares, serve também como estalagem — refúgio, alimentação e informação para todos os níveis.",
    ],
    creed: {
      label: "Cultura & Valores",
      text: "“Um ambiente vibrante e acolhedor, respeitado por suas regras que promovem igualdade e proteção aos aventureiros de todos os níveis.”",
    },
    traits: [
      ["Província", "Do Fogo"],
      ["Liderança", "Grannus"],
      ["Símbolo", "Evolução"],
    ],
  },
  {
    id: "catedral",
    numeral: "IV",
    name: "Catedral dos 7 Elementos",
    kind: "Instituição Religiosa",
    epithet: "Fé, poder e ambição em pedra",
    emblem: "assets/orgs/catedral.png",
    accent: "oklch(0.82 0.1 90)",
    runes: "✶ FÉ · DEVOÇÃO · CORÔA · FÉ · DEVOÇÃO · CORÔA · FÉ · DEVOÇÃO ·",
    align: "right",
    body: [
      "A Catedral dos 7 Elementos é uma obra monumental e extravagante, construída em homenagem aos sete deuses venerados no reino. Financiada pelos recursos da Coroa, ela reflete não apenas a devoção religiosa, mas também os excessos de um passado marcado por decisões impulsivas e gastos desmedidos.",
      "Erguida na Província da Água, a catedral é um símbolo de fé — mas também de ambição e manipulação política. Sua grandiosidade, com templos dedicados a cada deus, e as “doações” da Coroa ao clero revelam uma aliança que nem sempre serviu aos melhores interesses do povo.",
      "Em suas paredes, a Catedral guarda não apenas histórias de devoção, mas também segredos sobre os jogos de poder que moldaram o reino.",
    ],
    traits: [
      ["Província", "Da Água"],
      ["Liderança", "Katherine Ayla"],
      ["Símbolo", "Fé · Excesso"],
    ],
  },
  {
    id: "impuros",
    numeral: "V",
    name: "Os Impuros",
    kind: "Círculo de Assassinos",
    epithet: "Mestres das sombras e da morte",
    emblem: "assets/orgs/impuros.png",
    accent: "oklch(0.72 0.2 148)",
    runes: "☠ VENENO · SILÊNCIO · MORTE · VENENO · SILÊNCIO · MORTE · VENENO ·",
    align: "left",
    body: [
      "Os Impuros são uma organização secreta de assassinos, conhecida por sua habilidade letal e pelo uso de venenos em suas missões. Envoltos em mistério, seus membros operam nas sombras, eliminando alvos com precisão cirúrgica e deixando apenas o eco de suas ações como marca.",
      "Guiados por um código sombrio, não reconhecem lealdade ao reino ou às suas leis. São movidos apenas por contratos e interesses próprios, tornando-se uma ameaça silenciosa para todos que cruzam seu caminho.",
      "Seu símbolo encapsula essa essência: ao centro, uma gota verde brilhante simboliza veneno puro; ao redor, linhas afiadas evocam espinhos e caos iminente. Mais do que um emblema, é um aviso silencioso do destino que aguarda os marcados por seu veneno — pois poucos ousam enfrentá-los e sobreviver.",
    ],
    traits: [
      ["Província", "Desconhecido"],
      ["Liderança", "Desconhecido"],
      ["Símbolo", "Veneno"],
    ],
  },
  {
    id: "arqueiros",
    numeral: "VI",
    name: "A Ordem dos Arqueiros",
    kind: "Aliança Élfica",
    epithet: "Precisão, disciplina e união",
    emblem: "assets/orgs/arqueiros.png",
    accent: "oklch(0.78 0.05 200)",
    runes: "➹ FLORESTA · ARCO · HARMONIA · FLORESTA · ARCO · HARMONIA · FLORESTA ·",
    align: "right",
    body: [
      "A Ordem dos Arqueiros é um símbolo de precisão, disciplina e união, localizada no coração mágico da Floresta dos Elfos, na Província do Vento. Formada por elfos e humanos que partilham um profundo respeito pela arte do arco e flecha, é uma aliança que transcende fronteiras raciais em prol de um objetivo comum: proteger a floresta e seus habitantes.",
      "Seus membros são mestres do arco, treinados para atingir alvos com precisão mortal nas condições mais desafiadoras. Mas sua força vai além do combate: cada arqueiro carrega o juramento de preservar o equilíbrio natural da floresta. Para eles, o arco é símbolo de vigilância, conexão e honra.",
      "Sob as árvores ancestrais, os arqueiros aprendem a ouvir os sussurros da natureza e a canalizar essa harmonia em tiros que desafiam a lógica. São protetores, estrategistas e visionários — sua presença é a promessa de que a justiça será feita, silenciosa e certeira como uma flecha disparada no momento exato.",
    ],
    creed: {
      label: "O Convite da Floresta",
      text: "“Você estaria pronto para caminhar pelas trilhas da floresta e se tornar parte desta aliança lendária?”",
    },
    traits: [
      ["Província", "Do Vento"],
      ["Liderança", "Kaoro"],
      ["Símbolo", "Arco · Natureza"],
    ],
  },
  {
    id: "samurais",
    numeral: "VII",
    name: "O Clã dos Samurais",
    kind: "Clã Guerreiro",
    epithet: "Disciplina, honra e resistência",
    emblem: "assets/orgs/samurais.png",
    accent: "oklch(0.72 0.1 50)",
    runes: "風 KATANA · HONRA · TERRA · KATANA · HONRA · TERRA · KATANA · HONRA ·",
    align: "left",
    body: [
      "O Clã dos Samurais é uma lendária organização de guerreiros originária da Província da Terra, ao norte da capital, próxima à fronteira com o imponente Reino dos Dragões. Reconhecido pela disciplina inigualável e o domínio absoluto da katana, o clã era um bastião de proteção contra os temidos ataques de dragões que assolaram a região por gerações.",
      "Por séculos, líderes de linhagem nobre transmitiram valores como honra, coragem e lealdade. Seus membros treinavam incansavelmente, transformando a katana em uma extensão de seus corpos — tornando-se especialistas na defesa contra criaturas colossais.",
      "Mas sua história é marcada pela tragédia. Em um ataque devastador, liderado por um dragão de escamas verdes e poderes corrosivos, grande parte do clã foi dizimada. Hoje sua memória vive como símbolo de disciplina e resistência; embora muitos o considerem extinto, rumores persistem de sobreviventes em busca de redenção e vingança.",
    ],
    traits: [
      ["Província", "Da Terra"],
      ["Liderança", "Reyna Musashi"],
      ["Símbolo", "Disciplina . Lealdade"],
    ],
  },
  {
    id: "machado",
    numeral: "VIII",
    name: "O Clã do Machado",
    kind: "Clã Guerreiro",
    epithet: "O espírito resiliente das montanhas",
    emblem: "assets/orgs/machado.png",
    accent: "oklch(0.6 0.045 240)",
    runes: "⚔ MACHADO · TROVÃO · ROCHA · MACHADO · TROVÃO · ROCHA · MACHADO ·",
    align: "right",
    body: [
      "O Clã do Machado é uma das organizações mais respeitadas e temidas da Província do Trovão. Formado por guerreiros de elite, tem como missão proteger o Vale Cinzento e suas preciosas minas contra invasões e criaturas que ameaçam a prosperidade da região. Com força e disciplina, seus membros transformaram o uso do machado em uma arte letal.",
      "Cada guerreiro é treinado para dominar diferentes estilos de combate: alguns empunham machados gigantes com ambas as mãos, capazes de devastar qualquer inimigo em um único golpe; outros combinam machado de mão e escudo, equilibrando força e defesa. O legado do clã é carregado com orgulho e transmitido de geração em geração.",
      "Mais do que simples guerreiros, eles representam o espírito do Vale Cinzento: fortes como as rochas que os cercam e determinados como o trovão que ecoa por suas terras. Suas histórias de bravura são contadas em tavernas e praças, inspirando aventureiros por todo o continente.",
    ],
    creed: {
      label: "A Lâmina da Responsabilidade",
      text: "“Adentrar o Clã não é apenas aprender a lutar — é abraçar uma tradição e proteger uma comunidade. Você teria o que é preciso?”",
    },
    traits: [
      ["Província", "Do Trovão"],
      ["Liderança", "As Três Matriarcas"],
      ["Símbolo", "Força . Perseverança"],
    ],
  },
];

// ---------- Chapter hero ----------
function OrgsChapterHero({ 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 IV · O Mundo</span>
          <span className="line" />
        </div>

        <h1 className="chapter-title">
          As Grandes<br />
          <span className="em">Organizações</span>
        </h1>

        <p className="chapter-lede">
          Ordens, guildas, clãs e seitas que sustentam — e ameaçam — o frágil
          equilíbrio do Reino dos Humanos. De cavaleiros sagrados a <em>assassinos
          das sombras</em>, cada selo carrega um juramento, uma ambição e um preço.
        </p>

        <p className="chapter-sub">
          Oito brasões, oito destinos. Estas são as forças que protegem as fronteiras,
          movem a política e escrevem, em fogo e aço, a história de O Legado do Fogo.
        </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">Organizações</span>
        </div>
      </div>

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

// ---------- Index roster ----------
function OrgsIndex() {
  return (
    <section className="orgs-index" id="orgs-index">
      <div className="atlas-rule" />
      <div className="orgs-index-grid">
        {ORGS.map((o, i) => (
          <a
            key={o.id}
            href={"#" + o.id}
            className="orgs-index-card reveal"
            style={{ "--org-accent": o.accent, transitionDelay: (i * 60) + "ms" }}
          >
            <span className="orgs-index-seal">
              <img src={o.emblem} alt={o.name} />
            </span>
            <span className="orgs-index-meta">
              <span className="orgs-index-numeral">{o.numeral}</span>
              <span className="orgs-index-name">{o.name}</span>
              <span className="orgs-index-kind">{o.kind}</span>
            </span>
          </a>
        ))}
      </div>
      <div className="atlas-rule" />
    </section>
  );
}

// ---------- Org dossier ----------
function OrgSection({ org, index }) {
  const flipped = org.align === "right";
  return (
    <section
      className={"org-section" + (flipped ? " flipped" : "")}
      id={org.id}
      data-screen-label={"Org " + org.numeral}
      style={{ "--org-accent": org.accent }}
    >
      <div className="org-grid">
        <div className="org-text reveal">
          <div className="org-tag">
            <span className="org-num">Selo · {org.numeral}</span>
            <span className="rule" />
            <span className="org-of">{String(index + 1).padStart(2, "0")} / 08</span>
          </div>

          <span className="org-kind-badge">{org.kind}</span>

          <h2 className="org-name">{org.name}</h2>
          <p className="org-epithet">{org.epithet}</p>

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

          {org.creed && (
            <div className="org-creed">
              <div className="org-creed-label">{org.creed.label}</div>
              <p className="org-creed-text">{org.creed.text}</p>
            </div>
          )}

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

        <div className="org-art reveal">
          <div className="org-emblem-stage">
            <svg className="org-emblem-runes" viewBox="0 0 100 100" aria-hidden="true">
              <defs>
                <path id={"runePath-" + index} d="M 50,50 m -39,0 a 39,39 0 1,1 78,0 a 39,39 0 1,1 -78,0" />
              </defs>
              <text textLength="244" lengthAdjust="spacing">
                <textPath href={"#runePath-" + index} startOffset="0%">{org.runes}</textPath>
              </text>
            </svg>
            <div className="org-emblem-ring" aria-hidden="true" />
            <img className="org-emblem-img" src={org.emblem} alt={"Brasão — " + org.name} />
            <div className="org-emblem-plinth" aria-hidden="true" />
          </div>
          <div className="org-numeral-art" aria-hidden="true">{org.numeral}</div>
        </div>
      </div>
    </section>
  );
}

// ---------- Outro ----------
function OrgsOutro() {
  return (
    <section className="chapter-outro">
      <div className="outro-rule" />
      <p className="outro-quote reveal">
        “Um reino não é defendido por um só punho. É a soma dos juramentos — alguns de
        honra, outros de destruição — que decide quem permanece de pé quando a chama vacila.”
      </p>
      <div className="outro-attr reveal">
        <span className="line" />
        <span>Crônica dos Selos · Reino dos Humanos</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="Heróis e Lendas.html" className="btn btn-primary">
          Conheça os heróis <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

// ---------- Scroll to top button ----------
function OrgsScrollTop() {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 400);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollTop = () => {
    const el = document.getElementById("orgs-index");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    else window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return visible ? (
    <button
      className="orgs-scroll-top"
      onClick={scrollTop}
      aria-label="Voltar ao topo"
      title="Voltar ao topo"
    >
      ↑
    </button>
  ) : null;
}

Object.assign(window, { ORGS, OrgsChapterHero, OrgsIndex, OrgSection, OrgsOutro, OrgsScrollTop });
