/* Sections specific to "Computadores Gamer e Profissionais" page.
   Reuses Header / Footer / WhatsFloat / OutrasSolucoes / Icon / Visuals from shared files. */

const GM_NAV = [
  ['Desempenho', '#performance'],
  ['Perfis', '#perfis'],
  ['Montagem', '#montagem'],
  ['Diferenciais', '#confianca'],
  ['FAQ', '#faq'],
  ['Contato', '#contato'],
];
const GM_FOOTER_NAV = [
  ['Perfis', '#perfis'],
  ['Performance', '#performance'],
  ['Montagem', '#montagem'],
  ['Diferenciais', '#confianca'],
  ['FAQ', '#faq'],
];

/* ──────────── HERO ──────────── */
function GMHeroComposition() {
  return (
    <div className="gm-hero-visual">
      <svg viewBox="0 0 640 640" width="100%" height="100%" aria-hidden="true">
        <defs>
          <linearGradient id="gmCase" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#1c1c24"/>
            <stop offset="1" stopColor="#08080c"/>
          </linearGradient>
          <linearGradient id="gmRgb" x1="0" x2="1">
            <stop offset="0" stopColor="#ff2a2a"/>
            <stop offset=".5" stopColor="#a020f0" stopOpacity=".85"/>
            <stop offset="1" stopColor="#2a8cff"/>
          </linearGradient>
          <radialGradient id="gmGlow" cx=".5" cy=".5" r=".5">
            <stop offset="0" stopColor="rgba(255,42,42,.4)"/>
            <stop offset="1" stopColor="rgba(255,42,42,0)"/>
          </radialGradient>
        </defs>

        {/* faint grid */}
        <g opacity="0.12" stroke="#fff" strokeWidth="0.5">
          {Array.from({length:12}).map((_,i)=>(
            <line key={`v${i}`} x1={i*55+20} y1="20" x2={i*55+20} y2="620"/>
          ))}
          {Array.from({length:12}).map((_,i)=>(
            <line key={`h${i}`} x1="20" y1={i*55+20} x2="620" y2={i*55+20}/>
          ))}
        </g>

        <circle cx="380" cy="320" r="230" fill="url(#gmGlow)"/>

        {/* main PC tower */}
        <g transform="translate(200,90)">
          <rect width="260" height="460" rx="18" fill="url(#gmCase)" stroke="rgba(255,255,255,0.1)"/>
          {/* glass panel */}
          <rect x="20" y="28" width="220" height="340" rx="10" fill="rgba(255,255,255,0.025)" stroke="rgba(255,255,255,0.08)"/>
          {/* top RGB */}
          <rect x="28" y="42" width="204" height="5" rx="2.5" fill="url(#gmRgb)" opacity="0.9"/>

          {/* motherboard area */}
          <rect x="32" y="58" width="196" height="200" rx="6" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.06)"/>

          {/* CPU heatsink */}
          <g transform="translate(80,90)">
            <rect width="64" height="64" rx="4" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)"/>
            {/* fan */}
            <g transform="translate(32,32)">
              <circle r="26" fill="none" stroke="rgba(255,255,255,0.18)"/>
              <g>
                {Array.from({length:7}).map((_,i)=>(
                  <path key={i} d="M0,0 Q9,-12 0,-22 Q-9,-12 0,0Z" fill="rgba(255,255,255,0.22)" transform={`rotate(${i*(360/7)})`}/>
                ))}
                <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="4.5s" repeatCount="indefinite"/>
              </g>
              <circle r="6" fill="#0f0f12" stroke="rgba(255,42,42,0.6)"/>
            </g>
          </g>

          {/* RAM sticks */}
          <g transform="translate(168,68)">
            <rect width="6" height="100" rx="1" fill="#ff2a2a"/>
            <rect x="11" width="6" height="100" rx="1" fill="#a020f0"/>
            <rect x="22" width="6" height="100" rx="1" fill="#2a8cff"/>
            <rect x="33" width="6" height="100" rx="1" fill="rgba(255,255,255,0.4)"/>
          </g>

          {/* GPU */}
          <g transform="translate(40,180)">
            <rect width="180" height="58" rx="5" fill="#0a0a0e" stroke="rgba(255,255,255,0.12)"/>
            {/* RGB stripe along GPU */}
            <rect x="6" y="4" width="168" height="3" rx="1.5" fill="url(#gmRgb)"/>
            {[34,90,146].map((x,i)=>(
              <g key={i} transform={`translate(${x},32)`}>
                <circle r="18" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
                <path d="M0,-14 L3,-3 L14,0 L3,3 L0,14 L-3,3 L-14,0 L-3,-3 Z" fill="rgba(255,255,255,0.22)">
                  <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur={`${2.4+i*0.3}s`} repeatCount="indefinite"/>
                </path>
              </g>
            ))}
            <text x="6" y="54" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(255,255,255,0.45)" letterSpacing="1">GPU 12GB</text>
          </g>

          {/* NVMe slot */}
          <g transform="translate(50,260)">
            <rect width="60" height="8" rx="2" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.12)"/>
            <text x="0" y="22" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(255,255,255,0.5)" letterSpacing="1">NVMe</text>
          </g>

          {/* PSU shroud */}
          <rect x="20" y="278" width="220" height="80" rx="8" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)"/>
          <text x="32" y="310" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(255,255,255,0.4)" letterSpacing="2">PSU · 850W</text>
          <rect x="32" y="320" width="60" height="3" rx="1.5" fill="#ff2a2a"/>

          {/* I/O front */}
          <g transform="translate(40,386)">
            <rect width="20" height="6" rx="2" fill="rgba(255,255,255,0.1)"/>
            <rect x="28" width="20" height="6" rx="2" fill="rgba(255,255,255,0.1)"/>
            <rect x="56" width="40" height="6" rx="3" fill="#ff2a2a"/>
            <circle cx="180" cy="3" r="3" fill="#ff2a2a">
              <animate attributeName="opacity" values="1;0.3;1" dur="2.4s" repeatCount="indefinite"/>
            </circle>
          </g>

          <text x="22" y="436" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.55)" letterSpacing="2">INFOSYSTEM · BUILD</text>
          <rect x="158" y="425" width="80" height="14" rx="3" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)"/>
          <text x="170" y="435" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#ff8888" letterSpacing="1">CUSTOM</text>
        </g>

        {/* floating fps badge */}
        <g transform="translate(70,140)">
          <rect width="120" height="58" rx="14" fill="rgba(15,15,18,0.85)" stroke="rgba(255,255,255,0.12)"/>
          <text x="16" y="22" fontSize="8" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.45)" letterSpacing="2">DESEMPENHO</text>
          <text x="16" y="46" fontSize="22" fontWeight="600" fill="#fff">Fluido</text>
          <circle cx="96" cy="38" r="6" fill="#3aff7f"/>
        </g>

        {/* floating temp badge */}
        <g transform="translate(490,420)">
          <rect width="110" height="58" rx="14" fill="rgba(15,15,18,0.85)" stroke="rgba(255,255,255,0.12)"/>
          <text x="14" y="22" fontSize="8" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.45)" letterSpacing="2">TEMP CPU</text>
          <text x="14" y="46" fontSize="22" fontWeight="600" fill="#fff">62°C</text>
          <rect x="78" y="38" width="20" height="4" rx="2" fill="#3aff7f"/>
        </g>
      </svg>
    </div>
  );
}

