// ============================================
// minhahistória — content blocks: intro band, pill filters,
// collection mosaics, how it works (festive v1)
// ============================================
const { useState: useStateC } = React;

/* ---------- Intro band (hero) — simplified for hierarchy ---------- */
const IntroBand = () => (
  (() => {
    const fallbackCovers = [
      { brand: "Espaço", title: "A Capitã das Estrelas", cover: "deep", glyph: "rocket" },
      { brand: "Fantasia", title: "O Cavaleiro do Dragão", cover: "purple", glyph: "wand" },
      { brand: "Amizade", title: "O Clube dos Heróis", cover: "pink", glyph: "star" },
    ];
    const published = Array.isArray(window.STORIES) ? window.STORIES.slice(0, 3) : [];
    const heroCovers = published.length === 3
      ? published.map((s) => ({
          brand: (s.theme || "História").toUpperCase(),
          title: s.title,
          cover: s.cover,
          glyph: s.glyph,
          coverImage: s.coverImage,
        }))
      : fallbackCovers;

    return (
  <section className="container-x" style={{ paddingTop: 28 }}>
    <div className="intro-band" style={{
      position: "relative",
      borderRadius: 28,
      background: "linear-gradient(125deg, var(--navy-darker) 0%, var(--navy) 45%, var(--teal-deep) 130%)",
      color: "white",
      padding: "56px 56px 48px",
      overflow: "hidden",
      boxShadow: "var(--shadow-band)",
    }}>
      {/* stars + sparkles */}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} aria-hidden>
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }} viewBox="0 0 1200 360" preserveAspectRatio="xMaxYMid slice">
          {Array.from({ length: 22 }).map((_, i) => {
            const x = (i * 73 + 40) % 1200, y = (i * 41 + 30) % 360, r = ((i * 7) % 3) + 1;
            return <circle key={i} cx={x} cy={y} r={r} fill="white" opacity={0.25 + ((i * 13) % 50) / 100} />;
          })}
          <path d="M1080 50l5 12 13 1-10 9 3 13-11-7-11 7 3-13-10-9 13-1z" fill="var(--sun)" />
          <path d="M860 280l4 10 11 1-8 7 2 11-9-5-9 5 2-11-8-7 11-1z" fill="var(--coral)" />
          <path d="M620 30l3 8 9 1-7 6 2 9-7-4-7 4 2-9-7-6 9-1z" fill="white" opacity="0.7" />
        </svg>
      </div>

      <div className="intro-grid" style={{ display: "grid", gridTemplateColumns: "1.15fr auto", gap: 40, alignItems: "center" }}>
        <div style={{ position: "relative", zIndex: 2 }}>
          {/* eyebrow with social proof inline */}
          <div style={{ display: "inline-flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "rgba(255,209,61,0.18)",
              border: "1px solid rgba(255,209,61,0.35)",
              color: "var(--sun)",
              padding: "6px 14px", borderRadius: 999,
              fontSize: 11, fontWeight: 900, letterSpacing: "0.14em",
              textTransform: "uppercase",
            }}>
              <Icon name="sparkle" size={13} color="var(--sun)" />
              Presente que vira lembrança
            </span>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 12, fontWeight: 800, color: "rgba(255,255,255,0.85)",
            }}>
              <div style={{ display: "inline-flex" }}>
                {[0,1,2,3].map(i => (
                  <div key={i} style={{
                    width: 20, height: 20, borderRadius: "50%",
                    background: ["var(--tangerine)","var(--teal)","var(--coral)","var(--sun)"][i],
                    border: "2px solid var(--navy-darker)", marginLeft: i ? -8 : 0,
                  }} />
                ))}
              </div>
              <strong style={{ color: "white", letterSpacing: "0.02em" }}>+2.800 famílias</strong>
            </span>
          </div>

          <h1 className="font-display" style={{
            fontSize: 56, fontWeight: 900, lineHeight: 1.02, margin: "22px 0 16px",
            letterSpacing: "-0.025em", textWrap: "balance",
          }}>
            Seu filho dentro <br />
            da própria <span style={{ color: "var(--sun)" }}>história</span>.
          </h1>

          <p style={{
            fontSize: 18, lineHeight: 1.5, maxWidth: 500,
            color: "rgba(255,255,255,0.85)", fontWeight: 500, margin: 0,
          }}>
            Livros personalizados onde a criança é a estrela da aventura.
            Livro impresso com entrega em até 7 dias.
          </p>

          {/* primary CTA + price — clean hierarchy */}
          <div style={{ display: "flex", alignItems: "center", gap: 20, marginTop: 28, flexWrap: "wrap" }}>
            <button className="btn btn-solid-orange btn-lg btn-pulse" onClick={() => { window.__landing2ScrollToId("catalogo"); }}>
              <Icon name="sparkle" size={15} /> Criar meu livro agora
            </button>
            <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
              <span style={{ fontSize: 11, fontWeight: 900, letterSpacing: "0.14em", color: "rgba(255,255,255,0.6)", textTransform: "uppercase" }}>a partir de</span>
              <span style={{ display: "inline-flex", alignItems: "baseline", gap: 8, marginTop: 4 }}>
                <span className="font-display" style={{ fontSize: 32, fontWeight: 900, color: "var(--sun)" }}>R$ 29,90</span>
              </span>
            </div>
          </div>

          {/* compact trust strip */}
          <div style={{ display: "flex", gap: 22, marginTop: 26, flexWrap: "wrap", fontSize: 13, color: "rgba(255,255,255,0.82)", fontWeight: 700 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name="heart" size={14} color="var(--sun)" /> +2.800 famílias atendidas
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name="book" size={14} color="var(--sun)" /> Livro personalizado
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name="truck" size={14} color="var(--sun)" /> Entrega para todo o Brasil
            </span>
          </div>
        </div>

        {/* Three floating books */}
        <div className="intro-books" style={{ position: "relative", width: 440, height: 340 }}>
          <div style={{
            position: "absolute", left: 0, top: 60,
            width: 150, height: 220, transform: "rotate(-10deg)", zIndex: 1,
          }}>
            <BookCover product={heroCovers[0]} small />
          </div>
          <div style={{
            position: "absolute", left: 140, top: 0,
            width: 175, height: 255, transform: "rotate(3deg)", zIndex: 3,
            filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.45))",
          }}>
            <BookCover product={heroCovers[1]} small />
          </div>
          <div style={{
            position: "absolute", left: 290, top: 50,
            width: 150, height: 220, transform: "rotate(10deg)", zIndex: 2,
          }}>
            <BookCover product={heroCovers[2]} small />
          </div>
        </div>
      </div>
    </div>

    {/* live dot beat keyframes */}
    <style>{`
      @keyframes liveBeat {
        0%, 100% { box-shadow: 0 0 0 0 rgba(163,213,92,.55); }
        50%      { box-shadow: 0 0 0 10px rgba(163,213,92,0); }
      }
    `}</style>
  </section>
    );
  })()
);

