/* All major sections of the InfoSystem landing page */

const WA_NUMBER = "554430280480";
const WA_MSG_DEFAULT = "Olá, vim pela landing page e gostaria de saber mais sobre o suporte técnico empresarial da InfoSystem.";
const WA_MSG = encodeURIComponent(window.__WA_MSG || WA_MSG_DEFAULT);
const WA_LINK = `https://wa.me/${WA_NUMBER}?text=${WA_MSG}`;

const DEFAULT_NAV = [
  ['Benefícios', '#destaques'],
  ['Serviços', '#servicos'],
  ['Como funciona', '#processo'],
  ['Diferenciais', '#diferenciais'],
  ['Contato', '#contato']
];

const DEFAULT_FOOTER_NAV = [
  ['Benefícios', '#destaques'],
  ['Serviços', '#servicos'],
  ['Como funciona', '#processo'],
  ['Diferenciais', '#diferenciais'],
  ['FAQ', '#faq']
];

/* ───────── HEADER ───────── */
function Header({ nav = DEFAULT_NAV, homeHref = "index.html" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);


  return (
    <React.Fragment>
      <header className={`header ${scrolled ? 'scrolled' : ''}`}>
        <div className="container header-inner">
          <a href={homeHref} className="brand" aria-label="InfoSystem TI & Informática">
            <img src="assets/logo-infosystem.png" alt="InfoSystem TI & Informática" className="brand-logo" />
          </a>
          <nav className="nav" aria-label="Navegação principal">
            {nav.map(([label, href]) => <a key={href} href={href}>{label}</a>)}
          </nav>
          <div className="header-cta">
            <a className="btn btn-wa btn-sm" href={WA_LINK} target="_blank" rel="noopener">
              <Icon name="whats" size={15} />
              <span className="full">Chamar no WhatsApp</span>
              <span style={{ display: 'none' }}>WhatsApp</span>
            </a>
            <button className="menu-btn" aria-label="Abrir menu" onClick={() => setOpen((o) => !o)}>
              <svg width="18" height="14" viewBox="0 0 18 14" fill="none" stroke="currentColor" strokeWidth="1.6">
                {open ? <g><path d="M3 3l12 12M15 3L3 15" /></g> : <g><path d="M1 2h16M1 7h16M1 12h16" /></g>}
              </svg>
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-menu ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        {nav.map(([label, href]) => <a key={href} href={href}>{label}</a>)}
        <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>
          <Icon name="whats" size={15} /> Chamar no WhatsApp
        </a>
      </div>
    </React.Fragment>);

}

/* ───────── HERO ───────── */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-inner">
        <div>
          <div className="reveal eyebrow"><span className="dot" /> InfoSystem · Maringá–PR</div>
          <h1 className="reveal h-display" data-delay="1">
            Sua empresa não pode parar por <em>problemas de TI</em>.
          </h1>
          <p className="reveal lede" data-delay="2">
            Suporte técnico empresarial para manter computadores, notebooks, servidores, redes e
            sistemas funcionando com segurança, agilidade e organizaçã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 atendimento empresarial
            </a>
            <a className="btn btn-ghost-light" href="#solucoes">
              Conhecer soluções <Icon name="arrow" size={15} />
            </a>
          </div>
          <div className="reveal hero-reinforce" data-delay="4">
            <span className="ping" /> Atendimento remoto e presencial em Maringá e região
          </div>
          <div className="reveal pill-row" data-delay="5">
            <span className="pill"><Icon name="monitor" size={14} /> Computadores e notebooks</span>
            <span className="pill"><Icon name="route" size={14} /> Redes e Wi-Fi</span>
            <span className="pill"><Icon name="database" size={14} /> Servidores e backup</span>
            <span className="pill"><Icon name="shield" size={14} /> Manutenção preventiva</span>
          </div>
        </div>
        <div className="reveal reveal-slow" data-delay="2" data-parallax="0.04">
          <HeroComposition />
        </div>
      </div>
    </section>);

}

