/* Home (hub) sections — reuses Header / Footer / WhatsFloat / Icon from shared files */

const HM_NAV = [
  ['Início', '#top'],
  ['Soluções', '#solucoes'],
  ['Avaliações', '#avaliacoes'],
  ['Diferenciais', '#diferenciais'],
  ['Contato', '#contato'],
];
const HM_FOOTER_NAV = [
  ['Soluções', '#solucoes'],
  ['Avaliações', '#avaliacoes'],
  ['Diferenciais', '#diferenciais'],
  ['Serviços', '#servicos'],
  ['FAQ', '#faq'],
];

const GOOGLE_REVIEWS_URL = "https://maps.app.goo.gl/qAczv1EkmeG8Zey69?g_st=ic";

/* ──────────── HERO ──────────── */
function HMHeroVisual() {
  return (
    <div className="home-hero-visual">
      <svg viewBox="0 0 640 640" width="100%" height="100%" aria-hidden="true">
        <defs>
          <linearGradient id="hmCard" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#16161c"/>
            <stop offset="1" stopColor="#0a0a0e"/>
          </linearGradient>
          <linearGradient id="hmRed" x1="0" x2="1">
            <stop offset="0" stopColor="#ff2a2a"/>
            <stop offset="1" stopColor="#b00811"/>
          </linearGradient>
          <radialGradient id="hmGlow" cx=".5" cy=".5" r=".5">
            <stop offset="0" stopColor="rgba(255,42,42,.35)"/>
            <stop offset="1" stopColor="rgba(255,42,42,0)"/>
          </radialGradient>
        </defs>

        <g opacity="0.10" 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="280" r="260" fill="url(#hmGlow)"/>

        {/* central dashboard card */}
        <g transform="translate(120,110)">
          <rect width="380" height="260" rx="18" fill="url(#hmCard)" stroke="rgba(255,255,255,0.1)"/>
          {/* tabs */}
          <g transform="translate(20,18)">
            <circle cx="6" cy="6" r="4" fill="#ff5f57"/>
            <circle cx="22" cy="6" r="4" fill="#febc2e"/>
            <circle cx="38" cy="6" r="4" fill="#28c840"/>
            <rect x="60" y="0" width="120" height="12" rx="3" fill="rgba(255,255,255,0.06)"/>
          </g>
          {/* eyebrow */}
          <g transform="translate(20,50)" fontFamily="JetBrains Mono, monospace">
            <text x="0" y="9" fontSize="8" letterSpacing="2" fill="rgba(255,255,255,0.45)">INFOSYSTEM · MARINGÁ–PR</text>
            <rect x="0" y="15" width="40" height="3" rx="1.5" fill="#ff2a2a"/>
          </g>
          {/* 3 solution chips */}
          <g transform="translate(20,80)">
            {[
              { label: 'SUPORTE', sub: 'Empresarial', accent: true },
              { label: 'ASSISTÊNCIA', sub: 'Notebook/PC' },
              { label: 'COMPUTADORES', sub: 'Sob medida' },
            ].map((c,i) => (
              <g key={i} transform={`translate(${i*120},0)`}>
                <rect width="110" height="64" rx="10" fill={c.accent ? "url(#hmRed)" : "rgba(255,255,255,0.04)"} stroke={c.accent ? "rgba(255,255,255,0)" : "rgba(255,255,255,0.08)"}/>
                <text x="12" y="22" fontSize="8" fontFamily="JetBrains Mono, monospace" fill={c.accent ? "rgba(255,255,255,0.8)" : "rgba(255,255,255,0.5)"} letterSpacing="2">{c.label}</text>
                <text x="12" y="44" fontSize="14" fontWeight="600" fill="#fff">{c.sub}</text>
                <circle cx="98" cy="50" r="3" fill={c.accent ? "#fff" : "#3aff7f"}/>
              </g>
            ))}
          </g>
          {/* mini chart */}
          <g transform="translate(20,166)">
            <text x="0" y="0" fontSize="8" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.45)" letterSpacing="2">SOLUÇÕES ATIVAS</text>
            <path d="M0,60 L40,40 L80,46 L120,28 L160,34 L200,16 L240,22 L280,8 L320,12 L340,14"
              stroke="#ff2a2a" strokeWidth="2" fill="none"/>
            <path d="M0,60 L40,40 L80,46 L120,28 L160,34 L200,16 L240,22 L280,8 L320,12 L340,14 L340,80 L0,80 Z"
              fill="rgba(255,42,42,0.12)"/>
          </g>
        </g>

        {/* floating mini-card 1: loja */}
        <g transform="translate(70,400)">
          <rect width="170" height="80" rx="14" fill="rgba(15,15,18,0.92)" stroke="rgba(255,255,255,0.12)"/>
          <g transform="translate(20,18)">
            <rect width="36" height="36" rx="10" fill="rgba(225,10,23,0.16)" stroke="rgba(225,10,23,0.4)"/>
            <path d="M18,6 C24,6 24,16 18,22 C12,16 12,6 18,6 Z" fill="none" stroke="#ff2a2a" strokeWidth="1.6" transform="translate(0,4)"/>
            <circle cx="18" cy="14" r="3" fill="none" stroke="#ff2a2a" strokeWidth="1.6"/>
          </g>
          <text x="68" y="32" fontSize="9" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.5)" letterSpacing="2">LOJA FÍSICA</text>
          <text x="68" y="52" fontSize="14" fontWeight="600" fill="#fff">Maringá–PR</text>
          <text x="68" y="68" fontSize="9.5" fill="rgba(255,255,255,0.5)">Zona 7 · R. A. Carniel, 418</text>
        </g>

        {/* floating mini-card 2: atendimento */}
        <g transform="translate(370,440)">
          <rect width="200" height="80" rx="14" fill="rgba(15,15,18,0.92)" stroke="rgba(255,255,255,0.12)"/>
          <g transform="translate(20,18)">
            <rect width="36" height="36" rx="10" fill="rgba(58,255,127,0.14)" stroke="rgba(58,255,127,0.45)"/>
            <path d="M11,22 C16,16 22,16 25,22" stroke="#3aff7f" strokeWidth="1.6" fill="none"/>
            <circle cx="18" cy="14" r="2.4" fill="#3aff7f"/>
          </g>
          <text x="68" y="32" fontSize="9" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.5)" letterSpacing="2">ATENDIMENTO</text>
          <text x="68" y="52" fontSize="14" fontWeight="600" fill="#fff">Remoto & presencial</text>
          <text x="68" y="68" fontSize="9.5" fill="rgba(255,255,255,0.5)">Residencial e empresarial</text>
        </g>

        {/* connecting lines */}
        <g stroke="rgba(255,42,42,0.32)" strokeWidth="1.2" fill="none">
          <path d="M 240,360 C 280,400 280,420 250,440" strokeDasharray="3 5">
            <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.4s" repeatCount="indefinite"/>
          </path>
          <path d="M 320,360 C 360,400 360,420 410,440" strokeDasharray="3 5">
            <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.4s" repeatCount="indefinite"/>
          </path>
        </g>
      </svg>
    </div>
  );
}

