// sections-top.jsx — Topbar, Hero, Authority strip

function Topbar() {
  return (
    <div className="topbar" data-screen-label="01 Topbar">
      Loteamento Primavera 2
      <span className="dot">·</span>
      Ponta Porã – MS
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" data-screen-label="02 Hero">
      <div className="hero__bg" aria-hidden="true" />
      <div className="hero__veil" aria-hidden="true" />
      <div className="hero__grain" aria-hidden="true" />
      <div className="hero__inner">
        <div className="hero__tag dc-fade d1">Oportunidade Exclusiva · 2026</div>
        <h1 className="hero__h1 dc-fade d2">
          Pare de pagar aluguel.{" "}
          <em>Conquiste o terreno</em> que será seu para sempre.
        </h1>
        <p className="hero__sub dc-fade d3">
          Lotes em Ponta Porã-MS com infraestrutura completa, entrada facilitada
          e atendimento direto comigo — sem burocracia, sem call-center.
        </p>
        <div className="hero__cta-row dc-fade d4">
          <WhatsAppButton
            size="xl"
            label="Falar no WhatsApp agora"
            subtitle="Resposta na hora · sem compromisso"
            message="Olá Desiré! Tenho interesse nos lotes do Primavera 2."
          />
          <div className="hero__phone" aria-label="Telefone WhatsApp">
            <span className="lbl">Ou ligue / chame</span>
            <span className="num">(67) 99170-0143</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function AuthorityStrip() {
  return (
    <section className="auth-strip dc-reveal" data-screen-label="03 Autoridade">
      <div className="auth-strip__inner">
        <div className="auth-cell">
          <div className="auth-num">
            <span className="currency">R$</span>499
          </div>
          <div className="auth-lbl">A partir de / mês</div>
        </div>
        <div className="auth-cell">
          <div className="auth-num">100<em>%</em></div>
          <div className="auth-lbl">Infraestrutura</div>
        </div>
        <div className="auth-cell">
          <div className="auth-num"><span className="plus">+</span>10</div>
          <div className="auth-lbl">Anos de mercado</div>
        </div>
        <div className="auth-cell">
          <div className="auth-num" style={{fontSize: "clamp(22px, 3vw, 34px)", letterSpacing: "0.04em", fontWeight: 600}}>CRECI</div>
          <div className="auth-lbl">MS 12345</div>
        </div>
      </div>
    </section>
  );
}

window.Topbar = Topbar;
window.Hero = Hero;
window.AuthorityStrip = AuthorityStrip;