/* Plan B — Antes/Depois big interactive comparison, then "Para corretor / Para proprietário" split */

const BBeforeAfter = () => {
  const [pos, setPos] = React.useState(48);
  const dragging = React.useRef(false);
  const onMove = (clientX, rect) => {
    setPos(Math.max(4, Math.min(96, ((clientX - rect.left) / rect.width) * 100)));
  };
  return (
    <section id="antes-e-depois" data-screen-label="Antes e depois" style={{
      background: B_TOKENS.surface, padding: "100px 56px 88px",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 40 }}>
        <BReveal>
          <div>
            <BEyebrow>Veja o que muda com o nosso trabalho</BEyebrow>
            <h2 style={{
              font: "700 56px/1.02 'Plus Jakarta Sans'", letterSpacing: "-0.03em",
              color: B_TOKENS.deep, margin: "16px 0 18px", maxWidth: 820, textWrap: "balance",
            }}>
              Mesmo imóvel, nova apresentação que valoriza o imóvel.
            </h2>
            <p style={{ fontSize: 18, color: B_TOKENS.muted, maxWidth: 620, margin: 0, lineHeight: 1.55 }}>
              Arraste para ver a transformação que o anúncio passa a comunicar. Mesmo imóvel, mesma metragem — outro argumento.
            </p>
          </div>
        </BReveal>
        <BReveal delay={80}>
          <div style={{ display: "flex", gap: 8 }}>
            <span style={{
              padding: "10px 16px", borderRadius: 999, border: "1px solid " + B_TOKENS.rule,
              background: "#fff", font: "700 12px/1 'Plus Jakarta Sans'", letterSpacing: ".14em",
              textTransform: "uppercase", color: B_TOKENS.deep,
            }}>Caso real · Leblon</span>
          </div>
        </BReveal>
      </div>

      <BReveal y={32}>
        <div
          style={{
            position: "relative", borderRadius: 20, overflow: "hidden", height: 580,
            background: "#0B1F1A", border: "1px solid " + B_TOKENS.rule, cursor: "ew-resize",
            boxShadow: "0 24px 60px rgba(11,31,26,.18)", touchAction: "none",
          }}
          onMouseMove={(e) => onMove(e.clientX, e.currentTarget.getBoundingClientRect())}
          onMouseDown={() => (dragging.current = true)}
          onMouseUp={() => (dragging.current = false)}
          onTouchMove={(e) => { const t = e.touches[0]; if (t) onMove(t.clientX, e.currentTarget.getBoundingClientRect()); }}
        >
          <img src="assets/produtos/case-sala-depois.jpeg" alt="" style={{
            position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block",
          }} />
          <img src="assets/produtos/case-sala-antes.jpeg" alt="" style={{
            position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
            clipPath: `inset(0 ${100 - pos}% 0 0)`,
          }} />

          {/* Side gradients for label legibility */}
          <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
            background: "linear-gradient(180deg, rgba(11,31,26,.32) 0%, transparent 22%, transparent 78%, rgba(11,31,26,.42) 100%)" }}></div>

          {/* Antes label */}
          <div className="ba-tagwrap" style={{
            position: "absolute", top: 24, left: 24,
            display: "flex", flexDirection: "column", gap: 6,
          }}>
            <span style={{
              font: "700 10.5px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
              padding: "8px 12px", borderRadius: 4, background: "rgba(11,31,26,.62)", color: "#fff", backdropFilter: "blur(6px)",
              alignSelf: "flex-start",
            }}>Antes<span className="ba-q"> · estado atual</span></span>
            <span className="ba-sub" style={{ fontSize: 12, color: "rgba(255,255,255,.78)", paddingLeft: 4 }}>
              Anúncio com 12 visitas em 60 dias
            </span>
          </div>

          {/* Depois label */}
          <div className="ba-tagwrap" style={{
            position: "absolute", top: 24, right: 24,
            display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-end",
          }}>
            <span style={{
              font: "700 10.5px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
              padding: "8px 12px", borderRadius: 4, background: B_TOKENS.accent, color: "#fff",
              alignSelf: "flex-end",
            }}>Depois<span className="ba-q"> · imagens ambientadas</span></span>
            <span className="ba-sub" style={{ fontSize: 12, color: "rgba(255,255,255,.78)", paddingRight: 4 }}>
              38 visitas em 30 dias · vendido em 60
            </span>
          </div>

          {/* bottom info chips */}
          <div className="ba-bottom" style={{
            position: "absolute", bottom: 24, left: 24, right: 24,
            display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12,
          }}>
            <div className="ba-docchips" style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {[
                { c: "Levantamento", href: "assets/docs/01-planta-levantamento.pdf" },
                { c: "Planta humanizada", href: "assets/docs/02-planta-humanizada.pdf" },
                { c: "Fotos ambientadas", href: "assets/docs/03-imagens-3d.pdf" },
                { c: "Preço da obra", href: "assets/docs/04-preco-obra.pdf" },
              ].map(({ c, href }) => (
                <a key={c} href={href} target="_blank" rel="noopener" style={{
                  font: "600 11px/1 'Plus Jakarta Sans'", padding: "8px 12px", borderRadius: 999,
                  background: "rgba(11,31,26,.55)", color: "#fff", backdropFilter: "blur(6px)",
                  border: "1px solid rgba(255,255,255,.18)", textDecoration: "none",
                  display: "inline-flex", alignItems: "center", gap: 6,
                  transition: "background 160ms",
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = B_TOKENS.accent; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(11,31,26,.55)"; }}
                >{c}
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8"/></svg>
                </a>
              ))}
            </div>
            <span style={{
              font: "700 13px/1 'Plus Jakarta Sans'", padding: "10px 14px", borderRadius: 8,
              background: "rgba(250,246,238,.95)", color: B_TOKENS.deep, letterSpacing: "-0.005em",
            }}>
              + R$ 320k de valorização projetada
            </span>
          </div>

          {/* Divider handle */}
          <div style={{
            position: "absolute", top: 0, bottom: 0, left: `${pos}%`,
            width: 3, background: "#FAF6EE", transform: "translateX(-1.5px)",
            boxShadow: "0 0 0 1px rgba(0,0,0,.18)",
          }}>
            <span style={{
              position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)",
              width: 56, height: 56, borderRadius: "50%", background: "#FAF6EE",
              display: "grid", placeItems: "center",
              boxShadow: "0 12px 36px rgba(0,0,0,.32)",
            }}>
              <svg width="22" height="18" 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>
      </BReveal>

      {/* Result row */}
      <BReveal delay={100}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, marginTop: 32,
          background: B_TOKENS.rule, borderRadius: 14, overflow: "hidden",
          border: "1px solid " + B_TOKENS.rule,
        }}>
          {[
            { l: "Visitas / mês", v1: "6", v2: "38", up: true },
            { l: "Tempo até venda", v1: "94 dias", v2: "60 dias", up: true },
            { l: "Preço de fechamento", v1: "R$ 1,02M", v2: "R$ 1,18M", up: true },
            { l: "Investimento PI", v1: "—", v2: "R$ 9.400", neutral: true },
          ].map((r, i) => (
            <div key={i} style={{ background: "#fff", padding: "20px 22px" }}>
              <div style={{ font: "700 10.5px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase", color: B_TOKENS.muted, marginBottom: 10 }}>{r.l}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ font: "600 14px/1 'Plus Jakarta Sans'", color: B_TOKENS.muted, textDecoration: r.neutral ? "none" : "line-through" }}>{r.v1}</span>
                {!r.neutral && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={B_TOKENS.accent} strokeWidth="3" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>}
                <span style={{ font: "700 26px/1 'Plus Jakarta Sans'", color: B_TOKENS.deep, letterSpacing: "-0.02em" }}>{r.v2}</span>
              </div>
            </div>
          ))}
        </div>
      </BReveal>
    </section>
  );
};