/* ───────── DESTAQUES (start with the highlights) ───────── */
function Destaques() {
  return (
    <section className="section light" id="destaques">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Comece pelos destaques</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              Suporte técnico pensado para empresas que dependem da tecnologia.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Seis frentes essenciais que mantêm a sua operação rodando — atendimento ágil,
            estrutura organizada e menos paradas no dia a dia.
          </p>
        </div>

        <div className="destaques-grid">
          <DCard span="span-4" tall accent
          label="01 — Atendimento"
          title="Atendimento remoto e presencial."
          desc="Resposta rápida no canal certo, sem fila de espera."
          visual={<DCardSupportArt />} />
          <DCard span="span-2" tall dark
          label="02 — Preventiva"
          title="Manutenção preventiva."
          desc="Antecipa falhas antes que afetem a operação."
          visual={<DCardShieldArt />} />
          <DCard span="span-2"
          label="03 — Endpoints"
          title="Computadores e notebooks."
          desc="Manutenção, otimização e configuração contínua."
          visual={<DCardLaptopArt />} />
          <DCard span="span-2"
          label="04 — Infra"
          title={<span style={{ color: "rgb(43, 43, 47)" }}>Servidores, rede e backup.</span>}
          desc="Infra organizada, com rotinas e permissões claras."
          visual={<DCardServerArt />} />
          <DCard span="span-2" dark
          label="05 — Continuidade"
          title="Menos paradas operacionais."
          desc="Diagnóstico ágil para a equipe não ficar parada."
          visual={<DCardChartArt />} />
          <DCard span="span-3"
          label="06 — Diagnóstico"
          title="Diagnóstico técnico profissional."
          desc="Análise responsável antes de qualquer reparo."
          visual={<DCardDiagArt />} />
          <DCard span="span-3" dark
          label="07 — Cobertura"
          title="Maringá–PR e região."
          desc="Loja física e atendimento próximo do seu negócio."
          visual={<DCardMapArt />} />
        </div>
      </div>
    </section>);

}

function DCard({ span, tall, dark, accent, label, title, desc, visual }) {
  const classes = [
  'dcard', 'reveal', span, tall && 'tall', dark && 'dark', accent && 'accent'].
  filter(Boolean).join(' ');
  return (
    <article className={classes}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14, position: 'relative', zIndex: 1 }}>
        <span className="label">{label}</span>
      </div>
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, opacity: accent ? 0.85 : 0.9 }}>
        {visual}
      </div>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <h3 className="title">{title}</h3>
        {desc && <p className="desc">{desc}</p>}
      </div>
    </article>);

}

