/* Plan B — Hero (dark + floating before/after card), stat strip with animated counters,
   logo marquee */

const useCountUp = (target, { duration = 1400, decimals = 0 } = {}) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const t0 = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
      else setVal(target);
    };
    raf = requestAnimationFrame(tick);
    return () => raf && cancelAnimationFrame(raf);
  }, [target, duration]);
  return [ref, decimals ? val.toFixed(decimals) : Math.round(val)];
};

const BHero = () => {
  // Mini before/after for the floating card
  const [pos, setPos] = React.useState(56);
  return (
    <section data-screen-label="Hero" id="topo" style={{
      background: B_TOKENS.surface,
      color: B_TOKENS.ink, padding: "56px 56px 84px",
      position: "relative", overflow: "hidden",
    }}>
      {/* Decorative grid */}
      <svg width="100%" height="100%" aria-hidden="true" style={{
        position: "absolute", inset: 0, opacity: 0.5, pointerEvents: "none",
      }}>
        <defs>
          <pattern id="b-grid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M48 0H0V48" fill="none" stroke={B_TOKENS.deep} strokeWidth=".5" strokeOpacity=".06"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#b-grid)"/>
      </svg>
      <div style={{
        position: "absolute", right: -120, top: -80, width: 520, height: 520, borderRadius: "50%",
        background: "radial-gradient(closest-side, rgba(29,158,117,.10), rgba(29,158,117,0))", pointerEvents: "none",
      }}></div>

      <div style={{
        position: "relative", display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 56, alignItems: "center",
        minHeight: 540,
      }}>
        <div>
          <BReveal>
            <BEyebrow>Assessoria técnica · Rio de Janeiro</BEyebrow>
          </BReveal>
          <BReveal delay={80}>
            <h1 style={{
              fontSize: 76, lineHeight: 1.02, fontWeight: 700, letterSpacing: "-0.035em",
              margin: "22px 0 22px", textWrap: "balance", color: B_TOKENS.ink,
            }}>
              O imóvel parado precisa de <span style={{ color: B_TOKENS.accent }}>argumentos técnicos</span>, não de mais foto.
            </h1>
          </BReveal>
          <BReveal delay={160}>
            <p style={{
              fontSize: 19, lineHeight: 1.55, color: B_TOKENS.muted,
              maxWidth: 560, margin: "0 0 32px",
            }}>
              Arquitetura, engenharia e análise financeira no mesmo lugar. Em até <strong style={{ color: B_TOKENS.deep }}>14 dias</strong>, entregamos os laudos técnicos e projetos de arquitetura que o corretor anexa no e-mail e responde às objeções dos clientes com dados.
            </p>
          </BReveal>
          <BReveal delay={220}>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
              <BBtn variant="primary" size="lg" as="a" href="#cta">Solicitar diagnóstico grátis</BBtn>
              <BBtn variant="light" size="lg" icon="none" as="a" href="#antes-e-depois">
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: "50%", background: "rgba(29,158,117,.12)",
                    display: "grid", placeItems: "center",
                  }}>
                    <svg width="10" height="12" viewBox="0 0 10 12" fill={B_TOKENS.accent}><path d="M0 0v12l10-6L0 0Z"/></svg>
                  </span>
                  Ver antes & depois
                </span>
              </BBtn>
            </div>
          </BReveal>
          <BReveal delay={280}>
            <div style={{ display: "flex", gap: 18, alignItems: "center", marginTop: 26, color: B_TOKENS.muted, fontSize: 13.5 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: B_TOKENS.accent, boxShadow: "0 0 0 4px rgba(29,158,117,.16)" }}></span>
                Resposta em 24h
              </span>
              <span>· Sem custo · Sem compromisso</span>
            </div>
          </BReveal>
        </div>

        {/* Floating before/after card */}
        <BReveal delay={140} y={32}>
          <div style={{
            position: "relative",
            transform: "rotate(0.6deg)",
            filter: "drop-shadow(0 32px 64px rgba(0,0,0,.42))",
          }}>
            <div style={{
              background: "#fff", borderRadius: 22, padding: 18,
              border: "1px solid " + B_TOKENS.rule,
              boxShadow: "0 32px 64px rgba(11,31,26,.16)",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                <span style={{
                  font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
                  color: B_TOKENS.deep, padding: "6px 10px", borderRadius: 999, background: "#E1F5EE",
                }}>Fotos ambientadas · PI001</span>
                <span style={{ font: "600 11px/1 'Plus Jakarta Sans'", color: "#6B7F77" }}>5 dias úteis</span>
              </div>

              <div style={{
                position: "relative", borderRadius: 14, overflow: "hidden",
                height: 360, background: "#0B1F1A", touchAction: "none",
              }}
                onMouseMove={(e) => {
                  const rect = e.currentTarget.getBoundingClientRect();
                  setPos(Math.max(8, Math.min(92, ((e.clientX - rect.left) / rect.width) * 100)));
                }}
                onTouchMove={(e) => {
                  const t = e.touches[0]; if (!t) return;
                  const rect = e.currentTarget.getBoundingClientRect();
                  setPos(Math.max(8, Math.min(92, ((t.clientX - rect.left) / rect.width) * 100)));
                }}
              >
                <img src="assets/produtos/case-quarto-depois.jpeg" alt="" style={{
                  position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
                }} />
                <img src="assets/produtos/case-quarto-antes.jpeg" alt="" style={{
                  position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
                  clipPath: `inset(0 ${100 - pos}% 0 0)`,
                }} />
                {/* labels */}
                <span style={{
                  position: "absolute", top: 12, left: 12,
                  font: "700 9.5px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
                  padding: "6px 9px", borderRadius: 4, background: "rgba(11,31,26,.72)", color: "#fff", backdropFilter: "blur(4px)",
                }}>Antes</span>
                <span style={{
                  position: "absolute", top: 12, right: 12,
                  font: "700 9.5px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
                  padding: "6px 9px", borderRadius: 4, background: B_TOKENS.accent, color: "#fff",
                }}>Depois</span>
                {/* localização */}
                <span style={{
                  position: "absolute", bottom: 12, left: 12,
                  display: "inline-flex", alignItems: "center", gap: 6,
                  font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".04em",
                  padding: "7px 11px", borderRadius: 999, background: "rgba(11,31,26,.66)",
                  color: "#fff", backdropFilter: "blur(6px)", border: "1px solid rgba(255,255,255,.16)",
                }}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={B_TOKENS.mint} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12Z"/><circle cx="12" cy="9" r="2.4"/></svg>
                  Copacabana
                </span>
                {/* divider */}
                <div style={{
                  position: "absolute", top: 0, bottom: 0, left: `${pos}%`,
                  width: 2, background: "#FAF6EE", boxShadow: "0 0 0 1px rgba(0,0,0,.18)",
                  transform: "translateX(-1px)",
                }}>
                  <span style={{
                    position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)",
                    width: 38, height: 38, borderRadius: "50%", background: "#FAF6EE",
                    display: "grid", placeItems: "center",
                    boxShadow: "0 6px 18px rgba(0,0,0,.28)",
                  }}>
                    <svg width="16" height="14" viewBox="0 0 24 20" fill="none" stroke={B_TOKENS.deep} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M9 4 L3 10 L9 16 M15 4 L21 10 L15 16"/></svg>
                  </span>
                </div>
              </div>
              <div style={{
                display: "flex", justifyContent: "space-between", marginTop: 14, padding: "0 4px",
                fontSize: 12.5, color: B_TOKENS.deep,
              }}>
                <span>Quarto · projeto personalizado</span>
                <span style={{ fontWeight: 700 }}>Mesmo ambiente, ambientado</span>
              </div>
            </div>

            {/* Side card overlay */}
            <div style={{
              position: "absolute", bottom: -28, left: -28,
              background: "#0B1F1A", color: "#fff", borderRadius: 16, padding: "16px 18px",
              border: "1px solid rgba(93,202,165,.32)", minWidth: 220,
              boxShadow: "0 20px 40px rgba(0,0,0,.35)",
              transform: "rotate(-2deg)",
            }}>
              <div style={{ font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", color: B_TOKENS.mint, textTransform: "uppercase" }}>Tempo de venda</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 8 }}>
                <span style={{ font: "700 13px/1 'Plus Jakarta Sans'", color: "rgba(255,255,255,.5)", textDecoration: "line-through" }}>94 dias</span>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={B_TOKENS.mint} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                <span style={{ font: "800 30px/1 'Plus Jakarta Sans'", color: "#fff", letterSpacing: "-0.02em" }}>38</span>
                <span style={{ fontSize: 12, color: "rgba(255,255,255,.6)" }}>dias</span>
              </div>
            </div>
          </div>
        </BReveal>
      </div>
    </section>
  );
};

const BStat = ({ num, suffix = "", prefix = "", label, sublabel }) => {
  const [ref, val] = useCountUp(num);
  return (
    <div ref={ref}>
      <div style={{
        font: "700 56px/1 'Plus Jakarta Sans'", letterSpacing: "-0.03em", color: B_TOKENS.deep,
        display: "inline-flex", alignItems: "baseline", gap: 2,
      }}>
        <span style={{ color: B_TOKENS.muted, fontSize: 28, fontWeight: 700, marginRight: 2 }}>{prefix}</span>
        {val}
        <span style={{ color: B_TOKENS.accent, marginLeft: 4 }}>{suffix}</span>
      </div>
      <div style={{ font: "700 12px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase", color: B_TOKENS.primary, marginTop: 14 }}>{label}</div>
      {sublabel && <div style={{ fontSize: 13.5, color: B_TOKENS.muted, marginTop: 8 }}>{sublabel}</div>}
    </div>
  );
};

const BStatStrip = () => (
  <section style={{ background: B_TOKENS.surface, padding: "72px 56px", borderTop: "1px solid " + B_TOKENS.rule }}>
    <BReveal>
      <BEyebrow>Os números que importam</BEyebrow>
      <h2 style={{
        font: "700 38px/1.05 'Plus Jakarta Sans'", letterSpacing: "-0.02em", color: B_TOKENS.deep,
        margin: "16px 0 8px", maxWidth: 820,
      }}>
        Imóveis com laudos técnicos e projetos de arquitetura vendem mais rápido e por melhor preço.
      </h2>
      <p style={{ fontSize: 16, color: B_TOKENS.muted, maxWidth: 620, margin: 0 }}>
        Média de 228 imóveis assessorados na Zona Sul carioca (abr/2025 – abr/2026).
      </p>
    </BReveal>
    <div style={{
      display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 56,
      borderTop: "1px solid " + B_TOKENS.rule, borderBottom: "1px solid " + B_TOKENS.rule,
    }}>
      {[
        { num: 60, suffix: "%", label: "Mais rápido para vender", sublabel: "Tempo médio caiu de 94 → 38 dias após estruturar o material técnico." },
        { num: 18, prefix: "+", suffix: "%", label: "No preço pedido", sublabel: "Com os nossos documentos técnicos que reforçam o argumento de valorização do imóvel, vendedor mantém ticket mais alto." },
        { num: 3,  suffix: "×", label: "Mais visitas agendadas", sublabel: "Anúncio com imagens realísticas do projeto de arquitetura personalizado para o imóvel e planta humanizada convertem mais leads." },
        { num: 14, label: "Dias úteis · entrega", sublabel: "Pacote completo: levantamento, projeto, orçamento, viabilidade." },
      ].map((s, i) => (
        <div key={i} style={{
          padding: "40px 32px",
          borderRight: i < 3 ? "1px solid " + B_TOKENS.rule : "none",
        }}>
          <BStat {...s} />
        </div>
      ))}
    </div>
  </section>
);

const BLogoMarquee = () => {
  const logos = ["Refúgios Urbanos", "Lopes Rio", "Casa Forte", "Coelho da Fonseca", "Living Imóveis", "Vinci Realty", "Bossa Nova", "Tom Imóveis", "Pleno Imóveis"];
  return (
    <section style={{ background: B_TOKENS.ink, color: "rgba(255,255,255,.9)", padding: "32px 0", overflow: "hidden", borderTop: "1px solid rgba(255,255,255,.04)", borderBottom: "1px solid rgba(255,255,255,.04)" }}>
      <style>{`
        @keyframes b-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
        .b-marquee-track { display: inline-flex; gap: 64px; animation: b-marquee 38s linear infinite; padding-right: 64px; }
      `}</style>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}>
        <span style={{ font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".24em", textTransform: "uppercase", color: B_TOKENS.mint }}>
          Imobiliárias que entregam mais com a gente
        </span>
      </div>
      <div style={{ whiteSpace: "nowrap" }}>
        <div className="b-marquee-track">
          {[...logos, ...logos].map((l, i) => (
            <span key={i} style={{
              font: "600 22px/1 'Plus Jakarta Sans'", letterSpacing: "-0.01em", color: "rgba(255,255,255,.62)",
              display: "inline-flex", alignItems: "center", gap: 14,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: B_TOKENS.mint, opacity: .5 }}></span>
              {l}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { BHero, BStatStrip, BLogoMarquee, useCountUp });