const BAudienceSplit = () => {
  const [aud, setAud] = React.useState("corretor");
  const data = {
    corretor: {
      tag: "Para corretor",
      h: "O cliente chega com objeção. Você responde com argumento técnico.",
      sub: "Receba os 8 documentos em até 14 dias, anexe por e-mail e troque foto bonita por argumento técnico — sem perder o cliente.",
      bullets: [
        "A Planta de Levantamento · responde a objeção \"mas qual o tamanho real do imóvel e dos ambientes?\"",
        "As Imagens Ambientadas · respondem a objeção \"mas como eu poderia arrumar esse ambiente?\"",
        "Preço da obra · responde \"vai dar trabalho?\"",
        "Valor de mercado · embasa o preço pedido",
      ],
      cta: "Quero apresentar meus imóveis melhor",
      image: "assets/produtos/corretor-sala-depois.jpeg",
      local: "Barra da Tijuca",
      stat: { l: "Conversão cliente → visita", v: "38%", sub: "média entre corretores parceiros" },
    },
    proprietario: {
      tag: "Para proprietário",
      h: "Seu imóvel não está caro. Está mal apresentado.",
      sub: "Mostramos o potencial — não só o estado atual. Você descobre quanto vale, quanto custa transformar e quanto se ganha. Em documento, pronto pra negociar.",
      bullets: [
        "A Avaliação técnica do imóvel determina e justifica o valor justo do imóvel",
        "O Projeto de Arquitetura personalizado revela o potencial do imóvel, agrega valor e convence os futuros compradores",
        "Orçamento detalhado · sem surpresa de obra",
        "O Estudo de Airbnb mostra cenário de renda anual e mensal do imóvel",
      ],
      cta: "Quero entender o potencial do meu imóvel",
      image: "assets/produtos/proprietario-quarto-depois.jpeg",
      local: "Ipanema",
      stat: { l: "Valorização média", v: "+ 18%", sub: "sobre o preço pedido inicial" },
    },
  };
  const a = data[aud];
  return (
    <section style={{ background: "#fff", padding: "96px 56px" }}>
      <BReveal>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 40 }}>
          <div>
            <BEyebrow>Para quem é</BEyebrow>
            <h2 style={{ font: "700 44px/1.05 'Plus Jakarta Sans'", letterSpacing: "-0.025em", color: B_TOKENS.deep, margin: "16px 0 0", maxWidth: 720 }}>
              Corretores e Proprietários, pois resolvemos os dois lados da venda.
            </h2>
          </div>
          <div style={{
            display: "inline-flex", padding: 4, borderRadius: 999, background: B_TOKENS.surface, border: "1px solid " + B_TOKENS.rule,
          }}>
            {[
              { id: "corretor", l: "Sou corretor" },
              { id: "proprietario", l: "Sou proprietário" },
            ].map((t) => (
              <button key={t.id} onClick={() => setAud(t.id)} style={{
                padding: "11px 22px", borderRadius: 999, border: "none", cursor: "pointer",
                background: aud === t.id ? B_TOKENS.deep : "transparent",
                color: aud === t.id ? "#fff" : B_TOKENS.deep,
                font: "700 13.5px/1 'Plus Jakarta Sans'",
                transition: "background 200ms",
              }}>{t.l}</button>
            ))}
          </div>
        </div>
      </BReveal>

      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
        border: "1px solid " + B_TOKENS.rule, borderRadius: 20, overflow: "hidden",
        background: "#fff", minHeight: 480,
      }}>
        <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "space-between", borderRight: "1px solid " + B_TOKENS.rule, background: B_TOKENS.surface }}>
          <div>
            <span style={{
              font: "700 10.5px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
              padding: "7px 12px", borderRadius: 999, background: B_TOKENS.deep, color: "#fff",
            }}>{a.tag}</span>
            <h3 style={{
              font: "700 36px/1.1 'Plus Jakarta Sans'", letterSpacing: "-0.02em",
              color: B_TOKENS.deep, margin: "22px 0 14px", textWrap: "balance",
            }}>{a.h}</h3>
            <p style={{ fontSize: 16, color: B_TOKENS.muted, lineHeight: 1.55, maxWidth: 480, margin: "0 0 26px" }}>{a.sub}</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
              {a.bullets.map((b, i) => (
                <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 14.5, color: B_TOKENS.deep }}>
                  <span style={{
                    flex: "none", width: 22, height: 22, borderRadius: "50%", background: B_TOKENS.accent, color: "#fff",
                    display: "grid", placeItems: "center",
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 12 9 17 20 6"/></svg>
                  </span>
                  <span style={{ marginTop: 2 }}>{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ marginTop: 32 }}>
            <BBtn variant="dark" size="md" as="a" href="#cta">{a.cta}</BBtn>
          </div>
        </div>
        <div style={{ position: "relative", background: "#0B1F1A" }}>
          <img src={a.image} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          <span style={{
            position: "absolute", top: 24, left: 24,
            display: "inline-flex", alignItems: "center", gap: 7,
            font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".06em",
            padding: "9px 14px", borderRadius: 999, background: "rgba(11,31,26,.62)",
            color: "#fff", backdropFilter: "blur(6px)", border: "1px solid rgba(255,255,255,.16)",
          }}>
            <svg width="12" height="12" 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>
            {a.local}
          </span>
          <div style={{
            position: "absolute", left: 32, bottom: 32,
            background: "rgba(11,31,26,.78)", color: "#fff", borderRadius: 14, padding: "18px 22px",
            backdropFilter: "blur(10px)", border: "1px solid rgba(255,255,255,.14)",
            display: "flex", flexDirection: "column", gap: 6,
          }}>
            <span style={{ font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase", color: B_TOKENS.mint }}>{a.stat.l}</span>
            <span style={{ font: "800 42px/1 'Plus Jakarta Sans'", letterSpacing: "-0.02em" }}>{a.stat.v}</span>
            <span style={{ fontSize: 12, color: "rgba(255,255,255,.7)" }}>{a.stat.sub}</span>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { BBeforeAfter, BAudienceSplit });