// All sections for O Legado do Fogo
const { useState, useEffect, useRef } = React;

// ---------- Reveal-on-scroll hook ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

// ---------- Logo (official mark) ----------
function Crest({ size = 36, glow = false }) {
  return (
    <img
      src="assets/logo.png"
      alt="O Legado do Fogo"
      width={size}
      height={size}
      style={{
        width: size, height: size,
        objectFit: "contain",
        filter: glow
          ? "drop-shadow(0 0 24px oklch(0.7 0.18 45 / 0.6)) drop-shadow(0 0 60px oklch(0.7 0.18 45 / 0.35))"
          : "drop-shadow(0 0 8px oklch(0.7 0.18 45 / 0.35))",
      }}
    />
  );
}

// ---------- Nav ----------
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="index.html#hero" className="nav-logo">
        <span className="crest"><Crest size={18} /></span>
        <span>O Legado do Fogo</span>
      </a>
      <div className="nav-links">
        <div className="has-dropdown" style={{ position: "relative" }}>
          <span className="nav-link has-menu">O Mundo</span>
          <div className="dropdown">
            <a href="O_Grande_Continente.html"><span className="num">I.</span>O Grande Continente</a>
            <a href="index.html#personagens"><span className="num">II.</span>Heróis e Lendas</a>
            <a href="index.html#mundo"><span className="num">III.</span>Reino dos Humanos</a>
            <a href="index.html#mundo"><span className="num">IV.</span>Organizações</a>
            <a href="index.html#mundo"><span className="num">V.</span>Classes</a>
            <a href="Bestiario.html"><span className="num">VI.</span>Bestiário</a>
          </div>
        </div>
        <a href="Livros.html" className="nav-link">Livros</a>
        <a href="Chamado.html" className="nav-link">Chamado</a>
      </div>
      <a href="Livros.html" className="nav-cta">Adquira já</a>
    </nav>
  );
}

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

      <div className="hero-content reveal">
        <div className="hero-eyebrow">
          <span className="line" />
          <span className="eyebrow">Livro I · A Saga do Cavaleiro</span>
        </div>
        <h1>
          O Legado<br />
          <span className="em">do Fogo</span>
        </h1>
        <p className="hero-tagline">
          Acompanhe Lancelot em sua jornada heroica por reinos forjados em chamas, sombras e juramentos antigos.
        </p>
        <p className="hero-sub">
          O destino do mundo está em chamas. Uma fantasia épica de coragem, identidade e a batalha interna de um jovem para encontrar seu lugar.
        </p>
        <div className="hero-actions">
          <a href="Livros.html" className="btn btn-primary">
            Adquira já <span className="arrow">→</span>
          </a>
          <a href="#mundo" className="btn btn-ghost">Explorar o mundo</a>
          <div className="meta">
            <span className="label">Volumes</span>
            <span className="value">04 disponíveis</span>
          </div>
        </div>
      </div>

      <div className="hero-side" aria-hidden="true">
        <div className="crest-large">
          <div className="runes">✦ · ✦ · ✦ · ✦ · ✦ · ✦ · ✦ · ✦ ·</div>
          <div className="core">
            <Crest size={220} glow={true} />
          </div>
        </div>
      </div>

      <div className="scroll-hint">
        <span>Desça à forja</span>
        <span className="line" />
      </div>
    </section>
  );
}

// ---------- Epigraph ----------
function Epigraph() {
  return (
    <div className="epigraph">
      <p>
        A verdadeira força <span className="em">vai muito além</span> de uma espada ou um escudo.
      </p>
      <div className="seal" />
    </div>
  );
}

