function Hero() {
  const [apts, setApts] = useState(150);
  const [pricePerKg, setPricePerKg] = useState(16);
  const [revShare, setRevShare] = useState(5);

  // Calibracao: 500 apts x R$15/kg ~= R$ 20.000/mes
  const kgPerAptMonth = 2.67;
  const kgPerMonth = apts * kgPerAptMonth;
  const faturamento = kgPerMonth * pricePerKg;
  const repasse = faturamento * (revShare / 100);
  const repasseAno = repasse * 12;

  const triggered = apts > 0;
  const animFat = useCountUp(faturamento, 800, triggered);
  const animRep = useCountUp(repasse, 800, triggered);
  const animAno = useCountUp(repasseAno, 1000, triggered);

  return (
    <section className="hero container" id="inicio">
      <div className="hero__watermark" aria-hidden="true"/>
      <div className="hero__left">
        <div className="eyebrow">PROPOSTA - 2026 / CONDOMINIOS</div>
        <h1 className="hero__title">
          Sua lavanderia<br/>
          virou <em>ativo</em><br/>
          do condominio.
        </h1>
        <p className="hero__sub">
          A LavaX instala, opera e mantem uma lavanderia profissional dentro do seu condominio,
          sem custo de implantacao, com repasse mensal e economia real de agua, tempo e dinheiro para os moradores.
        </p>
        <div className="hero__meta">
          <span><i className="dot"/>INSTALACAO SEM CUSTO</span>
          <span><i className="dot"/>MANUTENCAO POR NOSSA CONTA</span>
          <span><i className="dot"/>RECEITA RECORRENTE</span>
        </div>
      </div>

      <div className="hero__right">
        <div className="calc">
          <div className="calc__head">
            <div className="calc__title">Simulador do condominio</div>
            <div className="calc__tag">ao vivo</div>
          </div>

          <div className="calc__row">
            <div className="calc__label">
              <label htmlFor="apts-range">Apartamentos</label>
              <b>{apts}</b>
            </div>
            <input
              id="apts-range"
              className="calc__slider"
              type="range"
              min="50"
              max="600"
              step="10"
              aria-label="Quantidade de apartamentos"
              value={apts}
              onChange={(e) => setApts(+e.target.value)}
            />
          </div>

          <div className="calc__row">
            <div className="calc__label">
              <label htmlFor="price-range">Preco medio por quilo</label>
              <b>R$ {pricePerKg}</b>
            </div>
            <input
              id="price-range"
              className="calc__slider"
              type="range"
              min="12"
              max="25"
              step="1"
              aria-label="Preco medio por quilo"
              value={pricePerKg}
              onChange={(e) => setPricePerKg(+e.target.value)}
            />
          </div>

          <div className="calc__row">
            <div className="calc__label">
              <label htmlFor="share-range">Repasse ao condominio</label>
              <b>{revShare}%</b>
            </div>
            <input
              id="share-range"
              className="calc__slider"
              type="range"
              min="2"
              max="10"
              step="1"
              aria-label="Percentual de repasse ao condominio"
              value={revShare}
              onChange={(e) => setRevShare(+e.target.value)}
            />
          </div>

          <div className="calc__result">
            <div className="calc__result-row">
              <div className="calc__result-label">Faturamento estimado por mes</div>
              <div className="calc__result-value">
                <span className="cents">R$</span> {formatBRL(animFat)}
              </div>
            </div>
            <div className="calc__result-row">
              <div className="calc__result-label">Repasse ao condominio por mes</div>
              <div className="calc__result-value big">
                <span className="cents">R$</span> {formatBRL(animRep)}
              </div>
            </div>
            <div className="calc__result-row">
              <div className="calc__result-label">No ano</div>
              <div className="calc__result-value">
                <span className="cents">R$</span> {formatBRL(animAno)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Ticker() {
  const items = [
    '40 litros por lavagem', '35 min por ciclo', 'instalacao sem custo',
    'sabao profissional incluso', 'valorizacao de 5 a 8%', 'ate 25% mais barato para moradores',
    'secadora em 45 min', 'ambiente 24/7', 'elimina virus e bacterias', 'manutencao por nossa conta'
  ];
  const all = [...items, ...items];
  return (
    <div className="ticker" aria-label="Principais beneficios da LavaX">
      <div className="ticker__track">
        {all.map((t, i) => <div key={i} className="ticker__item">{t}</div>)}
      </div>
    </div>
  );
}

Object.assign(window, { Hero, Ticker });