/* Plan B — Serviços (compact dynamic grid) + Pacotes (3 tiers, parcela em destaque) */

const B_SERVICES = [
  { n: "01", name: "Planta do imóvel", short: "Vistoria técnica no local para medição e registro do estado real da edificação.", href: "assets/docs/01-planta-levantamento.pdf", days: "4 dias", install: "10x R$ 150", total: "R$ 1.500" },
  { n: "02", name: "Planta humanizada",  short: "Planta colorida, muito mais atrativa, que apresenta sugestão de layout, revestimentos, cores e texturas.", sub: "Inclui o serviço de Levantamento (01).", href: "assets/docs/02-planta-humanizada.pdf", days: "5 dias", install: "10x R$ 250", total: "R$ 2.500", hot: true },
  { n: "03", name: "Imagens 3D",         short: "Processo de \u201cdar vida\u201d e realismo a um projeto digital.", sub: "Fotos ambientadas de cada ambiente.", href: "assets/docs/03-imagens-3d.pdf", days: "5 dias", install: "10x R$ 360", total: "R$ 3.600", hot: true },
  { n: "04", name: "Preço da obra",      short: "Orçamento detalhado em 7 etapas.", sub: "Obra civil · Instalações · Revestimentos · Acabamentos · Louças e metais · Pintura · Projetos e taxas.", href: "assets/docs/04-preco-obra.pdf", days: "6 dias", install: "10x R$ 320", total: "R$ 3.200" },
  { n: "05", name: "Projeto de arquitetura personalizado", short: "Com escritórios renomados de arquitetura.", sub: "Levantamento + planta humanizada + imagens realísticas de cada ambiente.", href: "assets/docs/05-projeto-arquitetura.pdf", days: "7–10 dias", install: "10x R$ 900", total: "R$ 9.000" },
  { n: "06", name: "Laudo de instalações", short: "Elétrica, hidráulica e estado do imóvel.", href: "assets/docs/06-laudo-instalacoes.pdf", days: "4 dias", install: "10x R$ 200", total: "R$ 2.000" },
  { n: "07", name: "Rentabilidade Airbnb", short: "Estudo da receita anual e mensal do imóvel.", href: "assets/docs/07-rentabilidade-temporada.pdf", days: "2 dias", install: "10x R$ 120", total: "R$ 1.200" },
  { n: "08", name: "Valor de mercado",   short: "Avaliação + comparativo com imóveis próximos de características semelhantes.", href: "assets/docs/08-valor-mercado.pdf", days: "2 dias", install: "10x R$ 220", total: "R$ 2.200" },
];

