// Metrics Strip V1 — 4-up stat band (adapted from codcrm.ro's "lp-metrics" section).
const METRICS_V1_DATA = [
  { big: "8", label: "Parteneri activi" },
  { big: "17k+", label: "Comenzi confirmate" },
  { big: "3", label: "Zile gratuite la start", hot: true },
  { big: "15 min", label: "Integrare Shopify" },
];

const MetricsStripV1 = () => {
  const [isMobile, setIsMobile] = React.useState(false);
  const [inView, setInView] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 760);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          setInView(true);
          io.disconnect();
          break;
        }
      }
    }, { threshold: 0.35, rootMargin: "0px 0px -10% 0px" });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref} style={{
      width: "100%",
      borderTop: "1px solid var(--glass-border)",
      borderBottom: "1px solid var(--glass-border)",
      background: "rgba(255,255,255,0.016)",
    }}>
      <div style={{
        maxWidth: 1180, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)",
      }}>
        {METRICS_V1_DATA.map((m, i) => (
          <div key={i} style={{
            padding: isMobile ? "22px 14px" : "30px 24px",
            textAlign: "center",
            borderLeft: (isMobile ? i % 2 !== 0 : i !== 0) ? "1px solid var(--glass-border)" : "none",
            borderTop: isMobile && i > 1 ? "1px solid var(--glass-border)" : "none",
            opacity: inView ? 1 : 0,
            transform: inView ? "none" : "translateY(16px)",
            filter: inView ? "none" : "blur(5px)",
            transition: `opacity .9s cubic-bezier(.2,.7,.2,1) ${i * 0.07}s, transform .9s cubic-bezier(.2,.7,.2,1) ${i * 0.07}s, filter .9s cubic-bezier(.2,.7,.2,1) ${i * 0.07}s`,
          }}>
            <b style={{
              display: "block",
              fontSize: isMobile ? 26 : "clamp(26px, 3.2vw, 36px)",
              fontWeight: 800,
              letterSpacing: "-0.04em",
              lineHeight: 1,
              ...(m.hot
                ? {
                    backgroundImage: "linear-gradient(102deg, #7dffb0, var(--neon-purple-2))",
                    backgroundClip: "text",
                    WebkitBackgroundClip: "text",
                    color: "transparent",
                    WebkitTextFillColor: "transparent",
                    textShadow: "0 0 24px rgba(87,255,135,0.45)",
                  }
                : { color: "#fff" }),
            }}>{m.big}</b>
            <span style={{
              display: "block", marginTop: 8,
              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
              fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase",
              color: "var(--fg-3)",
            }}>{m.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

window.MetricsStripV1 = MetricsStripV1;