/* global React, Button, Eyebrow, Flower, Icon, GCMark, SectionHead, QuoteBand, ManifestoBand, PageHero, PlainHero, LaunchCTA, TriadGrid, EditorialSplit */
// Espalhe Gardênias — O Livro

const WRAP_B = { maxWidth: 1280, margin: "0 auto", padding: "clamp(64px,9vw,104px) clamp(24px,5vw,40px)" };

function scrollToId(id) {
  const sc = document.getElementById("eg-scroll");
  const el = document.getElementById(id);
  if (sc && el) sc.scrollTo({ top: el.getBoundingClientRect().top + sc.scrollTop - 92, behavior: "smooth" });
}

/* ============================================================ O LIVRO */
function LivroScreen({ onNav }) {
  const temas = [
    { t: "Coragem", d: "A força para continuar mesmo diante das maiores adversidades." },
    { t: "Superação", d: "Transformar obstáculos em aprendizado." },
    { t: "Fé", d: "A esperança que ilumina os caminhos mais difíceis." },
    { t: "Recomeços", d: "A capacidade de florescer novamente." },
    { t: "Propósito", d: "Encontrar sentido em cada capítulo da vida." },
  ];
  return (
    <div style={{ background: "var(--cream)" }}>
      {/* HERO com capa */}
      <section style={{ background: "var(--vinho)", padding: "clamp(120px,15vw,140px) clamp(24px,5vw,40px) clamp(70px,9vw,100px)",
        marginTop: -82, position: "relative", overflow: "hidden" }}>
        <Flower which={1} simple={false} size={380} opacity={.07} style={{ position: "absolute", left: -60, bottom: -90 }} />
        <div className="eg-book" style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: "auto 1fr",
          gap: "clamp(40px,6vw,70px)", alignItems: "center", position: "relative" }}>
          {/* capa */}
          <img src="/site/capa-livro.png" alt="Capa do livro Gardênia — Uma história de coragem e superação"
            style={{ width: 320, height: "auto", display: "block", justifySelf: "center" }} />
          <div>
            <Eyebrow color="#d08a63">O Livro</Eyebrow>
            <h1 style={{ fontFamily: "var(--font-serif)", textTransform: "uppercase", color: "var(--pessego)",
              fontSize: "clamp(40px,6vw,58px)", letterSpacing: ".02em", margin: "20px 0 12px" }}>Gardênia</h1>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(18px,2.4vw,21px)", color: "var(--fg-on-dark-soft)", marginBottom: 22 }}>Uma História de Coragem e Superação</div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(17px,2vw,20px)", letterSpacing: ".08em", textTransform: "uppercase", color: "var(--terracota)", marginBottom: 20 }}>Do solo árido nasceu a flor.</div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.78, color: "var(--fg-on-dark-soft)", maxWidth: 470, marginBottom: 32 }}>
              Uma história real sobre perdas, recomeços, fé e a coragem de continuar quando a vida muda completamente os nossos planos.
            </p>
            <Button variant="primary" onClick={() => scrollToId("sobre-livro")}>Quero saber mais</Button>
          </div>
        </div>
      </section>

      {/* SEÇÃO 1 — SOBRE O LIVRO */}
      <section id="sobre-livro" style={{ ...WRAP_B }}>
        <div className="eg-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "clamp(40px,6vw,80px)", alignItems: "center" }}>
          <div>
            <Eyebrow>Sobre o livro</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(28px,3.6vw,40px)", color: "var(--fg1)", margin: "16px 0 0", lineHeight: 1.1 }}>Mais do que uma autobiografia.</h2>
          </div>
          <div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.8, color: "var(--fg2)" }}>
              Escrito com o coração aberto, <em style={{ fontStyle: "italic" }}>Gardênia: Uma História de Coragem e Superação</em> revela a trajetória de uma mulher que transformou dor em propósito e desafios em força para seguir adiante.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15.5, lineHeight: 1.8, color: "var(--fg2)", marginTop: 18 }}>
              Ao longo das páginas, Gardênia compartilha lembranças da infância no sertão alagoano, as perdas que marcaram sua vida, os recomeços que moldaram sua história e a fé que a sustentou em cada etapa da caminhada.
            </p>
          </div>
        </div>
      </section>

      {/* SEÇÃO 2 — TEMAS DO LIVRO */}
      <section style={{ background: "var(--linen)" }}>
        <div style={{ ...WRAP_B }}>
          <SectionHead kicker="Temas do livro" title="Uma história sobre…" />
          <div className="eg-5col" style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 18, marginTop: 50 }}>
            {temas.map((p, i) => (
              <div key={p.t} style={{ background: "var(--cream)", padding: "32px 26px", border: "1px solid var(--border-faint)", borderTop: "2px solid var(--terracota)" }}>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 13, letterSpacing: ".2em", color: "var(--terracota)", marginBottom: 14 }}>{String(i + 1).padStart(2, "0")}</div>
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 17, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--fg1)", marginBottom: 12 }}>{p.t}</h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.62, color: "var(--fg2)" }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SEÇÃO 3 — TRECHO EM DESTAQUE */}
      <QuoteBand bg="var(--blush)" attribution="Gardênia Cavalcanti">
        “Prepare-se para florescer comigo. Em breve, uma história real sobre superação, coragem e a força de continuar quando tudo parece impossível. Você vem comigo nessa jornada?”
      </QuoteBand>

      {/* SEÇÃO 4 — LANÇAMENTO */}
      <section style={{ background: "var(--vinho)", padding: "clamp(64px,9vw,96px) clamp(24px,5vw,40px)", position: "relative", overflow: "hidden" }}>
        <Flower which={2} simple={false} size={260} opacity={.07} style={{ position: "absolute", right: -40, bottom: -50, transform: "rotate(-12deg)" }} />
        <div style={{ maxWidth: 580, margin: "0 auto", textAlign: "center", position: "relative" }}>
          <Eyebrow color="#d08a63">Lançamento</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(28px,4vw,36px)", color: "var(--pessego)", marginTop: 16, marginBottom: 14 }}>Em breve nas livrarias de todo o Brasil</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.65, color: "var(--fg-on-dark-soft)", marginBottom: 30 }}>
            Receba novidades sobre o lançamento, eventos e sessões de autógrafos.
          </p>
          <form onSubmit={(e) => e.preventDefault()} className="eg-news" style={{ display: "flex", maxWidth: 460, margin: "0 auto" }}>
            <input placeholder="Seu melhor e-mail" aria-label="E-mail"
              style={{ flex: 1, fontFamily: "var(--font-body)", fontSize: 14, padding: "15px 18px",
                background: "var(--cream)", border: "1px solid var(--border)", borderRight: "none", borderRadius: 0, color: "var(--fg1)" }} />
            <Button variant="primary">Cadastrar e-mail</Button>
          </form>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LivroScreen });