const BServiceCard = ({ s, i }) => (
  <BReveal delay={i * 40}>
    <a href={s.href} target="_blank" rel="noopener" style={{
      background: s.hot ? B_TOKENS.deep : "#fff",
      color: s.hot ? "#fff" : B_TOKENS.deep,
      border: "1px solid " + (s.hot ? B_TOKENS.deep : B_TOKENS.rule),
      borderRadius: 18, padding: "26px 24px",
      position: "relative", overflow: "hidden",
      display: "flex", flexDirection: "column", gap: 14,
      minHeight: 260, textDecoration: "none",
      transition: "transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms",
      cursor: "pointer",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 24px 40px rgba(11,31,26,.12)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span style={{
          font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".22em",
          color: s.hot ? B_TOKENS.mint : B_TOKENS.muted,
        }}>{s.n}</span>
        {s.hot && (
          <span style={{
            font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase",
            padding: "5px 9px", borderRadius: 999, background: B_TOKENS.accent, color: "#fff",
          }}>Mais pedido</span>
        )}
      </div>
      <h3 style={{
        font: "700 22px/1.18 'Plus Jakarta Sans'", letterSpacing: "-0.015em",
        margin: 0, color: s.hot ? "#fff" : B_TOKENS.deep,
      }}>{s.name}</h3>
      <p style={{ fontSize: 13.5, lineHeight: 1.5, color: s.hot ? "rgba(255,255,255,.74)" : B_TOKENS.muted, margin: 0 }}>
        {s.short}
        {s.sub && (
          <span style={{
            display: "block", marginTop: 4,
            font: "600 12px/1.4 'Plus Jakarta Sans'",
            color: s.hot ? "rgba(255,255,255,.56)" : B_TOKENS.muted, opacity: .85,
          }}>{s.sub}</span>
        )}
      </p>

      <div style={{
        marginTop: "auto", paddingTop: 16,
        borderTop: "1px dashed " + (s.hot ? "rgba(255,255,255,.16)" : B_TOKENS.rule),
        display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 8,
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 5 }}>
            <span style={{ font: "700 10.5px/1 'Plus Jakarta Sans'", letterSpacing: ".04em", color: s.hot ? B_TOKENS.mint : B_TOKENS.accent }}>
              {s.install.split(" ")[0]}
            </span>
            <span style={{ font: "700 22px/1 'Plus Jakarta Sans'", letterSpacing: "-0.015em", color: s.hot ? "#fff" : B_TOKENS.deep }}>
              {s.install.split(" ").slice(1).join(" ")}
            </span>
          </div>
          <div style={{ fontSize: 11.5, color: s.hot ? "rgba(255,255,255,.58)" : B_TOKENS.muted, marginTop: 4 }}>
            ou {s.total} no total
          </div>
        </div>
        <span style={{
          font: "700 10px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase",
          padding: "5px 8px", borderRadius: 4,
          background: s.hot ? "rgba(255,255,255,.1)" : B_TOKENS.surface,
          color: s.hot ? "rgba(255,255,255,.78)" : B_TOKENS.primary,
          border: "1px solid " + (s.hot ? "rgba(255,255,255,.12)" : B_TOKENS.rule),
          display: "inline-flex", alignItems: "center", gap: 5,
        }}>{s.days}
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8"/></svg>
        </span>
      </div>
    </a>
  </BReveal>
);

const BServicesSection = () => (
  <section id="servi-os" data-screen-label="Serviços" style={{
    background: B_TOKENS.surface, padding: "96px 56px",
  }}>
    <BReveal>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 40 }}>
        <div>
          <BEyebrow>O que entregamos</BEyebrow>
          <h2 style={{
            font: "700 56px/1.02 'Plus Jakarta Sans'", letterSpacing: "-0.03em",
            color: B_TOKENS.deep, margin: "16px 0 16px", maxWidth: 720, textWrap: "balance",
          }}>
            Oito serviços. Oito documentos.<br/>Um argumento técnico para cada objeção.
          </h2>
          <p style={{ fontSize: 17, color: B_TOKENS.muted, maxWidth: 640, margin: 0, lineHeight: 1.55 }}>
            Os <strong style={{ color: B_TOKENS.deep }}>laudos técnicos e projetos de arquitetura</strong> vão prontos para anexar por e-mail. E serão usados como argumentos técnicos nas visitas para eliminar as objeções e responder as dúvidas mais comuns.
          </p>
        </div>
        <BBtn variant="light" size="md" as="a" href="#cta">Ver tabela completa</BBtn>
      </div>
    </BReveal>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
      {B_SERVICES.map((s, i) => <BServiceCard key={s.n} s={s} i={i} />)}
    </div>
  </section>
);

const B_PACOTES = [
  {
    tag: "Básico", name: "Venda rápida",
    install: "10x R$ 370", total: "R$ 3.700",
    desc: "Profissionaliza o anúncio. Ancora o preço com dados reais.",
    bullets: ["Planta do imóvel", "Análise valor de mercado"],
    ribbon: null,
  },
  {
    tag: "Mais contratado", name: "Venda inteligente",
    install: "10x R$ 940", total: "R$ 9.400",
    desc: "Mostra o potencial — não só o estado atual. Comprador enxerga o que pode ser.",
    bullets: ["Planta do imóvel", "Planta humanizada", "Fotos ambientadas", "Preço da obra", "Análise valor de mercado"],
    ribbon: "Vende 60% mais rápido",
    highlight: true,
  },
  {
    tag: "Premium", name: "Transformação total",
    install: "10x R$ 2.160", total: "R$ 21.600",
    desc: "Para imóveis encalhados ou de alto padrão que precisam de argumento completo.",
    bullets: ["Tudo do Venda inteligente", "Projeto de arquitetura personalizado", "Laudo de instalações elétricas, hidráulicas e estado do imóvel", "Rentabilidade aluguel temporada"],
    ribbon: null,
  },
];

