// Solutia V3 — "Înlocuiește vs Confirmări.ro". Comparație side-by-side, brutal de directă.
const RowsV3 = [
{ dim: "Răspunde la apeluri", human: "Lucrează între 9—17", robot: "Clientul simte că vorbește cu un robot", ai: "Fără salarii, contracte, training sau Roboți A.I. care sună clienții", win: true },
{ dim: "Cost lunar (2.000 comenzi)", human: "8.800+ RON / 2 oameni", robot: "Face Greșeli", ai: "1,2 sau 3 Agenți Dedicați", win: true, big: true },
{ dim: "Timp până sună 100 de clienți", human: "~120 minute (100 oameni)", robot: "Frustrează Clienții", ai: "Rapid și Eficient", win: true, big: true },
{ dim: "Upsell automat la confirmare", human: "Are/Nu are chef să sune", robot: "Limitat în comunicare", ai: "Comunicare Reală cu Clienții", win: true },
{ dim: "Concedii, weekend, sărbători", human: "Concedii, Training, Pauze", robot: "Nu se descurcă în medii zgomotoase", ai: "Echipa Ta Externalizată", win: true }];


const SolutiaV3 = () => {
  const headRef = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 760);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);
  React.useEffect(() => {
    const el = headRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {if (e.isIntersecting) {setInView(true);io.disconnect();}}),
      { threshold: 0.3 }
    );
    io.observe(el);
    // fallback if already in view
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) setInView(true);
    return () => io.disconnect();
  }, []);

  const fadeBase = {
    display: "inline-block",
    transition: "opacity .9s ease-out, transform .9s ease-out",
    opacity: inView ? 1 : 0
  };

  return (
    <div className="ev-stage" style={{ width: "100%", height: "100%", padding: isMobile ? "40px 14px" : "60px 80px" }}>
    <style>{`
      @keyframes sv3-pulse-red { 0%,100% { text-shadow: 0 0 18px rgba(239,68,68,0.20); } 50% { text-shadow: 0 0 26px rgba(239,68,68,0.32); } }
      @keyframes sv3-pulse-green { 0%,100% { text-shadow: 0 0 22px rgba(16,185,129,0.30); } 50% { text-shadow: 0 0 36px rgba(16,185,129,0.45); } }
    `}</style>
    <h2 ref={headRef} style={{ fontSize: isMobile ? 30 : 56, fontWeight: 900, color: "#fff", letterSpacing: "-0.035em", lineHeight: 1.1, margin: isMobile ? "0 0 24px" : "0 0 36px", textAlign: "center" }}>
      <span style={{
          ...fadeBase,
          transform: inView ? "translateX(0)" : "translateX(-24px)",

          textShadow: "0 0 22px rgba(16,185,129,0.35)",
          animation: inView ? "sv3-pulse-green 4.5s ease-in-out infinite" : "none", color: "rgb(124, 245, 136)"
        }}>Confirmări.ro</span>
      <span style={{ color: "var(--fg-3)", margin: isMobile ? "0 10px" : "0 18px", fontWeight: 800 }}>vs.</span>
      <span style={{
          ...fadeBase,
          transform: inView ? "translateX(0)" : "translateX(24px)",
          transitionDelay: inView ? ".15s" : "0s",

          textShadow: "0 0 18px rgba(239,68,68,0.22)",
          animation: inView ? "sv3-pulse-red 4.5s ease-in-out infinite" : "none", color: "rgb(234, 127, 127)"
        }}>Competitori</span>
    </h2>

    {/* Comparison table */}
    {isMobile ? (
      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        {/* Angajat column */}
        <div style={{ borderRadius: 14, overflow: "hidden", border: "1px solid rgba(239,68,68,0.35)" }}>
          <div style={{ padding: "14px 16px", background: "rgba(239,68,68,0.16)", display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }}>
            <window.Icon name="users" size={18} color="#ef4444" strokeWidth={2} />
            <span style={{ fontSize: 15, fontWeight: 800, color: "#ef4444", letterSpacing: "-0.01em" }}>Angajat</span>
          </div>
          {RowsV3.map((r, i) => (
            <div key={i} style={{ padding: "12px 16px", borderTop: i === 0 ? "none" : "1px solid var(--glass-border)", background: "rgba(239,68,68,0.06)" }}>
              <div style={{ fontSize: 13, color: "rgb(234, 127, 127)", lineHeight: 1.35 }}>{r.human}</div>
            </div>
          ))}
        </div>

        {/* Robot A.I. column */}
        <div style={{ borderRadius: 14, overflow: "hidden", border: "1px solid rgba(239,68,68,0.35)" }}>
          <div style={{ padding: "14px 16px", background: "rgba(239,68,68,0.16)", display: "flex", alignItems: "center", justifyContent: "center", gap: 10 }}>
            <window.Icon name="settings" size={18} color="#ef4444" strokeWidth={2} />
            <span style={{ fontSize: 15, fontWeight: 800, color: "#ef4444", letterSpacing: "-0.01em" }}>Robot A.I.</span>
          </div>
          {RowsV3.map((r, i) => (
            <div key={i} style={{ padding: "12px 16px", borderTop: i === 0 ? "none" : "1px solid var(--glass-border)", background: "rgba(239,68,68,0.06)" }}>
              <div style={{ fontSize: 13, color: "rgb(234, 127, 127)", lineHeight: 1.35 }}>{r.robot}</div>
            </div>
          ))}
        </div>

        {/* Confirmări.ro column */}
        <div style={{ borderRadius: 14, overflow: "hidden", border: "1px solid var(--neon-purple)" }}>
          <div style={{
              padding: "18px 16px", display: "flex", alignItems: "center", justifyContent: "center",
              background: "linear-gradient(180deg, rgba(10,58,32,0.85), rgba(7,40,22,0.95))",
              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.25)"
            }}>
            <img src={(window.__resources && window.__resources.logoMain) || "assets/confirmari_logo.png"} alt="Confirmări.ro" style={{ height: 40, width: "auto", display: "block" }} />
          </div>
          {RowsV3.map((r, i) => (
            <div key={i} style={{
              padding: "12px 16px",
              borderTop: i === 0 ? "none" : "1px solid var(--glass-border)",
              background: "linear-gradient(180deg, rgba(9,169,85,0.12), rgba(9,169,85,0.03))"
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <window.Icon name="check" size={12} color="var(--neon-green)" strokeWidth={3} />
                <span style={{ fontSize: 13, fontWeight: 700, color: "#fff", lineHeight: 1.35 }}>{r.ai}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    ) : (
    <div style={{
        borderRadius: 18, overflow: "hidden",
        border: "1px solid var(--glass-border)",
        background: "rgba(255,255,255,0.02)"
      }}>
      {/* Header row */}
      <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          background: "rgba(255,255,255,0.04)",
          borderBottom: "1px solid var(--glass-border)"
        }}>
        <div style={{ padding: "28px 28px", fontSize: 24, fontWeight: 800, color: "#ef4444", display: "flex", alignItems: "center", justifyContent: "center", gap: 14, letterSpacing: "-0.01em", background: "rgba(239,68,68,0.08)" }}>
          <window.Icon name="users" size={26} color="#ef4444" strokeWidth={2} />
          Angajat
        </div>
        <div style={{ padding: "28px 28px", fontSize: 24, fontWeight: 800, color: "#ef4444", display: "flex", alignItems: "center", justifyContent: "center", gap: 14, letterSpacing: "-0.01em", background: "rgba(239,68,68,0.08)" }}>
          <window.Icon name="settings" size={26} color="#ef4444" strokeWidth={2} />
          Robot A.I.
        </div>
        <div style={{
            padding: "22px 28px", fontSize: 14, fontWeight: 800, color: "#fff",
            display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
            background: "linear-gradient(180deg, rgba(10,58,32,0.85), rgba(7,40,22,0.95))",
            borderLeft: "2px solid var(--neon-purple)",
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.25)"
          }}>
          <img src={(window.__resources && window.__resources.logoMain) || "assets/confirmari_logo.png"} alt="Confirmări.ro" style={{
              height: 70, width: "auto", display: "block"
            }} />
        </div>
      </div>

      {/* Body rows */}
      {RowsV3.map((r, i) =>
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          borderBottom: i === RowsV3.length - 1 ? "none" : "1px solid var(--glass-border)",
          alignItems: "center"
        }}>
          <div style={{ padding: "18px 28px", fontSize: r.big ? 16 : 14, color: "rgb(234, 127, 127)", lineHeight: 1.35, background: "rgba(239,68,68,0.14)" }}>
            {r.human}
          </div>
          <div style={{ padding: "18px 28px", fontSize: r.big ? 16 : 14, color: "rgb(234, 127, 127)", lineHeight: 1.35, background: "rgba(239,68,68,0.14)" }}>
            {r.robot}
          </div>
          <div style={{
            padding: "18px 28px",
            fontSize: r.big ? 18 : 15,
            fontWeight: r.big ? 800 : 700,
            color: r.win ? "#fff" : "var(--fg-2)",
            background: "linear-gradient(180deg, rgba(9,169,85,0.14), rgba(9,169,85,0.04))",
            borderLeft: "2px solid var(--neon-purple)",
            display: "flex", alignItems: "center", gap: 10,
            letterSpacing: r.big ? "-0.01em" : "0",
            lineHeight: 1.3
          }}>
            <window.Icon name="check" size={14} color="var(--neon-green)" strokeWidth={3} />
            {r.ai}
          </div>
        </div>
        )}
    </div>
    )}

  </div>);

};

window.SolutiaV3 = SolutiaV3;