// Ecosistem V1 — 3 produse, 1 platformă. 3D tilt cards (Aceternity-port, no deps).
const { useState: useStateEco, useEffect: useEffectEco, useRef: useRefEco, useCallback: useCallbackEco } = React;

// ─── 3D Card primitives (ported from Aceternity, inline styles, no Tailwind) ─
const Card3DContainer = ({ children, style }) => {
  const cardRef = useRefEco(null);
  const [entered, setEntered] = useStateEco(false);

  const onMove = useCallbackEco((e) => {
    const el = cardRef.current;
    if (!el) return;
    const { left, top, width, height } = el.getBoundingClientRect();
    const x = (e.clientX - left - width / 2) / 22;
    const y = (e.clientY - top - height / 2) / 22;
    el.style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;
  }, []);

  const onEnter = useCallbackEco(() => setEntered(true), []);

  const onLeave = useCallbackEco(() => {
    setEntered(false);
    if (cardRef.current) cardRef.current.style.transform = "rotateY(0deg) rotateX(0deg)";
  }, []);

  return (
    <div style={{ perspective: "1200px", ...style }}>
      <div
        ref={cardRef}
        onMouseEnter={onEnter}
        onMouseMove={onMove}
        onMouseLeave={onLeave}
        data-entered={entered}
        style={{
          transformStyle: "preserve-3d",
          transition: "transform 0.18s ease-out, box-shadow 0.35s cubic-bezier(.2,.7,.2,1)",
          height: "100%",
        }}
      >
        {typeof children === "function" ? children(entered) : children}
      </div>
    </div>
  );
};

// Float items at a given Z depth
const Card3DItem = ({ children, z = 0, style, as: Tag = "div", ...rest }) => (
  <Tag
    style={{
      transform: `translateZ(${z}px)`,
      transition: "transform 0.2s ease-out",
      transformStyle: "preserve-3d",
      ...style,
    }}
    {...rest}
  >
    {children}
  </Tag>
);

// ─── Data ─────────────────────────────────────────────────────────────────────
const ECO_PRODUCTS = [
  {
    id: "voice",
    name: "Confirmări.ro",
    tagline: "Agentul vocal AI",
    desc: "Sunăm clienții pentru confirmare COD, recuperare coșuri abandonate, upsell-ui și multe altele.",
    features: ["Confirmăm comenzi", "Recuperăm comenzi abandonate", "Upsell la confirmare prin Apel și SMS", "Validăm adresa de livrare", "Încercăm confirmarea comenzii de 3 ori", "Dashboard în timp real cu statusul fiecărei comenzi"],
    logo: "logoMain",
    color: "var(--neon-purple)",
    colorRgb: "9,169,85",
    color2: "var(--neon-purple-2)",
    flagship: true,
  },
];

const logoSrc = (key) =>
  (window.__resources && window.__resources[key]) || "assets/confirmari_logo.png";