function HMHero() {
  return (
    <section className="home-hero" id="top">
      <div className="container home-hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot"/> INFOSYSTEM • TI & INFORMÁTICA • MARINGÁ-PR</div>
          <h1 className="reveal h-display home-hero-title" data-delay="1">
            Tecnologia e suporte<br/>
            técnico em <em>Maringá</em>
          </h1>
          <p className="reveal home-hero-sub" data-delay="2">
            Assistência técnica, suporte empresarial e computadores sob medida com
            atendimento profissional da InfoSystem.
          </p>
          <div className="reveal hero-actions" data-delay="3">
            <a className="btn btn-primary" href="assistencia-tecnica.html">
              Preciso de assistência técnica <Icon name="arrow" size={15}/>
            </a>
            <a className="btn btn-ghost-light" href="suporte-tecnico-empresarial.html">
              Quero suporte para minha empresa <Icon name="arrow" size={15}/>
            </a>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <HMHeroVisual/>
        </div>
      </div>
    </section>
  );
}

/* ──────────── AUTHORITY ──────────── */
function HMAutoridade() {
  const items = [
    ["Loja física em Maringá–PR", "pin"],
    ["Atendimento técnico especializado", "lifebuoy"],
    ["Clientes residenciais e empresariais", "sparkle"],
    ["Manutenção de PCs, notebooks e servidores", "shield"],
    ["Venda e montagem de computadores", "cog"],
    ["Atendimento remoto e presencial", "route"],
  ];
  return (
    <section className="section light" id="autoridade">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Autoridade técnica</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Uma empresa de tecnologia preparada para atender você e sua empresa.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            A InfoSystem atua com soluções em informática para quem precisa de atendimento técnico
            confiável, orientação clara e serviços realizados com responsabilidade.
          </p>
          <div className="reveal authority-badge" data-delay="2">
            <span className="ab-stars" aria-hidden="true">
              {Array.from({length: 5}).map((_, i) => (
                <svg key={i} width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 .587l3.668 7.568L24 9.748l-6 5.853 1.416 8.265L12 19.771l-7.416 4.095L6 15.601 0 9.748l8.332-1.593L12 .587z"/>
                </svg>
              ))}
            </span>
            <span className="ab-text">Mais de 700 avaliações 5 estrelas no Google</span>
          </div>
        </div>

        <div className="reveal authority-grid">
          {items.map(([t, ic], i) => (
            <div key={i} className="auth-cell">
              <span className="ic"><Icon name={ic} size={18}/></span>
              <h4>{t}</h4>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── SOLUÇÕES (menu comercial — 3 cards grandes) ──────────── */
function HMSolutionArt({ kind }) {
  if (kind === 'support') return <EcoSupportArt/>;
  if (kind === 'laptop')  return <EcoLaptopArt/>;
  if (kind === 'gamer')   return <EcoGamerArt/>;
  return null;
}

function HMSolucoes() {
  const cards = [
    {
      label: "01 · EMPRESAS",
      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.",
      dores: [
        "Empresa parada por problemas de TI",
        "Rede instável e sem manutenção",
        "Servidor sem organização ou backup",
        "Necessidade de suporte recorrente",
      ],
      cta: "Conhecer suporte empresarial",
      href: "suporte-tecnico-empresarial.html",
      art: 'support'
    },
    {
      label: "02 · RESIDENCIAL & PROFISSIONAL",
      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.",
      dores: [
        "Notebook lento ou travando",
        "Computador não liga ou superaquece",
        "Tela, teclado, dobradiça ou carcaça quebrada",
        "Formatação, limpeza ou upgrade",
      ],
      cta: "Ver assistência técnica",
      href: "assistencia-tecnica.html",
      art: 'laptop'
    },
    {
      label: "03 · COMPRA & MONTAGEM",
      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 e garantia pela loja.",
      dores: [
        "Não sabe qual computador comprar",
        "Medo de escolher configuração errada",
        "PC gamer ou para trabalho profissional",
        "Quer suporte local depois da compra",
      ],
      cta: "Montar meu computador",
      href: "computadores-gamer-profissionais.html",
      art: 'gamer'
    },
  ];
  return (
    <section className="section dark" id="solucoes">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Soluções</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              Como podemos ajudar você hoje?
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Escolha abaixo o tipo de atendimento que mais combina com a sua necessidade.
          </p>
        </div>

        <div className="solutions-grid">
          {cards.map((c, i) => (
            <a key={i} href={c.href} className="sol-bigcard reveal" data-delay={i + 1}>
              <div className="art"><HMSolutionArt kind={c.art}/></div>
              <span className="label">{c.label}</span>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <ul className="dores">
                {c.dores.map((d, j) => (
                  <li key={j}><span className="dot"/>{d}</li>
                ))}
              </ul>
              <span className="sol-cta">{c.cta} <Icon name="arrow" size={14}/></span>
            </a>
          ))}
        </div>

        <div className="reveal" style={{marginTop:36, textAlign:'center'}}>
          <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
            <Icon name="whats" size={16}/> Falar com a InfoSystem
          </a>
        </div>
      </div>
    </section>
  );
}

/* ──────────── AVALIAÇÕES ──────────── */
function Stars({ n = 5 }) {
  return (
    <span className="stars" aria-label={`${n} estrelas`}>
      {Array.from({length: n}).map((_, i) => (
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 .587l3.668 7.568L24 9.748l-6 5.853 1.416 8.265L12 19.771l-7.416 4.095L6 15.601 0 9.748l8.332-1.593L12 .587z"/>
        </svg>
      ))}
    </span>
  );
}

function HMAvaliacoes() {
  const reviews = [
    { txt: "Um exemplo de atendimento e profissionalismo. Pontual, cumpre o que promete. Super indico! Estão de parabéns, pessoal." },
    { txt: "Excelente experiência! Fui muito bem atendido pelo Ricardo, que foi super educado, paciente e demonstrou bastante conhecimento. Me orientou com clareza e honestidade, o que fez toda a diferença. Com certeza voltarei e recomendo a loja!" },
    { txt: "Mandei fazer higienização do meu PC e, quando fui pegar, vi que tudo ficou mais limpo do que se fosse novo. Top demais, cada detalhe excelente. Atendimento muito bom, não tenho o que reclamar." },
    { txt: "Excelente serviço técnico, foi muito rápido e muito profissional. Recomendo 100%." },
    { txt: "Meu notebook estava com problema na dobradiça, uma parte se abriu e consertaram muito bem. Está novinho, recomendo! O serviço foi muito rápido e também me responderam na hora quando entrei em contato. Já é a 2ª vez que faço com eles." },
    { txt: "Levei uma placa-mãe B550M com a BIOS corrompida para eles e adorei o serviço. Regravação bem feita, prazo de um dia ou menos, bem rápido e com ótimos valores também." },
  ];
  return (
    <section className="section light" id="avaliacoes">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Clientes</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Mais de 700 avaliações 5 estrelas no Google.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            A confiança dos nossos clientes é construída com atendimento técnico, transparência,
            cuidado com cada equipamento e compromisso em resolver da forma correta.
          </p>
        </div>

        <div className="reviews-proof reveal" data-delay="1">
          <div className="rp-cell rp-cell-feature">
            <span className="rp-stars" aria-hidden="true">
              {Array.from({length: 5}).map((_, i) => (
                <svg key={i} width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 .587l3.668 7.568L24 9.748l-6 5.853 1.416 8.265L12 19.771l-7.416 4.095L6 15.601 0 9.748l8.332-1.593L12 .587z"/>
                </svg>
              ))}
            </span>
            <h4>Mais de 700 avaliações 5 estrelas</h4>
            <p>Histórico de atendimentos avaliados publicamente pelos próprios clientes.</p>
          </div>
          <div className="rp-cell">
            <span className="rp-ic"><Icon name="shield" size={18}/></span>
            <h4>Avaliações reais no Google</h4>
            <p>Comentários verificáveis na ficha oficial da InfoSystem no Google.</p>
          </div>
          <div className="rp-cell">
            <span className="rp-ic"><Icon name="pin" size={18}/></span>
            <h4>Reconhecimento em Maringá e região</h4>
            <p>Atendimento técnico reconhecido por clientes de Maringá e região.</p>
          </div>
        </div>

        <div className="reviews-grid">
          {reviews.map((r, i) => (
            <article key={i} className="review reveal" data-delay={Math.min(i, 5)}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:12}}>
                <Stars n={5}/>
                <span className="quote">"</span>
              </div>
              <p>{r.txt}</p>
              <div className="author">
                <span className="avatar">i</span>
                <span className="meta">
                  <span className="name">Cliente InfoSystem</span>
                  <span className="src">AVALIAÇÃO · GOOGLE</span>
                </span>
              </div>
            </article>
          ))}
        </div>

        <div className="reviews-foot reveal">
          <span className="note">Mais de 700 avaliações 5 estrelas reais de clientes da InfoSystem no Google.</span>
          <a className="btn btn-ghost-dark" href={GOOGLE_REVIEWS_URL} target="_blank" rel="noopener noreferrer">
            Ver avaliações no Google <Icon name="arrow" size={15}/>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ──────────── DIFERENCIAIS ──────────── */
function HMDiferenciais() {
  const items = [
    { t: "Loja física em Maringá", p: "Você conta com uma empresa local, com atendimento próximo e estrutura para receber seu equipamento ou sua demanda.", ic: "pin" },
    { t: "Atendimento técnico especializado", p: "Diagnóstico, orientação e execução feitos com critério técnico, sem soluções improvisadas.", ic: "sparkle" },
    { t: "Empresas e clientes residenciais", p: "Atendemos desde usuários individuais até empresas que precisam de suporte, manutenção e infraestrutura de TI.", ic: "lifebuoy" },
    { t: "Comunicação clara", p: "Explicamos o problema, orientamos o melhor caminho e informamos o cliente antes da execução do serviço.", ic: "route" },
    { t: "Venda, manutenção e suporte em um só lugar", p: "Assistência técnica, computadores, upgrades, periféricos, suporte remoto, atendimento presencial e soluções empresariais.", ic: "cog" },
    { t: "Compromisso com qualidade", p: "Cada atendimento é tratado com responsabilidade, organização e foco em entregar uma solução adequada para o cliente.", ic: "shield" },
  ];
  return (
    <section className="section dark" id="diferenciais">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Diferenciais</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              Por que escolher a InfoSystem?
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            A InfoSystem une atendimento técnico, loja física, orientação clara e soluções
            completas em informática para clientes residenciais e empresariais.
          </p>
        </div>

        <div className="reveal dif-home-grid">
          {items.map((d, i) => (
            <div key={i} className="dif-home">
              <span className="ic"><Icon name={d.ic} size={22}/></span>
              <h4>{d.t}</h4>
              <p>{d.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── RESUMO DE SERVIÇOS ──────────── */
function HMResumoServicos() {
  const svcs = [
    "Suporte técnico empresarial",
    "Manutenção de computadores",
    "Manutenção de notebooks",
    "Reparo de carcaça e dobradiça",
    "Formatação e instalação de sistema",
    "Upgrade com SSD e memória RAM",
    "Higienização e limpeza preventiva",
    "Montagem de computadores",
    "Venda de computadores e periféricos",
    "Redes, Wi-Fi e servidores",
    "Backup e organização de infraestrutura",
    "Atendimento remoto e presencial",
  ];
  return (
    <section className="section cream" id="servicos">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Escopo</span>
            <h2 className="h-section" style={{marginTop:18}}>
              Soluções completas em tecnologia e informática.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Seja para resolver um problema, melhorar o desempenho de um equipamento, montar um
            computador novo ou organizar a TI da sua empresa, a InfoSystem tem uma solução para você.
          </p>
        </div>
        <div className="reveal services-summary">
          {svcs.map((s, i) => (
            <div key={i} className="svc-row">
              <span className="check"><Icon name="check" size={13}/></span>
              <span>{s}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────── FAQ ──────────── */
function HMFAQ() {
  const items = [
    { q: "A InfoSystem atende empresas?", a: "Sim. A InfoSystem oferece suporte técnico empresarial, manutenção preventiva, atendimento remoto e presencial, suporte para computadores, notebooks, servidores, redes e infraestrutura de TI." },
    { q: "Vocês atendem clientes residenciais?", a: "Sim. Atendemos clientes residenciais que precisam de manutenção, formatação, upgrade, reparo ou avaliação técnica em notebooks e computadores." },
    { q: "Vocês montam computadores sob medida?", a: "Sim. Montamos computadores gamer, profissionais, para escritório, estudo, home office e alto desempenho conforme a necessidade e orçamento do cliente." },
    { q: "Vocês têm loja física?", a: "Sim. A InfoSystem possui loja física em Maringá–PR, na Rua Antônio Carniel, 418 – Sala 3, Zona 7." },
    { q: "Como faço para solicitar atendimento?", a: "Você pode chamar a InfoSystem pelo WhatsApp, informar sua necessidade e receber uma orientação inicial sobre o melhor caminho." },
    { q: "Vocês fazem orçamento antes do serviço?", a: "Sim. Para serviços técnicos, o equipamento ou demanda passa por avaliação e o cliente recebe as informações antes da execução." },
    { q: "Vocês fazem atendimento remoto e presencial?", a: "Sim. Dependendo da necessidade, o atendimento pode ser remoto, presencial ou realizado diretamente na loja." },
  ];
  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 HMCTAFinal() {
  return (
    <section className="cta-strip" id="contato">
      <div className="container">
        <div className="split-grid">
          <div>
            <span className="tag reveal">Fale com a equipe</span>
            <h2 className="reveal h-section" data-delay="1" style={{marginTop:18}}>
              Precisa de suporte, manutenção ou um computador novo?
            </h2>
          </div>
          <div className="reveal" data-delay="2">
            <p className="lede">
              Fale com a InfoSystem e receba uma orientação técnica profissional para escolher o
              melhor caminho.
            </p>
            <div className="row-actions">
              <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="mono" style={{marginTop:18, fontSize:12, color:'var(--text-dim)', letterSpacing:'0.14em', textTransform:'uppercase'}}>
              Atendimento em Maringá e região
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  HMHero, HMAutoridade, HMSolucoes, HMAvaliacoes, HMDiferenciais,
  HMResumoServicos, HMFAQ, HMCTAFinal,
  HM_NAV, HM_FOOTER_NAV
});