/* Computadores Profissionais e Workstations — spoke do cluster Computadores */

const PW_NAV = [
  ['Início', '#top'],
  ['Para que trabalho', '#para-que-trabalho'],
  ['Como definimos', '#como-definimos'],
  ['FAQ', '#faq'],
];
const PW_FOOTER_NAV = PW_NAV.slice(1);

const WA_MSG_WORKSTATION = encodeURIComponent("Olá, encontrei a InfoSystem pelo site e quero montar um computador para uso profissional/trabalho.");
const WA_LINK_WORKSTATION = `https://wa.me/${WA_NUMBER}?text=${WA_MSG_WORKSTATION}`;

function PWHero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot"/> InfoSystem · Computadores Profissionais · Maringá-PR</div>
          <h1 className="reveal h-display" data-delay="1">
            Computadores profissionais e <em>workstations</em> em Maringá.
          </h1>
          <p className="reveal lede" data-delay="2">
            Para quem precisa de um computador que aguenta o trabalho pesado do dia a dia —
            edição, projetos, multitarefa — montado sob medida para o seu uso e orçamento.
          </p>
          <div className="reveal hero-actions" data-delay="3">
            <a className="btn btn-primary" href={WA_LINK_WORKSTATION} target="_blank" rel="noopener">
              <Icon name="whats" size={16}/> Falar sobre minha workstation
            </a>
            <a className="btn btn-ghost-light" href="#para-que-trabalho">
              Para que tipo de trabalho <Icon name="arrow" size={15}/>
            </a>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <EcoGamerArt/>
        </div>
      </div>
    </section>
  );
}

function PWParaQueTrabalho() {
  const items = [
    { t: "Edição de vídeo e foto", s: "Fluidez para renderizar e trabalhar com arquivos pesados.", ic: "database" },
    { t: "Projetos e engenharia", s: "CAD, modelagem e cálculo sem travar no meio do trabalho.", ic: "compass", dark: true },
    { t: "Multitarefa no dia a dia", s: "Várias janelas e programas abertos ao mesmo tempo.", ic: "route" },
    { t: "Programação e desenvolvimento", s: "Ambientes de desenvolvimento e máquinas virtuais.", ic: "cog", dark: true },
  ];
  return (
    <section className="section dark" id="para-que-trabalho" aria-labelledby="pqt-h">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Comece pelo seu trabalho</span>
            <h2 id="pqt-h" className="h-section" style={{marginTop:18, color:'#fff'}}>
              Para que tipo de trabalho você precisa do computador?
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Não prometemos números de desempenho — entendemos o seu tipo de trabalho e indicamos
            uma configuração equilibrada para ele, dentro do orçamento disponível.
          </p>
        </div>
        <div className="perfis-grid">
          {items.map((p, i) => (
            <article key={i} className={`perfil-card reveal ${p.dark ? 'dark' : ''}`} data-delay={Math.min(i,5)}>
              <div className="ic"><Icon name={p.ic} size={20}/></div>
              <div>
                <span className="label">USO {String(i+1).padStart(2,'0')}</span>
                <h3 style={{marginTop:8, fontSize:17, fontWeight:600, letterSpacing:'-0.018em'}}>{p.t}</h3>
                <p className="sub" style={{marginTop:6}}>{p.s}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function PWComoDefinimos() {
  const steps = [
    ["Você conta o tipo de trabalho e os programas que usa", "whats"],
    ["Conversamos sobre orçamento e prioridades", "compass"],
    ["Indicamos uma configuração equilibrada para o seu caso", "route"],
    ["Com sua aprovação, montamos o computador", "cog"],
    ["Retirada ou entrega combinada com a loja", "pin"],
  ];
  return (
    <section className="section light" id="como-definimos" aria-labelledby="comodefinimos-h">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Como definimos a configuração</span>
            <h2 id="comodefinimos-h" className="h-section" style={{marginTop:18}}>
              Um processo consultivo, não uma prateleira de opções prontas.
            </h2>
          </div>
        </div>
        <ol className="gm-steps">
          {steps.map(([t, ic], i) => (
            <li key={i} className="gm-step reveal" data-delay={Math.min(i,5)}>
              <span className="gm-step-num">{String(i+1).padStart(2,'0')}</span>
              <span className="gm-step-ic"><Icon name={ic} size={18}/></span>
              <p>{t}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function PWFAQ() {
  const items = [
    { q: "Não entendo de peças, como sei qual configuração preciso?", a: "Você não precisa entender — conte o que faz no computador (edição, projetos, multitarefa) e a orientação técnica é por nossa conta." },
    { q: "Vocês montam computador para empresas, não só para uma pessoa?", a: "Sim. Se for para equipar mais de um posto de trabalho na sua empresa, também podemos apoiar — veja nossa página de suporte técnico empresarial." },
    { q: "Qual a diferença entre isso e um PC gamer?", a: "O ponto de partida é diferente: aqui priorizamos estabilidade e desempenho para o tipo de trabalho, não para jogos. Se for para os dois usos, também conversamos sobre isso." },
    { q: "Depois da compra, vocês dão suporte?", a: "Sim. Além da montagem, a InfoSystem também presta assistência técnica e suporte para o computador depois da entrega." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section cream" 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 antes de montar sua workstation.
            </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 PWCTAFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="container">
        <span className="tag dark reveal">Vamos montar sua workstation?</span>
        <h2 className="reveal h-section" data-delay="1" style={{marginTop:20}}>
          Fale com a InfoSystem e monte o computador certo para o seu trabalho.
        </h2>
        <div className="reveal" data-delay="2" style={{marginTop:24}}>
          <a className="btn btn-primary" href={WA_LINK_WORKSTATION} target="_blank" rel="noopener" style={{fontSize:16, padding:'18px 28px'}}>
            <Icon name="whats" size={17}/> Falar sobre minha workstation
          </a>
        </div>
        <p className="reveal" data-delay="3" style={{marginTop:28}}>
          <a href="computadores-gamer-profissionais.html" style={{marginRight:24, textDecoration:'underline'}}>Ver todas as soluções em computadores →</a>
          <a href="monte-seu-computador.html" style={{marginRight:24, textDecoration:'underline'}}>Ainda não decidi, quero entender o processo →</a>
          <a href="suporte-tecnico-empresarial.html" style={{textDecoration:'underline'}}>É para minha empresa →</a>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { PWHero, PWParaQueTrabalho, PWComoDefinimos, PWFAQ, PWCTAFinal, PW_NAV, PW_FOOTER_NAV });