/* Sections specific to the "Assistência Técnica de Notebook e Computador" page.
   Reuses Header / Footer / WhatsFloat / OutrasSolucoes / Icon from sections.jsx and visuals.jsx. */

const AT_NAV = [
  ['Problemas', '#problemas'],
  ['Serviços', '#servicos'],
  ['Performance', '#performance'],
  ['Como funciona', '#como-funciona'],
  ['FAQ', '#faq'],
  ['Contato', '#contato'],
];
const AT_FOOTER_NAV = [
  ['Problemas', '#problemas'],
  ['Serviços', '#servicos'],
  ['Performance', '#performance'],
  ['Como funciona', '#como-funciona'],
  ['FAQ', '#faq'],
];

/* ──────────── HERO ──────────── */
function ATHeroComposition() {
  return (
    <div className="at-hero-visual">
      <svg viewBox="0 0 640 600" width="100%" height="100%" aria-hidden="true">
        <defs>
          <linearGradient id="atScreen" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#15151c"/>
            <stop offset="1" stopColor="#0a0a0e"/>
          </linearGradient>
          <linearGradient id="atRed" x1="0" x2="1">
            <stop offset="0" stopColor="#ff2a2a"/>
            <stop offset="1" stopColor="#b00811"/>
          </linearGradient>
          <radialGradient id="atGlow" 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="580"/>
          ))}
          {Array.from({length:12}).map((_,i)=>(
            <line key={`h${i}`} x1="20" y1={i*50+20} x2="620" y2={i*50+20}/>
          ))}
        </g>

        {/* desktop tower */}
        <g transform="translate(60,150)">
          <rect width="160" height="280" rx="12" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
          {/* glass */}
          <rect x="14" y="20" width="132" height="180" rx="6" fill="rgba(255,255,255,0.025)" stroke="rgba(255,255,255,0.08)"/>
          {/* RGB strip */}
          <rect x="20" y="30" width="120" height="4" rx="2" fill="url(#atRed)" opacity="0.85"/>
          {/* GPU */}
          <g transform="translate(20,120)">
            <rect width="120" height="36" rx="3" fill="#08080a" stroke="rgba(255,255,255,0.08)"/>
            {[26,60,94].map((x,i)=>(
              <g key={i} transform={`translate(${x},18)`}>
                <circle r="11" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
                <path d="M0,-7 L2,-2 L7,0 L2,2 L0,7 L-2,2 L-7,0 L-2,-2 Z" fill="rgba(255,255,255,0.18)">
                  <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur={`${2.4+i*0.3}s`} repeatCount="indefinite"/>
                </path>
              </g>
            ))}
          </g>
          {/* RAM */}
          <g transform="translate(86,52)">
            <rect width="5" height="60" rx="1" fill="#ff2a2a"/>
            <rect x="9" width="5" height="60" rx="1" fill="rgba(255,255,255,0.4)"/>
            <rect x="18" width="5" height="60" rx="1" fill="rgba(255,255,255,0.2)"/>
            <rect x="27" width="5" height="60" rx="1" fill="rgba(255,255,255,0.2)"/>
          </g>
          {/* CPU socket */}
          <rect x="24" y="50" width="48" height="48" rx="3" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.12)"/>
          <rect x="34" y="60" width="28" height="28" rx="2" fill="#1a1a22" stroke="rgba(255,255,255,0.2)"/>
          {/* power led */}
          <circle cx="140" cy="260" r="4" fill="#ff2a2a">
            <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
          </circle>
          <rect x="20" y="220" width="100" height="6" rx="2" fill="rgba(255,255,255,0.06)"/>
          <rect x="20" y="232" width="60" height="6" rx="2" fill="rgba(255,255,255,0.06)"/>
        </g>

        {/* laptop, tilted */}
        <g transform="translate(280,80)">
          <g transform="translate(0,0)">
            <rect width="320" height="200" rx="10" fill="#15151c" stroke="rgba(255,255,255,0.1)"/>
            <rect x="10" y="10" width="300" height="180" rx="5" fill="url(#atScreen)"/>
            {/* dashboard ui */}
            <g transform="translate(28,28)" fontFamily="JetBrains Mono, monospace">
              <text x="0" y="9" fontSize="8" letterSpacing="2" fill="rgba(255,255,255,0.4)">DIAGNÓSTICO ATIVO</text>
              <rect x="0" y="15" width="42" height="3" rx="1.5" fill="#ff2a2a"/>
              <text x="0" y="40" fontSize="20" fontWeight="600" fill="#fff">3 itens</text>
              <text x="74" y="40" fontSize="9" fill="rgba(255,255,255,0.4)" letterSpacing="1">a otimizar</text>
            </g>
            {/* bars */}
            <g transform="translate(28,80)">
              {[{l:'CPU',v:60,c:'#3aff7f'},{l:'HD',v:130,c:'#ff2a2a'},{l:'RAM',v:90,c:'#ffb02a'},{l:'TEMP',v:120,c:'#ff2a2a'},{l:'BAT',v:80,c:'#ffb02a'}].map((r,i)=>(
                <g key={i} transform={`translate(0,${i*18})`}>
                  <text x="0" y="8" fontSize="8" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.55)" letterSpacing="1">{r.l}</text>
                  <rect x="36" y="2" width="200" height="6" rx="3" fill="rgba(255,255,255,0.08)"/>
                  <rect x="36" y="2" width={r.v} height="6" rx="3" fill={r.c}/>
                </g>
              ))}
            </g>
            {/* small status */}
            <g transform="translate(228,28)">
              <circle cx="6" cy="6" r="6" fill="rgba(255,42,42,0.18)" stroke="#ff2a2a"/>
              <text x="20" y="10" fontSize="9" fontFamily="JetBrains Mono, monospace" fill="#ff2a2a">ATENÇÃO</text>
            </g>
            <rect x="-14" y="200" width="346" height="6" rx="2" fill="#0a0a0e"/>
          </g>
        </g>

        {/* tools */}
        <g transform="translate(380,420) rotate(15)">
          <rect width="160" height="16" rx="3" fill="#15151c" stroke="rgba(255,255,255,0.12)"/>
          <rect x="152" y="2" width="20" height="12" rx="2" fill="rgba(255,255,255,0.18)"/>
          <circle cx="80" cy="8" r="2.5" fill="#ff2a2a"/>
        </g>
        <g transform="translate(160,440) rotate(-20)">
          <rect width="120" height="10" rx="2" fill="#15151c" stroke="rgba(255,255,255,0.12)"/>
          <rect x="-6" y="-2" width="14" height="14" rx="3" fill="rgba(255,255,255,0.18)"/>
        </g>

        {/* glow */}
        <circle cx="540" cy="160" r="80" fill="url(#atGlow)"/>
      </svg>
    </div>
  );
}

