// Header e Footer compartilhados entre landing e página de leitura
function SiteHeader({ variant = "light" }) {
  const dark = variant === "dark";
  return (
    <header
      className="site-header"
      style={{
        position: "sticky",
        top: 0,
        zIndex: 50,
        background: dark ? RR.deep : "rgba(255,255,255,0.92)",
        backdropFilter: "saturate(140%) blur(8px)",
        borderBottom: dark ? "1px solid rgba(255,255,255,0.08)" : "1px solid #efe6f3",
      }}
    >
      <div
        className="site-header-inner"
        style={{
          maxWidth: 1280,
          margin: "0 auto",
          padding: "16px 32px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 24,
        }}
      >
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 14, textDecoration: "none" }}>
          {dark
            ? <LogoRevisaoRapida width={92} color="#fff" light />
            : <img className="site-logo-img" src="assets/logo-site.png" alt="Revisão Rápida" style={{ height: 30, width: "auto", display: "block" }} />}
        </a>

        <div
          className="site-header-right"
          style={{
            display: "flex",
            alignItems: "center",
            gap: 18,
            paddingLeft: 18,
            borderLeft: dark ? "1px solid rgba(255,255,255,0.18)" : "1px solid #e4d7eb",
          }}
        >
          <span
            className="site-header-tag"
            style={{
              fontFamily: '"Poppins", sans-serif',
              fontSize: 11,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: dark ? "rgba(255,255,255,0.7)" : "#888",
            }}
          >
            Uma iniciativa
          </span>
          <LogoFiocruz height={24} color={dark ? "#fff" : "#3a3a3a"} />
        </div>
      </div>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer
      style={{
        background: RR.deep,
        color: "rgba(255,255,255,0.85)",
        padding: "56px 32px 32px",
        marginTop: 80,
        position: "relative",
        overflow: "hidden",
      }}
    >
      <PillShape color={RR.secondary} size={300} rotate={-30} opacity={0.18}
        style={{ position: "absolute", right: -80, bottom: -80 }}
      />
      <DotsDiagonal color="rgba(255,255,255,0.25)" size={80}
        style={{ position: "absolute", left: 32, top: 32 }}
      />
      <div className="site-footer-grid" style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr", gap: 48, position: "relative" }}>
        <div>
          <LogoRevisaoRapida width={120} color="#fff" light />
          <p style={{ marginTop: 18, fontFamily: '"Poppins", sans-serif', fontSize: 13, lineHeight: 1.6, maxWidth: 340, color: "rgba(255,255,255,0.78)" }}>
            Sínteses rápidas de evidências para informar decisões em saúde pública, produzidas pela Fiocruz Brasília.
          </p>
        </div>
        <div>
          <h4 style={{ fontFamily: '"Poppins", sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: RR.light, marginBottom: 16 }}>
            Produzido por
          </h4>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, fontFamily: '"Poppins", sans-serif', fontSize: 13, lineHeight: 2, color: "rgba(255,255,255,0.78)" }}>
            <li>Fiocruz Brasília</li>
            <li>Instituto de Saúde de São Paulo</li>
            <li>Biblioteca FCM/Unicamp</li>
            <li>CGEDESS/DEPROS/MS</li>
          </ul>
        </div>
        <div>
          <h4 style={{ fontFamily: '"Poppins", sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: RR.light, marginBottom: 16 }}>
            Licença
          </h4>
          <p style={{ fontFamily: '"Poppins", sans-serif', fontSize: 13, lineHeight: 1.7, color: "rgba(255,255,255,0.78)" }}>
            Conteúdo publicado sob Licença Creative Commons CC BY-NC-SA 4.0 Internacional.
          </p>
        </div>
      </div>
      <div className="site-footer-bottom" style={{ maxWidth: 1280, margin: "40px auto 0", paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", justifyContent: "space-between", fontFamily: '"Poppins", sans-serif', fontSize: 12, color: "rgba(255,255,255,0.6)" }}>
        <span>© Fiocruz Brasília · Revisão Rápida</span>
        <span>Política Nacional de Promoção da Saúde</span>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter });