// ============================================
// minhahistória — top blocks: TopBanner + Header + Floating UI + Footer
// ============================================
const { useState, useEffect } = React;

if (!window.__landing2ScrollToId) {
  window.__landing2ScrollToId = (id, extraOffset = 12) => {
    const el = document.getElementById(id);
    if (!el) return;
    const header = document.querySelector(".header-stick");
    const headerHeight = header ? header.getBoundingClientRect().height : 0;
    const top = window.scrollY + el.getBoundingClientRect().top - headerHeight - extraOffset;
    window.scrollTo({ top: Math.max(top, 0), behavior: "smooth" });
  };
}
const FOOTER_LINK_MAP = {
  "Central de Ajuda": "/landing2/central-de-ajuda",
  "Prazos de entrega": "/landing2/central-de-ajuda#entrega",
  "Fale conosco": "/landing2/contato",
  "WhatsApp": "/landing2/contato",
  "Quem somos": "/landing2/sobre",
  "Nossa história": "/landing2/sobre",
  "Imprensa": "/landing2/sobre",
  "Política de privacidade": "/landing2/politica-de-privacidade",
  "Termos de uso": "/landing2/termos-de-uso",
  "Para empresas": "/landing2/para-empresas",
};

/* ---------- Brand logo ---------- */
const Logo = ({ light = false, height = 40 }) => (
  <a href="#main" aria-label="minhahistória, página inicial" style={{
    display: "inline-flex", alignItems: "center", textDecoration: "none",
    background: light ? "rgba(255,255,255,0.96)" : "transparent",
    padding: light ? "8px 14px" : "0",
    borderRadius: light ? 14 : 0,
    lineHeight: 0,
  }}>
    <img src="logo.svg" alt="minhahistória — livros personalizados" style={{
      height, width: "auto", display: "block",
    }} />
  </a>
);

/* ---------- Top banner (marquee promo) ---------- */
const TopBanner = () => {
  const items = [
    "🎁 Um presente emocional para a infância",
    "📚 Livro personalizado com a criança protagonista",
    "✦ +2.800 famílias já confiaram na Minha História",
    "🚚 Entrega para todo o Brasil",
    "💛 Histórias que viram memória em família",
  ];
  // Doubled for seamless 50% loop
  const itemsDoubled = [...items, ...items];
  return (
    <div style={{
      background: "var(--navy-darker)",
      color: "rgba(255,255,255,0.92)",
      fontSize: 13,
      fontWeight: 700,
      letterSpacing: "0.01em",
      overflow: "hidden",
      borderBottom: "1px solid rgba(255,255,255,0.06)",
    }}>
      <div className="marquee-track" style={{ paddingTop: 10, paddingBottom: 10 }}>
        {itemsDoubled.map((t, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center" }}>{t}</span>
        ))}
      </div>
    </div>
  );
};

/* ---------- Main header (sticky) — clean ---------- */
const HeaderMain = () => (
  <div style={{ background: "white", borderBottom: "1px solid var(--line-2)" }}>
    <div className="container-x header-main-grid" style={{
      display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center",
      gap: 28, height: 80,
    }}>
      <Logo height={50} />
      <div className="search-wrap" style={{
        position: "relative", maxWidth: 520, width: "100%", justifySelf: "center",
      }}>
        <Icon name="search" style={{
          position: "absolute", left: 18, top: "50%", transform: "translateY(-50%)",
          color: "var(--soft)",
        }} />
        <input
          className="search-input"
          placeholder="Busque: aventura, espaço, dragão, dinossauros…"
          aria-label="Buscar livros"
          onChange={(e) => {
            window.dispatchEvent(new CustomEvent("landing2:search-change", { detail: { query: e.target.value || "" } }));
          }}
        />
      </div>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <button className="btn btn-solid-orange btn-sm header-cta-desktop" onClick={() => { window.__landing2ScrollToId("catalogo"); }}>
          <Icon name="sparkle" size={13} /> Criar meu livro
        </button>
        <button aria-label="Abrir menu" className="hicon-btn menu-btn-mobile">
          <Icon name="menu" />
        </button>
      </div>
    </div>
  </div>
);

/* ---------- Category nav ---------- */
const HeaderNav = () => (
  <div style={{ background: "var(--navy)", color: "white" }}>
    <div className="container-x no-scrollbar" style={{
      display: "flex", alignItems: "center", justifyContent: "center",
      gap: 32, height: 48,
      overflowX: "auto", whiteSpace: "nowrap",
    }}>
      {window.NAV_LINKS.map((it, i) => (
        <a
          key={i}
          href={it.href || "#"}
          onClick={(e) => {
            if (it.action === "scroll" && it.target) {
              e.preventDefault();
              window.__landing2ScrollToId(it.target);
            }
          }}
          style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          fontSize: 13, fontWeight: 800, letterSpacing: "0.02em",
          color: "white", textDecoration: "none", cursor: "pointer",
          padding: "6px 0",
          }}
        >
          {it.label}
          {it.badge && (
            <span style={{
              background: "var(--sun)", color: "var(--navy-darker)",
              fontSize: 10, fontWeight: 900, padding: "3px 6px",
              borderRadius: 4, letterSpacing: "0.05em",
            }}>{it.badge}</span>
          )}
          {it.chip && (
            <span style={{
              background: "var(--sun)", color: "var(--navy-darker)",
              fontSize: 10, fontWeight: 900, padding: "3px 8px",
              borderRadius: 999, marginLeft: 2,
            }}>NOVO</span>
          )}
        </a>
      ))}
    </div>
  </div>
);

