/* global React */

const HIW_STEPS = [
  {
    n: "01",
    pill: "Produção",
    title: "A fazenda solar produz a energia",
    body: "Uma usina certificada pela ANEEL, aqui em Minas, gera energia limpa em escala — muito mais barata que a do telhado.",
    icon: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="46" cy="18" r="6" fill="rgba(245,198,74,0.4)" stroke="none"/>
        <circle cx="46" cy="18" r="6"/>
        <path d="M46 6v3M46 27v3M34 18h3M55 18h3M37.5 9.5l2 2M52.5 24.5l2 2M37.5 26.5l2-2M52.5 11.5l2-2"/>
        <path d="M10 48l4-22h28l4 22z" fill="rgba(95,191,111,0.18)"/>
        <path d="M10 48h36"/>
        <path d="M19 26l-2 22M28 26l-1 22M37 26l1 22M14 35h28M12 41h32"/>
        <path d="M28 48v6M22 54h12"/>
      </svg>
    )
  },
  {
    n: "02",
    pill: "Injeção",
    title: "Injeta na rede da CEMIG",
    body: "A energia que sua fração produz entra direto na rede da distribuidora e é creditada no seu nome — tudo regulado pela Lei 14.300.",
    icon: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 8L20 28h8v16h8V28h8z" fill="rgba(95,191,111,0.18)"/>
        <path d="M12 50h40"/>
        <path d="M16 50v6M32 50v6M48 50v6"/>
        <path d="M8 56h48"/>
      </svg>
    )
  },
  {
    n: "03",
    pill: "Distribuição",
    title: "Chega na sua casa pela mesma rede",
    body: "Você continua recebendo a mesma energia, pelos mesmos fios. Nada muda na sua casa — nem o medidor, nem o padrão.",
    icon: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M10 34l22-18 22 18v18H10z" fill="rgba(95,191,111,0.18)"/>
        <path d="M26 52V36h12v16"/>
        <path d="M28 28h8M32 28v-4"/>
        <circle cx="32" cy="22" r="1.5" fill="currentColor" stroke="none"/>
      </svg>
    )
  },
  {
    n: "04",
    pill: "Economia",
    title: "Você paga menos, todo mês",
    body: "Sua conta vem com desconto fixo de até 20%. Sem fidelidade, sem investimento, sem obra. Só economia.",
    icon: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="10" y="20" width="44" height="28" rx="3" fill="rgba(95,191,111,0.18)"/>
        <circle cx="32" cy="34" r="6"/>
        <path d="M32 30v8M30 32h4M30 36h4"/>
        <circle cx="16" cy="34" r="1.5" fill="currentColor" stroke="none"/>
        <circle cx="48" cy="34" r="1.5" fill="currentColor" stroke="none"/>
      </svg>
    )
  },
];

function HowItWorks({ onCTAClick }) {
  return (
    <section className="section-how" id="como-funciona">
      <div className="container">
        <div className="hiw-head reveal">
          <span className="eyebrow">Como funciona</span>
          <h2 className="section-title" style={{marginTop: 16}}>
            Quatro passos. <em>Zero obra</em>.<br/>Você só economiza.
          </h2>
          <p className="section-sub" style={{maxWidth: 640, marginTop: 18}}>
            Não é geração distribuída no telhado. É um modelo regulado pela ANEEL
            de assinatura de energia: você se conecta à fazenda solar e recebe
            o desconto direto na conta — sem mudar nada na sua casa.
          </p>
        </div>

        <ol className="hiw-flow reveal">
          <div className="hiw-rail" aria-hidden="true"></div>

          {HIW_STEPS.map((s) => (
            <li className="hiw-step" key={s.n}>
              <div className="hiw-numwrap">
                <span className="hiw-num">{s.n}</span>
                <span className="hiw-dot" aria-hidden="true"></span>
              </div>

              <div className="hiw-card">
                <div className="hiw-card-top">
                  <span className="hiw-pill">{s.pill}</span>
                  <span className="hiw-icon">{s.icon}</span>
                </div>
                <h3 className="hiw-title">{s.title}</h3>
                <p className="hiw-body">{s.body}</p>
              </div>
            </li>
          ))}
        </ol>

        <div className="hiw-foot reveal">
          <div className="hiw-foot-item">
            <span className="hiw-foot-kicker">Sem placas</span>
            <p>Nenhuma obra, painel solar ou mudança de padrão na sua casa.</p>
          </div>
          <div className="hiw-foot-item">
            <span className="hiw-foot-kicker">Sem fidelidade</span>
            <p>Você pode sair quando quiser — sem multa, sem retenção.</p>
          </div>
          <div className="hiw-foot-item">
            <span className="hiw-foot-kicker">Sem custo</span>
            <p>Zero taxa de adesão. O desconto começa já no primeiro mês.</p>
          </div>
        </div>

        <div className="hiw-cta reveal">
          <p className="hiw-cta-line">
            Bonito na teoria. <strong>Melhor na sua conta de luz.</strong>
          </p>
          <button className="btn btn-primary btn-arrow" onClick={onCTAClick}>
            Cadastrar minha conta de luz
            <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>
          <span className="hiw-cta-meta">Leva 5 minutos · Sem custo · Sem fidelidade</span>
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;