function ATHero() {
  return (
    <section className="at-hero" id="top">
      <div className="container at-hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot"/> InfoSystem · Assistência Técnica</div>
          <h1 className="reveal h-display" data-delay="1" style={{marginTop:22, color:'#fff'}}>
            Seu notebook ou computador <em>voltou a dar problema?</em>
          </h1>
          <p className="reveal lede" data-delay="2" style={{marginTop:22}}>
            Assistência técnica especializada para manutenção, reparo, formatação, limpeza, upgrade
            e otimização de notebooks e computadores em Maringá e região.
          </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}/> Solicitar diagnóstico
            </a>
            <a className="btn btn-ghost-light" href="#servicos">
              Ver serviços <Icon name="arrow" size={15}/>
            </a>
          </div>
          <div className="reveal hero-reinforce" data-delay="4">
            <span className="ping"/> Atendimento técnico profissional, orçamento transparente
          </div>
          <div className="reveal pill-row" data-delay="5">
            <span className="pill"><Icon name="laptop" size={14}/> Notebooks</span>
            <span className="pill"><Icon name="monitor" size={14}/> Desktops</span>
            <span className="pill"><Icon name="cog" size={14}/> Upgrade</span>
            <span className="pill"><Icon name="shield" size={14}/> Preventiva</span>
            <span className="pill"><Icon name="sparkle" size={14}/> Diagnóstico</span>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <ATHeroComposition/>
        </div>
      </div>
    </section>
  );
}

