// Hero.jsx — 50/50 texto + foto
// FOTO: substitua images/hero.jpg pela foto real (mulher bronzeada, elegante)
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero-copy">
        <span className="eyebrow reveal">Bronzeamento personalizado em Teresópolis</span>
        <h1 className="reveal" data-d="1">Bronze bonito, uniforme e <span className="italic">feito para a sua pele.</span></h1>
        <p className="hero-sub reveal" data-d="2">
          Atendimento personalizado para mulheres que querem realçar a beleza, elevar a autoestima e conquistar um bronzeado com mais conforto e segurança.
        </p>
        <div className="hero-cta-row reveal" data-d="3">
          <WaButton variant="primary">Agendar pelo WhatsApp</WaButton>
        </div>
        <div className="hero-checks reveal" data-d="4">
          {['Atendimento personalizado','Protocolo para cada tipo de pele','8 anos de experiência'].map((c,i) => (
            <div className="hero-check" key={i}><span className="hc-ic">{Ic.check({width:14,height:14})}</span>{c}</div>
          ))}
        </div>
      </div>
      <div className="hero-photo reveal" data-d="1">
        <image-slot id="hero-main" shape="rect" fit="cover" src="images/hero.jpg" placeholder="Foto de mulher bronzeada — natural e elegante"></image-slot>
        <span className="hp-tag">Bronze que valoriza você.</span>
      </div>
    </header>
  );
}
Object.assign(window, { Hero });