/* ---------- Header wrapper ---------- */
const Header = () => {
  const [stuck, setStuck] = useState(false);
  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"header-stick" + (stuck ? " is-stuck" : "")}>
      <HeaderMain />
      <HeaderNav />
    </div>
  );
};

/* ---------- Floating discount pill ---------- */
const FloatingDiscountBadge = () => {
  const [open, setOpen] = useState(true);
  if (!open) return null;
  return (
    <div className="fab-discount" role="button" tabIndex={0} aria-label="Promoção R$ 29,90 por tempo limitado">
      <button className="close-x" onClick={(e) => { e.stopPropagation(); setOpen(false); }} aria-label="Fechar promoção">✕</button>
      <div className="fab-icon">🎁</div>
      <div className="fab-text">
        <span className="top">por tempo limitado</span>
        <span className="bottom"><strong>R$ 29,90</strong> · livro completo</span>
      </div>
    </div>
  );
};

const SupportButton = () => (
  <button className="fab-support" aria-label="Falar com o suporte">
    <Icon name="chat" /> Suporte
  </button>
);

/* ---------- Mobile sticky bottom CTA ---------- */
const MobileStickyCTA = () => (
  <div className="mobile-sticky-cta" role="region" aria-label="Criar meu livro">
    <div className="price">
      <span className="top">a partir de</span>
      <span className="bottom">R$ 29,90</span>
    </div>
    <button className="btn btn-solid-orange" onClick={() => { window.__landing2ScrollToId("catalogo"); }}>
      <Icon name="sparkle" size={14} /> Criar meu livro
    </button>
  </div>
);

/* ---------- Footer ---------- */
const Footer = () => (
  <footer style={{ background: "var(--navy-darker)", color: "rgba(255,255,255,0.82)", marginTop: 80 }}>
    <div style={{ height: 1, background: "linear-gradient(90deg, transparent, var(--coral), transparent)" }} aria-hidden />
    <div className="container-x" style={{ paddingTop: 56, paddingBottom: 36 }}>
      <div className="footer-grid" style={{
        display: "grid",
        gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
        gap: 40,
      }}>
        <div>
          <Logo light />
          <p style={{ fontSize: 13.5, lineHeight: 1.65, marginTop: 18, color: "rgba(255,255,255,0.65)", maxWidth: 320 }}>
            Livros personalizados onde a criança é a estrela da aventura.
            Cada história é única, impressa sob demanda e entregue para todo o Brasil.
          </p>
          <p style={{
            fontFamily: "'Caveat', cursive",
            fontSize: 22, fontWeight: 600, lineHeight: 1.3,
            color: "var(--sun)",
            marginTop: 18, marginBottom: 0, maxWidth: 320,
          }}>
            "Cada livro sai daqui com um sorriso.<br/>Obrigada por confiar a história do seu pequeno à gente." <span style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, fontFamily: "'Nunito', sans-serif", fontWeight: 700, fontStyle: "italic" }}>— Equipe minhahistória</span>
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
            {["instagram", "youtube", "tiktok", "facebook"].map(n => (
              <button key={n} aria-label={n} style={{
                width: 38, height: 38, borderRadius: "50%",
                background: "rgba(255,255,255,0.1)", border: "none", color: "white", cursor: "pointer",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                transition: "background .15s ease",
              }}
                onMouseEnter={e => e.currentTarget.style.background = "var(--coral)"}
                onMouseLeave={e => e.currentTarget.style.background = "rgba(255,255,255,0.1)"}
              >
                <Icon name={n} />
              </button>
            ))}
          </div>
        </div>
        {window.FOOTER_COLS.map(col => (
          <div key={col.title}>
            <div className="font-display" style={{
              fontWeight: 800, fontSize: 15, color: "var(--sun)",
              marginBottom: 16, letterSpacing: "0.01em",
            }}>{col.title}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
              {col.links.map(l => (
                <li key={l}>
                  <a href={FOOTER_LINK_MAP[l] || "#"} style={{
                    color: "rgba(255,255,255,0.74)", textDecoration: "none",
                    fontSize: 13.5, fontWeight: 500, cursor: "pointer",
                  }}>{l}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 28, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.10)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
        color: "rgba(255,255,255,0.46)", fontSize: 12,
      }}>
        <div>© 2026 minhahistória — todos os direitos reservados</div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          Feito com <span style={{ color: "var(--coral)" }}>♥</span> no Brasil
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, {
  Logo, TopBanner, Header, HeaderMain, HeaderNav,
  FloatingDiscountBadge, SupportButton, MobileStickyCTA, Footer,
});