/* sections-2.jsx — Recursos, Antes/Depois, Controle Total */
const { useState: useS2, useRef: useR2 } = React;

/* ---------- Recursos: 6 cards in a responsive grid ---------- */
const FEATURES = [
  { id: "boost",   icon: "bolt",      title: "Game Boost",        desc: "Modo de jogo que prioriza foreground, libera RAM e silencia ruído de fundo. Aplicação rápida e reversível.", tags: ["Reversível", "1-clique"] },
  { id: "diag",    icon: "gauge",     title: "Diagnóstico Inteligente", desc: "Análise real de CPU, RAM, disco, GPU e processos com comparativo antes e depois.", tags: ["Antes/Depois"] },
  { id: "power",   icon: "lightning", title: "Lina Power Plan",   desc: "Plano de energia focado em desempenho, sem economia agressiva. Você pode reverter quando quiser.", tags: ["Avançado"] },
  { id: "director", icon: "process",   title: "Lina Performance Director", desc: "Módulo ao vivo que acompanha o computador e ajusta foco, processos e energia conforme o uso real.", tags: ["Ao vivo", "Incluso"] },
  { id: "lag",     icon: "spark",     title: "Redução de Input Lag", desc: "Ajustes de responsividade do sistema e foco em foreground para reduzir latência percebida.", tags: ["Gamer"] },
  { id: "drv",     icon: "drivers",   title: "Apps & Drivers",    desc: "Identificação de hardware e alertas de drivers desatualizados, sem termos confusos.", tags: ["Útil"] },
];

const FeatureCard = ({ f, idx }) => {
  const [hover, setHover] = useS2(false);
  return (
    <div
      className="card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: 22,
        minHeight: 240,
        display: "flex", flexDirection: "column",
        cursor: "default",
        background: hover
          ? "linear-gradient(180deg, rgba(255,46,58,0.06), var(--bg-1))"
          : "linear-gradient(180deg, var(--bg-2), var(--bg-1))",
      }}
    >
      <div className="row between" style={{ marginBottom: 18 }}>
        <div style={{
          width: 44, height: 44,
          display: "flex", alignItems: "center", justifyContent: "center",
          border: "1px solid var(--line-2)",
          background: hover ? "var(--accent)" : "var(--bg-3)",
          color: hover ? "#0a0a0c" : "var(--accent-text)",
          transition: "180ms",
          boxShadow: hover ? "0 0 16px var(--accent-soft)" : "none",
        }}>
          <Icon name={f.icon} size={22} stroke={1.6}/>
        </div>
        <span className="mono" style={{ fontSize: 10, color: "var(--fg-faint)", letterSpacing: "0.2em" }}>
          {String(idx + 1).padStart(2, "0")}
        </span>
      </div>

      <h3 style={{ fontSize: 18, fontWeight: 700 }}>{f.title}</h3>
      <p className="dim" style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 8, flex: 1 }}>{f.desc}</p>

      <div className="row gap-2" style={{ marginTop: 16, flexWrap: "wrap" }}>
        {f.tags.map(t => <span key={t} className="tag">{t}</span>)}
      </div>

      <div className="brackets-4">
        <span className="bk bk-tl" style={{ opacity: hover ? 1 : 0, transition: "180ms" }}></span>
        <span className="bk bk-tr" style={{ opacity: hover ? 1 : 0, transition: "180ms" }}></span>
        <span className="bk bk-bl" style={{ opacity: hover ? 1 : 0, transition: "180ms" }}></span>
        <span className="bk bk-br" style={{ opacity: hover ? 1 : 0, transition: "180ms" }}></span>
      </div>
    </div>
  );
};