/* ──────────── PROBLEMAS ──────────── */
function ATProblemas() {
  const items = [
    ["Notebook lento ou travando", "laptop"],
    ["Computador não liga", "monitor"],
    ["Superaquecimento", "sparkle"],
    ["Tela quebrada ou com falhas", "monitor"],
    ["Teclado com defeito", "cog"],
    ["Dobradiça ou carcaça danificada", "cog"],
    ["Sistema corrompido", "shield"],
    ["Vírus, erros e lentidão", "shield"],
    ["Falha em SSD, HD ou RAM", "database"],
    ["Problemas de carregamento", "sparkle"],
    ["Barulho excessivo", "cog"],
    ["Necessidade de upgrade", "compass"],
  ];
  return (
    <section className="section light" id="problemas">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Comece pelos principais problemas</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Problemas comuns que resolvemos todos os dias.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Se o seu equipamento está lento, travando ou apresentando falhas, a InfoSystem avalia
            o problema e indica a solução mais adequada.
          </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>
              <h4>{t}</h4>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── DOR ──────────── */
function ATDor() {
  const dores = [
    "Equipamento demorando muito para iniciar",
    "Travamentos durante o uso",
    "Lentidão para abrir programas",
    "Aquecimento e desligamentos inesperados",
    "Tela, teclado ou carcaça danificados",
    "Sistema com erros ou vírus",
    "Falta de espaço ou desempenho",
    "Medo de perder arquivos importantes",
    "Equipamento parado sem diagnóstico claro",
  ];
  return (
    <section className="section darker" id="dor">
      <div className="container">
        <div className="problem-grid">
          <div>
            <div className="reveal eyebrow"><span className="dot"/> O peso de um equipamento falhando</div>
            <h2 className="reveal h-section" data-delay="1" style={{marginTop:18, color:'#fff'}}>
              Quando o equipamento falha, <span style={{color:'var(--red-2)'}}>sua rotina para</span>.
            </h2>
            <p className="reveal lede" data-delay="2" style={{marginTop:22}}>
              Um notebook ou computador com problemas pode atrasar o trabalho, comprometer estudos,
              prejudicar atendimentos, gerar perda de produtividade e causar insegurança sobre
              arquivos, programas e funcionamento do sistema.
            </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 ATSolucao() {
  const items = [
    ["Avaliação técnica do equipamento", "sparkle"],
    ["Diagnóstico do problema", "compass"],
    ["Orçamento antes da execução", "check"],
    ["Reparo conforme necessidade", "cog"],
    ["Upgrade quando for viável", "lifebuoy"],
    ["Limpeza e manutenção preventiva", "shield"],
    ["Testes antes da entrega", "check"],
    ["Orientação clara ao cliente", "route"],
  ];
  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'}}>
              Diagnóstico técnico e solução certa para cada equipamento.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            A InfoSystem avalia notebooks e computadores com critério técnico, identifica a origem
            do problema e orienta o cliente com clareza antes da execução do serviço.
          </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 TÉCNICA</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>
  );
}

/* ──────────── EXPLORE OS SERVIÇOS (4 large editorial blocks) ──────────── */
function ATServicosBlocks() {
  const blocks = [
    {
      t: "Mais desempenho para sua máquina.",
      p: "Formatação, otimização, upgrade com SSD, expansão de memória RAM e ajustes para melhorar a velocidade do sistema.",
      v: <ComputerVisual/>, flip: false
    },
    {
      t: "Manutenção preventiva de verdade.",
      p: "Limpeza interna, troca de pasta térmica, verificação de aquecimento e cuidados que ajudam a preservar a vida útil do equipamento.",
      v: <ATPreventiveVisual/>, flip: true
    },
    {
      t: "Reparo para notebooks.",
      p: "Troca de tela, teclado, conectores, reparos em carcaça, dobradiça e outros serviços conforme avaliação técnica.",
      v: <ATLaptopRepairVisual/>, flip: false
    },
    {
      t: "Computadores revisados e funcionando melhor.",
      p: "Montagem, manutenção, substituição de peças, instalação de sistema, drivers e correções para desktops.",
      v: <ATDesktopVisual/>, 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 serviços</span>
            <h2 className="h-section" style={{marginTop:18}}>Cuidado técnico em cada frente do seu equipamento.</h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Quatro frentes principais de atuação — do upgrade de desempenho ao reparo estrutural —
            executadas com critério técnico e comunicação clara.
          </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 ATPreventiveVisual() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <defs>
        <radialGradient id="atPrevG" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.3)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
      </defs>
      <circle cx="200" cy="160" r="120" fill="url(#atPrevG)"/>
      {/* heatsink / fan */}
      <g transform="translate(200,150)">
        <circle r="84" fill="none" stroke="rgba(255,255,255,0.08)"/>
        <circle r="60" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
        <g>
          {Array.from({length:7}).map((_,i)=>(
            <path key={i} d="M0,0 Q22,-30 0,-55 Q-22,-30 0,0Z" fill="rgba(255,255,255,0.16)" transform={`rotate(${i*(360/7)})`}/>
          ))}
          <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="6s" repeatCount="indefinite"/>
        </g>
        <circle r="14" fill="#0f0f12" stroke="rgba(255,42,42,0.5)"/>
        <text textAnchor="middle" y="4" fontSize="9" fontFamily="JetBrains Mono, monospace" fill="#fff">CPU</text>
      </g>
      {/* temp gauge */}
      <g transform="translate(40,40)" fontFamily="JetBrains Mono, monospace">
        <text x="0" y="9" fontSize="8" fill="rgba(255,255,255,0.4)" letterSpacing="2">TEMP</text>
        <text x="0" y="30" fontSize="18" fontWeight="600" fill="#fff">62°C</text>
        <rect x="0" y="38" width="80" height="4" rx="2" fill="rgba(255,255,255,0.1)"/>
        <rect x="0" y="38" width="50" height="4" rx="2" fill="#ffb02a"/>
      </g>
      <g transform="translate(290,210)" fontFamily="JetBrains Mono, monospace">
        <text x="0" y="9" fontSize="8" fill="rgba(255,255,255,0.4)" letterSpacing="2">FAN</text>
        <text x="0" y="30" fontSize="18" fontWeight="600" fill="#fff">1.6k</text>
        <text x="34" y="30" fontSize="10" fill="rgba(255,255,255,0.45)">RPM</text>
      </g>
    </svg>
  );
}

function ATLaptopRepairVisual() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      {/* laptop opened being repaired */}
      <g transform="translate(50,80)">
        <rect width="300" height="140" rx="6" fill="#0f0f12" stroke="rgba(255,255,255,0.08)"/>
        {/* keyboard */}
        <g transform="translate(20,20)">
          {Array.from({length:5}).map((_,row)=>(
            <g key={row} transform={`translate(0,${row*22})`}>
              {Array.from({length:14}).map((_,col)=>(
                <rect key={col} x={col*18} y="0" width="14" height="14" rx="2.5"
                  fill={row===0 && col===5 ? "#ff2a2a" : "rgba(255,255,255,0.06)"}
                  stroke="rgba(255,255,255,0.08)"/>
              ))}
            </g>
          ))}
        </g>
        {/* screwdriver hint */}
        <g transform="translate(290,-30) rotate(35)">
          <rect width="80" height="6" rx="2" fill="rgba(255,255,255,0.18)"/>
          <rect x="76" y="-2" width="14" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
          <circle cx="40" cy="3" r="2" fill="#ff2a2a"/>
        </g>
        {/* hinge */}
        <rect x="-10" y="140" width="320" height="6" rx="2" fill="#0a0a0e"/>
      </g>
      {/* small parts */}
      <g transform="translate(40,250)">
        <rect width="50" height="14" rx="2" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.12)"/>
        <text x="6" y="11" fontSize="8" fill="rgba(255,255,255,0.5)" fontFamily="JetBrains Mono, monospace">TECLADO</text>
      </g>
      <g transform="translate(120,250)">
        <rect width="40" height="14" rx="2" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.12)"/>
        <text x="6" y="11" fontSize="8" fill="rgba(255,255,255,0.5)" fontFamily="JetBrains Mono, monospace">TELA</text>
      </g>
      <g transform="translate(190,250)">
        <rect width="80" height="14" rx="2" fill="rgba(255,42,42,0.18)" stroke="rgba(255,42,42,0.5)"/>
        <text x="6" y="11" fontSize="8" fill="#ff8888" fontFamily="JetBrains Mono, monospace">DOBRADIÇA</text>
      </g>
    </svg>
  );
}

