/* global React */

function HeroBoldNumber({ onCTAClick, savingsPct = 16 }) {
  return (
    <section className="hero-bold" id="top">
      <div className="container hero-bold-inner">
        <div className="topline">
          <span className="eyebrow">iGreen Energy · Representante MG</span>
          <span className="pill"><span className="dot"></span> +605 mil casas e empresas conectadas em todo o país</span>
        </div>

        <h1 className="hero-bold-headline">
          <div className="row">
            <span>Sua conta</span>
            <span style={{fontStyle:"italic", color:"var(--green-200)"}}>de luz,</span>
          </div>
          <div className="row">
            <span className="num">−{savingsPct}%</span>
            <span className="small">todo mês,<br/>sem instalar nada.</span>
          </div>
        </h1>

        <div className="meta-row">
          <p className="lede">
            Energia limpa por assinatura. Você continua recebendo a conta da
            CEMIG, só que mais barata. Cadastra uma vez, economiza pra sempre.
          </p>
          <div className="stat">
            <span className="num">5 min</span>
            <span className="lbl">Cadastro completo</span>
          </div>
          <div className="stat">
            <span className="num">R$0</span>
            <span className="lbl">Custo de adesão</span>
          </div>
        </div>

        <div className="cta-row">
          <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>
          <a className="btn btn-ghost" href="#como-funciona">Como funciona</a>
        </div>

        {/* faint MG silhouette */}
        <svg className="mg-watermark" viewBox="0 0 200 180" fill="currentColor" style={{color: "var(--green-200)"}}>
          <path d="M30 40 Q 50 20 90 25 Q 130 30 160 50 Q 180 70 170 100 Q 165 130 145 145 Q 120 160 80 155 Q 50 150 30 130 Q 15 100 20 70 Q 25 50 30 40 Z" />
        </svg>
      </div>
    </section>
  );
}

window.HeroBoldNumber = HeroBoldNumber;