// ===== STATS =====
function Stats() {
  const [ref, visible] = useReveal();
  const water = useCountUp(79, 1400, visible);
  const time = useCountUp(58, 1400, visible);
  const value = useCountUp(8, 1400, visible);
  const price = useCountUp(25, 1400, visible);
  return (
    <section ref={ref} className={`reveal ${visible ? 'visible' : ''}`} style={{ padding: 0 }}>
      <div className="stats">
        <div className="stat">
          <div className="stat__num"><em>-{Math.round(water)}</em><span className="stat__unit">%</span></div>
          <div className="stat__label">Agua por lavagem</div>
        </div>
        <div className="stat">
          <div className="stat__num"><em>-{Math.round(time)}</em><span className="stat__unit">%</span></div>
          <div className="stat__label">Tempo de ciclo</div>
        </div>
        <div className="stat">
          <div className="stat__num"><em>+{value.toFixed(0)}</em><span className="stat__unit">%</span></div>
          <div className="stat__label">Valorizacao do imovel</div>
        </div>
        <div className="stat">
          <div className="stat__num"><em>-{Math.round(price)}</em><span className="stat__unit">%</span></div>
          <div className="stat__label">Preco para moradores</div>
        </div>
      </div>
    </section>
  );
}

// ===== COMPARE =====
function Compare() {
  const [ref, visible] = useReveal();
  return (
    <section id="economia" ref={ref} className={`reveal ${visible ? 'visible' : ''}`}>
      <div className="container">
        <div className="sh">
          <div>
            <div className="sh__num">01 / 04 - ECONOMIA DE AGUA</div>
          </div>
          <div>
            <div className="sh__kicker">Maquina caseira vs. LavaX</div>
            <h2 className="sh__title">
              Cada ciclo economiza <em>ate 158 litros</em> de agua.
            </h2>
          </div>
        </div>

        <div className="compare">
          <div className="compare__card compare__card--bad">
            <div className="compare__tag">MAQUINA DOMESTICA - 10-15KG</div>
            <div className="compare__big">198<span className="compare__unit"> L</span></div>
            <div className="compare__desc">por lavagem, com agua potavel tratada pelo condominio e impacto direto na conta coletiva.</div>
            <div className="compare__bar"><div className="compare__bar-fill" style={{ width: visible ? '100%' : '0%' }}/></div>
          </div>
          <div className="compare__vs">vs.</div>
          <div className="compare__card compare__card--good">
            <div className="compare__tag">LAVAX INDUSTRIAL</div>
            <div className="compare__big"><em>40</em><span className="compare__unit"> L</span></div>
            <div className="compare__desc">o mesmo ciclo, com sabao profissional incluso e consumo de energia compativel.</div>
            <div className="compare__bar"><div className="compare__bar-fill" style={{ width: visible ? '20%' : '0%' }}/></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== BENEFITS GRID =====
function Benefits() {
  const items = [
    { n: '01', icon: <Icon.Clock/>, t: 'Economia de tempo', d: 'Ciclo completo de lavagem e centrifugacao em 35 minutos. Secadoras em 45 min.', tag: '1/3 do tempo' },
    { n: '02', icon: <Icon.Shield/>, t: 'Seguranca total', d: 'Ambiente interno e fechado para estranhos. Moradores lavam roupa a qualquer hora sem sair do condominio.', tag: '24/7 interno' },
    { n: '03', icon: <Icon.Spark/>, t: 'Conforto premium', d: 'Ar-condicionado, assentos confortaveis e ambiente monitorado. Inicie o ciclo e volte para o apartamento.', tag: 'Monitorado' },
    { n: '04', icon: <Icon.Drop/>, t: 'Produtos profissionais', d: 'Sabao e amaciante industriais superiores as marcas de supermercado, inclusos no preco.', tag: 'Incluso' },
  ];
  return (
    <section>
      <div className="container">
        <div className="sh">
          <div>
            <div className="sh__num">02 / 04 - EXPERIENCIA DO MORADOR</div>
          </div>
          <div>
            <h2 className="sh__title">
              Tudo o que uma maquina de apartamento <em>nao entrega</em>.
            </h2>
          </div>
        </div>
      </div>
      <div className="container">
        <div className="benefits">
          {items.map((it) => (
            <div key={it.n} className="benefit">
              <div className="benefit__num">// {it.n}</div>
              <div className="benefit__icon" style={{ color: 'var(--accent)' }}>{it.icon}</div>
              <div className="benefit__title">{it.t}</div>
              <div className="benefit__desc">{it.d}</div>
              <div className="benefit__highlight">- {it.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== VALOR =====
function Valor() {
  const [ref, visible] = useReveal();
  const normal = 20;
  const cond = 16;
  const saving = ((normal - cond) / normal * 100).toFixed(0);

  return (
    <section id="valor" className="valor">
      <div className="container">
        <div ref={ref} className={`valor__grid reveal ${visible ? 'visible' : ''}`}>
          <div className="valor__left">
            <div className="eyebrow">03 / 04 - GANHO DIRETO</div>
            <h2>
              O condominio <em>vale mais.</em><br/>
              Os moradores <em>pagam menos.</em>
            </h2>
            <p>
              Segundo pesquisa de mercado, imoveis em condominios com lavanderia de autosservico
              valorizam entre <b style={{ color: 'var(--accent)' }}>5 a 8%</b>, e o condominio ainda recebe um percentual
              do faturamento mensal, decidido em assembleia para aplicar em benfeitorias.
            </p>
          </div>

          <div className="vsim">
            <div className="vsim__title">Preco medio - kg de roupa lavada</div>
            <div className="vsim__sub">Mercado comum (lavanderia externa)</div>
            <div className="vsim__price" style={{ color: 'var(--fg-mute)', textDecoration: 'line-through', textDecorationThickness: '2px', fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 8 }}>
              <span className="vsim__currency">R$</span>{normal},00
            </div>

            <div className="vsim__arrow"><Icon.Arrow style={{ width: 14, height: 14 }}/> Morador do condominio - primeiros 12 meses</div>
            <div className="vsim__price">
              <span className="vsim__currency">R$</span><em>{cond}</em>,00
            </div>
            <div className="vsim__sub">{saving}% mais barato - garantido por 1 ano</div>

            <div className="vsim__bar">
              <div className="vsim__bar-old" style={{ width: visible ? `${(cond / normal) * 100}%` : '100%' }}/>
              <div className="vsim__bar-new" style={{ width: visible ? `${100 - (cond / normal) * 100}%` : '0%' }}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== FLOW / COMO FUNCIONA =====
function Flow() {
  const steps = [
    { n: '01', icon: <Icon.Play/>, t: 'Visita tecnica', d: 'Analisamos o espaco disponivel, fluxo de moradores e infraestrutura em ate 48h.' },
    { n: '02', icon: <Icon.Key/>, t: 'Instalacao sem custo', d: 'Montamos a unidade completa com maquinas, secadoras, mobiliario e ar-condicionado.' },
    { n: '03', icon: <Icon.Spark/>, t: 'Operacao 24/7', d: 'Moradores usam com acesso do condominio. Nos operamos, fornecemos produtos e fazemos manutencao.' },
    { n: '04', icon: <Icon.Chart/>, t: 'Repasse mensal', d: 'Um percentual do faturamento e depositado direto na conta do condominio todos os meses.' },
  ];
  return (
    <section id="como">
      <div className="container">
        <div className="sh">
          <div>
            <div className="sh__num">04 / 04 - COMO FUNCIONA</div>
          </div>
          <div>
            <h2 className="sh__title">
              Do primeiro contato ao primeiro repasse, em ate <em>90 dias</em>.
            </h2>
          </div>
        </div>

        <div className="flow">
          {steps.map((s) => (
            <div key={s.n} className="flow__step">
              <div className="flow__step-icon">{s.icon}</div>
              <div className="flow__step-num">PASSO {s.n}</div>
              <div className="flow__step-title">{s.t}</div>
              <div className="flow__step-desc">{s.d}</div>
            </div>
          ))}
        </div>

        <UnitFacts/>
      </div>
    </section>
  );
}

// ===== FAQ =====
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: 'Qual o custo para o condominio instalar a LavaX?', a: 'Zero. Nos fornecemos todo o equipamento, fazemos a instalacao e assumimos a manutencao tecnica durante o contrato.' },
    { q: 'Quanto espaco e necessario?', a: 'Nossa equipe tecnica faz uma visita sem compromisso para avaliar o espaco disponivel. Normalmente aproveitamos areas subutilizadas do condominio.' },
    { q: 'Como funciona o repasse financeiro ao condominio?', a: 'Um percentual do faturamento mensal e transferido diretamente ao condominio. O uso desse valor e decidido em assembleia.' },
    { q: 'So os moradores podem usar?', a: 'Sim. A unidade e exclusiva para quem tem acesso ao condominio, o que aumenta a sensacao de seguranca e privacidade.' },
    { q: 'E se uma maquina quebrar?', a: 'E com a gente. Assistencia tecnica, reposicao de pecas e suporte operacional ficam por nossa conta.' },
  ];
  return (
    <section id="perguntas">
      <div className="container">
        <div className="sh">
          <div>
            <div className="sh__num">PERGUNTAS FREQUENTES</div>
          </div>
          <div>
            <h2 className="sh__title">As duvidas que <em>todo sindico</em> tem.</h2>
          </div>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className="faq__item" data-open={open === i}>
              <button
                type="button"
                className="faq__button"
                aria-expanded={open === i}
                aria-controls={`faq-panel-${i}`}
                id={`faq-trigger-${i}`}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <span className="faq__q">{it.q}</span>
                <span className="faq__icon" aria-hidden="true"><Icon.Plus style={{ width: 14, height: 14 }}/></span>
              </button>
              <div
                id={`faq-panel-${i}`}
                className="faq__a"
                role="region"
                aria-labelledby={`faq-trigger-${i}`}
              >
                {it.a}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== CTA / CONTATO =====
function CTA() {
  return (
    <section id="contato" className="cta">
      <img src="assets/logo-clean.jpg" alt="Logo da LavaX" className="cta__logo" width="180" height="90" loading="lazy"/>
      <div className="cta__eyebrow">VAMOS CONVERSAR</div>
      <h2 className="cta__title">
        Agende uma visita tecnica<br/>para o seu condominio.
        <em>analise sem custo - resposta em ate 48h</em>
      </h2>
      <p className="cta__sub">Falamos com sindicos, administradoras e conselhos para avaliar o espaco, projetar a operacao e estimar o repasse mensal.</p>
      <div className="cta__contacts">
        <div className="cta__person">
          <div className="cta__role">Comercial</div>
          <div className="cta__name">Marcus Vinicius</div>
          <a href="tel:+5511981439935" className="cta__phone" aria-label="Ligar para Marcus Vinicius no numero 11 98143 9935"><Icon.Phone style={{ width: 14, height: 14 }}/> (11) 98143-9935</a>
        </div>
        <div className="cta__person">
          <div className="cta__role">Comercial</div>
          <div className="cta__name">Lucas Andrade</div>
          <a href="tel:+5511988669568" className="cta__phone" aria-label="Ligar para Lucas Andrade no numero 11 98866 9568"><Icon.Phone style={{ width: 14, height: 14 }}/> (11) 98866-9568</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__brand">
        <img src="assets/logo.png" alt="LavaX Franchising" className="footer__logo" width="180" height="48" loading="lazy"/>
      </div>
      <div className="footer__cols">
        <div>(c) LAVAX FRANCHISING - 2026</div>
        <div>PROPOSTA - CONDOMINIOS</div>
        <div>v 1.1 - {new Date().getFullYear()}</div>
      </div>
    </footer>
  );
}

function BrandBand() {
  const items = ['LAVANDERIA', 'AUTOSSERVICO', 'CONDOMINIOS', 'FRANCHISING', 'INDUSTRIAL', '24/7'];
  const all = [...items, ...items, ...items, ...items];
  return (
    <section className="brandband">
      <div className="brandband__hero">
        <div className="brandband__side mono">
          <span className="brandband__pill">EST - 2020</span>
          <div className="brandband__sidetxt">Operacao<br/>propria</div>
        </div>
        <div className="brandband__center">
          <img src="assets/logo-clean.jpg" alt="Logo da LavaX" className="brandband__logo" width="180" height="90" loading="lazy"/>
          <div className="brandband__tagline mono">LAVANDERIA AUTOSSERVICO</div>
        </div>
        <div className="brandband__side brandband__side--right mono">
          <span className="brandband__pill">FRANCHISING</span>
          <div className="brandband__sidetxt">Modelo<br/>validado</div>
        </div>
      </div>
      <div className="brandband__marquee">
        <div className="brandband__track">
          {all.map((t, i) => (
            <React.Fragment key={i}>
              <span className="brandband__word">{t}</span>
              <span className="brandband__star">-</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stats, Compare, Benefits, Valor, Flow, FAQ, CTA, Footer, BrandBand });