/* Contato — dark final section */

const ContatoSection = () => (
  <section style={{ background: "#085041", color: "#fff", padding: "80px 80px 100px" }}>
    <PIEyebrow dark>Vamos começar?</PIEyebrow>
    <h2 style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.02em", color: "#fff", margin: "12px 0 12px", maxWidth: 980 }}>
      Estruture seu próximo imóvel para uma venda mais efetiva.
    </h2>
    <p style={{ fontSize: 17, color: "rgba(255,255,255,.7)", maxWidth: 720, margin: "0 0 40px" }}>
      Entre em contato e receba uma proposta personalizada em até 24 horas.
    </p>

    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 460px))", gap: 14, marginBottom: 36 }}>
      <ContactField label="E-mail" value="contato@potencialimovel.com.br" />
      <ContactField label="Instagram" value="@potencialimovel" />
      <ContactField label="Site" value="potencialimovel.com.br" />
      <ContactField label="WhatsApp" value="(11) 99999-0000" />
    </div>

    <div style={{ display: "flex", gap: 12 }}>
      <PIButton variant="primary">Solicitar proposta →</PIButton>
      <PIButton variant="secondary">Ver portfólio novamente</PIButton>
    </div>
  </section>
);

const ContactField = ({ label, value }) => (
  <div style={{ padding: "16px 18px", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 12 }}>
    <div style={{ fontSize: 12, color: "rgba(255,255,255,.65)", marginBottom: 4 }}>{label}</div>
    <div style={{ fontSize: 17, fontWeight: 600 }}>{value}</div>
  </div>
);

Object.assign(window, { ContatoSection });