// sections-mid.jsx — Offer + Benefits

function Offer() {
  return (
    <section className="offer dc-reveal" data-screen-label="04 Oferta">
      <div className="offer__inner">
        <div className="offer__copy">
          <div className="eyebrow">A Oportunidade</div>
          <h2 className="offer__title">
            Seu lote no <em>Primavera 2</em>, com condições que cabem no seu bolso.
          </h2>
          <p>
            O Loteamento Primavera 2 fica em uma das regiões que mais cresce em
            Ponta Porã-MS. Ruas pavimentadas, energia, água e toda a documentação
            em ordem — pronto para você começar a construir o seu sonho.
          </p>
          <p>
            E a melhor parte: você sai do aluguel pagando uma parcela que cabe
            no orçamento. Conversa comigo no WhatsApp que eu te explico tudinho,
            sem enrolação.
          </p>
        </div>

        <div className="offer-card">
          <div className="offer-card__seal">
            <span className="star">★</span>Oportunidade Limitada
          </div>
          <div className="offer-card__lbl">Lotes a partir de</div>
          <div className="offer-card__price">
            <span className="rs">R$</span>
            <span className="num">499</span>
            <span className="per">/mês</span>
          </div>
          <div className="offer-card__divider" />
          <div className="offer-card__terms">
            Entrada facilitada
            <span className="sep">·</span>
            Parcelas que cabem no orçamento
            <span className="sep">·</span>
            Documentação garantida
          </div>
        </div>
      </div>
    </section>
  );
}

const BENEFITS = [
  { icon: ICONS.key,  title: "Entrada Facilitada",       desc: "Condições especiais para você sair do aluguel sem aperto no orçamento." },
  { icon: ICONS.home, title: "Localização Estratégica",  desc: "Ponta Porã-MS, em uma vizinhança em pleno crescimento e valorização." },
  { icon: ICONS.road, title: "Infraestrutura Completa",  desc: "Ruas, energia e água prontos. É só escolher o seu lote e começar a construir." },
  { icon: null,       title: "Atendimento Pessoal",      desc: "Você fala direto comigo, a Desiré. Sem call-center, sem robô, sem espera." },
];

function Benefits() {
  return (
    <section className="benefits dc-reveal" data-screen-label="05 Beneficios">
      <div className="benefits__inner">
        <div className="benefits__head">
          <div className="eyebrow" style={{display:"inline-flex", alignItems:"center", gap:10, color:"var(--gold-500)"}}>
            <span style={{width:28, height:1, background:"var(--gold-500)"}} />
            Por que aqui
            <span style={{width:28, height:1, background:"var(--gold-500)"}} />
          </div>
          <h2 className="benefits__title">
            Tudo o que você precisa para <em>construir tranquilo</em>, em um só lugar.
          </h2>
        </div>
        <div className="benefits__grid">
          {BENEFITS.map((b, i) => (
            <article key={b.title} className="benefit-card" style={{animationDelay: `${i*80}ms`}}>
              <div className="benefit-card__icon">
                {b.icon
                  ? <img src={b.icon} alt="" aria-hidden="true" />
                  : <ChatIcon size={30} />}
              </div>
              <h3>{b.title}</h3>
              <p>{b.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Offer = Offer;
window.Benefits = Benefits;