// Sections for "III. Reino dos Humanos" — atlas of the realm.

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

        <h1 className="chapter-title">
          Reino dos<br />
          <span className="em">Humanos</span>
        </h1>

        <p className="chapter-lede">
          Erguido sobre alianças antigas e conquistas alcançadas com muita luta, o Reino
          permanece de pé graças à <em>união de suas províncias</em> e à força de seu povo —
          cercado por dragões, criaturas selvagens e demônios que testam seus limites.
        </p>

        <p className="chapter-sub">
          Cinco províncias moldadas pelo fogo, pela água, pelo trovão, pela terra e pelo
          vento, orbitando uma Capital Real isolada no centro. Um mosaico de histórias, culturas
          e destinos entrelaçados — onde toda jornada começa com uma escolha.
        </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">Reino dos Humanos</span>
        </div>
      </div>

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

// ---------- Realm intro prose ----------
function RealmIntro() {
  return (
    <section className="realm-intro">
      <div className="realm-intro-grid">
        <p className="realm-intro-lead reveal">
          Mais do que um território, o Reino dos Humanos é um <span className="em">mosaico
          de histórias</span>, culturas e destinos entrelaçados — um mundo vivo, em
          constante movimento.
        </p>
        <div className="realm-intro-body reveal">
          <p>
            Dividido em províncias com identidades próprias, o Reino abriga terras moldadas
            pelo fogo, pela água, pelo trovão, pela terra e pelo vento. Cada região desempenha um papel
            essencial: algumas sustentam a economia, outras defendem as fronteiras,
            enquanto outras preservam o conhecimento e a fé que mantêm o equilíbrio do mundo.
          </p>
          <p>
            No centro de tudo está a Capital Real, onde decisões que afetam todo o
            continente são tomadas. É ali que o poder político, militar e cultural se
            encontra, conectando as províncias e mantendo a estabilidade do Reino.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- Compass of the realm ----------
const NODE_POS = { c: [50, 50], n: [50, 14], l: [86, 50], s: [50, 86], no: [17, 33], no2: [35, 16] };
const DIR_TO_POS = { C: "c", N: "n", L: "l", S: "s", NO: "no", NO2: "no2" };

function RealmCompass() {
  const go = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
  };
  const center = NODE_POS.c;
  return (
    <section className="compass-wrap">
      <div className="compass-head reveal">
        <span className="eyebrow">Cartografia do Reino</span>
        <h2>Cinco províncias, <span className="em">uma coroa</span></h2>
        <p>
          A Capital Real repousa isolada no centro, cercada e protegida por suas cinco
          províncias. Ao sul arde o Fogo; a leste flui a Água; ao norte vigia a Terra;
          e a noroeste o Trovão troveja enquanto o Vento sopra. Toque um domínio para visitá-lo.
        </p>
      </div>

      <div className="compass reveal">
        <div className="compass-rings" />
        <div className="compass-cross"><span className="v" /><span className="h" /></div>

        <svg className="compass-links" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
          {window.REGIONS.filter((r) => r.cardinal.dir !== "C").map((r) => {
            const p = NODE_POS[DIR_TO_POS[r.cardinal.dir]];
            return <line key={r.id} x1={center[0]} y1={center[1]} x2={p[0]} y2={p[1]} />;
          })}
        </svg>

        <span className="compass-card n">N</span>
        <span className="compass-card l">L</span>
        <span className="compass-card s">S</span>
        <span className="compass-card o">O</span>
        <span className="compass-card ne">NE</span>
        <span className="compass-card no">NO</span>
        <span className="compass-card se">SE</span>
        <span className="compass-card so">SO</span>

        {window.REGIONS.map((r) => {
          const pos = DIR_TO_POS[r.cardinal.dir];
          const isCenter = r.cardinal.dir === "C";
          return (
            <div
              key={r.id}
              className={"realm-node pos-" + pos + (isCenter ? " center" : "") + (r.labelTop ? " label-top" : "")}
              data-region={r.id}
              onClick={() => go(r.id)}
              role="button"
              tabIndex={0}
              onKeyDown={(e) => { if (e.key === "Enter") go(r.id); }}
            >
              <span className={"disc" + (r.hero ? "" : " disc-wip")}>
                {r.hero
                  ? <img src={r.hero} alt={r.name} />
                  : <span className="disc-wip-label">Em breve</span>}
              </span>
              <span className="node-label">{r.name}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---------- Realm index roster ----------
function RealmIndex() {
  const go = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
  };
  return (
    <section className="realm-index">
      <div className="realm-index-grid">
        {window.REGIONS.map((r, i) => (
          <a
            key={r.id}
            href={"#" + r.id}
            className="realm-index-card reveal"
            data-region={r.id}
            style={{ transitionDelay: (i * 70) + "ms" }}
            onClick={(e) => { e.preventDefault(); go(r.id); }}
          >
            <div className="ric-top">
              <span className="ric-numeral">{r.numeral}</span>
              <span className="ric-dir">{r.cardinal.label}</span>
            </div>
            <span className="ric-name">{r.name}</span>
            <span className="ric-note">{r.cardinal.note}</span>
          </a>
        ))}
      </div>
    </section>
  );
}

// ---------- Location card ----------
function LocCard({ loc, delay }) {
  return (
    <article className="loc-card reveal" style={{ transitionDelay: delay + "ms" }}>
      <div className="loc-figure">
        {loc.tag && <span className="loc-tag">{loc.tag}</span>}
        <img src={loc.img} alt={loc.name} loading="lazy" />
      </div>
      <div className="loc-text">
        <h4 className="loc-name">{loc.name}</h4>
        <p className="loc-desc">{loc.desc}</p>
      </div>
    </article>
  );
}

// ---------- Block: gallery ----------
function GalleryBlock({ block }) {
  return (
    <>
      <div className="block-head reveal">
        <span className="bh-label">{block.label}</span>
        <span className="bh-rule" />
        <span className="bh-count">{String(block.items.length).padStart(2, "0")} locais</span>
      </div>
      {block.lead && <p className="block-lead reveal">{block.lead}</p>}
      <div className="loc-gallery">
        {block.items.map((loc, i) => <LocCard key={loc.name} loc={loc} delay={i * 70} />)}
      </div>
    </>
  );
}

// ---------- Block: feature (city / order) ----------
function FeatureBlock({ block, flip }) {
  return (
    <>
      <div className="block-head reveal">
        <span className="bh-label">{block.label}</span>
        <span className="bh-rule" />
      </div>
      <div className="feature">
        <div className={"feature-main reveal" + (flip ? "" : "")}>
          <div className="feature-figure">
            <img src={block.img} alt={block.name} loading="lazy" />
          </div>
          <div className="feature-body">
            {block.seal && (
              <div className="feature-seal"><img src={block.seal} alt={block.name + " — emblema"} /></div>
            )}
            <span className="feature-eyebrow">{block.label}</span>
            <h3 className="feature-name">{block.name}</h3>
            {block.motto && <p className="feature-motto">“{block.motto}”</p>}
            <p className="feature-lead">{block.lead}</p>
          </div>
        </div>

        {block.items && block.items.length > 0 && (
          <div className="feature-sub">
            {block.items.map((s) => (
              <div className="sub reveal" key={s.name}>
                <div className="sub-fig"><img src={s.img} alt={s.name} loading="lazy" /></div>
                <div className="sub-text">
                  <h5 className="sub-name"><span className="pin">◆</span>{s.name}{s.tag ? <span style={{ color: "var(--ink-3)", fontWeight: 400, fontSize: "12px" }}> · {s.tag}</span> : null}</h5>
                  <p className="sub-desc">{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </>
  );
}

// ---------- Region chapter ----------
function RegionChapter({ region, last }) {
  if (region.wip) {
    return (
      <section className="region region-wip" id={region.id} data-region={region.id} data-screen-label={"Região " + region.numeral}>
        <div className="region-hero region-hero-wip">
          <div className="region-hero-inner reveal">
            <div className="region-kicker">
              <span className="rk-numeral">Domínio · {region.numeral}</span>
              <span className="rk-line" />
              <span className="rk-cardinal">{region.cardinal.label}</span>
            </div>
            <h2 className="region-name">{region.name}</h2>
            <p className="region-epithet">“{region.epithet}”</p>
            <p className="region-cardinal-note">{region.cardinal.note}</p>
          </div>
        </div>

        <div className="wip-panel reveal">
          <span className="wip-badge">Em construção</span>
          <p className="wip-text">
            Esta província ainda está sendo forjada. Em breve, suas terras, cidades
            e segredos serão revelados aqui.
          </p>
        </div>

        {!last && <div className="region-divider" />}
      </section>
    );
  }

  const [primary, ...rest] = region.intro;
  let featureIdx = 0;
  return (
    <section className="region" id={region.id} data-region={region.id} data-screen-label={"Região " + region.numeral}>
      {/* hero */}
      <div className="region-hero">
        <div className="region-hero-img"><img src={region.hero} alt={region.name} /></div>
        <div className="region-hero-inner reveal">
          <div className="region-kicker">
            <span className="rk-numeral">Domínio · {region.numeral}</span>
            <span className="rk-line" />
            <span className="rk-cardinal">{region.cardinal.label}</span>
          </div>
          <h2 className="region-name">{region.name}</h2>
          <p className="region-epithet">“{region.epithet}”</p>
          <p className="region-cardinal-note">{region.cardinal.note}</p>
        </div>
      </div>

      {/* intro prose */}
      <div className="region-body">
        <p className="ledep reveal">{primary}</p>
        {rest.length > 0 && (
          <div className="realm-intro-body reveal" style={{ marginTop: 28, maxWidth: "62ch" }}>
            {rest.map((p, i) => <p key={i} style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.85, margin: "0 0 16px" }}>{p}</p>)}
          </div>
        )}
      </div>

      {/* blocks */}
      {region.blocks.map((block, i) => {
        if (block.kind === "gallery") return <GalleryBlock key={i} block={block} />;
        const flip = featureIdx % 2 === 1;
        featureIdx++;
        return <FeatureBlock key={i} block={block} flip={flip} />;
      })}

      {!last && <div className="region-divider" />}
    </section>
  );
}

// ---------- Outro ----------
function ReinoOutro() {
  return (
    <section className="chapter-outro">
      <div className="outro-rule" />
      <p className="outro-quote reveal">
        “Cinco elementos, uma só coroa. O Reino dos Humanos não se sustenta pela força de
        uma província — mas pelo frágil equilíbrio entre todas elas.”
      </p>
      <div className="outro-attr reveal">
        <span className="line" />
        <span>Crônica do Reino · O Grande Continente</span>
        <span className="line" />
      </div>

      <div className="outro-actions reveal">
        <a href="O_Grande_Continente.html" className="btn btn-ghost">
          <span className="arrow">←</span> O Grande Continente
        </a>
        <a href="Organizações.html" className="btn btn-primary">
          As Organizações <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, {
  ReinoChapterHero, RealmIntro, RealmCompass, RealmIndex, RegionChapter, ReinoOutro,
});