/* sections-3.jsx — PC Fraco, Tecnologia, Preços, Depoimentos, FAQ, CTA, Footer */
const { useState: useS3 } = React;

/* ---------- Section: PC Fraco / Para Gamers ---------- */
const SectionPCFraco = () => {
  const benefits = [
    { ic: "process",   t: "Menos travamentos",        d: "Causados por processos invisíveis competindo pelo CPU." },
    { ic: "memory",    t: "Menos consumo desnecessário", d: "RAM e disco focados no que importa, não em telemetria." },
    { ic: "bolt",      t: "Mais foco no jogo",        d: "Foreground com prioridade alta, ruído de fundo silenciado." },
    { ic: "grid",      t: "Windows organizado",       d: "Boot mais limpo, menos ícones zumbis na bandeja." },
    { ic: "gauge",     t: "Otimizações de rotina",    d: "Ajustes pensados para quem joga, estuda e trabalha no mesmo PC." },
    { ic: "lock",      t: "Sem mexer no que dói",     d: "Lina não toca em drivers críticos, kernel ou registros sensíveis." },
  ];

  return (
    <section style={{ background: "linear-gradient(180deg, transparent, rgba(255,46,58,0.04), transparent)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <SectionHead
              id="// 06 · PC FRACO"
              eyebrow="Feito para gamers reais"
              title='Nem todo mundo tem um PC <span class="accent">de última geração</span>.'
              lead="O Lina foi pensado para quem precisa fazer o máximo com o que tem. Notebook do trampo, PC antigo do irmão, setup de entrada — todos merecem rodar limpo."
            />
            <div className="col gap-3" style={{ marginTop: 12 }}>
              <div className="tag">i3 / Ryzen 3 ou superior</div>
              <div className="tag">4 GB RAM mínimo · 8 GB recomendado</div>
              <div className="tag">Funciona em notebooks (modo bateria preservado)</div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {benefits.map((b, i) => (
              <div key={i} className="card" style={{ padding: 18, minHeight: 150 }}>
                <Icon name={b.ic} size={20} style={{ color: "var(--accent)" }}/>
                <h3 style={{ fontSize: 15, fontWeight: 700, marginTop: 14 }}>{b.t}</h3>
                <p className="dim" style={{ fontSize: 12.5, lineHeight: 1.55, marginTop: 6 }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Section: Tecnologia ---------- */
const SectionTecnologia = () => {
  const layers = [
    { ic: "search", t: "Diagnóstico local", d: "Leitura de CPU, RAM, disco, GPU, processos e plano de energia para entender o estado real do PC antes de aplicar qualquer mudança." },
    { ic: "shield", t: "Rollback nativo", d: "Cada alteração aplicada fica registrada para reversão individual ou total, sem depender de promessa mágica." },
    { ic: "bolt", t: "Performance Director", d: "O módulo acompanha o PC ao vivo e ajusta foco, processos e energia para manter a performance estável durante o uso." },
  ];

  const pipeline = ["Detecta", "Classifica", "Ajusta", "Compara", "Reverte"];

  return (
    <section id="tecnologia">
      <div className="container">
        <SectionHead
          id="// 07 · TECH"
          eyebrow="Tecnologia"
          title='Um motor visual para <span class="accent">otimização com prova</span>.'
          lead="A base do Lina é simples: medir primeiro, explicar depois e ajustar em tempo real. Nada de botão mágico, nada escondido em segundo plano."
        />

        <div className="hud" style={{ padding: 26, position: "relative", overflow: "hidden" }}>
          <div className="scan-bar"></div>
          <div className="row between" style={{ marginBottom: 24, flexWrap: "wrap", gap: 12 }}>
            <span className="tag accent"><span className="dot"></span>CORE · LOCAL FIRST</span>
            <span className="mono dim" style={{ fontSize: 11, letterSpacing: "0.12em" }}>SEM PROMESSA DE FPS FIXO · SEM TELEMETRIA OBRIGATÓRIA</span>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {layers.map((item, i) => (
              <Brackets4 key={i} className="card" style={{ padding: 22, background: "linear-gradient(180deg, var(--bg-2), var(--bg-1))" }}>
                <div className="row between" style={{ marginBottom: 16 }}>
                  <Icon name={item.ic} size={22} style={{ color: "var(--accent)" }}/>
                  <span className="mono" style={{ fontSize: 10, color: "var(--fg-faint)", letterSpacing: "0.2em" }}>LAYER_{String(i + 1).padStart(2, "0")}</span>
                </div>
                <h3 style={{ fontSize: 18 }}>{item.t}</h3>
                <p className="dim" style={{ fontSize: 13.5, lineHeight: 1.6, marginTop: 8 }}>{item.d}</p>
              </Brackets4>
            ))}
          </div>

          <div className="divider" style={{ margin: "28px 0" }}></div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10 }}>
            {pipeline.map((step, i) => (
              <div key={step} style={{ padding: "14px 12px", border: "1px solid var(--line)", background: i === 2 ? "var(--accent-soft)" : "var(--bg-1)", textAlign: "center" }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--fg-faint)", letterSpacing: "0.2em" }}>{String(i + 1).padStart(2, "0")}</div>
                <div style={{ fontWeight: 700, marginTop: 6, color: i === 2 ? "var(--accent-text)" : "var(--fg)" }}>{step}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Section: Preços ---------- */
const PLANS = [
  {
    name: "MENSAL",
    price: "30",
    per: "/mês",
    desc: "Acesso completo ao Lina Optimizer com renovação mensal.",
    featured: false,
    badge: "Entrada",
    economy: "Flexível para começar",
    perks: [
      "Lina Optimizer completo",
      "Lina Performance Director incluído",
      "Ajuste de performance ao vivo",
      "Game Boost + Lina Power Plan",
      "Diagnóstico antes/depois",
      "Rollback das otimizações",
    ],
    cta: "Assinar mensal"
  },
  {
    name: "TRIMESTRAL",
    price: "75",
    per: "/3 meses",
    desc: "Mesmo produto, mais tempo ativo e menor preço por mês.",
    featured: true,
    badge: "Mais equilibrado",
    economy: "Sai por R$ 25/mês",
    perks: [
      "Lina Optimizer completo",
      "Lina Performance Director incluído",
      "Ajuste de performance ao vivo",
      "Game Boost + Lina Power Plan",
      "Diagnóstico antes/depois",
      "Rollback das otimizações",
    ],
    cta: "Assinar trimestral"
  },
  {
    name: "ANUAL",
    price: "150",
    per: "/ano",
    desc: "O melhor custo-benefício para usar o Lina o ano todo.",
    featured: false,
    badge: "Melhor economia",
    economy: "Sai por R$ 12,50/mês",
    perks: [
      "Lina Optimizer completo",
      "Lina Performance Director incluído",
      "Ajuste de performance ao vivo",
      "Game Boost + Lina Power Plan",
      "Diagnóstico antes/depois",
      "Rollback das otimizações",
    ],
    cta: "Assinar anual"
  },
];

const SectionPrecos = () => {
  return (
    <section id="precos">
      <div className="container">
        <SectionHead
          id="// 08 · ASSINATURA"
          eyebrow="Planos"
          title='Um único produto. <span class="accent">Três formas de assinar</span>.'
          lead="O Lina Optimizer vem com o Lina Performance Director, que acompanha o computador em tempo real e ajusta a performance ao vivo. Todos os planos liberam o mesmo produto completo; muda apenas o período da assinatura."
        />

        <div className="hud" style={{ padding: 22, marginBottom: 28 }}>
          <div className="row between" style={{ gap: 18, flexWrap: "wrap" }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: "var(--accent-text)", letterSpacing: "0.2em" }}>PRODUTO ÚNICO</div>
              <h3 style={{ fontSize: 24, marginTop: 6 }}>Lina Optimizer + Lina Performance Director</h3>
              <p className="dim" style={{ fontSize: 14, lineHeight: 1.6, marginTop: 8, maxWidth: 760 }}>
                Não existe Básico, Gamer ou Pro: todo assinante recebe o Lina completo, incluindo diagnóstico, Game Boost, Power Plan, rollback e o Performance Director para ajustes ao vivo.
              </p>
            </div>
            <span className="tag accent" style={{ whiteSpace: "nowrap" }}>PERFORMANCE AO VIVO</span>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, alignItems: "stretch" }}>
          {PLANS.map((p, i) => (
            <div key={p.name} className="card" style={{
              padding: 28, position: "relative",
              borderColor: p.featured ? "var(--accent)" : "var(--line)",
              background: p.featured
                ? "linear-gradient(180deg, rgba(255,46,58,0.08), var(--bg-1))"
                : "linear-gradient(180deg, var(--bg-2), var(--bg-1))",
              boxShadow: p.featured ? "0 0 0 1px var(--accent-soft), 0 24px 48px -24px var(--accent-soft)" : "none",
              transform: p.featured ? "translateY(-8px)" : "none",
            }}>
              {p.featured && (
                <div style={{
                  position: "absolute", top: -12, left: 24,
                  background: "var(--accent)", color: "#0a0a0c",
                  padding: "4px 10px", fontFamily: "var(--font-mono)",
                  fontSize: 10, letterSpacing: "0.2em", fontWeight: 700,
                  boxShadow: "var(--accent-glow)",
                }}>RECOMENDADO</div>
              )}

              <div className="row between" style={{ gap: 10, alignItems: "flex-start" }}>
                <div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--accent-text)" }}>ASSINATURA_{p.name}</div>
                  <h3 style={{ fontSize: 22, marginTop: 10 }}>{p.name}</h3>
                </div>
                <span className="tag">{p.badge}</span>
              </div>

              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 18 }}>
                <span className="mono" style={{ fontSize: 18, color: "var(--fg-mute)" }}>R$</span>
                <span style={{ fontSize: 62, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 1 }}>{p.price}</span>
                <span className="mono dim" style={{ fontSize: 12 }}>{p.per}</span>
              </div>

              <div className="tag accent" style={{ marginTop: 12 }}>{p.economy}</div>
              <p className="dim" style={{ fontSize: 13, marginTop: 12, lineHeight: 1.55 }}>{p.desc}</p>

              <div className="divider" style={{ margin: "22px 0" }}></div>

              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, minHeight: 224 }}>
                {p.perks.map((perk, k) => (
                  <li key={k} style={{ display: "flex", gap: 10, fontSize: 13.5 }}>
                    <Icon name="check" size={14} style={{ color: "var(--accent)", marginTop: 3, flexShrink: 0 }}/>
                    <span style={{ color: "var(--fg-dim)" }}>{perk}</span>
                  </li>
                ))}
              </ul>

              <a href="https://discord.gg/CFw33ukueK" target="_blank" rel="noopener noreferrer" className={`btn ${p.featured ? "btn-primary" : ""} cut-corners`} style={{ width: "100%", justifyContent: "center", marginTop: 28 }}>
                {p.cta} <Icon name="arrow" size={14} className="arrow"/>
              </a>
            </div>
          ))}
        </div>

        <p className="mute mono" style={{ marginTop: 32, fontSize: 11, letterSpacing: "0.1em", textAlign: "center" }}>
          // todos os planos incluem o mesmo produto completo · pagamento e acesso pelo Discord · valores em reais (BRL)
        </p>
      </div>
    </section>
  );
};

/* ---------- Section: Depoimentos ---------- */
const TESTIMONIALS = [
  { name: "Lucas R.",        hw: "i5-10400 · GTX 1650 · 8GB",    text: "Meu PC ficou mais organizado e eu finalmente entendi o que estava pesando. Sem milagre, mas sem placebo também." },
  { name: "@valnight",       hw: "Ryzen 5 5600 · RTX 3060 · 16GB", text: "Gostei porque ele explica antes de aplicar. Não me sinto mais reféns daquele botão de 'otimizar'." },
  { name: "Mari (Mariana)",  hw: "Notebook Acer · Ryzen 7 · 8GB", text: "O modo Game Boost virou parte da minha rotina antes de jogar. Ligo, jogo, encerro. Simples." },
  { name: "PRD_KNG",         hw: "i7-8700 · GTX 1070 · 16GB",     text: "O diagnóstico antes/depois é o que vendeu pra mim. Ver o número caindo é satisfatório demais." },
  { name: "Camila S.",       hw: "Ryzen 3 3200G · iGPU · 8GB",    text: "Notebook do trampo já não trava no meio das aulas e ainda consigo jogar Valorant mais leve." },
  { name: "@pixel_otavio",   hw: "i5-12400F · RTX 4060 · 32GB",   text: "Mesmo num PC bom, o Lina ajuda a manter as coisas limpas. O rollback me dá segurança pra testar." },
];

const SectionDepoimentos = () => (
  <section>
    <div className="container">
      <SectionHead
        id="// 09 · TESTIMONIALS"
        eyebrow="Depoimentos"
        title='Gente que <span class="accent">parou de adivinhar</span>.'
        lead="Espaço pronto para avaliações da beta. Troque estes exemplos por reviews reais quando os primeiros testes fecharem."
      />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {TESTIMONIALS.map((t, i) => (
          <div key={i} className="card" style={{ padding: 22, display: "flex", flexDirection: "column" }}>
            <div className="mono" style={{ fontSize: 24, color: "var(--accent)", lineHeight: 1, marginBottom: 8 }}>"</div>
            <p style={{ fontSize: 14, color: "var(--fg)", lineHeight: 1.6, flex: 1 }}>{t.text}</p>
            <div className="divider" style={{ margin: "18px 0 12px" }}></div>
            <div className="row between">
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{t.name}</div>
                <div className="mono dim" style={{ fontSize: 10, marginTop: 2 }}>{t.hw}</div>
              </div>
              <span className="mono" style={{ fontSize: 11, color: "var(--accent-text)" }}>★★★★★</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- Section: FAQ ---------- */
const FAQS = [
  { q: "O que é o Lina Performance Director?",
    a: "É o módulo que acompanha o computador ao vivo e ajusta a performance conforme o uso. Ele observa carga de CPU, RAM, processos, plano de energia e foco do sistema para manter o PC mais preparado enquanto você joga ou usa programas pesados." },
  { q: "Existe plano Básico, Gamer ou Pro?",
    a: "Não. Existe apenas um produto: Lina Optimizer, já com Lina Performance Director incluso. Mensal, trimestral e anual mudam apenas o período e o preço da assinatura; os recursos são os mesmos." },
  { q: "O Lina aumenta FPS?",
    a: "Não prometemos números fixos. O Lina reduz processos disputando recursos com o jogo, melhora responsividade e prepara o sistema. Em alguns casos isso se traduz em FPS mais consistente; em outros, em menos travamentos. Resultados variam conforme hardware, Windows e estado do sistema." },
  { q: "É seguro?",
    a: "Sim. O Lina não toca em arquivos críticos do Windows, drivers de baixo nível ou kernel. Cada otimização tem classificação de risco e botão de rollback. Você decide o que aplicar." },
  { q: "Dá para desfazer as otimizações?",
    a: "Sim. Toda otimização aplicada pelo Lina é reversível em 1 clique. Você pode reverter individualmente ou tudo de uma vez no histórico." },
  { q: "Funciona em Windows 10 e 11?",
    a: "Sim. Suporte oficial para Windows 10 (versão 21H2 ou superior) e Windows 11 (todas as builds estáveis)." },
  { q: "Preciso entender de computador?",
    a: "Não. O Lina foi desenhado pra ser entendível. Cada ajuste tem explicação curta em português, indicador visual de risco e impacto esperado. Se ficar em dúvida, deixa o padrão." },
  { q: "O modo Turbo pode esquentar o PC?",
    a: "Pode aumentar levemente a temperatura porque desativa economia agressiva de energia. Se o seu cooler estiver ok, é seguro. O Lina monitora temperatura e avisa se algo sair do padrão." },
  { q: "O Lina instala programas externos?",
    a: "Não. O Lina é um software único. A aba de Apps Úteis apenas sugere ferramentas com link oficial — você decide se baixa, e nada é instalado por trás." },
  { q: "Os resultados são iguais para todo mundo?",
    a: "Não. Hardware, versão do Windows, estado atual do sistema e seus hábitos influenciam muito. Por isso o Lina mostra antes/depois real, em vez de prometer ganho fixo." },
  { q: "Posso usar em notebook?",
    a: "Sim. O Lina detecta notebook e ajusta as recomendações pra preservar bateria quando você está no modo desconectado." },
];

const FAQItem = ({ q, a, idx }) => {
  const [open, setOpen] = useS3(idx === 0);
  return (
    <div style={{ borderTop: "1px solid var(--line)" }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "20px 0", background: "transparent", border: "none",
        color: "var(--fg)", cursor: "pointer", textAlign: "left",
      }}>
        <div className="row gap-3">
          <span className="mono" style={{ fontSize: 11, color: "var(--accent-text)", letterSpacing: "0.2em" }}>
            {String(idx + 1).padStart(2, "0")}
          </span>
          <span style={{ fontSize: 16, fontWeight: 600 }}>{q}</span>
        </div>
        <span style={{
          width: 28, height: 28, border: "1px solid var(--line-2)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: open ? "var(--accent)" : "var(--fg-dim)",
          background: open ? "var(--accent-soft)" : "transparent",
          transition: "150ms",
        }}>
          <Icon name={open ? "minus" : "plus"} size={14}/>
        </span>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0,
        overflow: "hidden",
        transition: "max-height 250ms ease",
      }}>
        <p className="dim" style={{ fontSize: 14, lineHeight: 1.7, paddingBottom: 22, paddingLeft: 36, paddingRight: 40 }}>{a}</p>
      </div>
    </div>
  );
};

const SectionFAQ = () => (
  <section id="faq">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 56 }}>
        <div>
          <SectionHead
            id="// 10 · FAQ"
            eyebrow="Perguntas frequentes"
            title='Sem letra <span class="accent">miúda</span>.'
            lead="Tudo que a gente é perguntado mais de uma vez vai pra cá — em português direto."
          />
          <a href="#contato" className="btn cut-corners" style={{ marginTop: 12 }}>
            <Icon name="arrow" size={14} className="arrow"/> Ainda tem dúvida?
          </a>
        </div>
        <div>
          {FAQS.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} idx={i}/>)}
          <div style={{ borderTop: "1px solid var(--line)" }}></div>
        </div>
      </div>
    </div>
  </section>
);


