/* Computadores Gamer em Maringá — página piloto do cluster "Computadores" */

const GMM_NAV = [
  ['Início', '#top'],
  ['Prontos x sob medida', '#pronto-ou-sob-medida'],
  ['Seu perfil', '#perfil'],
  ['Como funciona', '#como-funciona'],
  ['FAQ', '#faq'],
];
const GMM_FOOTER_NAV = [
  ['Prontos x sob medida', '#pronto-ou-sob-medida'],
  ['Seu perfil', '#perfil'],
  ['Como funciona', '#como-funciona'],
  ['FAQ', '#faq'],
];

const WA_MSG_GAMER_MARINGA = encodeURIComponent("Olá, encontrei a InfoSystem pelo site e quero montar um computador gamer.");
const WA_LINK_GAMER_MARINGA = `https://wa.me/${WA_NUMBER}?text=${WA_MSG_GAMER_MARINGA}`;

/* ──────────── HERO ──────────── */
function GMMHero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot"/> InfoSystem · Computadores Gamer · Maringá–PR</div>
          <h1 className="reveal h-display" data-delay="1">
            Computador gamer em Maringá, <em>montado sob medida</em> para você.
          </h1>
          <p className="reveal lede" data-delay="2">
            Antes de fechar um PC gamer pronto de prateleira, fale com quem monta configuração
            sob medida em Maringá — pensada para o jogo, a resolução e o orçamento que você tem hoje.
          </p>
          <div className="reveal hero-actions" data-delay="3">
            <a className="btn btn-primary" href={WA_LINK_GAMER_MARINGA} target="_blank" rel="noopener">
              <Icon name="whats" size={16}/> Montar meu PC gamer
            </a>
            <a className="btn btn-ghost-light" href="#pronto-ou-sob-medida">
              Pronto ou sob medida? <Icon name="arrow" size={15}/>
            </a>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <EcoGamerArt/>
        </div>
      </div>
    </section>
  );
}

