/* Plan B — Shell: brand, header, footer, helpers, floating WhatsApp CTA */

const B_TOKENS = {
  ink: "#0B1F1A",         // near-black warm green
  deep: "#0B3D33",
  primary: "#0F6E56",
  accent: "#1D9E75",
  mint: "#5DCAA5",
  surface: "#FAF6EE",     // warm cream
  surfaceAlt: "#FFFFFF",
  rule: "#E4E0D6",
  ruleDark: "rgba(255,255,255,0.12)",
  muted: "#6B7F77",
  mutedDark: "rgba(255,255,255,.62)",
};

const BMark = ({ size = 28, stroke = "#FAF6EE", strokeWidth = 3.4 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none"
    stroke={stroke} strokeWidth={strokeWidth} strokeLinejoin="round" strokeLinecap="round" aria-hidden="true">
    <path d="M32 6 L56 26 V56 a2 2 0 0 1 -2 2 H10 a2 2 0 0 1 -2 -2 V26 Z" />
    <path d="M32 48 V22" />
    <path d="M24 30 L32 22 L40 30" />
  </svg>
);

const goHome = (e) => {
  if (e) e.preventDefault();
  if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
  if (typeof history !== "undefined" && history.replaceState) {
    history.replaceState(null, "", window.location.pathname + window.location.search);
  }
};

const BLockup = ({ stroke = "#FAF6EE", topColor = "#FAF6EE", botColor = "#5DCAA5", size = 28, asLink = false }) => {
  const inner = (
    <React.Fragment>
      <BMark size={size} stroke={stroke} />
      <div style={{ lineHeight: 1, display: "flex", gap: 5, alignItems: "baseline", letterSpacing: "-0.02em" }}>
        <span style={{ fontSize: 18, fontWeight: 700, color: topColor }}>Potencial</span>
        <span style={{ fontSize: 18, fontWeight: 400, color: botColor }}>Imóvel</span>
      </div>
    </React.Fragment>
  );
  if (asLink) {
    return (
      <a href="#topo" onClick={goHome} aria-label="Voltar para a página inicial"
        style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
        {inner}
      </a>
    );
  }
  return <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{inner}</div>;
};

const BEyebrow = ({ children, dark, color }) => (
  <span style={{
    display: "inline-flex", alignItems: "center", gap: 8,
    font: "600 11px/1 'Plus Jakarta Sans', sans-serif",
    letterSpacing: ".22em", textTransform: "uppercase",
    color: color || (dark ? B_TOKENS.mint : B_TOKENS.primary),
  }}>
    <span style={{ width: 18, height: 1, background: "currentColor", opacity: .6 }}></span>
    {children}
  </span>
);

const BBtn = ({ children, variant = "primary", size = "md", icon = "arrow", as = "button", href, ...rest }) => {
  const sizes = {
    sm: { padding: "10px 16px", font: "700 12.5px/1 'Plus Jakarta Sans'" },
    md: { padding: "14px 22px", font: "700 14px/1 'Plus Jakarta Sans'" },
    lg: { padding: "18px 28px", font: "700 16px/1 'Plus Jakarta Sans'" },
  };
  const variants = {
    primary:   { background: B_TOKENS.accent, color: "#fff", border: "1px solid transparent" },
    dark:      { background: B_TOKENS.ink, color: "#fff", border: "1px solid transparent" },
    light:     { background: "#fff", color: B_TOKENS.ink, border: "1px solid " + B_TOKENS.rule },
    ghostDark: { background: "transparent", color: "#fff", border: "1px solid rgba(255,255,255,.32)" },
    whatsapp:  { background: "#25D366", color: "#0B3D33", border: "1px solid transparent" },
  };
  const Tag = as === "a" || href ? "a" : "button";
  return (
    <Tag href={href} {...rest} style={{
      display: "inline-flex", alignItems: "center", gap: 10, borderRadius: 999,
      cursor: "pointer", textDecoration: "none", letterSpacing: ".01em",
      transition: "transform 160ms cubic-bezier(.2,.7,.2,1), background 180ms",
      ...sizes[size], ...variants[variant],
    }}
    onMouseDown={(e) => { e.currentTarget.style.transform = "translateY(1px)"; }}
    onMouseUp={(e) => { e.currentTarget.style.transform = "none"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; }}
    >
      {children}
      {icon === "arrow" && (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 12h14M13 6l6 6-6 6"/>
        </svg>
      )}
      {icon === "whatsapp" && (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M19.05 4.91A10 10 0 0 0 4.84 19.27L4 22l2.83-.83A10 10 0 1 0 19.05 4.91Zm-7.06 14.93a8.07 8.07 0 0 1-4.1-1.12l-.3-.18-2.39.7.73-2.32-.2-.32a8.08 8.08 0 1 1 6.26 3.24Zm4.43-6c-.25-.13-1.45-.71-1.67-.79s-.39-.13-.55.13c-.16.25-.63.79-.78.95s-.29.18-.54.06a6.6 6.6 0 0 1-3.26-2.85c-.25-.43.25-.4.71-1.32a.45.45 0 0 0 0-.42c-.06-.13-.55-1.32-.75-1.81s-.4-.42-.55-.42h-.47a.9.9 0 0 0-.66.31 2.74 2.74 0 0 0-.86 2c0 1.18.86 2.32 1 2.49s1.7 2.61 4.13 3.66c.58.25 1.03.4 1.38.51a3.33 3.33 0 0 0 1.52.1c.46-.07 1.45-.59 1.65-1.16a2 2 0 0 0 .15-1.16c-.06-.11-.23-.18-.49-.31Z"/>
        </svg>
      )}
      {icon === "none" && null}
    </Tag>
  );
};

const BHeader = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== "undefined" ? window.innerWidth <= 900 : false
  );
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    const onResize = () => {
      const m = window.innerWidth <= 900;
      setIsMobile(m);
      if (!m) setMenuOpen(false);
    };
    window.addEventListener("scroll", onScroll);
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
    };
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const links = ["Antes & depois", "Serviços", "Pacotes", "Como funciona", "Resultados"];
  const linkHref = (it) => `#${it.toLowerCase().replace(/[^a-z]/g, "-")}`;
  const headerSolid = scrolled || menuOpen;
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: menuOpen ? "rgba(11, 31, 26, .96)" : (scrolled ? "rgba(250,246,238,.88)" : "rgba(250,246,238,.72)"),
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid " + (menuOpen ? "rgba(255,255,255,.08)" : (scrolled ? B_TOKENS.rule : "rgba(228,224,214,.5)")),
      padding: "18px 56px", display: "flex", alignItems: "center", justifyContent: "space-between",
      gap: 24, transition: "background 220ms, border-color 220ms",
    }}>
      <BLockup asLink stroke={menuOpen ? "#FAF6EE" : B_TOKENS.deep} topColor={menuOpen ? "#FAF6EE" : B_TOKENS.ink} botColor={B_TOKENS.accent} />
      <nav style={{ display: "flex", gap: 4, alignItems: "center" }}>
        {links.map((it) => (
          <a key={it} href={linkHref(it)}
            style={{
              color: B_TOKENS.muted, textDecoration: "none",
              font: "600 13.5px/1 'Plus Jakarta Sans'", padding: "9px 14px", borderRadius: 999,
              transition: "color 160ms, background 160ms",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.color = B_TOKENS.deep; e.currentTarget.style.background = "rgba(11,31,26,.05)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = B_TOKENS.muted; e.currentTarget.style.background = "transparent"; }}
          >{it}</a>
        ))}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ color: B_TOKENS.muted, font: "600 12.5px/1 'Plus Jakarta Sans'" }}>
          (21) 99714-7447
        </span>
        <BBtn variant="primary" size="sm" as="a"
          href={typeof buildWaLink === "function" ? buildWaLink("Olá! Quero o diagnóstico grátis do meu imóvel.") : "#cta"}
          target="_blank" rel="noopener">Diagnóstico grátis</BBtn>
      </div>

      {/* Botão hamburger — só aparece em ≤ 900px via CSS dedicado abaixo */}
      <button
        type="button"
        aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}
        aria-expanded={menuOpen}
        onClick={() => setMenuOpen((v) => !v)}
        className="b-mobile-menu-btn"
        style={{
          display: "none",
          background: menuOpen ? "rgba(255,255,255,.08)" : "rgba(11,31,26,.06)",
          border: "1px solid " + (menuOpen ? "rgba(255,255,255,.16)" : "rgba(11,31,26,.14)"),
          color: menuOpen ? "#fff" : B_TOKENS.deep, borderRadius: 999, width: 44, height: 44,
          alignItems: "center", justifyContent: "center", cursor: "pointer",
          padding: 0, marginLeft: "auto",
        }}>
        {menuOpen ? (
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
        ) : (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        )}
      </button>

      {/* Painel do menu mobile */}
      {isMobile && menuOpen && (
        <div style={{
          position: "fixed", top: 64, left: 0, right: 0, bottom: 0, zIndex: 49,
          background: "rgba(11,31,26,.98)", backdropFilter: "blur(14px)",
          padding: "24px 24px 40px", display: "flex", flexDirection: "column", gap: 6,
          animation: "b-mobile-menu 220ms cubic-bezier(.2,.7,.2,1)",
          overflowY: "auto",
        }}>
          {links.map((it) => (
            <a key={it} href={linkHref(it)} onClick={() => setMenuOpen(false)} style={{
              color: "#fff", textDecoration: "none",
              font: "600 20px/1.2 'Plus Jakarta Sans'", padding: "18px 8px",
              borderBottom: "1px solid rgba(255,255,255,.08)",
              letterSpacing: "-0.01em",
            }}>{it}</a>
          ))}
          <div style={{ display: "grid", gap: 10, marginTop: 22 }}>
            <BBtn variant="whatsapp" icon="whatsapp" size="lg" as="a"
              href={typeof buildWaLink === "function" ? buildWaLink("Olá! Quero o diagnóstico grátis do meu imóvel.") : "#cta"}
              target="_blank" rel="noopener"
              onClick={() => setMenuOpen(false)}
              style={{ justifyContent: "center" }}>
              Falar no WhatsApp
            </BBtn>
            <BBtn variant="ghostDark" size="lg" as="a" href="#cta" icon="arrow"
              onClick={() => setMenuOpen(false)}
              style={{ justifyContent: "center" }}>
              Solicitar diagnóstico
            </BBtn>
          </div>
          <div style={{ marginTop: 28, color: "rgba(255,255,255,.55)", fontSize: 13.5 }}>
            (21) 99714-7447 · contato@potencialimovel.com.br
          </div>
        </div>
      )}

      <style>{`
        @keyframes b-mobile-menu { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
        @media (max-width: 900px) {
          header > nav, header > div:nth-of-type(2) { display: none !important; }
          header .b-mobile-menu-btn { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
};

const BFloatingCTA = () => (
  <a href={typeof buildWaLink === "function" ? buildWaLink() : "#cta"}
    target="_blank" rel="noopener"
    aria-label="Fale conosco no WhatsApp"
    style={{
    position: "fixed", right: 22, bottom: 22, zIndex: 60,
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "14px 18px 14px 14px", borderRadius: 999,
    background: "#25D366", color: "#0B3D33",
    font: "700 14px/1 'Plus Jakarta Sans'",
    textDecoration: "none",
    boxShadow: "0 18px 40px rgba(11, 31, 26, .32), 0 4px 10px rgba(11,31,26,.18)",
    transition: "transform 200ms cubic-bezier(.2,.7,.2,1)",
  }}
  onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; }}
  onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; }}
  >
    <span style={{
      width: 34, height: 34, borderRadius: "50%",
      background: "#0B3D33", display: "grid", placeItems: "center", color: "#25D366",
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M19.05 4.91A10 10 0 0 0 4.84 19.27L4 22l2.83-.83A10 10 0 1 0 19.05 4.91Zm-3.06 8.93c-.25-.13-1.45-.71-1.67-.79s-.39-.13-.55.13c-.16.25-.63.79-.78.95s-.29.18-.54.06a6.6 6.6 0 0 1-3.26-2.85c-.25-.43.25-.4.71-1.32a.45.45 0 0 0 0-.42c-.06-.13-.55-1.32-.75-1.81s-.4-.42-.55-.42h-.47a.9.9 0 0 0-.66.31 2.74 2.74 0 0 0-.86 2c0 1.18.86 2.32 1 2.49s1.7 2.61 4.13 3.66c.58.25 1.03.4 1.38.51a3.33 3.33 0 0 0 1.52.1c.46-.07 1.45-.59 1.65-1.16a2 2 0 0 0 .15-1.16c-.06-.11-.23-.18-.49-.31Z"/>
      </svg>
    </span>
    Fale conosco no WhatsApp
  </a>
);

const BFooter = () => (
  <footer style={{ background: B_TOKENS.ink, color: "rgba(255,255,255,.7)", padding: "48px 56px 36px" }}>
    <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48, marginBottom: 36 }}>
      <div>
        <BLockup asLink />
        <p style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 18, maxWidth: 320 }}>
          Assessoria que estrutura imóveis para venda: arquitetura, engenharia e análise financeira em laudos técnicos e projetos prontos para o corretor entregar.
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 22, flexWrap: "wrap" }}>
          <BBtn variant="whatsapp" icon="whatsapp" size="sm" as="a"
            href={typeof buildWaLink === "function" ? buildWaLink() : "#cta"}
            target="_blank" rel="noopener">WhatsApp</BBtn>
          <BBtn variant="ghostDark" icon="none" size="sm" as="a" href="mailto:contato@potencialimovel.com.br">contato@potencialimovel.com.br</BBtn>
        </div>
      </div>
      {[
        { t: "Soluções", l: ["Planta do imóvel", "Planta humanizada", "Imagens 3D", "Preço da obra", "Projeto executivo"] },
        { t: "Pacotes",  l: ["Venda rápida", "Venda inteligente", "Transformação total", "Para imobiliárias"] },
        { t: "Empresa",  l: [
          { label: "Resultados", href: "#resultados" },
          { label: "Como funciona", href: "#como-funciona" },
          { label: "Instagram", href: "https://instagram.com/potencial_imovel", ext: true },
        ] },
      ].map((c) => (
        <div key={c.t}>
          <div style={{ font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".2em", textTransform: "uppercase", color: B_TOKENS.mint, marginBottom: 16 }}>{c.t}</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
            {c.l.map((i) => {
              const label = typeof i === "string" ? i : i.label;
              const href = typeof i === "string" ? null : i.href;
              return (
                <li key={label} style={{ fontSize: 13.5 }}>
                  {href ? (
                    <a href={href} target={i.ext ? "_blank" : undefined} rel={i.ext ? "noopener" : undefined}
                      style={{ color: "inherit", textDecoration: "none", transition: "color 160ms" }}
                      onMouseEnter={(e) => { e.currentTarget.style.color = B_TOKENS.mint; }}
                      onMouseLeave={(e) => { e.currentTarget.style.color = "inherit"; }}
                    >{label}</a>
                  ) : label}
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </div>
    <div style={{ borderTop: "1px solid rgba(255,255,255,.08)", paddingTop: 22, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12, fontSize: 12.5 }}>
      <span>© 2026 Potencial Imóvel</span>
      <a href="https://instagram.com/potencial_imovel" target="_blank" rel="noopener"
        style={{
          display: "inline-flex", alignItems: "center", gap: 8, color: "inherit", textDecoration: "none",
          font: "700 13px/1 'Plus Jakarta Sans'", letterSpacing: "-0.005em",
          padding: "8px 14px", borderRadius: 999, border: "1px solid rgba(255,255,255,.16)",
          transition: "color 160ms, border-color 160ms",
        }}
        onMouseEnter={(e) => { e.currentTarget.style.color = B_TOKENS.mint; e.currentTarget.style.borderColor = "rgba(93,202,165,.5)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.color = "inherit"; e.currentTarget.style.borderColor = "rgba(255,255,255,.16)"; }}
      >
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.2" fill="currentColor" stroke="none"/>
        </svg>
        @potencial_imovel
      </a>
      <span>Rio de Janeiro · atendimento RJ + SP</span>
    </div>
  </footer>
);

// Reveal — plain wrapper. Animation removed to ensure SSR/headless renderers
// (html-to-image, screenshot tools, some webviews) always see fully visible content.
const BReveal = ({ children, style }) => (
  <div style={style}>{children}</div>
);

Object.assign(window, { B_TOKENS, BMark, BLockup, BEyebrow, BBtn, BHeader, BFloatingCTA, BFooter, BReveal });