const BPackages = () => (
  <section id="pacotes" data-screen-label="Pacotes" style={{
    background: B_TOKENS.ink, color: "#fff", padding: "100px 56px",
    position: "relative", overflow: "hidden",
  }}>
    <div style={{
      position: "absolute", left: "50%", top: -200, width: 800, height: 800, borderRadius: "50%",
      background: "radial-gradient(closest-side, rgba(93,202,165,.10), rgba(93,202,165,0))",
      transform: "translateX(-50%)", pointerEvents: "none",
    }}></div>

    <BReveal>
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <BEyebrow color={B_TOKENS.mint}>Pacotes</BEyebrow>
        <h2 style={{
          font: "700 56px/1.02 'Plus Jakarta Sans'", letterSpacing: "-0.03em",
          margin: "16px 0 16px", textWrap: "balance",
        }}>
          Escolha o formato que faz sentido<br/>para esse imóvel agora.
        </h2>
        <p style={{ fontSize: 17, color: "rgba(255,255,255,.7)", maxWidth: 580, margin: "0 auto", lineHeight: 1.55 }}>
          Parcelamos em até 10x sem juros no cartão. Entrega completa em até 14 dias úteis.
        </p>
      </div>
    </BReveal>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, alignItems: "stretch", position: "relative" }}>
      {B_PACOTES.map((p, i) => (
        <BReveal key={p.name} delay={i * 80}>
          <div style={{
            background: p.highlight ? B_TOKENS.surface : "rgba(255,255,255,.04)",
            color: p.highlight ? B_TOKENS.deep : "#fff",
            border: p.highlight ? "2px solid " + B_TOKENS.accent : "1px solid rgba(255,255,255,.12)",
            borderRadius: 22, padding: p.highlight ? 31 : 32,
            position: "relative", height: "100%",
            display: "flex", flexDirection: "column", gap: 16,
            transform: p.highlight ? "translateY(-10px)" : "none",
            boxShadow: p.highlight ? "0 30px 60px rgba(0,0,0,.4)" : "none",
          }}>
            {p.ribbon && (
              <span style={{
                position: "absolute", top: -14, left: 24,
                font: "700 10.5px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase",
                padding: "8px 14px", borderRadius: 999, background: B_TOKENS.accent, color: "#fff",
                boxShadow: "0 6px 14px rgba(29,158,117,.4)",
              }}>{p.ribbon}</span>
            )}
            <span style={{
              alignSelf: "flex-start",
              padding: "6px 12px", borderRadius: 999,
              background: p.highlight ? B_TOKENS.deep : "rgba(255,255,255,.08)",
              color: p.highlight ? "#fff" : B_TOKENS.mint,
              font: "700 11px/1 'Plus Jakarta Sans'", letterSpacing: ".14em", textTransform: "uppercase",
            }}>{p.tag}</span>

            <h3 style={{ font: "700 30px/1.1 'Plus Jakarta Sans'", letterSpacing: "-0.02em", margin: 0 }}>{p.name}</h3>

            <div>
              <div style={{ font: "700 10.5px/1 'Plus Jakarta Sans'", letterSpacing: ".18em", textTransform: "uppercase",
                color: p.highlight ? B_TOKENS.muted : "rgba(255,255,255,.5)", marginBottom: 8 }}>A partir de</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ font: "700 16px/1 'Plus Jakarta Sans'", color: B_TOKENS.accent }}>
                  {p.install.split(" ")[0]}
                </span>
                <span style={{
                  font: "800 44px/1 'Plus Jakarta Sans'", letterSpacing: "-0.025em",
                  color: p.highlight ? B_TOKENS.deep : "#fff",
                }}>
                  {p.install.split(" ").slice(1).join(" ")}
                </span>
              </div>
              <div style={{ fontSize: 13, color: p.highlight ? B_TOKENS.muted : "rgba(255,255,255,.55)", marginTop: 6 }}>
                ou {p.total} no total
              </div>
            </div>

            <p style={{ fontSize: 14.5, color: p.highlight ? B_TOKENS.muted : "rgba(255,255,255,.72)", lineHeight: 1.5, margin: "0 0 4px" }}>{p.desc}</p>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 10 }}>
              {p.bullets.map((b, j) => (
                <li key={j} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14 }}>
                  <span style={{
                    flex: "none", width: 18, height: 18, borderRadius: "50%",
                    background: p.highlight ? B_TOKENS.accent : "rgba(93,202,165,.18)",
                    color: p.highlight ? "#fff" : B_TOKENS.mint,
                    display: "grid", placeItems: "center", marginTop: 2,
                  }}>
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 12 9 17 20 6"/></svg>
                  </span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: "auto", paddingTop: 18 }}>
              <BBtn variant={p.highlight ? "primary" : "ghostDark"} size="md" as="a" href="#cta">
                {p.highlight ? "Quero esse pacote" : "Falar com a equipe"}
              </BBtn>
            </div>
          </div>
        </BReveal>
      ))}
    </div>

    <BReveal>
      <div style={{
        marginTop: 48, padding: "24px 28px", borderRadius: 16,
        background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.1)",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <span style={{
            width: 44, height: 44, borderRadius: "50%", background: "rgba(93,202,165,.14)", color: B_TOKENS.mint,
            display: "grid", placeItems: "center",
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
          </span>
          <div>
            <div style={{ font: "700 16px/1.2 'Plus Jakarta Sans'", letterSpacing: "-0.01em" }}>Garantia · Documento aprovado ou refazemos</div>
            <div style={{ fontSize: 13.5, color: "rgba(255,255,255,.65)", marginTop: 4 }}>Em até 7 dias você pede ajustes do material até ficar no padrão que você precisa.</div>
          </div>
        </div>
        <BBtn variant="whatsapp" icon="whatsapp" size="md" as="a" href="#cta">Quero diagnóstico grátis</BBtn>
      </div>
    </BReveal>
  </section>
);

Object.assign(window, { BServicesSection, BPackages, B_SERVICES, B_PACOTES });