function ATDesktopVisual() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      {/* desktop case opened */}
      <g transform="translate(80,30)">
        <rect width="180" height="240" rx="10" fill="#0f0f12" stroke="rgba(255,255,255,0.1)"/>
        <rect x="14" y="14" width="152" height="160" rx="6" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.06)"/>
        {/* RGB strip */}
        <rect x="22" y="22" width="136" height="4" rx="2" fill="#ff2a2a" opacity="0.85"/>
        {/* GPU */}
        <g transform="translate(22,108)">
          <rect width="136" height="40" rx="3" fill="#08080a" stroke="rgba(255,255,255,0.1)"/>
          {[24,68,112].map((x,i)=>(
            <g key={i} transform={`translate(${x},20)`}>
              <circle r="12" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
              <path d="M0,-8 L2,-2 L8,0 L2,2 L0,8 L-2,2 L-8,0 L-2,-2 Z" fill="rgba(255,255,255,0.2)">
                <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur={`${2.6+i*0.3}s`} repeatCount="indefinite"/>
              </path>
            </g>
          ))}
        </g>
        {/* RAM */}
        <g transform="translate(96,46)">
          <rect width="5" height="56" rx="1" fill="#ff2a2a"/>
          <rect x="9" width="5" height="56" rx="1" fill="rgba(255,255,255,0.4)"/>
          <rect x="18" width="5" height="56" rx="1" fill="rgba(255,255,255,0.2)"/>
        </g>
        {/* CPU */}
        <rect x="32" y="46" width="44" height="44" rx="3" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.12)"/>
        <rect x="42" y="56" width="24" height="24" rx="2" fill="#1a1a22" stroke="rgba(255,255,255,0.2)"/>
        {/* I/O */}
        <g transform="translate(22,200)">
          <rect width="48" height="6" rx="2" fill="rgba(255,255,255,0.06)"/>
          <rect x="56" width="40" height="6" rx="2" fill="rgba(255,255,255,0.06)"/>
          <rect x="102" width="34" height="6" rx="3" fill="#ff2a2a"/>
        </g>
        <rect x="22" y="218" width="100" height="6" rx="2" fill="rgba(255,255,255,0.06)"/>
        {/* led */}
        <circle cx="160" cy="222" r="3.5" fill="#ff2a2a">
          <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/>
        </circle>
      </g>
    </svg>
  );
}