// ─── Main Component ────────────────────────────────────────────────────────────
const EcosistemV1 = () => {
  const [isMobile, setIsMobile] = useStateEco(false);
  useEffectEco(() => {
    const mq = () => setIsMobile(window.innerWidth < 760);
    mq();
    window.addEventListener("resize", mq);
    return () => window.removeEventListener("resize", mq);
  }, []);

  return (
    <div className="ev-stage" style={{ width: "100%", height: "100%", padding: isMobile ? "48px 18px 60px" : "60px 80px" }}>
      <div style={{ marginBottom: 8, textAlign: "center" }}>
        <h2 style={{
          fontSize: isMobile ? 36 : 64, fontWeight: 900, color: "#fff",
          letterSpacing: "-0.04em", lineHeight: 1, margin: 0,
        }}>
          Echipa <span style={{ color: "var(--neon-purple)" }}>TA</span> dedicată
        </h2>
      </div>

      {/* Flagship card */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1fr)",
        width: "100%",
        margin: "40px 0 0",
        alignItems: "start",
      }}>
        {ECO_PRODUCTS.map((p) => (
          <Card3DContainer key={p.id} style={{ height: "100%" }}>
            {(entered) => (
              <div style={{
                position: "relative",
                padding: isMobile ? "22px 18px" : 28,
                borderRadius: 20,
                background: p.flagship
                  ? `linear-gradient(180deg, rgba(${p.colorRgb},0.14), rgba(${p.colorRgb},0.04))`
                  : `linear-gradient(180deg, rgba(${p.colorRgb},0.08), rgba(255,255,255,0.02))`,
                border: `1px solid rgba(${p.colorRgb},${entered ? 0.60 : (p.flagship ? 0.40 : 0.25)})`,
                boxShadow: entered
                  ? `0 32px 90px rgba(0,0,0,0.60), 0 0 70px rgba(${p.colorRgb},0.32), inset 0 1px 0 rgba(255,255,255,0.12)`
                  : `0 20px 60px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08)`,
                height: "100%", boxSizing: "border-box",
                transformStyle: "preserve-3d",
              }}>
                {/* Ambient glow (not 3D, stays flat) */}
                <div aria-hidden="true" style={{
                  position: "absolute", left: -50, top: -50,
                  width: 220, height: 220, borderRadius: "50%",
                  background: `radial-gradient(circle, rgba(${p.colorRgb},0.22), transparent 65%)`,
                  filter: "blur(40px)", pointerEvents: "none",
                  transition: "opacity .35s",
                  opacity: entered ? 1 : 0.6,
                }} />

                <div style={{ position: "relative", zIndex: 1, transformStyle: "preserve-3d" }}>
                  {/* Logo */}
                  <Card3DItem z={entered ? 50 : 0} style={{ marginBottom: 22, display: "flex", justifyContent: "center" }}>
                    {p.id === "voice" ? (
                      <img src={logoSrc(p.logo)} alt={p.name} style={isMobile
                        ? { maxHeight: 60, maxWidth: "100%", width: "auto", height: "auto", display: "block" }
                        : { height: 140, width: "auto", display: "block" }} />
                    ) : (
                      <div style={{
                        width: 56, height: 56, borderRadius: 14,
                        background: `rgba(${p.colorRgb},0.18)`,
                        border: `1px solid rgba(${p.colorRgb},0.40)`,
                        display: "flex", alignItems: "center", justifyContent: "center",
                        boxShadow: `0 0 24px rgba(${p.colorRgb},0.25)`,
                        overflow: "hidden",
                      }}>
                        <img src={logoSrc(p.logo)} alt={p.name} style={{ width: 44, height: 44, objectFit: "contain", display: "block" }} />
                      </div>
                    )}
                  </Card3DItem>

                  {/* Desc */}
                  <Card3DItem z={entered ? 20 : 0} as="div" style={{
                    fontSize: 14, color: "var(--fg-2)", lineHeight: 1.55, marginBottom: 18,
                  }}>
                    {p.desc}
                  </Card3DItem>

                  {/* Features */}
                  <Card3DItem z={entered ? 25 : 0} as="div" style={{ display: "flex", flexDirection: "column", gap: 7, marginBottom: 22 }}>
                    {p.features.map((f) => (
                      <div key={f} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "#fff" }}>
                        <span style={{
                          width: 16, height: 16, borderRadius: "50%", flexShrink: 0,
                          background: `rgba(${p.colorRgb},0.20)`,
                          border: `1px solid rgba(${p.colorRgb},0.45)`,
                          display: "flex", alignItems: "center", justifyContent: "center",
                        }}>
                          <window.Icon name="check" size={9} color={p.color2} strokeWidth={3} />
                        </span>
                        {f}
                      </div>
                    ))}
                  </Card3DItem>
                </div>
              </div>
            )}
          </Card3DContainer>
        ))}
      </div>
    </div>
  );
};

window.EcosistemV1 = EcosistemV1;