function GMHero() {
  return (
    <section className="gm-hero" id="top">
      <div className="container gm-hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot"/> InfoSystem · Computadores sob medida</div>
          <h1 className="reveal h-display" data-delay="1" style={{marginTop:22, color:'#fff'}}>
            Computadores <em>sob medida</em> para jogar, trabalhar e criar.
          </h1>
          <p className="reveal lede" data-delay="2" style={{marginTop:22}}>
            A InfoSystem monta e vende computadores gamer e profissionais com configurações
            pensadas para sua necessidade, seu uso e seu orçamento.
          </p>
          <div className="reveal hero-actions" data-delay="3">
            <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
              <Icon name="whats" size={16}/> Pedir orçamento no WhatsApp
            </a>
            <a className="btn btn-ghost-light" href="#perfis">
              Ver opções de uso <Icon name="arrow" size={15}/>
            </a>
          </div>
          <div className="reveal hero-reinforce" data-delay="4">
            <span className="ping"/> Montagem profissional, configuração completa e garantia pela loja
          </div>
          <div className="reveal pill-row" data-delay="5">
            <span className="pill"><Icon name="sparkle" size={14}/> Gamer</span>
            <span className="pill"><Icon name="cog" size={14}/> Profissional</span>
            <span className="pill"><Icon name="monitor" size={14}/> Escritório</span>
            <span className="pill"><Icon name="database" size={14}/> Edição</span>
            <span className="pill"><Icon name="compass" size={14}/> Alta performance</span>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <GMHeroComposition/>
        </div>
      </div>
    </section>
  );
}

