/* global React */

function HeroEditorial({ onCTAClick, savingsPct = 16 }) {
  return (
    <section className="hero-ed" id="top">
      <div className="container hero-ed-grid">
        <div className="reveal in">
          <span className="eyebrow">Energia por assinatura · Minas Gerais</span>

          <h1 style={{ marginTop: 18 }}>
            Economize <span className="word-italic">{savingsPct}%</span> na sua{" "}
            <span className="underline-stroke">conta de luz</span>, sem instalar nada.
          </h1>

          <p className="hero-ed-lede">
            Você continua recebendo a sua conta da CEMIG normalmente —
            só que com desconto todo mês. Sem obra, sem painel solar no telhado,
            sem mudar nada na sua casa.
          </p>

          <div className="hero-ed-cta">
            <button className="btn btn-primary btn-arrow" onClick={onCTAClick}>
              Cadastrar minha conta
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
            </button>
          </div>

          <div className="hero-ed-trust">
            <div className="item">
              <span className="num">+605 mil</span>
              <span className="lbl">Casas no país</span>
            </div>
            <div className="item">
              <span className="num">100% MG</span>
              <span className="lbl">Energia daqui</span>
            </div>
            <div className="item">
              <span className="num">5min</span>
              <span className="lbl">Para cadastrar</span>
            </div>
          </div>
        </div>

        <div className="hero-ed-visual">
          {/* BEFORE — real CEMIG bill */}
          <div className="bill-card before">
            <img src="assets/conta-cemig.jpeg" alt="Conta real da CEMIG" loading="lazy"
                 style={{display:"block", width:"100%", height:"auto"}}/>
          </div>

          {/* AFTER — real iGreen boleto */}
          <div className="bill-card after">
            <img src="assets/boleto-real-igreen.png" alt="Boleto real iGreen Energy" loading="lazy"
                 style={{display:"block", width:"100%", height:"auto"}}/>
          </div>

          <div className="savings-badge">
            <span className="pct">−{savingsPct}%</span>
            <span className="lbl">desconto fixo todo mês</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.HeroEditorial = HeroEditorial;