// Planilha vs BinGest — animated split that ranges from chaos to clarity on scroll/hover.

function Comparison() {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0); // 0 = chaos, 1 = clarity

  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const wh = window.innerHeight;
      // Progress 0..1 as the section moves from bottom-of-viewport to upper-third
      const p = 1 - Math.min(1, Math.max(0, (rect.top - wh * 0.1) / (wh * 0.7)));
      setProgress(p);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section ref={ref}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <div className="t-eyebrow" style={{ marginBottom: 16 }}>Sua planilha vs. BinGest</div>
          <h2 className="t-h1" style={{ margin: 0, marginBottom: 16 }}>
            Você reconhece esse caos?
          </h2>
          <p className="t-lead">
            Toda obra começa com uma planilha. Em 3 meses ela vira um Frankenstein
            de abas, fórmulas quebradas e cores que ninguém entende. Compare lado a lado.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 24,
          alignItems: "stretch"
        }} className="cmp-grid">

          <SpreadsheetCard chaos={1 - progress} />
          <BingestCard order={progress} />
        </div>

        {/* Result strip */}
        <div style={{
          marginTop: 40,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 14
        }} className="cmp-stats">
          {[
          { k: "−85%", v: "tempo gasto em fechamento mensal" },
          { k: "0", v: "fórmulas quebradas (porque não tem fórmula)" },
          { k: "3 cliques", v: "para exportar o DRE auditado" },
          { k: "+30", v: "noites de sono por mês" }].
          map((s, i) =>
          <div key={i} style={{
            background: "rgba(255,255,255,.04)",
            border: "1px solid rgba(255,255,255,.10)",
            borderRadius: 16,
            padding: 22,
            backdropFilter: "blur(8px)",
          }}>
              <div className="mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: "-0.02em", color: "#fff" }}>{s.k}</div>
              <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)", marginTop: 6 }}>{s.v}</div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .cmp-grid { grid-template-columns: 1fr !important; }
          .cmp-stats { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>);

}

