/* Plan B — Como funciona (4 steps) + Depoimentos + FAQ + CTA final */

const BHowItWorks = () => {
  const steps = [
    { n: "01", t: "Diagnóstico em 24h", d: "Você envia 3 fotos pelo WhatsApp. A gente devolve o cenário técnico e financeiro do imóvel, sem custo." },
    { n: "02", t: "Briefing de 30 min",  d: "Vídeochamada para entender o histórico do imóvel, perfil do comprador-alvo e a estratégia de venda da imobiliária." },
    { n: "03", t: "Levantamento técnico", d: "Visita ao imóvel com arquiteto e engenheiro. Medição, fotos técnicas e leitura de patologias estruturais." },
    { n: "04", t: "Entrega dos documentos",       d: "Em até 14 dias, todos os laudos e projetos são entregues. O corretor já anexa no próximo e-mail." },
  ];
  return (
    <section id="como-funciona" data-screen-label="Como funciona" style={{
      background: "#fff", padding: "100px 56px",
    }}>
      <BReveal>
        <div style={{ maxWidth: 720, margin: "0 0 56px" }}>
          <BEyebrow>Como funciona</BEyebrow>
          <h2 style={{
            font: "700 56px/1.02 'Plus Jakarta Sans'", letterSpacing: "-0.03em",
            color: B_TOKENS.deep, margin: "16px 0 16px", textWrap: "balance",
          }}>
            Do WhatsApp ao documento assinado, em 14 dias.
          </h2>
          <p style={{ fontSize: 17, color: B_TOKENS.muted, margin: 0, lineHeight: 1.55 }}>
            Sem follow-up insistente, sem orçamento que demora uma semana. Tudo programado e datado.
          </p>
        </div>
      </BReveal>

      <div style={{ position: "relative" }}>
        <div style={{
          position: "absolute", top: 36, left: "5%", right: "5%", height: 2,
          background: "linear-gradient(90deg, transparent 0%, " + B_TOKENS.accent + " 8%, " + B_TOKENS.accent + " 92%, transparent 100%)",
          opacity: .25, zIndex: 0,
        }}></div>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative", zIndex: 1,
        }}>
          {steps.map((s, i) => (
            <BReveal key={s.n} delay={i * 100}>
              <div>
                <div style={{
                  width: 72, height: 72, borderRadius: "50%",
                  background: B_TOKENS.surface, border: "2px solid " + B_TOKENS.accent,
                  display: "grid", placeItems: "center",
                  font: "800 22px/1 'Plus Jakarta Sans'", color: B_TOKENS.deep,
                  letterSpacing: "-0.02em", marginBottom: 22,
                  position: "relative",
                }}>
                  {s.n}
                  {i === 0 && (
                    <span style={{
                      position: "absolute", top: -4, right: -4, width: 14, height: 14, borderRadius: "50%",
                      background: B_TOKENS.accent, boxShadow: "0 0 0 4px rgba(29,158,117,.18)",
                    }}></span>
                  )}
                </div>
                <h3 style={{ font: "700 22px/1.2 'Plus Jakarta Sans'", letterSpacing: "-0.015em", color: B_TOKENS.deep, margin: "0 0 10px" }}>{s.t}</h3>
                <p style={{ fontSize: 14.5, color: B_TOKENS.muted, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
              </div>
            </BReveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const BTestimonials = () => {
  const items = [
    {
      q: "Tinha um apto que estava 8 meses no portal sem proposta séria. Com a planta humanizada e as imagens ambientadas mudamos a história do anúncio — vendeu em 47 dias, no preço pedido.",
      a: "Juliana M.", role: "",
      stat: { l: "Tempo de venda", v: "47 dias" },
    },
    {
      q: "O cliente queria reformar antes de vender, mas tinha dúvida do retorno. O estudo da Potencial Imóvel mostrou + R$ 320k de valorização com investimento de R$ 341k. Reformamos.",
      a: "Rafael A.", role: "",
      stat: { l: "Valorização real", v: "+ R$ 320k" },
    },
    {
      q: "Eles entregam o material no padrão certo, com a marca da imobiliária. A gente só repassa pro cliente. Em 4 meses, virou nossa rotina pra qualquer imóvel acima de 800k.",
      a: "Mônica B.", role: "",
      stat: { l: "Imóveis assessorados", v: "28 em 2025" },
    },
  ];
  return (
    <section id="resultados" data-screen-label="Resultados" style={{
      background: B_TOKENS.surface, padding: "100px 56px",
    }}>
      <BReveal>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 48 }}>
          <div>
            <BEyebrow>Resultados em campo</BEyebrow>
            <h2 style={{
              font: "700 48px/1.05 'Plus Jakarta Sans'", letterSpacing: "-0.025em",
              color: B_TOKENS.deep, margin: "16px 0 0", maxWidth: 720, textWrap: "balance",
            }}>
              Quem tem argumento técnico fecha mais rápido.
            </h2>
          </div>
          <span style={{
            font: "700 12px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase",
            padding: "10px 16px", borderRadius: 999, background: "#fff", border: "1px solid " + B_TOKENS.rule,
            color: B_TOKENS.deep,
          }}>★ 4,9 / 5 · 36 clientes em 2025</span>
        </div>
      </BReveal>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {items.map((it, i) => (
          <BReveal key={it.a} delay={i * 90}>
            <div style={{
              background: "#fff", borderRadius: 20, padding: 32, height: "100%",
              border: "1px solid " + B_TOKENS.rule,
              display: "flex", flexDirection: "column", gap: 24,
              position: "relative", overflow: "hidden",
            }}>
              <svg width="40" height="32" viewBox="0 0 40 32" fill={B_TOKENS.mint} aria-hidden="true" style={{ opacity: .35 }}>
                <path d="M0 32V18.4C0 7.6 6 1.6 14.4 0v6.4C9.6 8 7.2 12 7.2 16.4H14.4V32H0Zm25.6 0V18.4C25.6 7.6 31.6 1.6 40 0v6.4c-4.8 1.6-7.2 5.6-7.2 10H40V32H25.6Z"/>
              </svg>
              <p style={{
                font: "500 17px/1.55 'Plus Jakarta Sans'", color: B_TOKENS.deep,
                margin: 0, letterSpacing: "-0.005em", textWrap: "pretty", flex: 1,
              }}>{it.q}</p>
              <div style={{
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
                paddingTop: 22, borderTop: "1px dashed " + B_TOKENS.rule,
              }}>
                <div>
                  <div style={{ font: "700 14px/1.2 'Plus Jakarta Sans'", color: B_TOKENS.deep, letterSpacing: "-0.005em" }}>{it.a}</div>
                  {it.role ? <div style={{ fontSize: 12.5, color: B_TOKENS.muted, marginTop: 4 }}>{it.role}</div> : null}
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase", color: B_TOKENS.primary }}>{it.stat.l}</div>
                  <div style={{ font: "800 22px/1 'Plus Jakarta Sans'", letterSpacing: "-0.02em", color: B_TOKENS.accent, marginTop: 4 }}>{it.stat.v}</div>
                </div>
              </div>
            </div>
          </BReveal>
        ))}
      </div>
    </section>
  );
};

const BFaq = () => {
  const items = [
    { q: "Em quanto tempo recebo os documentos?", a: "Os pacotes Venda rápida e Venda inteligente entregam em até 14 dias úteis. O Transformação total leva até 21 dias por incluir o projeto executivo de arquitetura. Diagnóstico inicial sai em 24h pelo WhatsApp." },
    { q: "E se o material não me convencer?", a: "Você acompanha o processo de perto e pode pedir ajustes do material até ele ficar no padrão que precisa para apresentar ao cliente." },
    { q: "Vocês colocam a marca da minha imobiliária?", a: "Sim. Todos os documentos são entregues em co-branding com a sua imobiliária — logo, cor, dados de contato. O cliente recebe um material que reforça a sua marca, não a nossa." },
    { q: "Atendem fora do Rio de Janeiro?", a: "Hoje a operação técnica (levantamento presencial) é Rio de Janeiro e Niterói. As demais localizações sob consulta de disponibilidade ou fazemos assessoria remota a partir de plantas e fotos enviadas." },
    { q: "Preciso ter cadastro CRECI?", a: "Não. Atendemos corretores autônomos, imobiliárias e proprietários diretos. O fluxo de aprovação e branding adapta para cada caso." },
    { q: "Como pago e parcelo?", a: "Pix com 5% de desconto, ou cartão em até 10x sem juros. Faturamos contra a empresa ou pessoa física — emitimos NF e relatórios fiscais padronizados." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: "#fff", padding: "100px 56px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "flex-start" }}>
        <BReveal>
          <div style={{ position: "sticky", top: 120 }}>
            <BEyebrow>Perguntas frequentes</BEyebrow>
            <h2 style={{
              font: "700 44px/1.05 'Plus Jakarta Sans'", letterSpacing: "-0.025em",
              color: B_TOKENS.deep, margin: "16px 0 18px", textWrap: "balance",
            }}>
              Ainda em dúvida? Boa — significa que você lê com atenção.
            </h2>
            <p style={{ fontSize: 16, color: B_TOKENS.muted, lineHeight: 1.55, margin: "0 0 22px" }}>
              Se sua pergunta não estiver aqui, manda pelo WhatsApp.
            </p>
            <BBtn variant="dark" size="md" as="a" href="#cta">Fazer minha pergunta</BBtn>
          </div>
        </BReveal>
        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <BReveal key={i} delay={i * 40}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: "100%", textAlign: "left", background: "transparent",
                  borderTop: i === 0 ? "1px solid " + B_TOKENS.rule : "none",
                  borderLeft: "none", borderRight: "none",
                  borderBottom: "1px solid " + B_TOKENS.rule,
                  padding: "26px 0", cursor: "pointer", color: B_TOKENS.deep,
                  display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24,
                }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ font: "700 19px/1.35 'Plus Jakarta Sans'", letterSpacing: "-0.015em", textWrap: "balance" }}>{it.q}</div>
                    {isOpen && (
                      <div style={{
                        fontSize: 15, color: B_TOKENS.muted, lineHeight: 1.6, marginTop: 14, maxWidth: 640,
                        animation: "b-fade-in 240ms cubic-bezier(.2,.7,.2,1)",
                      }}>{it.a}</div>
                    )}
                  </div>
                  <span style={{
                    flex: "none", width: 36, height: 36, borderRadius: "50%",
                    background: isOpen ? B_TOKENS.deep : B_TOKENS.surface,
                    color: isOpen ? "#fff" : B_TOKENS.deep,
                    display: "grid", placeItems: "center",
                    transition: "transform 240ms cubic-bezier(.2,.7,.2,1), background 200ms",
                    transform: isOpen ? "rotate(45deg)" : "none",
                  }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14"/></svg>
                  </span>
                </button>
              </BReveal>
            );
          })}
        </div>
      </div>
      <style>{`
        @keyframes b-fade-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
      `}</style>
    </section>
  );
};