/* ──────────── SERVIÇOS LIST ──────────── */
function ATServicos() {
  const svcs = [
    "Diagnóstico técnico",
    "Formatação e instalação do sistema",
    "Instalação de drivers",
    "Instalação de programas básicos",
    "Otimização de desempenho",
    "Remoção de vírus e correção de erros",
    ["Backup de arquivos", "quando possível"],
    "Upgrade com SSD",
    "Upgrade de memória RAM",
    "Limpeza interna preventiva",
    "Troca de pasta térmica",
    "Correção de superaquecimento",
    "Troca de tela de notebook",
    "Troca de teclado",
    "Reparo de dobradiça",
    "Reparo de carcaça",
    "Manutenção de computadores desktop",
    "Montagem e revisão de computadores",
    "Substituição de HD, SSD, fonte, memória e outros componentes",
  ];
  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 resolver com a InfoSystem.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Atendimento técnico que cobre desde diagnóstico e formatação até reparos estruturais
            e upgrade — sempre com avaliação técnica antes da execução.
          </p>
        </div>
        <div className="reveal svclist">
          {svcs.map((s, i) => {
            const isPair = Array.isArray(s);
            const label = isPair ? s[0] : s;
            const note = isPair ? s[1] : null;
            return (
              <div key={i} className="svcitem">
                <span className="check"><Icon name="check" size={13}/></span>
                <span className="txt">
                  {label}{note && <em className="note">— {note}</em>}
                </span>
              </div>
            );
          })}
        </div>
        <p className="svclist-note reveal">
          O serviço é executado conforme avaliação técnica. Possibilidade de backup ou recuperação
          de arquivos depende do estado do HD/SSD ou do sistema e é avaliada caso a caso.
        </p>
      </div>
    </section>
  );
}

