/* Conserto de Notebook em Maringá — spoke do cluster Assistência Técnica */

const CN_NAV = [
  ['Início', '#top'],
  ['Problemas comuns', '#problemas'],
  ['Como funciona', '#como-funciona'],
  ['FAQ', '#faq'],
];
const CN_FOOTER_NAV = CN_NAV.slice(1);

const WA_MSG_CONSERTO = encodeURIComponent("Olá, encontrei a InfoSystem pelo site e meu notebook está com defeito, preciso de um conserto.");
const WA_LINK_CONSERTO = `https://wa.me/${WA_NUMBER}?text=${WA_MSG_CONSERTO}`;

function CNHero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot"/> InfoSystem · Assistência Técnica · Maringá-PR</div>
          <h1 className="reveal h-display" data-delay="1">
            Conserto de notebook em <em>Maringá</em>.
          </h1>
          <p className="reveal lede" data-delay="2">
            Notebook não liga, trava, esquenta ou apresenta outro defeito? Antes de decidir
            trocar de equipamento, traga para uma avaliação técnica com a InfoSystem.
          </p>
          <div className="reveal hero-actions" data-delay="3">
            <a className="btn btn-primary" href={WA_LINK_CONSERTO} target="_blank" rel="noopener">
              <Icon name="whats" size={16}/> Quero uma avaliação
            </a>
            <a className="btn btn-ghost-light" href="#problemas">
              Ver problemas que consertamos <Icon name="arrow" size={15}/>
            </a>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <ComputerVisual/>
        </div>
      </div>
    </section>
  );
}

function CNProblemas() {
  const items = [
    ["Não liga de jeito nenhum", "lock"],
    ["Trava ou reinicia sozinho", "cog"],
    ["Tela azul ou erro no sistema", "shield"],
    ["Esquentando muito", "sparkle"],
    ["Barulho anormal do cooler/HD", "route"],
    ["Muito lento para o uso do dia a dia", "compass"],
  ];
  return (
    <section className="section light" id="problemas" aria-labelledby="problemas-h">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Problemas que avaliamos</span>
            <h2 id="problemas-h" className="h-section" style={{marginTop:18}}>
              Reconhece algum desses sinais?
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Esses são os motivos mais comuns que levam um notebook até a nossa bancada. Se o seu
            caso for diferente, também pode chamar — a avaliação é o primeiro passo de qualquer jeito.
          </p>
        </div>
        <div className="reveal probs-grid">
          {items.map(([t, ic], i) => (
            <div key={i} className="prob">
              <div className="ic"><Icon name={ic} size={18}/></div>
              <span className="num">{String(i+1).padStart(2,'0')}</span>
              <h3 style={{fontSize:15.5, fontWeight:600, margin:'10px 0 0', letterSpacing:'-0.01em'}}>{t}</h3>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CNComoFunciona() {
  const steps = [
    ["Você chama no WhatsApp e descreve o problema", "whats"],
    ["Traz o notebook para avaliação técnica na loja", "pin"],
    ["Diagnóstico e orçamento antes de qualquer serviço", "compass"],
    ["Reparo executado somente após sua aprovação", "cog"],
    ["Notebook testado antes de ser devolvido", "shield"],
  ];
  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é o notebook de volta com você.
            </h2>
          </div>
        </div>
        <div className="process8">
          {steps.map(([t, ic], i) => (
            <article key={i} className="step reveal" data-delay={Math.min(i, 5)}>
              <div className="step-num">
                <span className="mono" style={{fontSize:11, letterSpacing:'0.16em', color:'var(--text-dark-dim)'}}>PASSO {String(i+1).padStart(2,'0')}</span>
                <span className="ic"><Icon name={ic} size={16}/></span>
              </div>
              <h4>{t}</h4>
              <div className="step-line"/>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function CNFAQ() {
  const items = [
    { q: "Meu notebook não liga de jeito nenhum, ainda dá para consertar?", a: "Na maioria dos casos, sim — mas isso só é possível confirmar com uma avaliação técnica. Traga o notebook para diagnosticarmos a causa antes de descartar o equipamento." },
    { q: "Vou perder meus arquivos durante o conserto?", a: "Dependendo do defeito, o HD/SSD nem é afetado. Quando há risco para os arquivos, avisamos antes de qualquer procedimento e avaliamos possibilidade de backup." },
    { q: "Preciso deixar o notebook na loja ou tem atendimento remoto?", a: "Depende do tipo de problema. Defeitos de hardware exigem avaliação presencial; alguns problemas de sistema podem ser resolvidos remotamente. Fale com a gente para confirmar o seu caso." },
    { q: "E se o problema for a tela, a dobradiça ou o carregador?", a: "Também atendemos esses casos específicos — veja nossas páginas de troca de tela, reparo de dobradiça e reparo de jack de força para mais detalhes." },
    { q: "Como vou saber quanto vai custar antes de autorizar o conserto?", a: "Fazemos o diagnóstico primeiro e só executamos o serviço depois da sua aprovação do orçamento." },
  ];
  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}}>
              Antes de trazer o notebook, tire suas dúvidas.
            </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 CNCTAFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="container">
        <span className="tag dark reveal">Vamos avaliar o seu notebook?</span>
        <h2 className="reveal h-section" data-delay="1" style={{marginTop:20}}>
          Fale com a InfoSystem e descubra o que aconteceu com o seu notebook.
        </h2>
        <p className="reveal lede dark" data-delay="2" style={{margin:'24px auto 0'}}>
          Conte o que está acontecendo — o diagnóstico é o primeiro passo, sem compromisso.
        </p>
        <div className="reveal" data-delay="3">
          <a className="btn btn-primary" href={WA_LINK_CONSERTO} target="_blank" rel="noopener" style={{fontSize:16, padding:'18px 28px'}}>
            <Icon name="whats" size={17}/> Quero uma avaliação
          </a>
        </div>
        <p className="reveal" data-delay="4" style={{marginTop:28}}>
          <a href="assistencia-tecnica.html" style={{marginRight:24, textDecoration:'underline'}}>Ver todos os serviços de assistência técnica →</a>
          <a href="troca-tela-notebook.html" style={{textDecoration:'underline'}}>Problema é na tela? →</a>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { CNHero, CNProblemas, CNComoFunciona, CNFAQ, CNCTAFinal, CN_NAV, CN_FOOTER_NAV });