/* ──────────── PERFIS / OBJETIVOS ──────────── */
function GMPerfis() {
  const items = [
    { t: "PC Gamer", s: "Para jogar com fluidez e estabilidade.", ic: "sparkle", dark: true },
    { t: "PC Profissional", s: "Para trabalho, projetos e multitarefa.", ic: "cog", dark: false },
    { t: "PC para Escritório", s: "Confiável para a rotina administrativa.", ic: "monitor", dark: false },
    { t: "Estudo & Home Office", s: "Equilíbrio entre desempenho e custo.", ic: "lifebuoy", dark: true },
    { t: "Edição & Criação", s: "Para vídeo, design e criação de conteúdo.", ic: "database", dark: false },
    { t: "Projetos & Renderização", s: "Para CAD, modelagem 3D e render.", ic: "compass", dark: true },
    { t: "Multitarefas", s: "Várias frentes abertas sem travar.", ic: "route", dark: false },
    { t: "Alta Performance", s: "Configurações robustas para usos exigentes.", ic: "shield", dark: true },
  ];
  return (
    <section className="section light" id="perfis">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Comece pelo seu objetivo</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Cada uso pede uma configuração certa.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Antes de vender, a InfoSystem entende o que você realmente precisa para indicar uma
            máquina equilibrada, potente e com bom custo-benefício.
          </p>
          <p className="reveal" data-delay="2" style={{marginTop:14, display:'flex', flexWrap:'wrap', gap:'8px 20px'}}>
            <a href="computadores-gamer-maringa.html" style={{color:'var(--red)', fontWeight:600, textDecoration:'underline'}}>Focado em jogos? Veja computador gamer em Maringá →</a>
            <a href="computadores-profissionais-workstation.html" style={{color:'var(--red)', fontWeight:600, textDecoration:'underline'}}>É para trabalho? Veja workstations →</a>
            <a href="monte-seu-computador.html" style={{color:'var(--red)', fontWeight:600, textDecoration:'underline'}}>Ainda não decidiu? Veja como montar sob medida →</a>
          </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">PERFIL {String(i+1).padStart(2,'0')}</span>
                <h4 style={{marginTop:8}}>{p.t}</h4>
                <p className="sub" style={{marginTop:6}}>{p.s}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── DOR ──────────── */
function GMDor() {
  const dores = [
    "Comprar peças incompatíveis",
    "Escolher fonte abaixo do necessário",
    "Gargalo entre processador e placa de vídeo",
    "Memória RAM insuficiente",
    "Armazenamento inadequado para o uso",
    "Aquecimento por gabinete mal dimensionado",
    "Não saber qual placa de vídeo escolher",
    "Gastar mais do que realmente precisa",
    "Computador que não roda os jogos ou softwares",
    "Não ter suporte local depois da compra",
  ];
  return (
    <section className="section darker" id="dor">
      <div className="container">
        <div className="problem-grid">
          <div>
            <div className="reveal eyebrow"><span className="dot"/> Quando a escolha falha</div>
            <h2 className="reveal h-section" data-delay="1" style={{marginTop:18, color:'#fff'}}>
              Comprar computador sem orientação <span style={{color:'var(--red-2)'}}>pode sair caro</span>.
            </h2>
            <p className="reveal lede" data-delay="2" style={{marginTop:22}}>
              Uma configuração mal escolhida pode gerar gargalos, travamentos, baixa performance,
              aquecimento, incompatibilidade de peças e gastos desnecessários.
            </p>
          </div>
          <div className="reveal" data-delay="2">
            <div className="dor-list darkmode">
              {dores.map((d, i) => (
                <div key={i} className="dor darkmode">
                  <span className="num">{String(i+1).padStart(2,'0')}</span>
                  <span className="txt" style={{color:'#fff'}}>{d}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── SOLUÇÃO ──────────── */
function GMSolucao() {
  const items = [
    ["Entendimento da necessidade do cliente", "compass"],
    ["Indicação de configuração equilibrada", "sparkle"],
    ["Compatibilidade entre componentes", "check"],
    ["Montagem profissional", "cog"],
    ["Organização interna dos cabos", "route"],
    ["Instalação de sistema e drivers", "database"],
    ["Testes antes da entrega", "shield"],
    ["Suporte e garantia pela loja", "lifebuoy"],
  ];
  return (
    <section className="section dark" id="solucao">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">A solução</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              A configuração certa para o seu uso, orçamento e objetivo.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            A InfoSystem orienta a escolha dos componentes, monta o computador com cuidado técnico
            e entrega a máquina configurada, testada e pronta para uso.
          </p>
        </div>

        <div className="sol-grid">
          {items.map(([t, ic], i) => (
            <article key={i} className="sol-card reveal" data-delay={Math.min(i, 5)}>
              <div>
                <div className="num">{String(i+1).padStart(2,'0')} · ETAPA</div>
                <div style={{marginTop:16, color:'var(--red-2)'}}><Icon name={ic} size={22}/></div>
                <h3 style={{color:'#fff', marginTop:18}}>{t}</h3>
              </div>
              <div className="arr"><Icon name="arrow" size={14}/></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── BLOCKS — 4 perfis grandes ──────────── */
function GMBlocks() {
  const blocks = [
    { t: "PC Gamer.", p: "Máquinas para jogar com fluidez, estabilidade e desempenho compatível com os jogos, resolução e qualidade gráfica desejada.", v: <GMGamerArt/>, flip: false },
    { t: "PC Profissional.", p: "Computadores para produtividade, multitarefa, edição, projetos, programação, arquitetura, engenharia e uso avançado.", v: <GMProfArt/>, flip: true },
    { t: "PC para Escritório.", p: "Máquinas confiáveis para empresas, atendimento, financeiro, sistemas de gestão, navegação, pacote Office e rotinas administrativas.", v: <GMOfficeArt/>, flip: false },
    { t: "PC de Alta Performance.", p: "Configurações mais robustas para quem precisa de desempenho superior em jogos, criação de conteúdo, renderização ou softwares exigentes.", v: <GMHighPerfArt/>, flip: true },
  ];
  return (
    <section className="section light" id="explore">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Explore os perfis</span>
            <h2 className="h-section" style={{marginTop:18}}>Quatro perfis para começar a conversa.</h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            A configuração final é desenhada com você. Esses perfis são pontos de partida para
            entender o caminho ideal de hardware.
          </p>
        </div>

        {blocks.map((b, i) => (
          <div key={i} className={`detalhe-block reveal ${b.flip ? 'flip' : ''}`}>
            <div className="detalhe-text">
              <span className="mono" style={{color:'var(--red)', fontSize:12, letterSpacing:2}}>0{i+1} / 04</span>
              <h3>{b.t}</h3>
              <p>{b.p}</p>
            </div>
            <div className="detalhe-visual" data-parallax="0.03">{b.v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function GMGamerArt() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <defs>
        <radialGradient id="gmGamerG" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.4)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
        <linearGradient id="gmGamerRgb" x1="0" x2="1">
          <stop offset="0" stopColor="#ff2a2a"/>
          <stop offset=".5" stopColor="#a020f0" stopOpacity=".85"/>
          <stop offset="1" stopColor="#2a8cff"/>
        </linearGradient>
      </defs>
      <circle cx="200" cy="160" r="120" fill="url(#gmGamerG)"/>
      {/* monitor */}
      <g transform="translate(50,40)">
        <rect width="300" height="180" rx="8" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
        <rect x="8" y="8" width="284" height="164" rx="4" fill="#08080a"/>
        {/* gameplay abstract */}
        <g transform="translate(20,28)">
          <text x="0" y="9" fontSize="8" fontFamily="JetBrains Mono, monospace" fill="#3aff7f" letterSpacing="1">FRAME · ESTÁVEL</text>
          <rect x="0" y="14" width="40" height="3" rx="1.5" fill="#3aff7f"/>
        </g>
        <g transform="translate(20,60)">
          {/* crosshair */}
          <circle cx="120" cy="50" r="20" fill="none" stroke="rgba(255,42,42,0.7)" strokeWidth="1.4"/>
          <line x1="120" y1="38" x2="120" y2="46" stroke="#ff2a2a" strokeWidth="1.4"/>
          <line x1="120" y1="54" x2="120" y2="62" stroke="#ff2a2a" strokeWidth="1.4"/>
          <line x1="108" y1="50" x2="116" y2="50" stroke="#ff2a2a" strokeWidth="1.4"/>
          <line x1="124" y1="50" x2="132" y2="50" stroke="#ff2a2a" strokeWidth="1.4"/>
          {/* hud bars */}
          <rect x="0" y="80" width="100" height="4" rx="2" fill="rgba(255,255,255,0.12)"/>
          <rect x="0" y="80" width="70" height="4" rx="2" fill="#ff2a2a"/>
          <rect x="0" y="88" width="60" height="4" rx="2" fill="rgba(255,255,255,0.12)"/>
          <rect x="0" y="88" width="50" height="4" rx="2" fill="#3aff7f"/>
        </g>
        <rect x="0" y="172" width="284" height="3" rx="1.5" fill="url(#gmGamerRgb)" opacity="0.7"/>
      </g>
      {/* stand */}
      <rect x="190" y="220" width="20" height="34" rx="3" fill="#0f0f12"/>
      <rect x="160" y="250" width="80" height="6" rx="3" fill="#0f0f12"/>
    </svg>
  );
}

function GMProfArt() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <defs>
        <radialGradient id="gmProfG" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.25)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
      </defs>
      <circle cx="200" cy="160" r="120" fill="url(#gmProfG)"/>
      {/* monitor with cad-like wireframe */}
      <g transform="translate(50,40)">
        <rect width="300" height="180" rx="8" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
        <rect x="8" y="8" width="284" height="164" rx="4" fill="#fff"/>
        {/* sidebar */}
        <rect x="8" y="8" width="40" height="164" fill="#f0efea"/>
        <rect x="16" y="20" width="24" height="3" rx="1.5" fill="#ff2a2a"/>
        <rect x="16" y="30" width="18" height="3" rx="1.5" fill="rgba(0,0,0,0.18)"/>
        <rect x="16" y="40" width="22" height="3" rx="1.5" fill="rgba(0,0,0,0.18)"/>
        {/* wireframe shape */}
        <g transform="translate(80,40)" stroke="rgba(0,0,0,0.4)" strokeWidth="1.1" fill="none">
          <path d="M0,80 L60,0 L160,40 L160,120 L60,160 Z"/>
          <path d="M0,80 L60,40 L160,40"/>
          <path d="M60,0 L60,160"/>
          <path d="M60,40 L160,80"/>
          <path d="M60,160 L160,120"/>
          <path d="M0,80 L60,120 L160,80"/>
          <path d="M60,120 L60,160"/>
        </g>
        <g transform="translate(80,180)" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="rgba(0,0,0,0.5)">
          <text x="0" y="0">X 124.8</text>
          <text x="50" y="0">Y 86.2</text>
          <text x="100" y="0">Z 32.0</text>
        </g>
      </g>
      <rect x="190" y="220" width="20" height="34" rx="3" fill="#0f0f12"/>
      <rect x="160" y="250" width="80" height="6" rx="3" fill="#0f0f12"/>
    </svg>
  );
}

function GMOfficeArt() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      {/* desk top view: 2 monitors + tower */}
      <g transform="translate(40,60)">
        <rect width="140" height="100" rx="6" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
        <rect x="6" y="6" width="128" height="88" rx="3" fill="#fff"/>
        <rect x="14" y="14" width="80" height="3" rx="1.5" fill="rgba(0,0,0,0.25)"/>
        <rect x="14" y="22" width="100" height="3" rx="1.5" fill="rgba(0,0,0,0.15)"/>
        <rect x="14" y="30" width="60" height="3" rx="1.5" fill="rgba(0,0,0,0.15)"/>
        <rect x="14" y="46" width="100" height="34" rx="3" fill="#f6f6f4"/>
        <rect x="20" y="54" width="40" height="3" rx="1.5" fill="#ff2a2a"/>
        <rect x="20" y="62" width="60" height="3" rx="1.5" fill="rgba(0,0,0,0.18)"/>
        <rect x="20" y="70" width="34" height="3" rx="1.5" fill="rgba(0,0,0,0.18)"/>
      </g>
      <g transform="translate(220,60)">
        <rect width="140" height="100" rx="6" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
        <rect x="6" y="6" width="128" height="88" rx="3" fill="#fff"/>
        {/* spreadsheet */}
        <g transform="translate(14,14)" stroke="rgba(0,0,0,0.12)" strokeWidth="0.6" fill="none">
          {Array.from({length:6}).map((_,i)=>(<line key={i} x1="0" y1={i*14} x2="100" y2={i*14}/>))}
          {Array.from({length:6}).map((_,i)=>(<line key={i} x1={i*20} y1="0" x2={i*20} y2="70"/>))}
        </g>
        <rect x="14" y="14" width="20" height="14" fill="rgba(0,0,0,0.06)"/>
        <rect x="34" y="28" width="20" height="14" fill="rgba(255,42,42,0.18)"/>
      </g>
      {/* mini tower */}
      <g transform="translate(180,170)">
        <rect width="40" height="80" rx="4" fill="#0f0f12" stroke="rgba(255,255,255,0.12)"/>
        <rect x="6" y="8" width="28" height="40" rx="3" fill="rgba(255,255,255,0.04)"/>
        <circle cx="20" cy="68" r="3" fill="#ff2a2a">
          <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
        </circle>
      </g>
      <line x1="20" y1="260" x2="380" y2="260" stroke="rgba(255,255,255,0.08)"/>
    </svg>
  );
}

function GMHighPerfArt() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <defs>
        <radialGradient id="gmHpG" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.5)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="140" fill="url(#gmHpG)"/>
      {/* gauges */}
      <g transform="translate(60,90)">
        <text x="0" y="0" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="2" fill="rgba(255,255,255,0.4)">CPU</text>
        <circle cx="40" cy="50" r="34" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="4"/>
        <circle cx="40" cy="50" r="34" fill="none" stroke="#ff2a2a" strokeWidth="4" strokeDasharray="170 230" strokeLinecap="round" transform="rotate(-90 40 50)"/>
        <text x="40" y="55" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="18" fontWeight="600" fill="#fff">84%</text>
      </g>
      <g transform="translate(170,90)">
        <text x="0" y="0" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="2" fill="rgba(255,255,255,0.4)">GPU</text>
        <circle cx="40" cy="50" r="34" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="4"/>
        <circle cx="40" cy="50" r="34" fill="none" stroke="#ff2a2a" strokeWidth="4" strokeDasharray="195 230" strokeLinecap="round" transform="rotate(-90 40 50)"/>
        <text x="40" y="55" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="18" fontWeight="600" fill="#fff">92%</text>
      </g>
      <g transform="translate(280,90)">
        <text x="0" y="0" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="2" fill="rgba(255,255,255,0.4)">RAM</text>
        <circle cx="40" cy="50" r="34" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="4"/>
        <circle cx="40" cy="50" r="34" fill="none" stroke="#ff2a2a" strokeWidth="4" strokeDasharray="140 230" strokeLinecap="round" transform="rotate(-90 40 50)"/>
        <text x="40" y="55" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="18" fontWeight="600" fill="#fff">68%</text>
      </g>
      {/* fps trend */}
      <g transform="translate(40,210)">
        <text x="0" y="0" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="2" fill="rgba(255,255,255,0.4)">FRAMES · CONSTANTES</text>
        <path d="M0,40 L40,30 L80,32 L120,22 L160,28 L200,18 L240,22 L280,12 L320,16"
          stroke="#ff2a2a" strokeWidth="1.8" fill="none"/>
        <path d="M0,40 L40,30 L80,32 L120,22 L160,28 L200,18 L240,22 L280,12 L320,16 L320,60 L0,60 Z"
          fill="rgba(255,42,42,0.15)"/>
      </g>
    </svg>
  );
}

/* ──────────── SERVIÇOS ──────────── */
function GMServicos() {
  const svcs = [
    "Computadores gamer",
    "Computadores profissionais",
    "Computadores para escritório",
    "Computadores para estudo",
    "Computadores para home office",
    "Computadores para edição de vídeo",
    "Computadores para design gráfico",
    "Computadores para arquitetura",
    "Computadores para engenharia",
    "Computadores para programação",
    "Computadores para renderização",
    "Computadores para multitarefas",
    "Upgrades de computadores",
    "Troca de placa de vídeo",
    "Instalação de SSD NVMe",
    "Expansão de memória RAM",
    "Substituição de fonte",
    "Melhoria de refrigeração",
    "Organização interna e cable management",
    "Instalação de sistema, drivers e programas básicos",
  ];
  return (
    <section className="section dark" id="servicos">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Escopo</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              O que você pode montar com a InfoSystem.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Soluções para quem joga, trabalha, estuda ou cria — sempre com avaliação técnica antes
            da indicação da configuração.
          </p>
        </div>
        <div className="reveal svclist">
          {svcs.map((s, i) => (
            <div key={i} className="svcitem">
              <span className="check"><Icon name="check" size={13}/></span>
              <span className="txt">{s}</span>
            </div>
          ))}
        </div>
        <p className="safety-note reveal">
          O desempenho pode variar conforme configuração, jogo, resolução, qualidade gráfica e
          software utilizado. Indicamos a configuração com base na sua necessidade real.
        </p>
      </div>
    </section>
  );
}

/* ──────────── PERFORMANCE ──────────── */
function GMPerformance() {
  const items = [
    ["Processador adequado", "Escolhido conforme o tipo e nível de uso.", "cog"],
    ["Placa de vídeo equilibrada", "Compatível com jogos ou softwares desejados.", "sparkle"],
    ["SSD NVMe", "Boot e carregamento muito mais rápidos.", "database"],
    ["Memória RAM correta", "Capacidade adequada para multitarefa.", "shield"],
    ["Fonte dimensionada", "Estabilidade e segurança elétrica.", "lock"],
    ["Gabinete com fluxo de ar", "Refrigeração e organização interna.", "compass"],
    ["Refrigeração adequada", "Temperaturas saudáveis sob carga.", "check"],
    ["Placa-mãe compatível", "Preparada para upgrades futuros.", "route"],
  ];
  return (
    <section className="section cream" id="performance">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Performance</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Performance não depende de uma peça só. Depende do conjunto.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Processador, placa de vídeo, memória RAM, SSD, fonte, refrigeração, gabinete e
            placa-mãe precisam trabalhar em equilíbrio. Uma boa configuração evita gargalos,
            instabilidade e desperdício de dinheiro.
          </p>
        </div>

        <div className="comp-grid" style={{background:'var(--line-dark)', borderColor:'var(--line-dark)'}}>
          {items.map(([t, p, ic], i) => (
            <div key={i} className="comp-cell" style={{background:'#fff'}}>
              <span className="pic" style={{color:'var(--red)'}}><Icon name={ic} size={22}/></span>
              <h4 style={{color:'var(--text-dark)'}}>{t}</h4>
              <p style={{color:'var(--text-dark-dim)'}}>{p}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{marginTop:32}}>
          <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
            <Icon name="whats" size={16}/> Quero uma configuração equilibrada
          </a>
        </div>
      </div>
    </section>
  );
}

/* ──────────── GAMER PANEL ──────────── */
function GMGamer() {
  const items = [
    "Jogos competitivos",
    "Jogos mundo aberto",
    "Full HD",
    "2K, quando aplicável",
    "Jogos com gráficos pesados",
    "Jogar e fazer lives, quando a configuração permitir",
    "Orientação realista sobre FPS",
    "Configurações sem gargalos",
  ];
  return (
    <section className="section dark" id="gamer">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Gamer</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              Para jogar com mais estabilidade e desempenho.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            A InfoSystem ajuda você a escolher um computador gamer de acordo com os jogos que
            pretende rodar, seu orçamento e o nível de desempenho esperado.
          </p>
        </div>

        <div className="usecase-panel reveal">
          <div>
            <h3 className="h-block" style={{color:'#fff'}}>O que orientamos antes do orçamento:</h3>
            <ul className="usecase-list" style={{listStyle:'none', padding:0, margin:'24px 0 0'}}>
              {items.map((it, i) => (
                <li key={i} className="ui">
                  <span className="check"><Icon name="check" size={12}/></span>
                  {it}
                </li>
              ))}
            </ul>
            <div className="usecase-note">
              O desempenho pode variar conforme o jogo, resolução, qualidade gráfica, drivers e
              configuração escolhida.
            </div>
            <div style={{marginTop:24}}>
              <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="whats" size={16}/> Orçar PC Gamer
              </a>
            </div>
          </div>
          <div className="delivery-visual" data-parallax="0.03" style={{aspectRatio:'4/3', alignSelf:'center', width:'100%'}}>
            <GMGamerArt/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── PROFISSIONAL PANEL ──────────── */
function GMProfissional() {
  const items = [
    "AutoCAD", "SketchUp", "Revit", "Lumion", "SolidWorks",
    "Edição de vídeo", "Design gráfico", "Programação",
    "Sistemas empresariais", "Multitarefas avançadas",
    "Atendimento e rotinas administrativas", "Projetos e produtividade",
  ];
  return (
    <section className="section light" id="profissional">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Profissional</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Para trabalhar com mais fluidez, estabilidade e produtividade.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Se você usa softwares pesados, projetos, edição, renderização, sistemas empresariais
            ou multitarefa, a configuração precisa ser pensada com critério técnico.
          </p>
        </div>

        <div className="usecase-panel reveal" style={{background:'linear-gradient(160deg, #fff 0%, #f4f4ef 100%)', borderColor:'rgba(0,0,0,0.08)', color:'var(--text-dark)'}}>
          <div>
            <h3 className="h-block" style={{color:'var(--text-dark)'}}>Usos comuns que orientamos:</h3>
            <ul className="usecase-list" style={{listStyle:'none', padding:0, margin:'24px 0 0', gap:'8px 24px'}}>
              {items.map((it, i) => (
                <li key={i} className="ui" style={{color:'var(--text-dark)'}}>
                  <span className="check" style={{background:'rgba(225,10,23,0.10)', color:'var(--red)'}}><Icon name="check" size={12}/></span>
                  {it}
                </li>
              ))}
            </ul>
            <div className="usecase-note" style={{color:'var(--text-dark-dim)', borderColor:'rgba(0,0,0,0.16)', background:'rgba(0,0,0,0.02)'}}>
              A configuração ideal pode variar conforme o software, tamanho dos projetos, tipo de
              uso e nível de desempenho desejado.
            </div>
            <div style={{marginTop:24}}>
              <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="whats" size={16}/> Orçar PC Profissional
              </a>
            </div>
          </div>
          <div className="delivery-visual" data-parallax="0.03" style={{aspectRatio:'4/3', alignSelf:'center', width:'100%', background:'rgba(0,0,0,0.04)', borderColor:'rgba(0,0,0,0.08)'}}>
            <GMProfArt/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── MONTAGEM PROFISSIONAL ──────────── */
function GMMontagem() {
  const items = [
    ["Instalação correta dos componentes", "Encaixes, parafusos e termopastes aplicados com critério.", "cog"],
    ["Organização interna dos cabos", "Cable management que melhora aparência e fluxo.", "route"],
    ["Melhor fluxo de ar", "Ventoinhas posicionadas para refrigeração eficaz.", "compass"],
    ["Configuração de BIOS quando necessário", "Perfis e ajustes adequados ao hardware.", "sparkle"],
    ["Instalação de sistema operacional", "Pronto para uso assim que ligar.", "monitor"],
    ["Instalação de drivers", "Versões compatíveis com o hardware montado.", "database"],
    ["Programas básicos", "Pacotes essenciais para o dia a dia.", "check"],
    ["Testes de funcionamento", "Estresse, estabilidade e temperatura conferidos.", "shield"],
    ["Orientação de uso na entrega", "Você sai sabendo como tirar o melhor da máquina.", "lifebuoy"],
  ];
  return (
    <section className="section cream" id="montagem">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Montagem</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Montagem limpa, testada e pronta para uso.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            A montagem profissional faz diferença na estabilidade, temperatura, organização
            interna, vida útil e aparência final do computador.
          </p>
        </div>

        <div className="assembly-grid">
          {items.map(([t, p, ic], i) => (
            <article key={i} className="assembly reveal" data-delay={Math.min(i, 5)}>
              <div className="ic"><Icon name={ic} size={18}/></div>
              <h4>{t}</h4>
              <p>{p}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── CONFIANÇA / DIFERENCIAIS ──────────── */
function GMConfianca() {
  const items = [
    ["Loja física em Maringá–PR", "pin"],
    ["Atendimento técnico especializado", "lifebuoy"],
    ["Orientação antes da compra", "compass"],
    ["Configuração personalizada", "cog"],
    ["Montagem profissional", "check"],
    ["Equipamento testado antes da entrega", "shield"],
    ["Sistema e drivers configurados", "database"],
    ["Suporte pós-venda", "route"],
    ["Garantia pela loja", "lock"],
    ["Atendimento por WhatsApp", "whats"],
  ];
  return (
    <section className="section dark" id="confianca">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Diferenciais</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              Comprar com orientação técnica muda tudo.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Na InfoSystem, o cliente recebe orientação antes da compra, montagem profissional e
            suporte local depois da entrega. O objetivo é entregar um computador adequado para o
            uso real, sem exageros e sem promessas irreais.
          </p>
        </div>
        <div className="reveal trust-grid">
          {items.map(([t, ic], i) => (
            <div key={i} className="trust">
              <span className="ic"><Icon name={ic} size={20}/></span>
              <h4>{t}</h4>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── COMO FUNCIONA (8 steps) ──────────── */
function GMComoFunciona() {
  const steps = [
    ["Você chama no WhatsApp", "whats"],
    ["Informa o tipo de uso", "compass"],
    ["Entendemos orçamento e necessidade", "route"],
    ["Indicamos configuração equilibrada", "sparkle"],
    ["Após aprovação, realizamos a montagem", "cog"],
    ["Instalamos sistema, drivers e programas básicos", "database"],
    ["O computador é testado", "shield"],
    ["Você recebe a máquina pronta para uso", "lifebuoy"],
  ];
  return (
    <section className="section light" id="como-funciona">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Como funciona</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Do orçamento à entrega, tudo com clareza.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Um caminho transparente, com orientação técnica e aprovação do cliente antes da
            montagem.
          </p>
        </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" style={{color:'var(--red)'}}><Icon name={ic} size={16}/></span>
              </div>
              <h4>{t}</h4>
              <div className="step-line"/>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── CTA estratégico ──────────── */
function GMCTAStrip() {
  return (
    <section className="cta-strip">
      <div className="container">
        <div className="split-grid">
          <div>
            <span className="tag reveal">Equilíbrio &gt; exagero</span>
            <h2 className="reveal h-section" data-delay="1" style={{marginTop:18}}>
              O computador ideal não é o mais caro. É o mais certo para você.
            </h2>
          </div>
          <div className="reveal" data-delay="2">
            <p className="lede">
              Fale com a InfoSystem e receba uma orientação técnica para escolher uma configuração
              equilibrada, confiável e preparada para o seu uso.
            </p>
            <div className="row-actions">
              <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="whats" size={16}/> Pedir orçamento no WhatsApp
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── FAQ ──────────── */
function GMFAQ() {
  const items = [
    { q: "Vocês montam computador sob medida?", a: "Sim. Montamos computadores conforme o tipo de uso, necessidade e orçamento do cliente." },
    { q: "O computador já vai pronto para usar?", a: "Sim. O equipamento pode ser entregue com sistema operacional, drivers e programas básicos configurados." },
    { q: "Vocês vendem computador gamer?", a: "Sim. Montamos e vendemos computadores gamer conforme o desempenho desejado e o orçamento disponível." },
    { q: "Vocês montam computador para trabalho profissional?", a: "Sim. Indicamos configurações para produtividade, projetos, edição, renderização, engenharia, arquitetura, programação e outros usos profissionais." },
    { q: "Vocês ajudam a escolher as peças?", a: "Sim. A InfoSystem orienta a escolha dos componentes para montar uma configuração equilibrada e compatível com o uso desejado." },
    { q: "Vocês fazem upgrade em computador?", a: "Sim. Avaliamos o computador atual e indicamos upgrades como SSD, memória RAM, placa de vídeo, fonte, refrigeração e outros componentes compatíveis." },
    { q: "Vocês informam desempenho em jogos?", a: "Podemos orientar uma estimativa de desempenho conforme a configuração, jogo, resolução e qualidade gráfica. O desempenho pode variar de acordo com esses fatores." },
    { q: "Tem garantia?", a: "Sim. Os computadores contam com garantia pela loja conforme as condições informadas no orçamento." },
    { q: "Vocês parcelam?", a: "Sim. As condições de pagamento podem ser consultadas diretamente com a equipe pelo WhatsApp." },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="section light" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="tag dark reveal">FAQ</span>
            <h2 className="reveal h-section" data-delay="1" style={{marginTop:18}}>
              Perguntas frequentes.
            </h2>
            <p className="reveal lede dark" data-delay="2" style={{marginTop:18}}>
              Em caso de dúvidas adicionais, 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"><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 ──────────── */
function GMCTAFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="container">
        <span className="tag dark reveal">Contato</span>
        <h2 className="reveal h-section" data-delay="1" style={{marginTop:20}}>
          Vamos montar o computador ideal para você?
        </h2>
        <p className="reveal lede dark" data-delay="2" style={{margin:'24px auto 0'}}>
          Chame a InfoSystem no WhatsApp e receba uma indicação profissional para comprar com
          mais segurança.
        </p>
        <div className="reveal" data-delay="3">
          <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener" style={{fontSize:16, padding:'18px 28px'}}>
            <Icon name="whats" size={17}/> Pedir orçamento agora
          </a>
        </div>
        <p className="reveal mono" data-delay="4" style={{marginTop:18, fontSize:12, color:'var(--text-dark-dim)', letterSpacing:'0.14em', textTransform:'uppercase'}}>
          Atendimento em Maringá e região
        </p>
      </div>
    </section>
  );
}

/* ──────────── ECOSSISTEMA (cards para esta página) ──────────── */
const GM_ECO_CARDS = [
  {
    tag: "Assistência técnica",
    title: "Assistência Técnica de Notebook e Computador",
    desc: "Seu notebook ou computador está lento, travando, aquecendo, não liga ou precisa de upgrade? Conte com uma avaliação técnica profissional da InfoSystem.",
    cta: "Ver assistência técnica",
    href: "assistencia-tecnica.html",
    art: 'laptop',
    meta: "ATENDIMENTO PARA PESSOAS E EMPRESAS"
  },
  {
    tag: "Suporte empresarial",
    title: "Suporte Técnico Empresarial",
    desc: "Mantenha computadores, notebooks, servidores, redes e sistemas da sua empresa funcionando com mais segurança, organização e agilidade.",
    cta: "Conhecer suporte empresarial",
    href: "suporte-tecnico-empresarial.html",
    art: 'support',
    meta: "ATENDIMENTO RECORRENTE PARA EMPRESAS"
  },
];

Object.assign(window, {
  GMHero, GMPerfis, GMDor, GMSolucao, GMBlocks, GMServicos, GMPerformance,
  GMGamer, GMProfissional, GMMontagem, GMConfianca, GMComoFunciona,
  GMCTAStrip, GMFAQ, GMCTAFinal,
  GM_NAV, GM_FOOTER_NAV, GM_ECO_CARDS
});