/* ---------- Pill filters (themes) ---------- */
const PillFilters = () => {
  const [active, setActive] = useStateC(0);
  return (
    <section className="container-x" style={{ paddingTop: 40, paddingBottom: 4 }}>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
        {window.THEMES.map((p, i) => (
          <button key={p.id}
            className={"chip" + (i === active ? " is-active" : "")}
            onClick={() => {
              setActive(i);
              window.__landing2ScrollToId(`tema-${p.id}`);
            }}
          >
            {p.label}
          </button>
        ))}
      </div>
    </section>
  );
};

/* ---------- Collection mosaic card (large) ---------- */
const CollectionMosaicCard = ({ collection }) => {
  const { id, title, subtitle, bg, textColor, covers } = collection;
  return (
    <article id={`favoritos-${id}`} style={{
      position: "relative",
      borderRadius: 22,
      background: bg,
      color: textColor,
      padding: "32px 32px 28px",
      overflow: "hidden",
      boxShadow: "var(--shadow-band)",
      minHeight: 380,
      display: "flex", flexDirection: "column",
      transition: "transform .25s ease, box-shadow .25s ease",
      cursor: "pointer",
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-pop)"; }}
      onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "var(--shadow-band)"; }}
    >
      <div style={{ maxWidth: "70%" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800, opacity: 0.8 }}>Favoritas das famílias</div>
        <h3 className="font-display" style={{
          fontSize: 26, fontWeight: 900, lineHeight: 1.1, margin: "8px 0 6px",
          letterSpacing: "-0.01em", textWrap: "balance",
        }}>{title}</h3>
        <p style={{ fontSize: 14, lineHeight: 1.5, margin: 0, opacity: 0.85, fontWeight: 500 }}>{subtitle}</p>
      </div>

      <div style={{ marginTop: "auto", paddingTop: 28, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
        {covers.map((c, i) => (
          <div key={i} style={{
            aspectRatio: "3 / 4",
            transform: `rotate(${[-3, 1, -1, 3][i]}deg) translateY(${[4, 0, 6, 2][i]}px)`,
          }}>
            <BookCover product={{
              brand: collection.title.replace("Coleção ", ""),
              title: c.title,
              cover: c.cover,
              glyph: c.glyph,
              coverImage: c.coverImage,
            }} small />
          </div>
        ))}
      </div>

      <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
        <div style={{ fontSize: 13, opacity: 0.85 }}>4 histórias mais presenteadas</div>
        <button className="btn btn-solid-yellow" style={{ color: "var(--purple-900)" }} onClick={() => {
          const targetTheme = id === "c2" ? "fantasia" : "aventura";
          window.__landing2ScrollToId(`tema-${targetTheme}`);
        }}>
          Ver histórias <Icon name="arrow-right" size={14} />
        </button>
      </div>
    </article>
  );
};

const CollectionsSection = () => (
  <section id="favoritas" className="container-x" style={{ paddingTop: 22 }}>
    <div className="section-title">
      <h2>Mais escolhidas e <span className="count">presenteadas</span></h2>
      <div style={{ display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
        <button
          className="chip"
          onClick={() => {
            window.__landing2ScrollToId("favoritos-c1");
          }}
        >
          Favoritas das famílias
        </button>
        <button
          className="chip"
          onClick={() => {
            window.__landing2ScrollToId("favoritos-c2");
          }}
        >
          Mais escolhidas da semana
        </button>
        <button
          className="chip"
          onClick={() => {
            window.__landing2ScrollToId("catalogo");
          }}
        >
          Ver mais
        </button>
      </div>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="collections-grid">
      {window.COLLECTIONS.map(c => <CollectionMosaicCard key={c.id} collection={c} />)}
    </div>

  </section>
);

/* ---------- How it works ---------- */
const HowItWorks = () => {
  const steps = [
    { n: "01", icon: "book",   color: "var(--yellow)",     ink: "var(--purple-900)", title: "Escolha a história",        body: "Navegue pelos temas e escolha a aventura que mais combina com a criança." },
    { n: "02", icon: "camera", color: "var(--cyan-2)",     ink: "white",              title: "Personalize a criança",    body: "Informe os dados no fluxo atual e deixe cada página com identidade única." },
    { n: "03", icon: "truck",  color: "var(--green-deep)", ink: "white",              title: "Receba o livro",           body: "Produção com acabamento premium e entrega para todo o Brasil." },
  ];

  return (
    <section id="como-funciona" className="container-x" style={{ paddingTop: 72 }}>
      <div className="how-works-wrap" style={{
        background: "var(--purple-100)", borderRadius: 24,
        padding: "56px 48px 48px", position: "relative", overflow: "hidden",
      }}>
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, pointerEvents: "none" }} viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" aria-hidden>
          <circle cx="60"   cy="80"   r="50"  fill="var(--yellow)" opacity="0.25" />
          <circle cx="1140" cy="540"  r="80"  fill="var(--cyan)"   opacity="0.18" />
          <circle cx="1100" cy="60"   r="14"  fill="var(--pink)"   opacity="0.4" />
          <circle cx="40"   cy="540"  r="20"  fill="var(--purple-600)" opacity="0.25" />
        </svg>

        <div style={{ position: "relative", textAlign: "center", marginBottom: 44 }}>
          <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800, color: "var(--purple-700)" }}>Como funciona</div>
          <h2 className="font-display" style={{ fontSize: 36, fontWeight: 900, color: "var(--purple-900)", margin: "10px 0 6px", letterSpacing: "-0.01em" }}>
            Três passos pra história ganhar vida
          </h2>
          <p style={{ fontSize: 15, color: "var(--muted)", maxWidth: 540, margin: "0 auto" }}>
            Personalize hoje e receba o livro impresso em até 7 dias.
          </p>
        </div>

        <div className="steps-grid" style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
          {steps.map(s => (
            <div key={s.n} style={{
              background: "white", borderRadius: 18, padding: "32px 24px 28px",
              textAlign: "center", boxShadow: "var(--shadow-card)", position: "relative",
            }}>
              <div style={{
                position: "absolute", top: -22, left: "50%", transform: "translateX(-50%)",
                width: 64, height: 64, borderRadius: "50%",
                background: s.color, color: s.ink,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                boxShadow: "0 8px 18px rgba(42,11,92,0.18)",
                border: "5px solid white",
              }}>
                <Icon name={s.icon} size={26} color={s.ink} />
              </div>
              <div className="font-display" style={{ fontSize: 13, fontWeight: 800, color: "var(--purple-700)", letterSpacing: "0.16em", marginTop: 28 }}>PASSO {s.n}</div>
              <h3 className="font-display" style={{ fontSize: 22, fontWeight: 900, color: "var(--purple-900)", margin: "6px 0 10px" }}>{s.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--muted)", margin: "0 auto", maxWidth: 280 }}>{s.body}</p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: "center", marginTop: 40 }}>
          <button className="btn btn-solid-purple btn-lg" onClick={() => { window.__landing2ScrollToId("catalogo"); }}>
            <Icon name="sparkle" size={15} /> Começar agora
          </button>
          <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 8, fontWeight: 600 }}>
            Comece agora com poucos cliques.
          </p>
        </div>
      </div>
    </section>
  );
};

