/* Redes e Wi-Fi Empresarial — spoke do cluster Empresarial */

const RW_NAV = [
  ['Início', '#top'],
  ['Sinais de alerta', '#sinais'],
  ['Como funciona', '#como-funciona'],
  ['FAQ', '#faq'],
];
const RW_FOOTER_NAV = RW_NAV.slice(1);

const WA_MSG_REDE = encodeURIComponent("Olá, encontrei a InfoSystem pelo site e preciso de suporte para rede ou Wi-Fi da minha empresa.");
const WA_LINK_REDE = `https://wa.me/${WA_NUMBER}?text=${WA_MSG_REDE}`;

function RWHero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot"/> InfoSystem · Suporte Empresarial · Maringá-PR</div>
          <h1 className="reveal h-display" data-delay="1">
            Redes e Wi-Fi empresarial em <em>Maringá</em>.
          </h1>
          <p className="reveal lede" data-delay="2">
            Wi-Fi que cai, rede lenta ou pontos sem sinal na empresa atrapalham o dia a dia da
            equipe. Avaliamos a estrutura de rede para identificar a causa real.
          </p>
          <div className="reveal hero-actions" data-delay="3">
            <a className="btn btn-primary" href={WA_LINK_REDE} target="_blank" rel="noopener">
              <Icon name="whats" size={16}/> Falar sobre a rede da empresa
            </a>
            <a className="btn btn-ghost-light" href="#sinais">
              Ver sinais de alerta <Icon name="arrow" size={15}/>
            </a>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <NetworkVisual/>
        </div>
      </div>
    </section>
  );
}

function RWSinais() {
  const items = [
    ["Wi-Fi cai ou oscila com frequência", "wifi"],
    ["Rede lenta em determinados horários", "route"],
    ["Pontos da empresa sem sinal", "compass"],
    ["Muitos dispositivos conectados na mesma rede", "cog"],
    ["Rede nunca foi planejada tecnicamente", "shield"],
    ["Cresceu a equipe ou o espaço físico", "sparkle"],
  ];
  return (
    <section className="section light" id="sinais" aria-labelledby="sinais-h">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Sinais de alerta</span>
            <h2 id="sinais-h" className="h-section" style={{marginTop:18}}>
              A rede da sua empresa está dando algum desses sinais?
            </h2>
          </div>
        </div>
        <div className="reveal emp-grid">
          {items.map(([t, ic], i) => (
            <div key={i} className="emp-card">
              <div className="ic"><Icon name={ic} size={18}/></div>
              <h3>{t}</h3>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RWComoFunciona() {
  const steps = [
    ["Você chama no WhatsApp e conta a situação atual", "whats"],
    ["Avaliação técnica da estrutura de rede e Wi-Fi", "compass"],
    ["Recomendação do que precisa ser ajustado", "route"],
    ["Execução conforme sua aprovação", "cog"],
  ];
  return (
    <section className="section cream" id="como-funciona" aria-labelledby="comofunciona-h">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Como funciona</span>
            <h2 id="comofunciona-h" className="h-section" style={{marginTop:18}}>
              Da avaliação até a rede estável.
            </h2>
          </div>
        </div>
        <ol className="emp-steps">
          {steps.map(([t, ic], i) => (
            <li key={i} className="emp-step reveal" data-delay={Math.min(i,5)}>
              <span className="emp-step-num">PASSO {String(i+1).padStart(2,'0')}</span>
              <span className="emp-step-ic"><Icon name={ic} size={16}/></span>
              <p>{t}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function RWFAQ() {
  const items = [
    { q: "O problema é o meu provedor de internet ou a rede interna?", a: "É exatamente isso que a avaliação técnica identifica — muitas vezes o problema está na estrutura interna, não no provedor." },
    { q: "Vocês atendem empresas de qualquer tamanho?", a: "Fale com a gente sobre o tamanho e a estrutura da sua empresa para confirmarmos o atendimento." },
    { q: "É preciso trocar todos os equipamentos de rede?", a: "Nem sempre. A avaliação aponta se o problema é de equipamento, configuração ou posicionamento dos pontos de acesso." },
    { q: "Isso inclui manutenção do servidor também?", a: "Servidor tem uma página própria — veja manutenção de servidores, ou fale com a gente sobre os dois juntos." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section light" id="faq" aria-labelledby="faq-h">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="tag dark reveal">Perguntas frequentes</span>
            <h2 id="faq-h" className="reveal h-section" data-delay="1" style={{marginTop:18}}>
              Dúvidas comuns sobre redes e Wi-Fi empresarial.
            </h2>
            <p className="reveal lede dark" data-delay="2" style={{marginTop:18}}>
              Não achou sua dúvida? Chame no WhatsApp e fale com a equipe técnica.
            </p>
          </div>
          <div className="faq-list reveal">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{it.q}</span>
                  <span className="icn" aria-hidden="true"><Icon name="plus" size={14}/></span>
                </button>
                <div className="faq-a" style={{maxHeight: open === i ? 260 : 0}}>
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function RWCTAFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="container">
        <span className="tag dark reveal">Vamos avaliar a rede da sua empresa?</span>
        <h2 className="reveal h-section" data-delay="1" style={{marginTop:20}}>
          Fale com a InfoSystem e resolva a instabilidade de vez.
        </h2>
        <div className="reveal" data-delay="2" style={{marginTop:24}}>
          <a className="btn btn-primary" href={WA_LINK_REDE} target="_blank" rel="noopener" style={{fontSize:16, padding:'18px 28px'}}>
            <Icon name="whats" size={17}/> Falar sobre a rede da empresa
          </a>
        </div>
        <p className="reveal" data-delay="3" style={{marginTop:28}}>
          <a href="suporte-tecnico-empresarial.html" style={{marginRight:24, textDecoration:'underline'}}>Ver todo o suporte técnico empresarial →</a>
          <a href="manutencao-servidores-empresarial.html" style={{marginRight:24, textDecoration:'underline'}}>Ver manutenção de servidores →</a>
          <a href="backup-empresarial.html" style={{textDecoration:'underline'}}>Ver backup empresarial →</a>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { RWHero, RWSinais, RWComoFunciona, RWFAQ, RWCTAFinal, RW_NAV, RW_FOOTER_NAV });