/* tiny decorative artworks per destaque card */
function DCardSupportArt() {
  return (
    <svg viewBox="0 0 600 360" width="100%" height="100%" preserveAspectRatio="xMaxYMid slice" style={{ position: 'absolute', inset: 0 }}>
      <g opacity="0.18" stroke="rgba(255,255,255,0.6)" strokeWidth="1">
        {Array.from({ length: 20 }).map((_, i) =>
        <circle key={i} cx="450" cy="220" r={20 + i * 16} fill="none" />
        )}
      </g>
      <g transform="translate(330,140)">
        <rect width="220" height="150" rx="14" fill="rgba(0,0,0,0.25)" stroke="rgba(255,255,255,0.18)" />
        <rect x="14" y="14" width="120" height="6" rx="3" fill="rgba(255,255,255,0.7)" />
        <rect x="14" y="28" width="80" height="4" rx="2" fill="rgba(255,255,255,0.4)" />
        <rect x="14" y="58" width="192" height="44" rx="8" fill="rgba(255,255,255,0.12)" />
        <rect x="22" y="70" width="120" height="4" rx="2" fill="rgba(255,255,255,0.8)" />
        <rect x="22" y="82" width="80" height="4" rx="2" fill="rgba(255,255,255,0.55)" />
        <rect x="14" y="114" width="80" height="22" rx="11" fill="#fff" />
        <text x="54" y="129" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono, monospace" fontWeight="600" fill="#b00811">CONECTADO</text>
      </g>
    </svg>);

}
function DCardShieldArt() {
  return (
    <svg viewBox="0 0 320 460" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" style={{ position: 'absolute', inset: 0 }}>
      <g transform="translate(160,360)">
        <path d="M-80,-180 C-80,-200 80,-200 80,-180 L80,-40 C80,30 0,80 0,80 C0,80 -80,30 -80,-40 Z"
        fill="rgba(255,42,42,0.08)" stroke="rgba(255,42,42,0.5)" strokeWidth="1.5" />
        <path d="M-30,-60 L-5,-30 L40,-90" stroke="#ff2a2a" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.35)" opacity="0.7">
        <text x="24" y="40">CHK 12/12 OK</text>
      </g>
    </svg>);

}
function DCardLaptopArt() {
  return (
    <svg viewBox="0 0 300 240" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" style={{ position: 'absolute', right: '-10%', bottom: 0, height: '70%', width: 'auto' }}>
      <g transform="translate(40,40)">
        <rect width="220" height="130" rx="6" fill="#0a0a0e" stroke="rgba(0,0,0,0.15)" />
        <rect x="8" y="8" width="204" height="114" rx="3" fill="#15151c" />
        <rect x="20" y="22" width="60" height="4" rx="2" fill="#ff2a2a" />
        <rect x="20" y="34" width="120" height="3" rx="1.5" fill="rgba(255,255,255,0.4)" />
        <rect x="20" y="44" width="80" height="3" rx="1.5" fill="rgba(255,255,255,0.25)" />
        <rect x="20" y="60" width="170" height="50" rx="4" fill="rgba(255,255,255,0.04)" />
        <path d="M20,100 L60,80 L100,86 L140,68 L180,74" stroke="#ff2a2a" strokeWidth="1.5" fill="none" />
        <rect x="-10" y="130" width="240" height="6" rx="2" fill="#0a0a0e" />
      </g>
    </svg>);

}
function DCardServerArt() {
  return (
    <svg viewBox="0 0 300 240" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" style={{ position: 'absolute', right: '-5%', bottom: '-10%', height: '80%', width: 'auto' }}>
      <g transform="translate(80,30)">
        <rect width="140" height="200" rx="10" fill="#0a0a0e" stroke="rgba(0,0,0,0.15)" />
        {Array.from({ length: 5 }).map((_, i) =>
        <g key={i} transform={`translate(10,${14 + i * 36})`}>
            <rect width="120" height="28" rx="4" fill="#15151c" />
            <circle cx="12" cy="14" r="3" fill={i === 1 ? "#ff2a2a" : "#3aff7f"} />
            <rect x="24" y="9" width="60" height="3" rx="1.5" fill="rgba(255,255,255,0.25)" />
            <rect x="24" y="17" width="36" height="3" rx="1.5" fill="rgba(255,255,255,0.1)" />
          </g>
        )}
      </g>
    </svg>);

}
function DCardChartArt() {
  return (
    <svg viewBox="0 0 320 280" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" style={{ position: 'absolute', inset: 'auto 0 0 0', height: '70%' }}>
      <g transform="translate(20,30)">
        <text x="0" y="0" fontSize="9" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.4)" letterSpacing="2">DOWNTIME · 6M</text>
        <g transform="translate(0,18)">
          {[60, 72, 55, 40, 28, 16].map((v, i) =>
          <rect key={i} x={i * 44} y={140 - v} width="28" height={v} rx="3" fill={i >= 4 ? "#ff2a2a" : "rgba(255,255,255,0.25)"} />
          )}
        </g>
      </g>
    </svg>);

}
function DCardDiagArt() {
  return (
    <svg viewBox="0 0 480 280" width="100%" height="100%" preserveAspectRatio="xMaxYMid slice" style={{ position: 'absolute', inset: 0 }}>
      <g transform="translate(260,40)">
        <rect width="200" height="200" rx="14" fill="#fff" stroke="rgba(0,0,0,0.08)" />
        <rect x="14" y="14" width="60" height="4" rx="2" fill="#ff2a2a" />
        <rect x="14" y="24" width="40" height="3" rx="1.5" fill="rgba(0,0,0,0.3)" />
        {/* diag rows */}
        {[{ l: 'CPU', w: 80, c: '#3aff7f' }, { l: 'RAM', w: 60, c: '#3aff7f' }, { l: 'DISK', w: 140, c: '#ff2a2a' }, { l: 'NET', w: 90, c: '#3aff7f' }, { l: 'TEMP', w: 110, c: '#ffb02a' }].map((r, i) =>
        <g key={i} transform={`translate(14,${48 + i * 26})`}>
            <text x="0" y="9" fontSize="9" fontFamily="JetBrains Mono, monospace" fill="rgba(0,0,0,0.6)" letterSpacing="1">{r.l}</text>
            <rect x="36" y="2" width="140" height="8" rx="4" fill="rgba(0,0,0,0.06)" />
            <rect x="36" y="2" width={r.w} height="8" rx="4" fill={r.c} />
          </g>
        )}
      </g>
    </svg>);

}
function DCardMapArt() {
  return (
    <svg viewBox="0 0 600 280" width="100%" height="100%" preserveAspectRatio="xMaxYMid slice" style={{ position: 'absolute', inset: 0 }}>
      <g stroke="rgba(255,255,255,0.12)" strokeWidth="1" fill="none">
        {Array.from({ length: 8 }).map((_, i) => <line key={i} x1="0" y1={i * 34 + 20} x2="600" y2={i * 34 + 20} />)}
        {Array.from({ length: 14 }).map((_, i) => <line key={i} x1={i * 44 + 20} y1="0" x2={i * 44 + 20} y2="280" />)}
      </g>
      <g>
        <circle cx="400" cy="140" r="40" fill="none" stroke="rgba(255,42,42,0.5)" />
        <circle cx="400" cy="140" r="70" fill="none" stroke="rgba(255,42,42,0.3)" />
        <circle cx="400" cy="140" r="110" fill="none" stroke="rgba(255,42,42,0.15)" />
        <circle cx="400" cy="140" r="6" fill="#ff2a2a" />
        <text x="414" y="144" fontSize="11" fontFamily="JetBrains Mono, monospace" fill="rgba(255,255,255,0.7)">MARINGÁ–PR</text>
      </g>
      {[[280, 80], [510, 110], [330, 200], [470, 210], [210, 160]].map(([x, y], i) =>
      <circle key={i} cx={x} cy={y} r="3" fill="rgba(255,255,255,0.4)" />
      )}
    </svg>);

}