/* Número do WhatsApp da operação — todos os CTAs do site apontam pra cá.
   Formato wa.me: 55 (BR) + DDD + número, só dígitos. Edite aqui pra trocar. */
const B_WA_NUMBER = "5521997147447";

const buildWaLink = (msg) => {
  const text = encodeURIComponent(msg || "Olá! Quero o diagnóstico grátis da Potencial Imóvel.");
  return `https://wa.me/${B_WA_NUMBER}?text=${text}`;
};

const BFinalCTA = () => {
  const [form, setForm] = React.useState({ name: "", phone: "", address: "", role: "Sou corretor" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [photos, setPhotos] = React.useState([]);

  const FIELDS = [
    { k: "name",    l: "Seu nome",            p: "Ex.: Carolina Andrade",                type: "text",  required: true },
    { k: "phone",   l: "WhatsApp",            p: "(21) 99999-0000",                       type: "tel",   required: true },
    { k: "address", l: "Endereço do imóvel",  p: "Bairro, cidade · ex.: Copacabana, RJ",  type: "text",  required: true },
  ];

  // Máscara simples de telefone brasileiro
  // Aceita entrada com código do país (55) e remove pra evitar truncar o final do número.
  const maskPhone = (v) => {
    let d = v.replace(/\D/g, "");
    // Se o usuário digitou com código do país (12 ou 13 dígitos iniciando em 55), tira o 55.
    if (d.length > 11 && d.startsWith("55")) d = d.slice(2);
    d = d.slice(0, 11);
    if (d.length <= 2) return d.length ? `(${d}` : "";
    if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`;
    if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
    return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
  };

  const update = (k, v) => {
    setForm((f) => ({ ...f, [k]: k === "phone" ? maskPhone(v) : v }));
    if (errors[k]) setErrors((e) => ({ ...e, [k]: false }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = {};
    FIELDS.forEach((f) => { if (f.required && !form[f.k].trim()) errs[f.k] = true; });
    // valida WhatsApp: precisa ter ao menos 10 dígitos
    if (!errs.phone && form.phone.replace(/\D/g, "").length < 10) errs.phone = true;
    setErrors(errs);
    if (Object.keys(errs).length) return;

    const msg =
      `Olá, Potencial Imóvel! Quero meu diagnóstico grátis.\n\n` +
      `• Nome: ${form.name}\n` +
      `• WhatsApp: ${form.phone}\n` +
      `• Imóvel: ${form.address}\n` +
      `• Perfil: ${form.role}` +
      (photos.length ? `\n• Tenho ${photos.length} foto(s) do imóvel para enviar aqui no WhatsApp.` : "");
    window.open(buildWaLink(msg), "_blank", "noopener");
    setSent(true);
  };

  return (
    <section id="cta" data-screen-label="CTA final" style={{
      background: B_TOKENS.ink, color: "#fff", padding: "112px 56px",
      position: "relative", overflow: "hidden", scrollMarginTop: 80,
    }}>
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none", opacity: .9,
        background:
          "radial-gradient(60% 60% at 20% 20%, rgba(29,158,117,.18) 0%, rgba(29,158,117,0) 60%)," +
          "radial-gradient(50% 50% at 80% 80%, rgba(93,202,165,.14) 0%, rgba(93,202,165,0) 60%)",
      }}></div>

      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 72, alignItems: "center" }}>
        <BReveal>
          <div>
            <BEyebrow color={B_TOKENS.mint}>Vamos começar</BEyebrow>
            <h2 style={{
              font: "700 64px/1.02 'Plus Jakarta Sans'", letterSpacing: "-0.035em",
              margin: "20px 0 24px", textWrap: "balance",
            }}>
              Esse imóvel já podia ter sido vendido <span style={{ color: B_TOKENS.mint, whiteSpace: "nowrap" }}>semana passada</span>.
            </h2>
            <p style={{ fontSize: 19, color: "rgba(255,255,255,.74)", maxWidth: 560, lineHeight: 1.55, margin: "0 0 32px" }}>
              Diagnóstico em 24h pelo WhatsApp. A gente olha o imóvel, manda o cenário e você decide. Sem custo, sem compromisso, sem ligações de vendedor.
            </p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <BBtn variant="whatsapp" icon="whatsapp" size="lg" as="a"
                href={buildWaLink("Olá! Quero mandar fotos do imóvel pelo WhatsApp pra receber o diagnóstico.")}
                target="_blank" rel="noopener">
                Mandar fotos no WhatsApp
              </BBtn>
              <BBtn variant="ghostDark" size="lg" icon="arrow" as="a"
                href={buildWaLink("Olá! Tenho interesse em ser parceiro (imobiliária/corretor) da Potencial Imóvel.")}
                target="_blank" rel="noopener">
                Quero ser parceiro
              </BBtn>
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 24, color: "rgba(255,255,255,.82)", fontSize: 13.5, flexWrap: "wrap" }}>
              {[
                { l: "(21) 99714-7447",                href: buildWaLink("Olá! Quero o diagnóstico grátis da Potencial Imóvel."), ext: true,
                  icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 5a2 2 0 0 1 2-2h2.6a1 1 0 0 1 1 .8l.9 4a1 1 0 0 1-.3 1L7.8 10.4a14 14 0 0 0 5.8 5.8l1.6-1.4a1 1 0 0 1 1-.3l4 .9a1 1 0 0 1 .8 1V19a2 2 0 0 1-2 2A18 18 0 0 1 3 5z"/></svg> },
                { l: "contato@potencialimovel.com.br", href: "mailto:contato@potencialimovel.com.br", ext: false,
                  icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg> },
                { l: "potencialimovel.com.br",         href: "https://potencialimovel.com.br/", ext: true,
                  icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg> },
              ].map((c) => (
                <a key={c.l} href={c.href} target={c.ext ? "_blank" : undefined} rel={c.ext ? "noopener" : undefined}
                  style={{
                    display: "inline-flex", alignItems: "center", gap: 8,
                    color: "inherit", textDecoration: "none",
                    transition: "color 160ms",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = B_TOKENS.mint; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(255,255,255,.82)"; }}
                >
                  <span style={{ color: B_TOKENS.mint, display: "inline-flex" }}>{c.icon}</span>
                  {c.l}
                </a>
              ))}
            </div>
          </div>
        </BReveal>

        <BReveal delay={120} y={32}>
          <form onSubmit={handleSubmit} noValidate style={{
            background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.12)",
            borderRadius: 22, padding: 32, backdropFilter: "blur(10px)",
          }}>
            <span style={{
              display: "inline-block",
              font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".22em", textTransform: "uppercase",
              color: B_TOKENS.mint, padding: "7px 12px", borderRadius: 999, background: "rgba(93,202,165,.12)",
            }}>Formulário expresso · 45s</span>

            {sent ? (
              <div style={{ textAlign: "center", padding: "32px 0 12px" }}>
                <div style={{
                  width: 64, height: 64, borderRadius: "50%", background: "rgba(93,202,165,.18)",
                  color: B_TOKENS.mint, display: "grid", placeItems: "center", margin: "12px auto 22px",
                }}>
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 12 9 17 20 6"/></svg>
                </div>
                <h3 style={{ font: "700 26px/1.2 'Plus Jakarta Sans'", letterSpacing: "-0.02em", margin: "0 0 10px" }}>
                  Conversa aberta no WhatsApp
                </h3>
                <p style={{ fontSize: 15, color: "rgba(255,255,255,.7)", margin: "0 0 24px", lineHeight: 1.5 }}>
                  Se a janela do WhatsApp não abrir, toque no botão abaixo. A gente responde em até 24h úteis.
                </p>
                <BBtn variant="whatsapp" icon="whatsapp" size="lg" as="a"
                  href={buildWaLink(
                    `Olá, Potencial Imóvel! Quero meu diagnóstico grátis.\n\n` +
                    `• Nome: ${form.name}\n• WhatsApp: ${form.phone}\n• Imóvel: ${form.address}\n• Perfil: ${form.role}`
                  )}
                  target="_blank" rel="noopener" style={{ justifyContent: "center" }}>
                  Abrir WhatsApp
                </BBtn>
                <div style={{ marginTop: 16 }}>
                  <button type="button" onClick={() => { setSent(false); setForm({ name:"", phone:"", address:"", role:"Sou corretor" }); setPhotos([]); }} style={{
                    background: "transparent", border: "none", color: "rgba(255,255,255,.55)",
                    font: "600 13px/1 'Plus Jakarta Sans'", cursor: "pointer", textDecoration: "underline", textUnderlineOffset: 4,
                  }}>Enviar outro imóvel</button>
                </div>
              </div>
            ) : (
              <React.Fragment>
                <h3 style={{ font: "700 26px/1.2 'Plus Jakarta Sans'", letterSpacing: "-0.02em", margin: "22px 0 6px" }}>
                  Conta sobre o imóvel
                </h3>
                <p style={{ fontSize: 14, color: "rgba(255,255,255,.6)", margin: "0 0 24px" }}>
                  Devolvemos cenário em até 24h úteis.
                </p>
                <div style={{ display: "grid", gap: 12 }}>
                  {FIELDS.map((f) => {
                    const err = errors[f.k];
                    return (
                      <label key={f.k} style={{ display: "grid", gap: 6 }}>
                        <span style={{ font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase", color: err ? "#FFB4A8" : "rgba(255,255,255,.6)" }}>
                          {f.l}{err ? " · preencha este campo" : ""}
                        </span>
                        <input
                          type={f.type}
                          name={f.k}
                          value={form[f.k]}
                          onChange={(e) => update(f.k, e.target.value)}
                          placeholder={f.p}
                          autoComplete={f.k === "phone" ? "tel" : f.k === "name" ? "name" : "off"}
                          inputMode={f.k === "phone" ? "tel" : "text"}
                          aria-invalid={!!err}
                          style={{
                            background: "rgba(255,255,255,.06)",
                            border: "1px solid " + (err ? "rgba(255,180,168,.6)" : "rgba(255,255,255,.16)"),
                            borderRadius: 10, padding: "14px 16px", color: "#fff",
                            font: "500 16px/1 'Plus Jakarta Sans'", outline: "none",
                            width: "100%", boxSizing: "border-box",
                            transition: "border-color 160ms",
                          }}
                          onFocus={(e) => { e.currentTarget.style.borderColor = B_TOKENS.mint; }}
                          onBlur={(e)  => { e.currentTarget.style.borderColor = err ? "rgba(255,180,168,.6)" : "rgba(255,255,255,.16)"; }}
                        />
                      </label>
                    );
                  })}
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
                    {["Sou corretor", "Sou proprietário", "Imobiliária"].map((c) => {
                      const active = form.role === c;
                      return (
                        <button key={c} type="button"
                          onClick={() => setForm((f) => ({ ...f, role: c }))}
                          aria-pressed={active}
                          style={{
                            padding: "9px 14px", borderRadius: 999,
                            background: active ? B_TOKENS.accent : "rgba(255,255,255,.05)",
                            border: "1px solid " + (active ? B_TOKENS.accent : "rgba(255,255,255,.16)"),
                            color: active ? "#fff" : "rgba(255,255,255,.82)",
                            font: "600 12.5px/1 'Plus Jakarta Sans'", cursor: "pointer",
                            transition: "background 160ms, border-color 160ms",
                          }}>{c}</button>
                      );
                    })}
                  </div>
                  <div style={{ display: "grid", gap: 6, marginTop: 4, position: "relative" }}>
                    <span style={{ font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(255,255,255,.6)" }}>
                      Fotos do imóvel · opcional
                    </span>
                    <div style={{
                      display: "flex", alignItems: "center", gap: 12,
                      background: "rgba(255,255,255,.06)", border: "1px dashed rgba(255,255,255,.24)",
                      borderRadius: 10, padding: "13px 16px",
                    }}>
                      <span style={{
                        flex: "none", width: 34, height: 34, borderRadius: 8, background: "rgba(93,202,165,.14)",
                        color: B_TOKENS.mint, display: "grid", placeItems: "center",
                      }}>
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="m21 17-5-5L7 21"/></svg>
                      </span>
                      <span style={{ flex: 1, fontSize: 13.5, color: photos.length ? "#fff" : "rgba(255,255,255,.55)" }}>
                        {photos.length ? `${photos.length} foto(s) selecionada(s)` : "Anexar fotos do imóvel"}
                      </span>
                      <input
                        type="file" accept="image/*" multiple
                        onChange={(e) => setPhotos(Array.from(e.target.files || []))}
                        style={{
                          position: "absolute", width: 1, height: 1, opacity: 0, overflow: "hidden",
                        }}
                        id="b-photos"
                      />
                      <label htmlFor="b-photos" style={{
                        cursor: "pointer", padding: "8px 14px", borderRadius: 999,
                        background: "rgba(255,255,255,.1)", border: "1px solid rgba(255,255,255,.2)",
                        color: "#fff", font: "700 12px/1 'Plus Jakarta Sans'",
                      }}>Escolher</label>
                    </div>
                    <span style={{ fontSize: 11.5, color: "rgba(255,255,255,.45)", lineHeight: 1.5 }}>
                      Você anexa as fotos direto na conversa do WhatsApp que vai abrir — é só arrastar ou tocar no clipe 📎.
                    </span>
                  </div>
                  <button type="submit" style={{
                    marginTop: 12, justifyContent: "center",
                    display: "inline-flex", alignItems: "center", gap: 10, borderRadius: 999,
                    cursor: "pointer", textDecoration: "none", letterSpacing: ".01em",
                    background: B_TOKENS.accent, color: "#fff", border: "1px solid transparent",
                    padding: "18px 28px", font: "700 16px/1 'Plus Jakarta Sans'",
                    transition: "transform 160ms cubic-bezier(.2,.7,.2,1), background 180ms",
                  }}
                  onMouseDown={(e) => { e.currentTarget.style.transform = "translateY(1px)"; }}
                  onMouseUp={(e) => { e.currentTarget.style.transform = "none"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; }}
                  >
                    Solicitar diagnóstico grátis
                    <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>
                  </button>
                  <p style={{ fontSize: 12, color: "rgba(255,255,255,.45)", margin: "8px 0 0", lineHeight: 1.5, textAlign: "center" }}>
                    Ao enviar, você é redirecionado pro nosso WhatsApp com a mensagem pronta. Sem cadastro, sem spam.
                  </p>
                </div>
              </React.Fragment>
            )}
          </form>
        </BReveal>
      </div>
    </section>
  );
};

Object.assign(window, { BHowItWorks, BTestimonials, BFaq, BFinalCTA, B_WA_NUMBER, buildWaLink });