/* ---------- Micro-story (brand voice interstitial) ---------- */
const MicroStory = () => (
  <section className="container-x" style={{ paddingTop: 48 }}>
    <div style={{
      maxWidth: 720, margin: "0 auto", textAlign: "center", padding: "20px 0",
      position: "relative",
    }}>
      <div aria-hidden style={{
        fontFamily: "'Fraunces', 'Fredoka', serif",
        fontSize: 60, lineHeight: 0.6, color: "var(--coral)", opacity: 0.5,
        marginBottom: -10, fontWeight: 700,
      }}>"</div>
      <p style={{
        fontFamily: "'Fraunces', 'Fredoka', serif",
        fontSize: 22, fontWeight: 500, fontStyle: "italic",
        lineHeight: 1.5, color: "var(--navy)",
        margin: 0, letterSpacing: "-0.005em",
        textWrap: "balance",
      }}>
        Era uma vez uma criança que abriu um livro e
        viu o próprio nome <span style={{ color: "var(--tangerine)", fontWeight: 700, fontStyle: "normal" }}>brilhando na capa</span>.
        Ali ela descobriu que era ela — a estrela da história.
      </p>
      <div style={{
        marginTop: 12, fontSize: 11, color: "var(--muted)",
        fontWeight: 800, letterSpacing: "0.18em", textTransform: "uppercase",
      }}>— Da gente, com todo carinho.</div>
    </div>
  </section>
);

Object.assign(window, {
  IntroBand, PillFilters,
  CollectionMosaicCard, CollectionsSection, HowItWorks,
  MicroStory,
});