/* ───────── PROBLEMA ───────── */
function Problema() {
  const dores = [
  "Funcionários parados por falhas técnicas",
  "Computadores lentos ou travando",
  "Problemas de rede, Wi-Fi e internet",
  "Impressoras sem funcionar",
  "Falta de manutenção preventiva",
  "Servidor sem organização ou backup adequado",
  "Chamados técnicos sem controle",
  "Dependência de suporte improvisado"];

  return (
    <section className="section darker" id="problema">
      <div className="container">
        <div className="problem-grid">
          <div>
            <div className="reveal eyebrow"><span className="dot" /> Diagnóstico</div>
            <h2 className="reveal h-section" data-delay="1" style={{ marginTop: 18, color: '#fff' }}>
              Quando a TI falha, o <span style={{ color: 'var(--red-2)' }}>prejuízo</span> aparece rápido.
            </h2>
            <p className="reveal lede" data-delay="2" style={{ marginTop: 22 }}>
              Computadores lentos, rede instável, impressoras paradas, servidor desorganizado ou
              falta de suporte técnico podem comprometer a produtividade da equipe e gerar retrabalho.
            </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 Solucao() {
  const items = [
  { t: "Suporte técnico recorrente", icon: 'lifebuoy' },
  { t: "Atendimento remoto", icon: 'route' },
  { t: "Atendimento presencial", icon: 'pin' },
  { t: "Manutenção preventiva", icon: 'shield' },
  { t: "Organização de infraestrutura", icon: 'cog' },
  { t: "Apoio em redes, servidores e backup", icon: 'database' },
  { t: "Orientação técnica para compras e upgrades", icon: 'compass' }];

  return (
    <section className="section dark" id="solucoes">
      <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' }}>
              Uma estrutura de TI mais organizada, segura e eficiente.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            A InfoSystem atua como parceira técnica da sua empresa, oferecendo suporte, manutenção
            e assessoria para que sua operação funcione com mais estabilidade e previsibilidade.
          </p>
        </div>

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

}

/* ───────── DETALHES (big editorial blocks) ───────── */
function Detalhes() {
  const blocks = [
  { t: "Computadores funcionando melhor.", p: "Manutenção, otimização, formatação, upgrades e correções para manter a equipe produtiva.", v: <ComputerVisual />, flip: false },
  { t: "Rede mais estável.", p: "Apoio técnico para rede cabeada, Wi-Fi, roteadores, switches e conectividade interna.", v: <NetworkVisual />, flip: true },
  { t: "Servidor mais organizado.", p: "Suporte para servidores de arquivos, permissões, compartilhamentos, organização de pastas e rotinas de backup.", v: <ServerVisual />, flip: false },
  { t: "Suporte quando sua equipe precisa.", p: "Atendimento remoto e presencial para resolver problemas com mais agilidade e clareza.", v: <SupportVisual />, flip: true }];

  return (
    <section className="section light" id="detalhes">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Explore os detalhes</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>O que muda quando sua TI é bem cuidada.</h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Quatro frentes técnicas onde o acompanhamento da InfoSystem reduz fricção, retrabalho
            e tempo parado.
          </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>);

}

/* ───────── SERVIÇOS ───────── */
function Servicos() {
  const svcs = [
  ['Suporte técnico para computadores', 'monitor'],
  ['Suporte para notebooks', 'laptop'],
  ['Atendimento remoto', 'cloud'],
  ['Atendimento presencial', 'pin'],
  ['Manutenção preventiva', 'shield'],
  ['Instalação e configuração de sistemas', 'cog'],
  ['Configuração de impressoras', 'printer'],
  ['Rede cabeada e Wi-Fi', 'wifi'],
  ['Servidores de arquivos', 'server'],
  ['Backup local e em nuvem', 'database'],
  ['Diagnóstico técnico', 'sparkle'],
  ['Orientação para compra de equipamentos', 'compass']];

  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 sua empresa pode contar com a InfoSystem.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Serviços que podem compor o atendimento empresarial — combinados conforme o tamanho,
            o perfil e a rotina técnica da sua operação.
          </p>
        </div>
        <div className="reveal svc-grid">
          {svcs.map(([t, ic], i) =>
          <div key={i} className="svc">
              <span className="icon"><Icon name={ic} size={16} /></span>
              <span className="txt">{t}</span>
            </div>
          )}
        </div>
        <p className="muted reveal" style={{ marginTop: 24, fontSize: 13.5, maxWidth: '62ch' }}>
          O escopo final é definido em conjunto com a empresa, conforme o ambiente, o número de
          equipamentos e a prioridade de cada operação.
        </p>
      </div>
    </section>);

}

/* ───────── PROCESSO ───────── */
function Processo() {
  const steps = [
  "Entendimento da estrutura da empresa",
  "Levantamento dos equipamentos e principais necessidades",
  "Definição do modelo de suporte",
  "Atendimento remoto e presencial conforme demanda",
  "Acompanhamento técnico para reduzir falhas recorrentes"];

  return (
    <section className="section cream" id="processo">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag dark">Como funciona</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>
              Como funciona o atendimento empresarial.
            </h2>
          </div>
          <p className="reveal lede dark" data-delay="1">
            Um caminho claro do primeiro contato ao acompanhamento contínuo — sem letras miúdas e
            sem improviso.
          </p>
        </div>

        <div className="process">
          {steps.map((s, i) =>
          <article key={i} className="step reveal" data-delay={Math.min(i, 5)}>
              <div className="step-num">
                <span>PASSO {String(i + 1).padStart(2, '0')}</span>
                <span className="dot" />
              </div>
              <h4>{s}</h4>
              <div className="step-line" />
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ───────── DIFERENCIAIS ───────── */
function Diferenciais() {
  const items = [
  ["Loja física em Maringá–PR", "pin"],
  ["Atendimento próximo e profissional", "lifebuoy"],
  ["Suporte remoto e presencial", "route"],
  ["Experiência residencial e empresarial", "sparkle"],
  ["Comunicação clara e objetiva", "check"],
  ["Diagnóstico técnico responsável", "shield"],
  ["Soluções personalizadas para cada empresa", "cog"],
  ["Foco em estabilidade e segurança", "lock"]];

  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 empresas escolhem a InfoSystem?
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            Atendimento técnico de proximidade, com a clareza e a responsabilidade que uma
            operação empresarial precisa.
          </p>
        </div>
        <div className="reveal dif-grid">
          {items.map(([t, ic], i) =>
          <div key={i} className="dif">
              <span className="dif-icon"><Icon name={ic} size={20} /></span>
              <h4 style={{ color: '#fff' }}>{t}</h4>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ───────── CTA STRIP ───────── */
function CTAStrip() {
  return (
    <section className="cta-strip">
      <div className="container">
        <div className="split-grid">
          <div>
            <span className="tag reveal">Continuidade</span>
            <h2 className="reveal h-section" data-delay="1" style={{ marginTop: 18 }}>
              TI organizada não é custo. É continuidade para o seu negócio.
            </h2>
          </div>
          <div className="reveal" data-delay="2">
            <p className="lede">
              Com suporte técnico adequado, sua empresa reduz paradas, melhora a produtividade e
              ganha mais segurança para operar todos os dias.
            </p>
            <div className="row-actions">
              <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener">
                <Icon name="whats" size={16} /> Falar com um especialista
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ───────── FAQ ───────── */
function FAQ() {
  const items = [
  {
    q: "Atendem empresas de quais segmentos?",
    a: "Atendemos escritórios, comércios, clínicas, contabilidades, indústrias, coworkings e empresas que precisam de suporte técnico em informática."
  },
  {
    q: "O atendimento pode ser remoto?",
    a: "Sim. Muitos atendimentos podem ser realizados remotamente, dependendo do problema. Quando necessário, também realizamos atendimento presencial."
  },
  {
    q: "Vocês fazem manutenção preventiva?",
    a: "Sim. A manutenção preventiva ajuda a reduzir falhas, lentidão e paradas inesperadas."
  },
  {
    q: "Vocês atendem servidores e redes?",
    a: "Sim. Prestamos suporte para servidores, redes, compartilhamentos, permissões, backup e infraestrutura básica de TI."
  },
  {
    q: "Como solicitar uma proposta?",
    a: "Basta chamar no WhatsApp e informar a quantidade aproximada de computadores, notebooks, servidores e principais necessidades da empresa."
  }];

  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 ? 220 : 0 }}>
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ───────── OUTRAS SOLUÇÕES (ecossistema) ───────── */
function EcoLaptopArt() {
  return (
    <svg viewBox="0 0 600 500" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ecoLapScreen" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stopColor="#1a1a22"/>
          <stop offset="1" stopColor="#0a0a0e"/>
        </linearGradient>
        <radialGradient id="ecoLapGlow" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.35)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
      </defs>
      <circle cx="380" cy="220" r="220" fill="url(#ecoLapGlow)"/>
      {/* notebook */}
      <g transform="translate(180,140) rotate(-6 200 130)">
        <rect width="340" height="210" rx="10" fill="#15151c" stroke="rgba(255,255,255,0.1)"/>
        <rect x="10" y="10" width="320" height="190" rx="5" fill="url(#ecoLapScreen)"/>
        {/* diagnostic UI */}
        <g transform="translate(26,28)" fontFamily="JetBrains Mono, monospace">
          <text x="0" y="9" fontSize="8" letterSpacing="2" fill="rgba(255,255,255,0.45)">DIAGNÓSTICO</text>
          <rect x="0" y="16" width="60" height="3" rx="1.5" fill="#ff2a2a"/>
          <text x="0" y="38" fontSize="20" fontWeight="600" fill="#fff">3 itens</text>
          <text x="80" y="38" fontSize="9" fill="rgba(255,255,255,0.45)" letterSpacing="1">para atenção</text>
        </g>
        {/* bar list */}
        <g transform="translate(26,80)">
          {[{l:'CPU',v:60,c:'#3aff7f'},{l:'HD',v:130,c:'#ff2a2a'},{l:'RAM',v:90,c:'#ffb02a'},{l:'BAT',v:110,c:'#ff2a2a'}].map((r,i)=>(
            <g key={i} transform={`translate(0,${i*22})`}>
              <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="34" y="2" width="160" height="6" rx="3" fill="rgba(255,255,255,0.08)"/>
              <rect x="34" y="2" width={r.v} height="6" rx="3" fill={r.c}/>
            </g>
          ))}
        </g>
        {/* hinge */}
        <rect x="-14" y="210" width="368" height="6" rx="2" fill="#0a0a0e"/>
      </g>
      {/* tool */}
      <g transform="translate(60,300) rotate(20)" stroke="rgba(255,255,255,0.18)" strokeWidth="1.4" fill="none">
        <rect x="0" y="0" width="80" height="14" rx="2"/>
        <rect x="76" y="3" width="14" height="8" fill="rgba(255,255,255,0.18)"/>
        <circle cx="40" cy="7" r="2" fill="#ff2a2a"/>
      </g>
    </svg>
  );
}

function EcoGamerArt() {
  return (
    <svg viewBox="0 0 600 500" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ecoCase" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#1a1a22"/>
          <stop offset="1" stopColor="#08080c"/>
        </linearGradient>
        <linearGradient id="ecoRgb" x1="0" x2="1">
          <stop offset="0" stopColor="#ff2a2a"/>
          <stop offset=".5" stopColor="#a020f0" stopOpacity=".8"/>
          <stop offset="1" stopColor="#2a8cff"/>
        </linearGradient>
        <radialGradient id="ecoGamerGlow" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.35)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
      </defs>
      <circle cx="380" cy="240" r="240" fill="url(#ecoGamerGlow)"/>
      {/* PC case */}
      <g transform="translate(240,80)">
        <rect width="220" height="340" rx="14" fill="url(#ecoCase)" stroke="rgba(255,255,255,0.1)"/>
        {/* tempered glass panel */}
        <rect x="16" y="20" width="188" height="240" rx="8" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.08)"/>
        {/* GPU */}
        <g transform="translate(28,180)">
          <rect width="160" height="50" rx="4" fill="#0a0a0e" stroke="rgba(255,255,255,0.1)"/>
          {/* fans */}
          <circle cx="34" cy="25" r="14" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
          <circle cx="80" cy="25" r="14" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
          <circle cx="126" cy="25" r="14" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
          {/* fan blades */}
          {[34,80,126].map((x,i)=>(
            <g key={i} transform={`translate(${x},25)`}>
              <path d="M0,-10 L3,-3 L10,0 L3,3 L0,10 L-3,3 L-10,0 L-3,-3 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>
        {/* RGB strip */}
        <rect x="22" y="32" width="176" height="6" rx="3" fill="url(#ecoRgb)" opacity="0.85"/>
        {/* RAM sticks */}
        <g transform="translate(120,80)">
          <rect width="6" height="80" rx="1" fill="#2a8cff"/>
          <rect x="12" width="6" height="80" rx="1" fill="#a020f0"/>
          <rect x="24" width="6" height="80" rx="1" fill="#ff2a2a"/>
          <rect x="36" width="6" height="80" rx="1" fill="rgba(255,255,255,0.25)"/>
        </g>
        {/* CPU socket */}
        <rect x="36" y="74" width="60" height="60" rx="4" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.12)"/>
        <rect x="48" y="86" width="36" height="36" rx="2" fill="#1a1a22" stroke="rgba(255,255,255,0.18)"/>
        {/* I/O */}
        <g transform="translate(22,278)">
          <rect width="50" height="8" rx="2" fill="rgba(255,255,255,0.08)"/>
          <rect x="60" width="60" height="8" rx="2" fill="rgba(255,255,255,0.08)"/>
          <rect x="130" width="30" height="8" rx="4" fill="#ff2a2a"/>
        </g>
        {/* power led */}
        <circle cx="190" cy="320" r="4" fill="#ff2a2a">
          <animate attributeName="opacity" values="1;0.3;1" dur="2.4s" repeatCount="indefinite"/>
        </circle>
      </g>
    </svg>
  );
}

const DEFAULT_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: "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"
  },
];

function EcoArt({ name }) {
  if (name === 'laptop') return <EcoLaptopArt/>;
  if (name === 'gamer') return <EcoGamerArt/>;
  if (name === 'support') return <EcoSupportArt/>;
  return null;
}

function OutrasSolucoes({
  subtitle = "Além do suporte técnico empresarial, a InfoSystem também oferece assistência técnica especializada e montagem de computadores sob medida para diferentes necessidades.",
  cards = DEFAULT_ECO_CARDS
}) {
  return (
    <section className="eco-section" id="ecossistema">
      <div className="container">
        <div className="section-head">
          <div className="reveal">
            <span className="tag">Ecossistema InfoSystem</span>
            <h2 className="h-section" style={{marginTop:18, color:'#fff'}}>
              Conheça também outras soluções da InfoSystem.
            </h2>
          </div>
          <p className="reveal lede" data-delay="1">
            {subtitle}
          </p>
        </div>

        <div className="eco-grid">
          {cards.map((c, i) => (
            <a key={i} href={c.href} className="eco-card reveal" data-delay={i + 1}>
              <div className="eco-card-art"><EcoArt name={c.art}/></div>
              <div className="eco-card-inner">
                <span className="tag">{c.tag}</span>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <div className="eco-meta"><span className="dot"/> {c.meta}</div>
                <span className="eco-cta">
                  {c.cta} <Icon name="arrow" size={15}/>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function EcoSupportArt() {
  return (
    <svg viewBox="0 0 600 500" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="ecoSupGlow" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(255,42,42,0.32)"/>
          <stop offset="1" stopColor="rgba(255,42,42,0)"/>
        </radialGradient>
        <linearGradient id="ecoSupCard" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#1a1a22"/>
          <stop offset="1" stopColor="#08080c"/>
        </linearGradient>
      </defs>
      <circle cx="380" cy="240" r="240" fill="url(#ecoSupGlow)"/>
      {/* dashboard card */}
      <g transform="translate(220,110)">
        <rect width="280" height="200" rx="14" fill="url(#ecoSupCard)" stroke="rgba(255,255,255,0.1)"/>
        <g transform="translate(18,18)">
          <circle cx="5" cy="5" r="4" fill="#ff5f57"/>
          <circle cx="20" cy="5" r="4" fill="#febc2e"/>
          <circle cx="35" cy="5" r="4" fill="#28c840"/>
        </g>
        <g transform="translate(18,42)" fontFamily="JetBrains Mono, monospace">
          <text x="0" y="9" fontSize="8" fill="rgba(255,255,255,0.45)" letterSpacing="2">UPTIME</text>
          <text x="0" y="32" fontSize="20" fontWeight="600" fill="#fff">99.7%</text>
          <text x="100" y="9" fontSize="8" fill="rgba(255,255,255,0.45)" letterSpacing="2">HOSTS</text>
          <text x="100" y="32" fontSize="20" fontWeight="600" fill="#fff">24</text>
          <text x="180" y="9" fontSize="8" fill="rgba(255,255,255,0.45)" letterSpacing="2">RISCO</text>
          <text x="180" y="32" fontSize="20" fontWeight="600" fill="#ff2a2a">0</text>
        </g>
        <g transform="translate(18,92)">
          <path d="M0,70 L26,50 L52,58 L78,38 L104,46 L130,28 L156,32 L182,18 L208,22 L234,12 L246,15"
            fill="none" stroke="#ff2a2a" strokeWidth="1.8"/>
          <path d="M0,70 L26,50 L52,58 L78,38 L104,46 L130,28 L156,32 L182,18 L208,22 L234,12 L246,15 L246,90 L0,90 Z"
            fill="rgba(255,42,42,0.12)"/>
        </g>
      </g>
      {/* mini rack */}
      <g transform="translate(60,180)">
        <rect width="120" height="200" rx="10" fill="url(#ecoSupCard)" stroke="rgba(255,255,255,0.1)"/>
        {Array.from({length:5}).map((_,i)=>(
          <g key={i} transform={`translate(10,${14+i*36})`}>
            <rect width="100" height="28" rx="4" fill="#0a0a0e"/>
            <circle cx="12" cy="14" r="3" fill={i===1 ? "#ff2a2a" : "#3aff7f"}/>
            <rect x="24" y="9" width="40" height="3" rx="1.5" fill="rgba(255,255,255,0.2)"/>
            <rect x="24" y="17" width="24" height="3" rx="1.5" fill="rgba(255,255,255,0.08)"/>
          </g>
        ))}
      </g>
      {/* connection */}
      <path d="M 180,260 C 210,260 200,220 220,220" stroke="rgba(255,42,42,0.5)" strokeWidth="1.4" fill="none" strokeDasharray="4 4">
        <animate attributeName="stroke-dashoffset" values="0;-16" dur="1.4s" repeatCount="indefinite"/>
      </path>
    </svg>
  );
}

/* ───────── CTA FINAL ───────── */
function CTAFinal() {
  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 }}>
          Quer organizar o suporte de TI da sua empresa?
        </h2>
        <p className="reveal lede dark" data-delay="2" style={{ margin: '24px auto 0' }}>
          Fale com a InfoSystem e solicite uma análise para atendimento empresarial em Maringá e região.
        </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>
      </div>
    </section>);

}

/* ───────── FOOTER ───────── */
function Footer({
  blurb = "Suporte técnico empresarial em Maringá e região. Computadores, notebooks, redes, servidores e infraestrutura de TI.",
  badge = "Suporte técnico empresarial",
  navLinks = DEFAULT_FOOTER_NAV,
  homeHref = "index.html"
}) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href={homeHref} className="brand footer-brand" aria-label="InfoSystem TI & Informática">
              <img src="assets/logo-infosystem.png" alt="InfoSystem TI & Informática" className="brand-logo footer-logo" />
            </a>
            <p style={{ color: 'var(--text-dim)', maxWidth: '34ch', marginTop: 20 }}>
              {blurb}
            </p>
          </div>
          <div>
            <h5>Endereço</h5>
            <p style={{ color: 'var(--text-dim)' }}>
              Rua Antônio Carniel, 418<br />
              Sala 3, Zona 7<br />
              Maringá–PR
            </p>
          </div>
          <div>
            <h5>Contato</h5>
            <ul>
              <li><a href={WA_LINK} target="_blank" rel="noopener">WhatsApp · (44) 3028-0480</a></li>
              <li><a href="mailto:assistencia.infosystem@gmail.com">assistencia.infosystem@gmail.com</a></li>
              <li><a href="https://infosystemtecnologia.com.br" target="_blank" rel="noopener">infosystemtecnologia.com.br</a></li>
              <li><a href="https://instagram.com/infosystemmga" target="_blank" rel="noopener">@infosystemmga</a></li>
            </ul>
          </div>
          <div>
            <h5>Navegação</h5>
            <ul>
              {navLinks.map(([label, href]) => (
                <li key={href}><a href={href}>{label}</a></li>
              ))}
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="mono">© {new Date().getFullYear()} INFOSYSTEM TI & INFORMÁTICA · MARINGÁ–PR</span>
          <span className="mono" style={{ color: 'var(--text-dim)' }}>{badge}</span>
        </div>
      </div>
    </footer>);

}

/* ───────── Floating WhatsApp ───────── */
function WhatsFloat() {
  return (
    <a className="wa-float" href={WA_LINK} target="_blank" rel="noopener" aria-label="Chamar no WhatsApp">
      <Icon name="whats" size={20} />
      <span className="lbl">Fale conosco</span>
    </a>);

}

Object.assign(window, {
  Header, Hero, Destaques, Problema, Solucao, Detalhes,
  Servicos, Processo, Diferenciais, CTAStrip, FAQ, OutrasSolucoes, CTAFinal, Footer, WhatsFloat,
  EcoLaptopArt, EcoGamerArt, EcoSupportArt, EcoArt,
  WA_LINK, WA_NUMBER
});