/* ──────────── PRONTO OU SOB MEDIDA ──────────── */
function GMMProntoOuSobMedida() {
  return (
    <section className="section light" id="pronto-ou-sob-medida" aria-labelledby="pxsm-h">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">A dúvida mais comum</span>
            <h2 id="pxsm-h" className="h-section" style={{marginTop:18}}>
              PC gamer pronto ou montado sob medida?
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Nenhuma das duas opções é "melhor" no geral — depende do que você já tem, do que
            você joga e de quanto pode investir agora. É isso que conversamos com você antes
            de indicar qualquer coisa.
          </p>
        </div>
        <div className="gm-compare">
          <article className="gm-compare-card reveal" data-delay="1">
            <span className="gm-compare-tag">Pronto de loja</span>
            <h3>Rápido de resolver</h3>
            <p>Configuração já definida pelo fabricante. Bom quando você quer sair jogando o
              quanto antes e não tem uma exigência específica de jogo ou resolução.</p>
            <ul className="gm-compare-list">
              <li>Você não escolhe peça por peça</li>
              <li>Pode ter componentes que você não precisava</li>
              <li>Upgrade futuro pode ser mais limitado</li>
            </ul>
          </article>
          <article className="gm-compare-card reveal accent" data-delay="2">
            <span className="gm-compare-tag">Sob medida · InfoSystem</span>
            <h3>Pensado para o seu uso</h3>
            <p>Montamos a partir do que você joga, da resolução/taxa de quadros que você quer
              e do orçamento disponível — com orientação técnica em cada etapa.</p>
            <ul className="gm-compare-list">
              <li>Você entende o porquê de cada peça</li>
              <li>Configuração equilibrada para o que você realmente usa</li>
              <li>Mais espaço para upgrade futuro planejado</li>
            </ul>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ──────────── PERFIL DE JOGADOR ──────────── */
function GMMPerfil() {
  const items = [
    { t: "Casual", s: "Joga nas horas livres, quer estabilidade sem gastar mais do que precisa.", ic: "sparkle" },
    { t: "Competitivo", s: "Prioriza taxa de quadros alta e resposta rápida nos jogos que leva a sério.", ic: "shield", dark: true },
    { t: "Criador de conteúdo", s: "Joga e grava, transmite ou edita — precisa de folga para rodar tudo junto.", ic: "database" },
  ];
  return (
    <section className="section dark" id="perfil" aria-labelledby="perfil-h">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Antes de falar em peças</span>
            <h2 id="perfil-h" className="h-section" style={{marginTop:18, color:'#fff'}}>
              Qual desses perfis é mais parecido com você?
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Isso já ajuda a direcionar a conversa — a configuração final sempre é fechada
            junto com você, depois de entendermos jogo, resolução e orçamento.
          </p>
        </div>
        <div className="perfis-grid" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
          {items.map((p, i) => (
            <article key={i} className={`perfil-card reveal ${p.dark ? 'dark' : ''}`} data-delay={i+1}>
              <div className="ic"><Icon name={p.ic} size={20}/></div>
              <div>
                <span className="label">PERFIL {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>
  );
}

/* ──────────── COMO FUNCIONA ──────────── */
function GMMComoFunciona() {
  const steps = [
    ["Você chama no WhatsApp e conta o que joga", "whats"],
    ["Conversamos sobre resolução, orçamento e prioridades", "compass"],
    ["Indicamos uma configuração equilibrada para o seu caso", "route"],
    ["Com sua aprovação, montamos o computador", "cog"],
    ["Você retira ou combina a entrega com a loja", "pin"],
  ];
  return (
    <section className="section light" 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}}>
              Do primeiro contato até o computador pronto.
            </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>
  );
}

/* ──────────── FAQ ──────────── */
function GMMFAQ() {
  const items = [
    { q: "Nunca montei um PC e não entendo de peças — vocês me ajudam mesmo assim?", a: "Sim. Você não precisa chegar sabendo o nome de nenhum componente — contamos o que você joga e o orçamento, e a orientação técnica é feita pela nossa equipe." },
    { q: "Vale mais a pena comprar pronto ou montar sob medida?", a: "Depende do seu caso. PCs prontos resolvem rápido, mas nem sempre encaixam exatamente no que você joga. Sob medida, a configuração é pensada para o seu uso e orçamento — por isso recomendamos conversar antes de decidir." },
    { q: "Vocês têm computador gamer pronto para pegar na loja?", a: "Trabalhamos com montagem sob medida conforme a necessidade de cada cliente. Fale com a gente pelo WhatsApp para saber a disponibilidade no momento." },
    { q: "Meu orçamento é limitado, ainda assim vale a pena montar sob medida?", a: "Sim. O processo é o mesmo independentemente do orçamento — entendemos o valor disponível e indicamos a configuração mais equilibrada dentro dele." },
    { q: "Vocês dão suporte depois que o computador é entregue?", a: "Sim. Além da montagem, a InfoSystem também presta assistência técnica e suporte para o computador depois da compra." },
  ];
  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}}>
              Antes de decidir, veja as dúvidas mais comuns.
            </h2>
            <p className="reveal lede dark" data-delay="2" style={{marginTop:18}}>
              Não achou sua dúvida aqui? Chame no WhatsApp — respondemos 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>
  );
}

/* ──────────── CTA FINAL + CROSS-SELL ──────────── */
function GMMCTAFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="container">
        <span className="tag dark reveal">Vamos montar o seu?</span>
        <h2 className="reveal h-section" data-delay="1" style={{marginTop:20}}>
          Fale com a InfoSystem e monte seu computador gamer sob medida.
        </h2>
        <p className="reveal lede dark" data-delay="2" style={{margin:'24px auto 0'}}>
          Conte o que você joga e o orçamento disponível — a orientação técnica é por nossa conta.
        </p>
        <div className="reveal" data-delay="3">
          <a className="btn btn-primary" href={WA_LINK_GAMER_MARINGA} target="_blank" rel="noopener" style={{fontSize:16, padding:'18px 28px'}}>
            <Icon name="whats" size={17}/> Montar meu PC gamer
          </a>
        </div>
        <p className="reveal" data-delay="4" style={{marginTop:28}}>
          <a href="computadores-gamer-profissionais.html" style={{marginRight:24, textDecoration:'underline'}}>Ver todas as soluções em computadores →</a>
          <a href="assistencia-tecnica.html" style={{textDecoration:'underline'}}>Já tenho computador, preciso de assistência →</a>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, {
  GMMHero, GMMProntoOuSobMedida, GMMPerfil, GMMComoFunciona, GMMFAQ, GMMCTAFinal,
  GMM_NAV, GMM_FOOTER_NAV
});