/* global React */

function VideoSection({ onCTAClick }) {
  return (
    <section className="section-video" id="depoimentos">
      <div className="container">
        <div className="video-head reveal">
          <span className="eyebrow">Quem já economiza</span>
          <h2 className="section-title" style={{marginTop: 16}}>
            Mais de <em>605 mil residências</em><br/>
            já cadastraram a conta de luz na iGreen.
          </h2>
          <p className="section-sub" style={{marginTop: 22, maxWidth: 680}}>
            Veja em 2 minutos como funciona — e por que tanta gente em Minas
            já trocou a conta cheia da CEMIG por um boleto com desconto fixo todo mês.
          </p>
        </div>

        <div className="video-card reveal">
          <iframe
            src="https://www.youtube.com/embed/Ma8QN7x_d-E?rel=0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            title="iGreen Energy explicado"
            loading="lazy"
          />
        </div>

        {/* trust strip + CTA */}
        <div className="video-trust reveal">
          <div className="vt-stats">
            <div className="vt-stat">
              <span className="num">+605 mil</span>
              <span className="lbl">Residências conectadas</span>
            </div>
            <div className="vt-divider" aria-hidden="true"></div>
            <div className="vt-stat">
              <span className="num">100% MG</span>
              <span className="lbl">Energia produzida aqui</span>
            </div>
            <div className="vt-divider" aria-hidden="true"></div>
            <div className="vt-stat">
              <span className="num">5 min</span>
              <span className="lbl">Para cadastrar a conta</span>
            </div>
          </div>

          <div className="vt-cta">
            <p className="vt-cta-line">
              Pronto pra entrar pra esse grupo?
              <strong> Cadastre sua conta de luz</strong> e veja o desconto na próxima fatura.
            </p>
            <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>
      </div>
    </section>
  );
}

window.VideoSection = VideoSection;