const SectionRecursos = () => (
  <section id="recursos">
    <div className="container">
      <SectionHead
        id="// 03 · MODULES"
        eyebrow="Recursos principais"
        title='Um produto completo com <span class="accent">performance ao vivo</span>.'
        lead="O Lina Optimizer já inclui o Lina Performance Director, Game Boost, diagnóstico, Power Plan e rollback. Sem versões capadas: todo plano libera o produto completo."
      />

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
        gap: 16,
      }}>
        {FEATURES.map((f, i) => <FeatureCard key={f.id} f={f} idx={i} />)}
      </div>

      <style>{`
        @media (max-width: 1100px){
          #recursos > .container > div:last-child{ grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 600px){
          #recursos > .container > div:last-child{ grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  </section>
);

/* ---------- Antes/Depois interactive slider ---------- */
const SectionAntesDepois = () => {
  const [pos, setPos] = useS2(50);
  const wrapRef = useR2(null);
  const dragging = useR2(false);

  const onMove = (clientX) => {
    if (!wrapRef.current) return;
    const r = wrapRef.current.getBoundingClientRect();
    const p = ((clientX - r.left) / r.width) * 100;
    setPos(Math.max(2, Math.min(98, p)));
  };

  const handleDown = (e) => {
    dragging.current = true;
    onMove(e.clientX || e.touches?.[0]?.clientX || 0);
    const move = (ev) => dragging.current && onMove(ev.clientX || ev.touches?.[0]?.clientX || 0);
    const up = () => { dragging.current = false; window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); window.removeEventListener("touchmove", move); window.removeEventListener("touchend", up); };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", move);
    window.addEventListener("touchend", up);
  };

  return (
    <section id="antesdepois" style={{ background: "linear-gradient(180deg, transparent, rgba(255,46,58,0.03) 30%, transparent)" }}>
      <div className="container">
        <SectionHead
          id="// 04 · BEFORE / AFTER"
          eyebrow="Antes & depois"
          title='Veja o que muda na <span class="accent">prática</span>.'
          lead="Arraste o controle pra comparar o estado do sistema antes e depois das otimizações do Lina."
        />

        <div ref={wrapRef} className="hud" style={{ position: "relative", height: 520, userSelect: "none", overflow: "hidden", cursor: "ew-resize" }}
             onMouseDown={handleDown} onTouchStart={handleDown}>
          {/* AFTER (full background) */}
          <BeforeAfterPanel mode="after" />
          {/* BEFORE (clipped) */}
          <div style={{ position: "absolute", inset: 0, clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
            <BeforeAfterPanel mode="before" />
          </div>
          {/* Divider line */}
          <div style={{
            position: "absolute", top: 0, bottom: 0, left: `${pos}%`,
            width: 1, background: "var(--accent)", boxShadow: "0 0 12px var(--accent)",
            transform: "translateX(-0.5px)",
            pointerEvents: "none",
          }}>
            <div style={{
              position: "absolute", top: "50%", left: "50%",
              transform: "translate(-50%, -50%)",
              width: 44, height: 44,
              background: "var(--bg-1)",
              border: "1px solid var(--accent)",
              boxShadow: "var(--accent-glow)",
              display: "flex", alignItems: "center", justifyContent: "center",
              cursor: "ew-resize",
              clipPath: "polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)",
            }}>
              <Icon name="arrow" size={14} style={{ color: "var(--accent)", transform: "scaleX(-1)" }}/>
              <Icon name="arrow" size={14} style={{ color: "var(--accent)", marginLeft: -3 }}/>
            </div>
          </div>
          {/* Labels */}
          <div style={{ position: "absolute", top: 16, left: 20, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", color: "var(--bad)", background: "rgba(0,0,0,0.6)", padding: "6px 10px", border: "1px solid var(--bad)", pointerEvents: "none" }}>
            <span className="dot" style={{ marginRight: 6 }}></span>ANTES · CARREGADO
          </div>
          <div style={{ position: "absolute", top: 16, right: 20, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", color: "var(--ok)", background: "rgba(0,0,0,0.6)", padding: "6px 10px", border: "1px solid var(--ok)", pointerEvents: "none" }}>
            <span className="dot" style={{ marginRight: 6 }}></span>DEPOIS · LINA
          </div>
        </div>

        <p className="mute mono" style={{ marginTop: 16, fontSize: 11, letterSpacing: "0.1em", textAlign: "center" }}>
          // resultados variam conforme hardware, windows e estado do sistema. nada de "+300 fps" aqui.
        </p>
      </div>
    </section>
  );
};

const BeforeAfterPanel = ({ mode }) => {
  const before = mode === "before";
  const data = before
    ? { procs: 62, cpu: 38, ram: 71, lat: 86, services: 24, color: "var(--bad)" }
    : { procs: 34, cpu: 12, ram: 44, lat: 41, services:  9, color: "var(--ok)" };

  const items = before ? [
    { ic: "process",  k: "Processos em segundo plano", v: "62 ativos",        s: "warn" },
    { ic: "spark",    k: "Inicialização pesada",       v: "19 apps no boot",  s: "warn" },
    { ic: "shield",   k: "Serviços não-essenciais",    v: "24 ativos",        s: "warn" },
    { ic: "lightning",k: "Plano de energia",            v: "Equilibrado",      s: "warn" },
    { ic: "bolt",     k: "Foco do sistema",             v: "Disputado",        s: "warn" },
  ] : [
    { ic: "process",  k: "Processos em segundo plano", v: "34 ativos",        s: "ok" },
    { ic: "spark",    k: "Inicialização limpa",         v: "8 apps essenciais",s: "ok" },
    { ic: "shield",   k: "Serviços otimizados",         v: "9 ativos",         s: "ok" },
    { ic: "lightning",k: "Plano de energia",            v: "Lina Power",       s: "ok" },
    { ic: "bolt",     k: "Foco do sistema",             v: "Jogo prioritário", s: "ok" },
  ];

  return (
    <div style={{ position: "absolute", inset: 0, padding: 28, background: before
      ? "linear-gradient(180deg, #1a0a0d, #0a0a10)"
      : "linear-gradient(180deg, #0a1a14, #08080d)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, height: "100%", paddingTop: 64 }}>
        {/* Left: stats */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            ["PROCESSOS BG",     data.procs,    100, before ? "62" : "34"],
            ["CPU IDLE %",       data.cpu,      100, before ? "38%" : "12%"],
            ["RAM OCUP. %",      data.ram,      100, before ? "71%" : "44%"],
            ["RESPOSTA SISTEMA", data.lat,      100, before ? "86 ms" : "41 ms"],
            ["SERVIÇOS NÃO-ESSENCIAIS", data.services, 30, before ? "24" : "9"],
          ].map(([l,v,m,s], i) => (
            <Bar key={i} label={l} value={v} max={m} sub={s} color={data.color}/>
          ))}
        </div>
        {/* Right: items */}
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center",
              padding: "10px 12px",
              background: "rgba(0,0,0,0.4)",
              border: `1px solid ${it.s === "ok" ? "rgba(74,222,128,0.3)" : "rgba(239,68,68,0.3)"}`,
            }}>
              <Icon name={it.ic} size={14} style={{ color: it.s === "ok" ? "var(--ok)" : "var(--bad)" }}/>
              <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: "var(--fg-dim)" }}>{it.k}</span>
              <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: it.s === "ok" ? "var(--ok)" : "var(--bad)" }}>{it.v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ---------- Controle Total ---------- */
const SectionControle = () => {
  const items = [
    { title: "Limpar arquivos temporários", risk: "low",  rev: true,  why: "Remove caches do Windows que sobraram de instalações e atualizações.", impact: "Espaço em disco, abertura mais rápida do Explorer." },
    { title: "Pausar OneDrive durante jogo", risk: "low",  rev: true,  why: "Evita upload competindo com banda e disco enquanto você joga.", impact: "Menos I/O em disco, menos picos de rede." },
    { title: "Plano de energia Lina Power", risk: "med",  rev: true,  why: "Desativa economia agressiva de CPU, USB e PCIe.", impact: "Resposta consistente. Pode aumentar consumo." },
    { title: "Suspender serviço Xbox Live", risk: "low",  rev: true,  why: "Serviço não usado fora do Game Pass / Xbox app.", impact: "Menos processos no boot e em segundo plano." },
    { title: "Prioridade alta no foreground", risk: "med", rev: true, why: "Eleva a prioridade do app em foco para o scheduler do Windows.", impact: "Mais responsividade do jogo. Pode afetar gravação em paralelo." },
    { title: "Desligar indexação em SSD", risk: "high", rev: true, why: "O Search varre arquivos em segundo plano, gerando I/O.", impact: "Busca do Windows fica mais lenta. Útil em SSDs com pouco espaço." },
  ];

  return (
    <section>
      <div className="container">
        <SectionHead
          id="// 05 · CONTROL"
          eyebrow="Controle total"
          title='Você vê <span class="accent">o que muda</span> antes de aplicar.'
          lead="Cada otimização vem com risco classificado, explicação curta, impacto esperado e botão de rollback. Nada acontece sem o seu OK."
        />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
          {items.map((it, i) => (
            <div key={i} className="card" style={{ padding: 20 }}>
              <div className="row between" style={{ marginBottom: 12 }}>
                <span className="mono" style={{ fontSize: 10, color: "var(--fg-faint)", letterSpacing: "0.2em" }}>
                  AJUSTE_{String(i + 1).padStart(3, "0")}
                </span>
                <div className="row gap-2">
                  <RiskBadge level={it.risk}/>
                  {it.rev && <span className="tag accent"><Icon name="rotate" size={9}/> Reversível</span>}
                </div>
              </div>
              <h3 style={{ fontSize: 16, fontWeight: 700 }}>{it.title}</h3>
              <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 14px", marginTop: 14 }}>
                <span className="mono" style={{ fontSize: 10, color: "var(--fg-mute)", letterSpacing: "0.2em", paddingTop: 2 }}>POR QUÊ</span>
                <span style={{ fontSize: 13, color: "var(--fg-dim)", lineHeight: 1.55 }}>{it.why}</span>
                <span className="mono" style={{ fontSize: 10, color: "var(--fg-mute)", letterSpacing: "0.2em", paddingTop: 2 }}>IMPACTO</span>
                <span style={{ fontSize: 13, color: "var(--fg-dim)", lineHeight: 1.55 }}>{it.impact}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { SectionRecursos, SectionAntesDepois, SectionControle });