// ---------- Synopsis ----------
function Synopsis() {
  return (
    <section className="section section-deep" id="sinopse">
      <div className="section-tag reveal">
        <span className="num">01 / 06</span>
        <span className="label">A Saga</span>
        <span className="rule" />
      </div>
      <h2 className="section-title reveal">
        Uma jornada de <span className="em">fogo e honra</span>
      </h2>

      <div className="synopsis" style={{ marginTop: 80 }}>
        <div className="synopsis-quote reveal">
          <p>
            Quando a sombra da destruição ameaça o Reino dos Humanos, Lancelot deve superar seus próprios medos para se tornar um herói.
          </p>
          <span className="attribution">— Prólogo, Livro I</span>
        </div>
        <div className="synopsis-body reveal">
          <p>
            Entre em um mundo onde três grandes reinos — <strong>Humanos, Dragões e Demônios</strong> — vivem em constante equilíbrio e perigo. Acompanhe a jornada de <strong>Lancelot</strong>, um jovem aspirante a cavaleiro que carrega o peso de um legado lendário: provar-se digno da Ordem dos Cavaleiros da Chama Sagrada, fundada por sua própria família.
          </p>
          <p>
            Desafios imensuráveis o aguardam: do treinamento exaustivo aos confrontos épicos contra criaturas colossais e forças sombrias. Em sua luta para proteger o Reino dos Humanos, Lancelot enfrenta o fardo de viver à sombra de sua irmã prodigiosa, <strong>Agni</strong>, enquanto descobre que a verdadeira força vai muito além de uma espada ou um escudo.
          </p>
          <p>
            Mais do que uma fantasia medieval, esta é uma história de <strong>coragem, identidade</strong> e da batalha interna de um jovem para encontrar seu lugar em um mundo ameaçado.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- Books ----------
const BOOKS = [
  {
    vol: "Livro I",
    name: "O Legado do Fogo",
    desc: "Onde a chama é acesa. Lancelot inicia sua jornada e descobre que a Ordem da Chama Sagrada exige mais do que coragem.",
    href: "https://www.amazon.com.br/Legado-Fogo-Livro-Gustavo-Machado-ebook/dp/B0F1H1RVYW",
    featured: true,
    tag: "Romance Principal",
    price: "R$ 47,05",
    cover: "assets/cover-1.jpg",
  },
  {
    vol: "Livro II",
    name: "O Véu da Escuridão",
    desc: "Sombras antigas se erguem. O equilíbrio entre os três reinos começa a se desfazer.",
    href: "https://www.amazon.com.br/Legado-Fogo-Livro-V%C3%A9u-Escurid%C3%A3o-ebook/dp/B0F9VKWVY3",
    tag: "Continuação",
    price: "R$ 29,99",
    cover: "assets/cover-2.jpg",
  },
  {
    vol: "Saga",
    name: "Jhon na Academia de Magia",
    desc: "Uma história paralela. Os corredores da Academia escondem mais do que feitiços.",
    href: "https://a.co/d/2tXt5Kj",
    tag: "Saga Paralela",
    price: "R$ 19,99",
    cover: "assets/cover-3.jpg",
  },
  {
    vol: "Companion",
    name: "Diário de Lancelot",
    desc: "Páginas íntimas do cavaleiro. Reflexões, mapas, criaturas e segredos não revelados nos romances.",
    href: "https://a.co/d/cbOxhmR",
    tag: "Material de Mundo",
    price: "R$ 19,99",
    cover: "assets/cover-4.jpg",
  },
];

function BookCover({ book }) {
  return (
    <div className="book-cover">
      {book.cover ? (
        <img src={book.cover} alt={`Capa — ${book.name}`} className="book-cover-img" />
      ) : (
        <div className="book-cover-art">
          <span className="vol">{book.vol}</span>
          <div className="crest-mini"><Crest size={36} /></div>
          <span className="title">{book.name}</span>
          <span className="ornament" />
          <span className="author">Gustavo Machado</span>
        </div>
      )}
      <span className="book-cover-shine" aria-hidden="true" />
    </div>
  );
}

function Books() {
  return (
    <section className="section" id="livros">
      <div className="section-tag reveal">
        <span className="num">02 / 06</span>
        <span className="label">A Biblioteca</span>
        <span className="rule" />
      </div>
      <h2 className="section-title reveal">
        Quatro tomos, uma <span className="em">mesma chama</span>
      </h2>
      <p className="section-lede reveal">
        Romances principais, sagas paralelas e materiais de mundo — todos disponíveis nas melhores livrarias e na Amazon.
      </p>

      <div className="books-grid">
        {BOOKS.map((book, i) => (
          <div key={book.name}
             className={"book-card reveal" + (book.featured ? " featured" : "")}
             style={{ transitionDelay: (i * 80) + "ms", cursor: "pointer" }}
             onClick={() => window.location.href = "Livros.html"}>
            <BookCover book={book} />
            <div className="book-meta">
              <span>{book.vol}</span>
              <span>{book.tag}</span>
            </div>
            <h3 className="book-title">{book.name}</h3>
            <p className="book-desc">{book.desc}</p>
            {book.price && (
              <div className="book-price">
                <span className="book-price-label">eBook</span>
                <span className="book-price-value">{book.price}</span>
              </div>
            )}
            <a className="book-link" href={book.href} target="_blank" rel="noreferrer"
               onClick={(e) => e.stopPropagation()}>
              Comprar na Amazon
              <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- Characters ----------
const CHARS = [
  { num: "I.", name: "Lancelot", title: "O Aspirante", desc: "Forjado pelo treinamento árduo e pela vontade de proteger o legado de sua família.", img: "assets/char-lancelot.png" },
  { num: "II.", name: "Agni", title: "A Guerreira Escarlate", desc: "A irmã destemida, cujas façanhas inspiram bardos e guerreiros por todo o reino.", img: "assets/char-agni.png" },
  { num: "III.", name: "Aiden", title: "Fundador · Chama Sagrada", desc: "Herói lendário que lutou para garantir a paz no Reino dos Humanos.", img: "assets/char-aiden.jpg" },
  { num: "IV.", name: "Fiama", title: "Fundadora · Chama Sagrada", desc: "Guardiã da chama que deu nome à Ordem. Mestra de Aiden e mãe da linhagem.", img: "assets/char-fiama.jpg" },
];

function Characters() {
  return (
    <section className="section section-surface" id="personagens">
      <div className="section-tag reveal">
        <span className="num">03 / 06</span>
        <span className="label">Heróis e Lendas</span>
        <span className="rule" />
      </div>
      <h2 className="section-title reveal">
        Quem carrega <span className="em">a chama</span>
      </h2>
      <p className="section-lede reveal">
        A linhagem que fundou a Ordem dos Cavaleiros da Chama Sagrada — e a geração que agora deve provar-se digna dela.
      </p>

      <div className="characters">
        {CHARS.map((c, i) => (
          <div key={c.name} className="character reveal" style={{ transitionDelay: (i * 80) + "ms" }}>
            <div className="character-img">
              {c.img ? (
                <img src={c.img} alt={`Retrato — ${c.name}`} className="character-portrait" />
              ) : (
                <div className="character-placeholder">
                  <div className="silhouette" />
                  <span className="label">[ retrato · {c.name.toLowerCase()} ]</span>
                </div>
              )}
              <div className="character-overlay" />
              <div className="character-info">
                <div className="character-num">{c.num}</div>
                <h3 className="character-name">{c.name}</h3>
                <div className="character-title">{c.title}</div>
                <p className="character-desc">{c.desc}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- World ----------
function World() {
  return (
    <section className="section world-section" id="mundo">
      <div className="section-tag reveal">
        <span className="num">04 / 06</span>
        <span className="label">O Grande Continente</span>
        <span className="rule" />
      </div>

      <div className="world-grid">
        <div>
          <h2 className="section-title reveal">
            Um mundo <span className="em">vibrante</span> e perigoso
          </h2>
          <p className="section-lede reveal">
            Quatro reinos partilham um continente em frágil equilíbrio. Da Floresta Negra às Terras Devastadas, cada local esconde histórias, perigos e oportunidades para os corajosos.
          </p>

          <div className="realms">
            <div className="realm reveal">
              <div className="symbol">⌬</div>
              <h4>Humanos</h4>
              <p>Reinos sob o juramento da Chama Sagrada.</p>
            </div>
            <div className="realm reveal" style={{ transitionDelay: "100ms" }}>
              <div className="symbol">△</div>
              <h4>Dragões</h4>
              <p>Antigos guardiões das eras esquecidas.</p>
            </div>
            <div className="realm reveal" style={{ transitionDelay: "200ms" }}>
              <div className="symbol">✶</div>
              <h4>Demônios</h4>
              <p>Forças sombrias que ameaçam o equilíbrio.</p>
            </div>
          </div>

          <div style={{ marginTop: 48 }} className="reveal">
            <a href="O_Grande_Continente.html" className="btn btn-ghost">
              Explorar o continente <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <figure className="world-map reveal">
          <img src="assets/mapa-continente.jpg" alt="Mapa do Grande Continente — O Legado do Fogo" className="world-map-img" />
          <div className="world-map-frame" />
          <figcaption className="world-map-caption">
            <span className="cardinal">N</span>
            <span className="legend">Mapa Oficial · O Grande Continente</span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

// ---------- Bestiary ----------
const BEASTS = [
  { rank: "Rank S", name: "Drake Ígneo", cls: "Dragão Menor",
    icon: "M12 2 L4 12 L8 12 L6 22 L20 10 L14 10 L18 2 Z" }, // flame/lightning
  { rank: "Rank A", name: "Lobo das Brumas", cls: "Besta Ancestral",
    icon: "M3 12 Q6 4 12 5 Q18 4 21 12 Q18 18 12 18 Q6 18 3 12 Z M9 11 a1 1 0 0 1 0 -2 a1 1 0 0 1 0 2 M15 11 a1 1 0 0 1 0 -2 a1 1 0 0 1 0 2" },
  { rank: "Rank A", name: "Cavaleiro Sombrio", cls: "Humanóide · Demônio",
    icon: "M12 2 L8 6 L8 14 L6 22 L18 22 L16 14 L16 6 Z" },
  { rank: "Rank B", name: "Salamandra Ardente", cls: "Réptil Mágico",
    icon: "M2 14 Q6 10 10 14 Q14 10 18 14 Q22 10 22 14 L20 18 L4 18 Z" },
];

function Bestiary() {
  return (
    <section className="section" id="bestiario" style={{ background: "var(--bg-deep)" }}>
      <div className="section-tag reveal">
        <span className="num">05 / 06</span>
        <span className="label">Bestiário</span>
        <span className="rule" />
      </div>
      <h2 className="section-title reveal">
        Criaturas que <span className="em">guardam</span> o continente
      </h2>
      <p className="section-lede reveal">
        Cada criatura guarda uma história. Conheça segredos, mistérios e poderes daqueles que habitam o Grande Continente.
      </p>

      <div style={{ marginTop: 64, textAlign: "center" }} className="reveal">
        <a href="Bestiario.html" className="btn btn-ghost">
          Bestiário completo <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

// ---------- Newsletter ----------
function Newsletter() {
  const [submitted, setSubmitted] = useState(false);
  const [email, setEmail] = useState("");
  const onSubmit = (e) => {
    e.preventDefault();
    if (email.trim()) setSubmitted(true);
  };
  return (
    <section className="newsletter" id="chamado">
      <div className="newsletter-inner">
        <div className="reveal">
          <span className="eyebrow">Chamado dos Aventureiros</span>
        </div>
        <h2 className="reveal">
          Junte-se à <span className="em">Ordem</span>
        </h2>
        <p className="reveal">
          Receba capítulos antecipados, mapas inéditos e o chamado para próximas aventuras antes de qualquer outro mortal.
        </p>

        {submitted ? (
          <div className="newsletter-success">A chama foi acesa. Verifique seu pergaminho — digo, e-mail.</div>
        ) : (
          <form className="newsletter-form reveal" onSubmit={onSubmit}>
            <input
              type="email"
              required
              className="newsletter-input"
              placeholder="seu@email.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <button type="submit" className="btn btn-primary">
              Aceitar o chamado <span className="arrow">→</span>
            </button>
          </form>
        )}

        <div className="newsletter-disclaimer">Sem spam · Apenas pergaminhos importantes</div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function SocialIcon({ kind }) {
  const paths = {
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.4" /><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.4" /><circle cx="17" cy="7" r="0.8" fill="currentColor" /></>,
    youtube: <><rect x="3" y="6" width="18" height="12" rx="3" stroke="currentColor" strokeWidth="1.4" /><path d="M10 9.5 L15 12 L10 14.5 Z" fill="currentColor" /></>,
    tiktok: <path d="M14 4 v9 a3 3 0 1 1 -3 -3 M14 4 q1 4 5 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" />,
  };
  return <svg viewBox="0 0 24 24" width="18" height="18" fill="none">{paths[kind]}</svg>;
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <Crest size={32} />
          <h3>O Legado do Fogo</h3>
          <p>
            Uma fantasia épica de Gustavo Machado. Coragem, identidade e a batalha interna de um jovem para encontrar seu lugar.
          </p>
          <div className="footer-social">
            <a href="https://www.instagram.com/olegadodofogooficial/" target="_blank" rel="noreferrer" aria-label="Instagram"><SocialIcon kind="instagram" /></a>
            <a href="https://www.youtube.com/@OLegadodoFogoOficial" target="_blank" rel="noreferrer" aria-label="YouTube"><SocialIcon kind="youtube" /></a>
            <a href="https://www.tiktok.com/@olegadodofogooficial" target="_blank" rel="noreferrer" aria-label="TikTok"><SocialIcon kind="tiktok" /></a>
          </div>
        </div>
        <div className="footer-col">
          <h5>O Mundo</h5>
          <ul>
            <li><a href="O_Grande_Continente.html">O Grande Continente</a></li>
            <li><a href="index.html#mundo">Reino dos Humanos</a></li>
            <li><a href="index.html#mundo">Organizações</a></li>
            <li><a href="index.html#mundo">Classes</a></li>
            <li><a href="Bestiario.html">Bestiário</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Biblioteca</h5>
          <ul>
            <li><a href="Livros.html">Livro I — O Legado do Fogo</a></li>
            <li><a href="Livros.html">Livro II — O Véu da Escuridão</a></li>
            <li><a href="Livros.html">Saga — Academia de Magia</a></li>
            <li><a href="Livros.html">Diário de Lancelot</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Comunidade</h5>
          <ul>
            <li><a href="Chamado.html">Chamado dos Aventureiros</a></li>
            <li><a href="https://www.instagram.com/olegadodofogooficial/">Instagram</a></li>
            <li><a href="https://www.youtube.com/@OLegadodoFogoOficial">YouTube</a></li>
            <li><a href="#">Política de Privacidade</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 · O Legado do Fogo · Todos os direitos reservados</span>
        <span>Forjado em chamas</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Epigraph, Synopsis, Books, Characters, World, Bestiary, Newsletter, Footer, useReveal });