// --- Spreadsheet card -----------------------------------------------------
function SpreadsheetCard({ chaos }) {
  // chaos: 0..1 (1 = full chaos, 0 = calm)
  const tilt = -2 + chaos * 0.5;
  const cells = [
  ["A", "B", "C", "D", "E"],
  ["Funcionario", "Diaria", "Dias", "Total", "Obra"],
  ["Carlos S.", "180", "22", "=B3*C3", "Acácias"],
  ["Joao P.", "200", "18", "3.600", "Acácias"],
  ["?? Maria", "180", "20", "#REF!", "??"],
  ["Pedro", "180", "24", "4.320,00", "Vila Sul"],
  ["Lucas", "180", "", "#DIV/0!", "Vila Sul"],
  ["Roberto X.", "150", "26", "3.900", "Acácias?"],
  ["", "TOTAL", "", "=SOMA(D3:D9)", ""]];

  const ann = [
  { row: 4, msg: "ver com o mestre" },
  { row: 6, msg: "faltou dia" }];


  return (
    <div style={{
      position: "relative",
      transform: `rotate(${tilt}deg)`,
      transformOrigin: "center",
      transition: "transform .8s ease-out"
    }}>
      <div style={{
        background: "#fff",
        borderRadius: 14,
        border: "1px solid var(--border)",
        boxShadow: "var(--shadow-card)",
        overflow: "hidden",
        fontFamily: "var(--font-mono)",
        fontSize: 12
      }}>
        {/* Excel-ish chrome */}
        <div style={{
          background: "linear-gradient(180deg, #217346, #185c37)",
          color: "#fff",
          padding: "8px 14px",
          display: "flex", alignItems: "center", gap: 10,
          fontFamily: "var(--font-sans)"
        }}>
          <span style={{
            width: 18, height: 18, borderRadius: 4,
            background: "#fff", color: "#185c37",
            display: "grid", placeItems: "center",
            fontWeight: 700, fontSize: 11
          }}>X</span>
          <span style={{ fontSize: 12.5, fontWeight: 500 }}>
            controle_obras_FINAL_v8_USAR_ESTE.xlsx
          </span>
          <span style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: "#FBBF24" }} />
            <span style={{ width: 10, height: 10, borderRadius: 999, background: "#34D399" }} />
            <span style={{ width: 10, height: 10, borderRadius: 999, background: "#EF4444" }} />
          </span>
        </div>

        {/* Cell grid */}
        <div style={{ background: "#fafafa", padding: 14, position: "relative" }}>
          {cells.map((row, ri) =>
          <div key={ri} style={{ display: "grid", gridTemplateColumns: "40px repeat(5, 1fr)", gap: 0 }}>
              <div style={{
              background: ri === 0 ? "#eee" : "#f3f3f3",
              padding: "6px 6px",
              borderRight: "1px solid #d8d8d8",
              borderBottom: "1px solid #d8d8d8",
              color: "#666", fontSize: 11, textAlign: "center",
              fontWeight: 500
            }}>{ri === 0 ? "" : ri}</div>
              {row.map((c, ci) => {
              const isHeader = ri === 0;
              const isLabel = ri === 1;
              const isError = c.includes("#") || c.includes("?");
              const isFormula = c.startsWith("=");
              return (
                <div key={ci} style={{
                  background: isHeader ? "#eee" : isLabel ? "#f3f3f3" : "#fff",
                  padding: "6px 8px",
                  borderRight: "1px solid #d8d8d8",
                  borderBottom: "1px solid #d8d8d8",
                  color: isError ? "#C53030" : isFormula ? "#1A56DB" : "#0B132A",
                  fontWeight: isHeader || isLabel ? 600 : 400,
                  fontSize: 11.5,
                  minHeight: 24,
                  fontFamily: isHeader || isLabel ? "var(--font-sans)" : "var(--font-mono)",
                  position: "relative"
                }}>
                    {c}
                  </div>);

            })}
            </div>
          )}

          {/* Hand-scribbled annotations */}
          {ann.map((a, i) =>
          <div key={i} style={{
            position: "absolute",
            top: 30 + a.row * 24,
            right: 6,
            opacity: chaos,
            transition: "opacity .8s ease",
            transform: `rotate(${-4 + i * 2}deg)`,
            color: "#DC2626",
            fontFamily: "'Caveat', 'Bradley Hand', cursive",
            fontSize: 18,
            fontWeight: 700,
            pointerEvents: "none"
          }}>
              ← {a.msg}
            </div>
          )}

          {/* Red squiggle highlight */}
          <svg style={{
            position: "absolute", top: 92, left: 95, width: 130, height: 26,
            opacity: chaos, transition: "opacity .8s ease",
            pointerEvents: "none"
          }} viewBox="0 0 130 26">
            <path d="M3 12 q 10 -10 20 0 t 20 0 t 20 0 t 20 0 t 20 0 t 20 0"
            stroke="#DC2626" strokeWidth="2.5" fill="none" strokeLinecap="round" />
          </svg>
        </div>

        {/* Footer chip */}
        <div style={{
          padding: "10px 14px",
          background: "#fff",
          borderTop: "1px solid var(--border)",
          display: "flex", alignItems: "center", gap: 8,
          fontSize: 12, color: "var(--muted)",
          fontFamily: "var(--font-sans)"
        }}>
          <IconAlert size={14} style={{ color: "var(--red-600)" }} />
          2 erros detectados · Última edição há 3 dias por <em>"meu primo"</em>
        </div>
      </div>

      {/* Label */}
      <div style={{
        position: "absolute",
        top: -16, left: 20,
        background: "var(--red-600)",
        color: "#fff",
        padding: "5px 12px",
        borderRadius: 999,
        fontSize: 11.5,
        fontWeight: 600,
        letterSpacing: ".06em",
        textTransform: "uppercase"
      }}>Hoje · sua planilha</div>
    </div>);

}

