// Metrics: dark ink band with count-up stats + an animated growth chart.
const NS_MET = window.AnsysDigitalDesignSystem_4543d7;

function useInView(ref, rootMargin = "-12% 0px") {
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver((es) => {
      if (es.some((e) => e.isIntersecting)) { setSeen(true); io.disconnect(); }
    }, { rootMargin });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [seen]);
  return seen;
}

function CountUp({ value, suffix, accent }) {
  const ref = React.useRef(null);
  const seen = useInView(ref);
  const numeric = /^[0-9]+$/.test(value);
  const [n, setN] = React.useState(numeric ? 0 : value);
  React.useEffect(() => {
    if (!seen || !numeric) return;
    const target = parseInt(value, 10); const dur = 1400; const t0 = performance.now();
    let raf = 0;
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seen]);
  return (
    <div ref={ref} style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(2.25rem,3vw+1rem,3.25rem)", letterSpacing: "var(--tracking-tight)", lineHeight: 1, color: "var(--ink-text)" }}>
      {n}<span style={{ color: accent === "gold" ? "var(--accent)" : "rgba(255,255,255,.72)" }}>{suffix}</span>
    </div>
  );
}

function GrowthChart() {
  const ref = React.useRef(null);
  const seen = useInView(ref, "-8% 0px");
  const W = 460, H = 240, pad = 14;
  const pts = [12, 20, 17, 34, 40, 58, 72, 88];
  const max = 100;
  const stepX = (W - pad * 2) / (pts.length - 1);
  const xy = pts.map((v, i) => [pad + i * stepX, H - pad - (v / max) * (H - pad * 2)]);
  const line = xy.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = line + " L" + xy[xy.length - 1][0].toFixed(1) + " " + (H - pad) + " L" + xy[0][0].toFixed(1) + " " + (H - pad) + " Z";
  const bars = [40, 55, 48, 70, 82, 95];
  const bw = (W - pad * 2) / bars.length;
  return (
    <div ref={ref} style={{ position: "relative", background: "rgba(255,255,255,.06)", border: "1px solid var(--ink-border)", borderRadius: "var(--radius-lg)", backdropFilter: "blur(6px)", padding: "22px 22px 16px", overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-text)" }}>Conversion rate — 12 months</div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 700, color: "var(--accent)" }}><Ic name="trending-up" size={15} /> +38%</div>
      </div>
      <svg viewBox={"0 0 " + W + " " + H} width="100%" style={{ display: "block", height: "auto" }}>
        <defs>
          <linearGradient id="metArea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(255,215,0,.42)" />
            <stop offset="100%" stopColor="rgba(255,215,0,0)" />
          </linearGradient>
        </defs>
        {[0, 1, 2, 3].map((i) => (
          <line key={i} x1={pad} x2={W - pad} y1={pad + i * ((H - pad * 2) / 3)} y2={pad + i * ((H - pad * 2) / 3)} stroke="rgba(255,255,255,.09)" strokeWidth="1" />
        ))}
        {bars.map((b, i) => {
          const bh = (b / max) * (H - pad * 2);
          return <rect key={i} x={pad + i * bw + bw * 0.28} width={bw * 0.44} y={H - pad - (seen ? bh : 0)} height={seen ? bh : 0} rx="4" fill="rgba(255,255,255,.14)" style={{ transition: "y .9s cubic-bezier(.22,1,.36,1) " + (i * 70 + 200) + "ms, height .9s cubic-bezier(.22,1,.36,1) " + (i * 70 + 200) + "ms" }} />;
        })}
        <path d={area} fill="url(#metArea)" style={{ opacity: seen ? 1 : 0, transition: "opacity .8s ease .9s" }} />
        <path d={line} fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{ strokeDasharray: 900, strokeDashoffset: seen ? 0 : 900, transition: "stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s" }} />
        {xy.map((p, i) => {
          const last = i === xy.length - 1;
          return <circle key={i} cx={p[0]} cy={p[1]} r={last ? 5.5 : 4} fill={last ? "var(--accent)" : "#fff"} stroke={last ? "rgba(255,215,0,.35)" : "none"} strokeWidth={last ? 6 : 0} style={{ opacity: seen ? 1 : 0, transition: "opacity .4s ease " + (i * 120 + 800) + "ms" }} />;
        })}
      </svg>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-text-muted)" }}>
        <span>Launch</span><span>Q2</span><span>Q3</span><span>Now</span>
      </div>
    </div>
  );
}

function Metrics() {
  const { Eyebrow } = NS_MET;
  const stats = [
    { value: "250", suffix: "+", label: "Shopify projects delivered", icon: "rocket" },
    { value: "98", suffix: "%", label: "Client satisfaction", accent: "gold", icon: "heart" },
    { value: "6", suffix: "+", label: "Countries served worldwide", icon: "globe" },
    { value: "24/7", suffix: "", label: "Dedicated support", icon: "life-buoy" },
  ];
  return (
    <section style={{ background: "var(--grad-brand)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "var(--grad-halo)", opacity: .5, pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(330px,1fr))", gap: "clamp(32px,5vw,64px)", alignItems: "center" }}>
          <div>
            <div className="reveal" style={{ marginBottom: "clamp(1.75rem,3vw,2.5rem)" }}>
              <Eyebrow color="gold">Proof, not promises</Eyebrow>
              <h2 style={{ margin: "14px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--display-sm)", letterSpacing: "var(--tracking-tight)", color: "var(--ink-text)", textWrap: "balance" }}>Results that compound</h2>
              <p style={{ margin: "14px 0 0", fontSize: 16, lineHeight: "var(--leading-snug)", color: "var(--ink-text-muted)", maxWidth: 420, textWrap: "pretty" }}>Every store we build is measured on outcomes — speed, conversion, and revenue that keeps climbing after launch.</p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
              {stats.map((s) => (
                <div key={s.label} className="reveal" style={{ background: "rgba(255,255,255,.06)", border: "1px solid var(--ink-border)", borderRadius: "var(--radius-lg)", padding: "18px 18px 20px", backdropFilter: "blur(6px)" }}>
                  <span style={{ display: "inline-flex", width: 34, height: 34, borderRadius: "var(--radius-md)", background: s.accent === "gold" ? "rgba(255,215,0,.16)" : "rgba(255,255,255,.1)", color: s.accent === "gold" ? "var(--accent)" : "var(--ink-text)", alignItems: "center", justifyContent: "center", marginBottom: 14 }}><Ic name={s.icon} size={18} /></span>
                  <CountUp value={s.value} suffix={s.suffix} accent={s.accent} />
                  <div style={{ marginTop: 8, fontSize: 13.5, color: "var(--ink-text-muted)", maxWidth: "22ch" }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="reveal"><GrowthChart /></div>
        </div>
        <p className="reveal" style={{ margin: "clamp(28px,4vw,40px) auto 0", maxWidth: 680, textAlign: "center", fontSize: 12.5, lineHeight: 1.6, color: "var(--ink-text-muted,rgba(255,255,255,.55))", textWrap: "pretty" }}>
          Metrics are averages across managed client stores over the stated period. Individual results vary by product, pricing, market and marketing spend, and are not a guarantee of future performance.
        </p>
      </div>
    </section>
  );
}
Object.assign(window, { Metrics });