/* global React */

function RealBill({ onCTAClick }) {
  return (
    <section className="section-realbill" id="conta-real">
      <div className="container">
        <div className="rb-head reveal">
          <span className="eyebrow">Conta real</span>
          <h2 className="section-title" style={{marginTop: 16}}>
            Veja como sua <em>conta vem.</em>
          </h2>
          <p className="section-sub" style={{marginTop: 20, maxWidth: 720}}>
            Esse é um boleto real da iGreen Energy. O desconto vem destacado,
            o histórico mostra a economia mês a mês e tudo é pago num boleto só.
          </p>
        </div>

        <div className="rb-grid reveal">
          <div className="rb-image-wrap">
            <img src="assets/boleto-real-igreen.png" alt="Boleto real iGreen Energy" loading="lazy"/>

            <div className="rb-callout rb-callout-1">
              <div className="rb-callout-line"></div>
              <div className="rb-callout-bubble">
                <span className="rb-callout-num">01</span>
                <div>
                  <strong>Mês de referência</strong>
                  <p>O boleto da iGreen substitui sua conta CEMIG.</p>
                </div>
              </div>
            </div>

            <div className="rb-callout rb-callout-2">
              <div className="rb-callout-line"></div>
              <div className="rb-callout-bubble">
                <span className="rb-callout-num">02</span>
                <div>
                  <strong>Energia verde compensada</strong>
                  <p>4.440 kWh injetados na rede no seu nome.</p>
                </div>
              </div>
            </div>

            <div className="rb-callout rb-callout-3">
              <div className="rb-callout-line"></div>
              <div className="rb-callout-bubble">
                <span className="rb-callout-num">03</span>
                <div>
                  <strong>Desconto iGreen aplicado</strong>
                  <p>R$ 42,88 (16%) abatidos automaticamente no mês.</p>
                </div>
              </div>
            </div>

            <div className="rb-callout rb-callout-4">
              <div className="rb-callout-line"></div>
              <div className="rb-callout-bubble">
                <span className="rb-callout-num">04</span>
                <div>
                  <strong>Histórico de economia</strong>
                  <p>R$ 514,56 economizados em 12 meses (R$ 42,88/mês).</p>
                </div>
              </div>
            </div>
          </div>

          <aside className="rb-side">
            <div className="rb-card">
              <div className="rb-card-kicker">No mês passado</div>
              <div className="rb-card-num">R$ 42,88</div>
              <div className="rb-card-sub">desconto aplicado · 16% off</div>
            </div>
            <div className="rb-card">
              <div className="rb-card-kicker">Acumulado · 12 meses</div>
              <div className="rb-card-num" style={{color: "var(--green-700)"}}>R$ 514,56</div>
              <div className="rb-card-sub">Economia aproximada no ano</div>
            </div>
            <div className="rb-card rb-card-dark">
              <div className="rb-card-kicker" style={{color: "var(--green-200)"}}>Resumo</div>
              <ul className="rb-list">
                <li><span className="rb-bullet"></span> Boleto único e digital</li>
                <li><span className="rb-bullet"></span> Sem instalação ou obra</li>
                <li><span className="rb-bullet"></span> Sem fidelidade</li>
                <li><span className="rb-bullet"></span> Cancele quando quiser</li>
              </ul>
            </div>
          </aside>
        </div>

        <div className="rb-cta reveal">
          <div>
            <span className="rb-cta-eyebrow">É só cadastrar a conta</span>
            <p className="rb-cta-line">
              Esse mesmo boleto, com <strong>seu nome</strong> e <strong>seu desconto</strong>,
              pode estar na sua próxima fatura.
            </p>
          </div>
          <button className="btn btn-primary btn-arrow" onClick={onCTAClick}>
            Cadastrar minha conta agora
            <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>
    </section>
  );
}

window.RealBill = RealBill;