const SOCIAL_LINKS = [
  { name: "Discord", icon: "discord", url: "https://discord.gg/CFw33ukueK" },
  { name: "YouTube", icon: "youtube", url: "https://www.youtube.com/@LinaSolutions" },
  { name: "TikTok", icon: "tiktok", url: "https://www.tiktok.com/@linasolutions" },
  { name: "Instagram", icon: "instagram", url: "https://www.instagram.com/linasolutions/" },
];

const SocialLinks = ({ compact = false }) => (
  <div className={`social-links ${compact ? "compact" : ""}`} aria-label="Redes sociais da Lina Solutions">
    {SOCIAL_LINKS.map((item) => (
      <a key={item.name} href={item.url} target="_blank" rel="noopener noreferrer" className="social-link" aria-label={item.name} title={item.name}>
        <Icon name={item.icon} size={compact ? 16 : 18} />
        {!compact && <span>{item.name}</span>}
      </a>
    ))}
  </div>
);

/* ---------- Section: CTA Final ---------- */
const SectionCTA = () => (
  <section id="download" style={{ position: "relative", padding: "140px 0", overflow: "hidden" }}>
    <div style={{
      position: "absolute", inset: 0,
      background: "radial-gradient(ellipse at 50% 50%, var(--accent-soft), transparent 60%)",
      pointerEvents: "none",
    }}></div>
    <div className="container" style={{ textAlign: "center" }}>
      <div className="mono" style={{ fontSize: 11, color: "var(--accent-text)", letterSpacing: "0.3em", marginBottom: 20 }}>
        // 11 · CALL TO ACTION
      </div>
      <h2 style={{ fontSize: "clamp(40px, 6vw, 72px)", letterSpacing: "-0.03em" }}>
        Pare de adivinhar<br/>o que deixa<br/>
        <span className="accent glow-text">seu PC lento.</span>
      </h2>
      <p className="dim" style={{ fontSize: 19, lineHeight: 1.55, marginTop: 24, maxWidth: 640, marginInline: "auto" }}>
        Use um otimizador que <strong style={{ color: "var(--fg)" }}>analisa</strong>, <strong style={{ color: "var(--fg)" }}>explica</strong> e deixa <strong className="accent">você no controle</strong>.
      </p>
      <div className="row gap-3" style={{ justifyContent: "center", marginTop: 40, flexWrap: "wrap" }}>
        <a href="https://discord.gg/CFw33ukueK" target="_blank" rel="noopener noreferrer" className="btn btn-primary cut-corners" style={{ height: 56, padding: "0 28px", fontSize: 13 }}>
          <Icon name="discord" size={18}/> Começar com o Lina Optimizer
        </a>
      </div>
      <div style={{ marginTop: 22 }}>
        <SocialLinks />
      </div>
      <div className="row gap-6" style={{ justifyContent: "center", marginTop: 28, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.1em", flexWrap: "wrap" }}>
        <span>● 7 dias de garantia</span>
        <span>● Mensal · trimestral · anual</span>
        <span>● Acesso e suporte pelo Discord</span>
      </div>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const Footer = () => {
  const mini = [
    { k: "Transparência", v: "Explica o que muda antes de aplicar." },
    { k: "Performance Director", v: "Ajuste de performance ao vivo." },
    { k: "Foco gamer", v: "Windows preparado para jogar limpo." },
  ];

  return (
    <footer style={{ borderTop: "1px solid var(--line)", padding: "64px 0 34px", position: "relative", zIndex: 2 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1.6fr", gap: 42, alignItems: "start" }}>
          <div>
            <Logo size={20}/>
            <p className="dim" style={{ fontSize: 13, lineHeight: 1.7, marginTop: 16, maxWidth: 390 }}>
              Otimizador de Windows focado em gamers, PCs fracos e gente que quer controle real sobre o que pesa no sistema. Inclui o Lina Performance Director para ajustar a performance do computador ao vivo.
            </p>
            <div className="row gap-2" style={{ marginTop: 18, flexWrap: "wrap" }}>
              <span className="tag accent">Beta privada</span>
              <span className="tag">Windows 10 / 11</span>
              <span className="tag">PT-BR</span>
            </div>
            <div style={{ marginTop: 20 }}>
              <SocialLinks compact />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            {mini.map((item, i) => (
              <div key={item.k} className="card" style={{ padding: 18, minHeight: 132 }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--accent-text)", letterSpacing: "0.18em" }}>FOCO_{String(i + 1).padStart(2, "0")}</div>
                <h3 style={{ fontSize: 16, marginTop: 12 }}>{item.k}</h3>
                <p className="dim" style={{ fontSize: 12.5, lineHeight: 1.55, marginTop: 6 }}>{item.v}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="divider" style={{ margin: "42px 0 20px" }}></div>
        <div className="row between" style={{ flexWrap: "wrap", gap: 12 }}>
          <span className="mono" style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.1em" }}>
            © 2026 LINA OPTIMIZER · FEITO COM <span style={{ color: "var(--accent)" }}>♥</span> NO BRASIL
          </span>
          <span className="mono" style={{ fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.1em" }}>
            BUILD 24102 · v3.4.0
          </span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { SectionPCFraco, SectionTecnologia, SectionPrecos, SectionDepoimentos, SectionFAQ, SectionCTA, Footer });