/* ──────────── PERFORMANCE ──────────── */
function ATPerformance() {
  const items = [
    ["SSD para inicialização mais rápida", "Boot em segundos e abertura ágil de programas.", "database"],
    ["Mais memória RAM para multitarefa", "Várias abas e aplicativos sem travamentos.", "cog"],
    ["Limpeza interna para reduzir aquecimento", "Remoção de poeira e melhor dissipação térmica.", "shield"],
    ["Troca de pasta térmica", "Refrigeração eficiente da CPU e GPU.", "sparkle"],
    ["Sistema mais leve e organizado", "Inicialização mais limpa, menos processos pesados.", "check"],
    ["Menos travamentos no uso diário", "Estabilidade para trabalho, estudo e lazer.", "lifebuoy"],
    ["Melhor custo-benefício", "Avaliação técnica antes de trocar de equipamento.", "compass"],
  ];
  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}}>
              Às vezes, o problema não é trocar o equipamento. É fazer o upgrade certo.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Muitos notebooks e computadores ainda podem ganhar velocidade e estabilidade com uma
            avaliação correta. A InfoSystem identifica quando vale a pena melhorar o equipamento
            e quando a substituição pode ser mais indicada.
          </p>
        </div>

        <div className="perf-grid">
          {items.map(([t, p, ic], i) => (
            <article key={i} className="perf-card reveal" data-delay={Math.min(i, 5)}>
              <span className="pic"><Icon name={ic} size={22}/></span>
              <h4>{t}</h4>
              <p>{p}</p>
            </article>
          ))}
        </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 melhorar meu computador
          </a>
        </div>
      </div>
    </section>
  );
}