// --- BinGest card -----------------------------------------------------------
function BingestCard({ order }) {
  // Mini glimpse of BinGest result. Becomes more saturated/crisp as order increases.
  return (
    <div style={{
      position: "relative",
      filter: `saturate(${0.5 + order * 0.5}) blur(${(1 - order) * 1.5}px)`,
      opacity: 0.5 + order * 0.5,
      transition: "all .6s ease-out"
    }}>
      <div style={{
        background: "#fff",
        borderRadius: 14,
        border: "1px solid var(--border)",
        boxShadow: "var(--shadow-card)",
        overflow: "hidden"
      }}>
        {/* Chrome */}
        <div style={{
          background: "linear-gradient(180deg, #0E1A3A, #0A1226)",
          color: "#fff",
          padding: "10px 14px",
          display: "flex", alignItems: "center", gap: 10
        }}>
          <IconLogo size={18} />
          <span style={{ fontSize: 12.5, fontWeight: 500 }}>
            BinGest — DRE consolidado · maio de 2026
          </span>
          <span style={{
            marginLeft: "auto",
            display: "inline-flex", alignItems: "center", gap: 5,
            padding: "2px 8px", borderRadius: 999,
            background: "rgba(34,197,94,.18)", color: "#22C55E",
            fontSize: 10.5, fontWeight: 600
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: "#22C55E" }} /> Online
          </span>
        </div>

        {/* Quick KPI strip */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          padding: 14,
          gap: 10,
          background: "#FBFCFE"
        }}>
          {[
          { l: "Receita", v: "R$ 47.200", c: "var(--ink)" },
          { l: "Custos diretos", v: "−R$ 19.840", c: "var(--red-600)" },
          { l: "Resultado op.", v: "R$ 27.360", c: "var(--green-600)" }].
          map((k, i) =>
          <div key={i} style={{
            padding: "10px 12px", borderRadius: 10, background: "#fff",
            border: "1px solid var(--border)"
          }}>
              <div style={{ fontSize: 11, color: "var(--muted)", marginBottom: 4 }}>{k.l}</div>
              <div className="mono tabular" style={{ fontSize: 16, fontWeight: 600, color: k.c, letterSpacing: "-0.01em" }}>{k.v}</div>
            </div>
          )}
        </div>

        {/* DRE rows */}
        <div style={{ padding: "0 14px 14px" }}>
          {[
          { l: "Receita Bruta Total", v: "R$ 47.200,00", strong: true },
          { l: "Obras", v: "R$ 47.200,00", indent: true },
          { l: "(−) Custos Diretos", v: "−R$ 19.840,00", neg: true, strong: true },
          { l: "Equipe Obras", v: "−R$ 14.620,00", neg: true, indent: true },
          { l: "Materiais", v: "−R$ 5.220,00", neg: true, indent: true },
          { l: "= Lucro Bruto", v: "R$ 27.360,00", strong: true, hilite: true }].
          map((r, i) =>
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "1fr auto",
            padding: "9px 10px",
            borderBottom: i < 5 ? "1px solid var(--border-2)" : "none",
            background: r.hilite ? "var(--green-50)" : "transparent",
            borderRadius: r.hilite ? 10 : 0,
            marginTop: r.hilite ? 6 : 0
          }}>
              <span style={{
              paddingLeft: r.indent ? 14 : 0,
              fontSize: 12.5,
              fontWeight: r.strong ? 600 : 400,
              color: r.indent ? "var(--muted)" : "var(--ink)"
            }}>{r.l}</span>
              <span className="mono tabular" style={{
              fontSize: 12.5,
              fontWeight: r.strong ? 600 : 500,
              color: r.neg ? "var(--red-600)" : r.hilite ? "var(--green-700)" : "var(--ink)"
            }}>{r.v}</span>
            </div>
          )}
        </div>

        {/* Footer chip */}
        <div style={{
          padding: "10px 14px",
          background: "var(--green-50)",
          borderTop: "1px solid var(--green-100)",
          display: "flex", alignItems: "center", gap: 8,
          fontSize: 12, color: "var(--green-700)",
          fontWeight: 500
        }}>
          <IconCheck size={14} /> Atualizado há 12 segundos · 0 erros · Exportável em PDF
        </div>
      </div>

      <div style={{
        position: "absolute",
        top: -16, left: 20,
        background: "var(--green-600)",
        color: "#fff",
        padding: "5px 12px",
        borderRadius: 999,
        fontSize: 11.5,
        fontWeight: 600,
        letterSpacing: ".06em",
        textTransform: "uppercase"
      }}>Mesma obra · no BinGest</div>
    </div>);

}

window.Comparison = Comparison;