/* Pacotes — 3 tiered packages. Plano mensal removido. */

const PACOTES = [
  { tag: "Básico", tagColor: "#EEE7FB", tagFg: "#5C3DAA",
    name: "Venda rápida", priceFrom: "R$ 3.700", install: "10x R$ 370",
    bullets: ["Planta do imóvel", "Análise valor de mercado"],
    foot: "Profissionaliza o anúncio e ancora o preço com dados reais." },
  { tag: "Mais contratado", tagColor: "#DCF1E7", tagFg: "#0F6E56", highlight: true,
    name: "Venda inteligente", priceFrom: "R$ 9.400", install: "10x R$ 940",
    bullets: ["Planta do imóvel", "Planta reformada humanizada", "Preço da obra", "Análise valor de mercado"],
    foot: "Mostra o potencial do imóvel, não só o estado atual. O comprador enxerga o que pode ser." },
  { tag: "Premium", tagColor: "#EEE7FB", tagFg: "#5C3DAA",
    name: "Transformação total", priceFrom: "R$ 21.600", install: "10x R$ 2.160",
    bullets: ["Todos os serviços anteriores", "Projeto arquitetura com 3D", "Laudo instalações e infra", "Rentabilidade aluguel temporada"],
    foot: "Para imóveis encalhados ou de alto padrão que precisam de argumento completo." },
];

const PacoteCard = ({ p }) => (
  <div style={{
    background: "#fff",
    border: p.highlight ? "2px solid #1D9E75" : "1px solid #E4ECE8",
    padding: p.highlight ? 27 : 28,
    borderRadius: 16,
    color: "#0B3D33",
    display: "flex",
    flexDirection: "column",
    gap: 14,
  }}>
    <span style={{
      alignSelf: "flex-start",
      padding: "5px 12px", borderRadius: 999,
      background: p.tagColor, color: p.tagFg,
      font: "700 11px 'Plus Jakarta Sans'", letterSpacing: ".04em",
    }}>{p.tag}</span>
    <div style={{ fontWeight: 700, fontSize: 24 }}>{p.name}</div>
    <div>
      <div style={{ fontSize: 11, color: "#7E9990", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600, marginBottom: 4 }}>
        A partir de
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
        <span style={{ font: "700 14px/1 'Plus Jakarta Sans'", color: "#1D9E75", letterSpacing: "0.02em" }}>
          {p.install.split(" ")[0]}
        </span>
        <span style={{ fontWeight: 700, fontSize: 32, color: "#1D9E75", letterSpacing: "-0.01em", lineHeight: 1 }}>
          {p.install.split(" ").slice(1).join(" ")}
        </span>
      </div>
      <div style={{ fontSize: 12.5, color: "#7E9990", marginTop: 6, fontWeight: 500 }}>
        ou {p.priceFrom} no total
      </div>
    </div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }}>
      {p.bullets.map((b, i) => (
        <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14 }}>
          <PICheck size={18} /><span style={{ marginTop: 1 }}>{b}</span>
        </li>
      ))}
    </ul>
    <div style={{ fontSize: 13.5, color: "#4A6B5E", marginTop: 6 }}>{p.foot}</div>
  </div>
);

const PacotesSection = () => (
  <section style={{ background: "#fff", padding: "72px 80px" }}>
    <PIEyebrow>Pacotes</PIEyebrow>
    <h2 style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.02em", color: "#0B3D33", margin: "12px 0 12px" }}>Escolha o formato ideal</h2>
    <p style={{ fontSize: 17, color: "#4A6B5E", maxWidth: 720, margin: "0 0 40px" }}>
      Combinamos os serviços para estruturar melhor a comercialização do imóvel. Parcelamos em até 10x sem juros no cartão.
    </p>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
      {PACOTES.map((p) => <PacoteCard key={p.name} p={p} />)}
    </div>
  </section>
);

Object.assign(window, { PacotesSection, PacoteCard, PACOTES });