/* ──────────── CONFIANÇA / DIFERENCIAIS ──────────── */
function ATConfianca() {
  const items = [
    ["Loja física em Maringá–PR", "pin"],
    ["Atendimento técnico especializado", "lifebuoy"],
    ["Diagnóstico responsável", "shield"],
    ["Orçamento antes da execução", "check"],
    ["Comunicação clara com o cliente", "route"],
    ["Residenciais e empresas", "sparkle"],
    ["Soluções conforme a real necessidade", "cog"],
    ["Serviço com critério técnico", "lock"],
  ];
  return (
    <section className="section dark" id="confianca">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Confiança</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              Seu equipamento tratado com responsabilidade.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Na InfoSystem, cada equipamento é analisado com cuidado. O atendimento é transparente,
            técnico e focado em resolver o problema da forma mais segura possível.
          </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 ATComoFunciona() {
  const steps = [
    ["Você chama no WhatsApp", "whats"],
    ["Explica o problema do equipamento", "route"],
    ["A equipe orienta o melhor caminho", "compass"],
    ["Avaliação técnica do equipamento", "sparkle"],
    ["Orçamento informado ao cliente", "check"],
    ["Após aprovação, o serviço é executado", "cog"],
    ["Equipamento é testado", "shield"],
    ["Você recebe pronto 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 primeiro contato à entrega, tudo com clareza.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Um caminho técnico transparente — sem improviso, com aprovação do cliente antes de
            qualquer execução.
          </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"><Icon name={ic} size={16}/></span>
              </div>
              <h4>{t}</h4>
              <div className="step-line"/>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── BUSCA E ENTREGA ──────────── */
function ATBuscaEntrega() {
  return (
    <section className="section dark" id="busca-entrega">
      <div className="container">
        <div className="delivery-panel reveal">
          <div>
            <span className="tag" style={{marginBottom:18, display:'inline-flex'}}>Praticidade</span>
            <h2 className="h-section" style={{color:'#fff', marginTop:14}}>
              Precisa de mais praticidade?
            </h2>
            <p className="lede" style={{marginTop:22, maxWidth:'52ch'}}>
              A InfoSystem também oferece serviço de busca e entrega de equipamentos, conforme
              disponibilidade e região de atendimento.
            </p>
            <p style={{color:'var(--text-dim-2)', fontSize:13, marginTop:14, fontStyle:'italic'}}>
              Consulte disponibilidade e valor.
            </p>
            <div style={{marginTop:28, display:'flex', flexWrap:'wrap', gap:12}}>
              <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="whats" size={16}/> Consultar busca e entrega
              </a>
            </div>
          </div>
          <div className="delivery-visual" data-parallax="0.03">
            <ATDeliveryVisual/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ATDeliveryVisual() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%">
      <defs>
        <radialGradient id="atDelG" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.3)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="120" fill="url(#atDelG)"/>
      {/* route */}
      <g stroke="rgba(255,255,255,0.18)" strokeWidth="1" fill="none">
        <line x1="40" y1="240" x2="360" y2="240"/>
        <line x1="40" y1="60" x2="360" y2="60"/>
      </g>
      {/* dashed path */}
      <path d="M 60,240 C 120,240 120,150 200,150 C 280,150 280,60 340,60"
        stroke="#ff2a2a" strokeWidth="1.8" strokeDasharray="6 6" fill="none">
        <animate attributeName="stroke-dashoffset" values="0;-24" dur="1.8s" repeatCount="indefinite"/>
      </path>
      {/* pin start */}
      <g transform="translate(60,240)">
        <circle r="10" fill="#0f0f12" stroke="rgba(255,255,255,0.3)" strokeWidth="1"/>
        <text textAnchor="middle" y="4" fontSize="10" fontFamily="JetBrains Mono, monospace" fill="#fff">A</text>
      </g>
      {/* van */}
      <g transform="translate(200,150)">
        <rect x="-30" y="-12" width="50" height="20" rx="3" fill="#15151c" stroke="rgba(255,255,255,0.18)"/>
        <rect x="-30" y="-22" width="34" height="14" rx="3" fill="#15151c" stroke="rgba(255,255,255,0.18)"/>
        <rect x="-26" y="-19" width="14" height="8" rx="1" fill="rgba(255,255,255,0.15)"/>
        <circle cx="-20" cy="10" r="4" fill="#0a0a0e" stroke="rgba(255,255,255,0.4)"/>
        <circle cx="12" cy="10" r="4" fill="#0a0a0e" stroke="rgba(255,255,255,0.4)"/>
        <rect x="-30" y="-8" width="50" height="2" fill="#ff2a2a"/>
      </g>
      {/* pin end */}
      <g transform="translate(340,60)">
        <path d="M0,-14 C8,-14 8,-2 0,8 C-8,-2 -8,-14 0,-14 Z" fill="#ff2a2a"/>
        <circle r="3" fill="#fff"/>
      </g>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.4)" letterSpacing="1">
        <text x="40" y="260">SUA CASA / ESCRITÓRIO</text>
        <text x="280" y="40">INFOSYSTEM</text>
      </g>
    </svg>
  );
}

/* ──────────── CTA estratégico ──────────── */
function ATCTAStrip() {
  return (
    <section className="cta-strip">
      <div className="container">
        <div className="split-grid">
          <div>
            <span className="tag reveal">Não espere a próxima falha</span>
            <h2 className="reveal h-section" data-delay="1" style={{marginTop:18}}>
              Notebook parado não resolve sozinho.
            </h2>
          </div>
          <div className="reveal" data-delay="2">
            <p className="lede">
              Se o seu equipamento está lento, aquecendo, travando ou apresentando falhas, fale
              com a InfoSystem e receba uma orientação técnica profissional.
            </p>
            <div className="row-actions">
              <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="whats" size={16}/> Solicitar diagnóstico no WhatsApp
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────── FAQ ──────────── */
function ATFAQ() {
  const items = [
    { q: "Vocês fazem orçamento antes do serviço?", a: "Sim. O equipamento passa por avaliação técnica e o cliente recebe as informações do serviço antes da execução." },
    { q: "Vocês fazem formatação?", a: "Sim. Realizamos formatação, instalação do sistema, drivers e programas básicos conforme a necessidade do cliente." },
    { q: "Vocês fazem upgrade com SSD e memória RAM?", a: "Sim. Avaliamos a compatibilidade do equipamento e indicamos as melhores opções para melhorar o desempenho." },
    { q: "Vocês consertam dobradiça e carcaça de notebook?", a: "Sim. Realizamos reparos estruturais em notebooks conforme avaliação técnica do equipamento." },
    { q: "Fazem limpeza interna e troca de pasta térmica?", a: "Sim. Esse serviço ajuda a reduzir aquecimento, ruído e falhas causadas por sujeira interna." },
    { q: "Vocês trocam tela e teclado de notebook?", a: "Sim. Realizamos troca de tela, teclado e outros componentes conforme disponibilidade e compatibilidade." },
    { q: "Vocês recuperam arquivos?", a: "Em alguns casos, é possível realizar backup ou recuperação de arquivos, dependendo do estado do HD, SSD ou sistema. A possibilidade precisa ser avaliada tecnicamente." },
    { q: "Vocês atendem empresas também?", a: "Sim. Atendemos clientes residenciais e empresariais." },
    { q: "Vocês buscam o equipamento?", a: "A InfoSystem oferece serviço de busca e entrega conforme disponibilidade, região e consulta prévia de valor." },
  ];
  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 ATCTAFinal() {
  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}}>
          Seu notebook ou computador precisa de atenção técnica?
        </h2>
        <p className="reveal lede dark" data-delay="2" style={{margin:'24px auto 0'}}>
          Fale agora com a InfoSystem e receba uma orientação profissional para resolver o
          problema do seu equipamento.
        </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}/> Chamar no WhatsApp
          </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 diferentes para esta página) ──────────── */
const AT_ECO_CARDS = [
  {
    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"
  },
  {
    tag: "Computadores sob medida",
    title: "Computadores Gamer e Profissionais",
    desc: "Montamos computadores sob medida para jogos, trabalho, estudo, projetos, edição e alto desempenho, com orientação técnica, montagem profissional e garantia pela loja.",
    cta: "Montar meu computador",
    href: "computadores-gamer-profissionais.html",
    art: 'gamer',
    meta: "MONTAGEM PROFISSIONAL · GARANTIA PELA LOJA"
  },
];

Object.assign(window, {
  ATHero, ATProblemas, ATDor, ATSolucao, ATServicosBlocks, ATServicos,
  ATPerformance, ATConfianca, ATComoFunciona, ATBuscaEntrega,
  ATCTAStrip, ATFAQ, ATCTAFinal,
  AT_NAV, AT_FOOTER_NAV, AT_ECO_CARDS
});
