@sonordev/agency-site-kit 0.1.0

package/dist/MetricsTimelineSection-4L6DUHJ5.cjs

@@ -0,0 +1,258 @@
+'use strict';
+
+var chunkKEOHORIH_cjs = require('./chunk-KEOHORIH.cjs');
+var chunkIKBK7HYX_cjs = require('./chunk-IKBK7HYX.cjs');
+var react = require('react');
+var gsap = require('gsap');
+var ScrollTrigger = require('gsap/ScrollTrigger');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var gsap__default = /*#__PURE__*/_interopDefault(gsap);
+
+var metricColors = {
+  traffic: "#6366f1",
+  conversions: "#10b981",
+  revenue: "#f59e0b",
+  rankings: "#ec4899"
+};
+var metricLabels = {
+  traffic: "Traffic",
+  conversions: "Conversions",
+  revenue: "Revenue",
+  rankings: "Rankings"
+};
+function MetricsTimelineSection({ data }) {
+  const svgRef = react.useRef(null);
+  const pathRef = react.useRef(null);
+  const [activeMetric, setActiveMetric] = react.useState("traffic");
+  const [hasTriggered, setHasTriggered] = react.useState(false);
+  const availableMetrics = react.useMemo(() => {
+    const keys = ["traffic", "conversions", "revenue", "rankings"];
+    return keys.filter(
+      (key) => data.dataPoints.some((dp) => dp.metrics[key] !== void 0 && dp.metrics[key] !== null)
+    );
+  }, [data.dataPoints]);
+  const chartData = react.useMemo(() => {
+    const values = data.dataPoints.map((dp) => dp.metrics[activeMetric] ?? 0);
+    const maxVal = Math.max(...values, 1);
+    const minVal = Math.min(...values, 0);
+    const range = maxVal - minVal || 1;
+    const chartWidth = 800;
+    const chartHeight = 300;
+    const padding = 40;
+    const points = values.map((val, i) => ({
+      x: padding + i / Math.max(values.length - 1, 1) * (chartWidth - padding * 2),
+      y: chartHeight - padding - (val - minVal) / range * (chartHeight - padding * 2)
+    }));
+    let d = "";
+    if (points.length > 0) {
+      d = `M ${points[0].x} ${points[0].y}`;
+      for (let i = 1; i < points.length; i++) {
+        const cpx1 = (points[i - 1].x + points[i].x) / 2;
+        const cpy1 = points[i - 1].y;
+        const cpx2 = (points[i - 1].x + points[i].x) / 2;
+        const cpy2 = points[i].y;
+        d += ` C ${cpx1} ${cpy1}, ${cpx2} ${cpy2}, ${points[i].x} ${points[i].y}`;
+      }
+    }
+    let areaD = d;
+    if (points.length > 0) {
+      areaD += ` L ${points[points.length - 1].x} ${chartHeight - padding} L ${points[0].x} ${chartHeight - padding} Z`;
+    }
+    const baselineIdx = data.dataPoints.findIndex((dp) => dp.month === data.baselineDate);
+    const baselineX = baselineIdx >= 0 ? points[baselineIdx]?.x : void 0;
+    return {
+      d,
+      areaD,
+      points,
+      chartWidth,
+      chartHeight,
+      padding,
+      baselineX,
+      labels: data.dataPoints.map((dp) => dp.label)
+    };
+  }, [data.dataPoints, data.baselineDate, activeMetric]);
+  react.useEffect(() => {
+    gsap__default.default.registerPlugin(ScrollTrigger.ScrollTrigger);
+    const path = pathRef.current;
+    const svg = svgRef.current;
+    if (!path || !svg) return;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const ctx = gsap__default.default.context(() => {
+      const length = path.getTotalLength();
+      gsap__default.default.set(path, { strokeDasharray: length, strokeDashoffset: length });
+      if (prefersReducedMotion) {
+        gsap__default.default.set(path, { strokeDashoffset: 0 });
+        setHasTriggered(true);
+        return;
+      }
+      gsap__default.default.to(path, {
+        strokeDashoffset: 0,
+        duration: 2,
+        ease: "power2.out",
+        scrollTrigger: {
+          trigger: svg,
+          start: "top 75%",
+          toggleActions: "play none none none"
+        },
+        onComplete: () => setHasTriggered(true)
+      });
+    });
+    return () => ctx.revert();
+  }, [activeMetric]);
+  const handleMetricChange = react.useCallback((metric) => {
+    setActiveMetric(metric);
+    setHasTriggered(false);
+  }, []);
+  const color = metricColors[activeMetric];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ jsxRuntime.jsxs(chunkIKBK7HYX_cjs.ScrollReveal, { y: 30, children: [
+          data.title && /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: data.title
+            }
+          ),
+          data.description && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-lg mb-8 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: data.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-8", children: availableMetrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleMetricChange(metric),
+            className: "px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer",
+            style: {
+              background: activeMetric === metric ? metricColors[metric] : "var(--sk-surface, rgba(255,255,255,0.05))",
+              color: activeMetric === metric ? "#ffffff" : "var(--sk-text-secondary, #a1a1aa)",
+              border: `1px solid ${activeMetric === metric ? metricColors[metric] : "var(--sk-border, rgba(255,255,255,0.1))"}`
+            },
+            children: metricLabels[metric]
+          },
+          metric
+        )) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkIKBK7HYX_cjs.ScrollReveal, { y: 40, delay: 0.2, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKEOHORIH_cjs.GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            ref: svgRef,
+            viewBox: `0 0 ${chartData.chartWidth} ${chartData.chartHeight}`,
+            className: "w-full h-auto",
+            preserveAspectRatio: "xMidYMid meet",
+            children: [
+              [0, 1, 2, 3, 4].map((i) => {
+                const y = chartData.padding + i / 4 * (chartData.chartHeight - chartData.padding * 2);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: chartData.padding,
+                    y1: y,
+                    x2: chartData.chartWidth - chartData.padding,
+                    y2: y,
+                    stroke: "var(--sk-border, rgba(255,255,255,0.1))",
+                    strokeWidth: "1"
+                  },
+                  i
+                );
+              }),
+              chartData.baselineX !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    x1: chartData.baselineX,
+                    y1: chartData.padding,
+                    x2: chartData.baselineX,
+                    y2: chartData.chartHeight - chartData.padding,
+                    stroke: "var(--sk-text-tertiary, #71717a)",
+                    strokeWidth: "1.5",
+                    strokeDasharray: "6 4"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: chartData.baselineX,
+                    y: chartData.padding - 10,
+                    textAnchor: "middle",
+                    fill: "var(--sk-text-tertiary, #71717a)",
+                    fontSize: "11",
+                    fontFamily: "var(--sk-font, sans-serif)",
+                    children: "Launch"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `area-gradient-${activeMetric}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.3" }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              ] }) }),
+              hasTriggered && chartData.areaD && /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: chartData.areaD,
+                  fill: `url(#area-gradient-${activeMetric})`
+                }
+              ),
+              chartData.d && /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  ref: pathRef,
+                  d: chartData.d,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: "3",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              hasTriggered && chartData.points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: pt.x,
+                  cy: pt.y,
+                  r: "4",
+                  fill: color,
+                  stroke: "var(--sk-bg, #0a0a0a)",
+                  strokeWidth: "2"
+                },
+                i
+              )),
+              chartData.labels.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "text",
+                {
+                  x: chartData.points[i]?.x ?? 0,
+                  y: chartData.chartHeight - 10,
+                  textAnchor: "middle",
+                  fill: "var(--sk-text-tertiary, #71717a)",
+                  fontSize: "10",
+                  fontFamily: "var(--sk-font, sans-serif)",
+                  children: label
+                },
+                i
+              ))
+            ]
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+
+module.exports = MetricsTimelineSection;
+//# sourceMappingURL=MetricsTimelineSection-4L6DUHJ5.cjs.map
+//# sourceMappingURL=MetricsTimelineSection-4L6DUHJ5.cjs.map

package/dist/MetricsTimelineSection-4L6DUHJ5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/MetricsTimelineSection.tsx"],"names":["useRef","useState","useMemo","useEffect","gsap","ScrollTrigger","useCallback","jsx","jsxs","ScrollReveal","GlassCard","Fragment"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,YAAA,GAA0C;AAAA,EAC9C,OAAA,EAAS,SAAA;AAAA,EACT,WAAA,EAAa,SAAA;AAAA,EACb,OAAA,EAAS,SAAA;AAAA,EACT,QAAA,EAAU;AACZ,CAAA;AAEA,IAAM,YAAA,GAA0C;AAAA,EAC9C,OAAA,EAAS,SAAA;AAAA,EACT,WAAA,EAAa,aAAA;AAAA,EACb,OAAA,EAAS,SAAA;AAAA,EACT,QAAA,EAAU;AACZ,CAAA;AAEe,SAAR,sBAAA,CAAwC,EAAE,IAAA,EAAK,EAAgC;AACpF,EAAA,MAAM,MAAA,GAASA,aAAsB,IAAI,CAAA;AACzC,EAAA,MAAM,OAAA,GAAUA,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAoB,SAAS,CAAA;AACrE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAS,KAAK,CAAA;AAGtD,EAAA,MAAM,gBAAA,GAAmBC,cAAQ,MAAM;AACrC,IAAA,MAAM,IAAA,GAAoB,CAAC,SAAA,EAAW,aAAA,EAAe,WAAW,UAAU,CAAA;AAC1E,IAAA,OAAO,IAAA,CAAK,MAAA;AAAA,MAAO,CAAC,GAAA,KAClB,IAAA,CAAK,UAAA,CAAW,IAAA,CAAK,CAAC,EAAA,KAAO,EAAA,CAAG,OAAA,CAAQ,GAAG,MAAM,MAAA,IAAa,EAAA,CAAG,OAAA,CAAQ,GAAG,MAAM,IAAI;AAAA,KACxF;AAAA,EACF,CAAA,EAAG,CAAC,IAAA,CAAK,UAAU,CAAC,CAAA;AAGpB,EAAA,MAAM,SAAA,GAAYA,cAAQ,MAAM;AAC9B,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,UAAA,CAAW,GAAA,CAAI,CAAC,OAAO,EAAA,CAAG,OAAA,CAAQ,YAAY,CAAA,IAAK,CAAC,CAAA;AACxE,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,GAAA,CAAI,GAAG,QAAQ,CAAC,CAAA;AACpC,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,GAAA,CAAI,GAAG,QAAQ,CAAC,CAAA;AACpC,IAAA,MAAM,KAAA,GAAQ,SAAS,MAAA,IAAU,CAAA;AAEjC,IAAA,MAAM,UAAA,GAAa,GAAA;AACnB,IAAA,MAAM,WAAA,GAAc,GAAA;AACpB,IAAA,MAAM,OAAA,GAAU,EAAA;AAEhB,IAAA,MAAM,MAAA,GAAS,MAAA,CAAO,GAAA,CAAI,CAAC,KAAK,CAAA,MAAO;AAAA,MACrC,CAAA,EAAG,OAAA,GAAW,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,MAAA,CAAO,MAAA,GAAS,CAAA,EAAG,CAAC,CAAA,IAAM,UAAA,GAAa,OAAA,GAAU,CAAA,CAAA;AAAA,MAC5E,GAAG,WAAA,GAAc,OAAA,GAAA,CAAY,MAAM,MAAA,IAAU,KAAA,IAAU,cAAc,OAAA,GAAU,CAAA;AAAA,KACjF,CAAE,CAAA;AAGF,IAAA,IAAI,CAAA,GAAI,EAAA;AACR,IAAA,IAAI,MAAA,CAAO,SAAS,CAAA,EAAG;AACrB,MAAA,CAAA,GAAI,CAAA,EAAA,EAAK,OAAO,CAAC,CAAA,CAAE,CAAC,CAAA,CAAA,EAAI,MAAA,CAAO,CAAC,CAAA,CAAE,CAAC,CAAA,CAAA;AACnC,MAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,MAAA,CAAO,QAAQ,CAAA,EAAA,EAAK;AACtC,QAAA,MAAM,IAAA,GAAA,CAAQ,OAAO,CAAA,GAAI,CAAC,EAAE,CAAA,GAAI,MAAA,CAAO,CAAC,CAAA,CAAE,CAAA,IAAK,CAAA;AAC/C,QAAA,MAAM,IAAA,GAAO,MAAA,CAAO,CAAA,GAAI,CAAC,CAAA,CAAE,CAAA;AAC3B,QAAA,MAAM,IAAA,GAAA,CAAQ,OAAO,CAAA,GAAI,CAAC,EAAE,CAAA,GAAI,MAAA,CAAO,CAAC,CAAA,CAAE,CAAA,IAAK,CAAA;AAC/C,QAAA,MAAM,IAAA,GAAO,MAAA,CAAO,CAAC,CAAA,CAAE,CAAA;AACvB,QAAA,CAAA,IAAK,MAAM,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,EAAA,EAAK,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,EAAA,EAAK,MAAA,CAAO,CAAC,CAAA,CAAE,CAAC,IAAI,MAAA,CAAO,CAAC,EAAE,CAAC,CAAA,CAAA;AAAA,MACzE;AAAA,IACF;AAGA,IAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,IAAA,IAAI,MAAA,CAAO,SAAS,CAAA,EAAG;AACrB,MAAA,KAAA,IAAS,MAAM,MAAA,CAAO,MAAA,CAAO,MAAA,GAAS,CAAC,EAAE,CAAC,CAAA,CAAA,EAAI,WAAA,GAAc,OAAO,MAAM,MAAA,CAAO,CAAC,EAAE,CAAC,CAAA,CAAA,EAAI,cAAc,OAAO,CAAA,EAAA,CAAA;AAAA,IAC/G;AAGA,IAAA,MAAM,WAAA,GAAc,KAAK,UAAA,CAAW,SAAA,CAAU,CAAC,EAAA,KAAO,EAAA,CAAG,KAAA,KAAU,IAAA,CAAK,YAAY,CAAA;AACpF,IAAA,MAAM,YAAY,WAAA,IAAe,CAAA,GAAI,MAAA,CAAO,WAAW,GAAG,CAAA,GAAI,MAAA;AAE9D,IAAA,OAAO;AAAA,MACL,CAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAQ,IAAA,CAAK,UAAA,CAAW,IAAI,CAAC,EAAA,KAAO,GAAG,KAAK;AAAA,KAC9C;AAAA,EACF,GAAG,CAAC,IAAA,CAAK,YAAY,IAAA,CAAK,YAAA,EAAc,YAAY,CAAC,CAAA;AAGrD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAAC,qBAAA,CAAK,eAAeC,2BAAa,CAAA;AAEjC,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA;AACrB,IAAA,MAAM,MAAM,MAAA,CAAO,OAAA;AACnB,IAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,GAAA,EAAK;AAEnB,IAAA,MAAM,oBAAA,GAAuB,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAEnF,IAAA,MAAM,GAAA,GAAMD,qBAAA,CAAK,OAAA,CAAQ,MAAM;AAC7B,MAAA,MAAM,MAAA,GAAS,KAAK,cAAA,EAAe;AACnC,MAAAA,qBAAA,CAAK,IAAI,IAAA,EAAM,EAAE,iBAAiB,MAAA,EAAQ,gBAAA,EAAkB,QAAQ,CAAA;AAEpE,MAAA,IAAI,oBAAA,EAAsB;AACxB,QAAAA,qBAAA,CAAK,GAAA,CAAI,IAAA,EAAM,EAAE,gBAAA,EAAkB,GAAG,CAAA;AACtC,QAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,QAAA;AAAA,MACF;AAEA,MAAAA,qBAAA,CAAK,GAAG,IAAA,EAAM;AAAA,QACZ,gBAAA,EAAkB,CAAA;AAAA,QAClB,QAAA,EAAU,CAAA;AAAA,QACV,IAAA,EAAM,YAAA;AAAA,QACN,aAAA,EAAe;AAAA,UACb,OAAA,EAAS,GAAA;AAAA,UACT,KAAA,EAAO,SAAA;AAAA,UACP,aAAA,EAAe;AAAA,SACjB;AAAA,QACA,UAAA,EAAY,MAAM,eAAA,CAAgB,IAAI;AAAA,OACvC,CAAA;AAAA,IACH,CAAC,CAAA;AAED,IAAA,OAAO,MAAM,IAAI,MAAA,EAAO;AAAA,EAC1B,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,MAAM,kBAAA,GAAqBE,iBAAA,CAAY,CAAC,MAAA,KAAsB;AAC5D,IAAA,eAAA,CAAgB,MAAM,CAAA;AACtB,IAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,EACvB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQ,aAAa,YAAY,CAAA;AAEvC,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,uBAAA;AAAA,MACV,KAAA,EAAO,EAAE,UAAA,EAAY,uBAAA,EAAwB;AAAA,MAE7C,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACX,QAAA,EAAA;AAAA,QAAA,CAAA,IAAA,CAAK,SAAS,IAAA,CAAK,WAAA,qBACnBA,eAAA,CAACC,8BAAA,EAAA,EAAa,GAAG,EAAA,EACd,QAAA,EAAA;AAAA,UAAA,IAAA,CAAK,KAAA,oBACJF,cAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,qCAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,KAAA,EAAO,iCAAA;AAAA,gBACP,UAAA,EAAY;AAAA,eACd;AAAA,cAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,WACR;AAAA,UAED,KAAK,WAAA,oBACJA,cAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,wBAAA;AAAA,cACV,KAAA,EAAO,EAAE,KAAA,EAAO,mCAAA,EAAoC;AAAA,cAEnD,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA;AACR,SAAA,EAEJ,CAAA;AAAA,wBAIFA,cAAA,CAACE,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAI,KAAA,EAAO,GAAA,EAC1B,QAAA,kBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,gBAAA,CAAiB,GAAA,CAAI,CAAC,MAAA,qBACrBA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,OAAA,EAAS,MAAM,kBAAA,CAAmB,MAAM,CAAA;AAAA,YACxC,SAAA,EAAU,uFAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,UAAA,EACE,YAAA,KAAiB,MAAA,GACb,YAAA,CAAa,MAAM,CAAA,GACnB,2CAAA;AAAA,cACN,KAAA,EACE,YAAA,KAAiB,MAAA,GACb,SAAA,GACA,mCAAA;AAAA,cACN,QAAQ,CAAA,UAAA,EACN,YAAA,KAAiB,SACb,YAAA,CAAa,MAAM,IACnB,yCACN,CAAA;AAAA,aACF;AAAA,YAEC,uBAAa,MAAM;AAAA,WAAA;AAAA,UAnBf;AAAA,SAqBR,GACH,CAAA,EACF,CAAA;AAAA,wBAEAA,cAAA,CAACE,8BAAA,EAAA,EAAa,CAAA,EAAG,EAAA,EAAI,KAAA,EAAO,GAAA,EAC1B,QAAA,kBAAAF,cAAA,CAACG,2BAAA,EAAA,EAAU,OAAA,EAAQ,IAAA,EAAK,KAAA,EAAO,KAAA,EAC7B,QAAA,kBAAAF,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,MAAA;AAAA,YACL,SAAS,CAAA,IAAA,EAAO,SAAA,CAAU,UAAU,CAAA,CAAA,EAAI,UAAU,WAAW,CAAA,CAAA;AAAA,YAC7D,SAAA,EAAU,eAAA;AAAA,YACV,mBAAA,EAAoB,eAAA;AAAA,YAGnB,QAAA,EAAA;AAAA,cAAA,CAAC,CAAA,EAAG,GAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM;AAC1B,gBAAA,MAAM,CAAA,GACJ,UAAU,OAAA,GACT,CAAA,GAAI,KAAM,SAAA,CAAU,WAAA,GAAc,UAAU,OAAA,GAAU,CAAA,CAAA;AACzD,gBAAA,uBACED,cAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBAEC,IAAI,SAAA,CAAU,OAAA;AAAA,oBACd,EAAA,EAAI,CAAA;AAAA,oBACJ,EAAA,EAAI,SAAA,CAAU,UAAA,GAAa,SAAA,CAAU,OAAA;AAAA,oBACrC,EAAA,EAAI,CAAA;AAAA,oBACJ,MAAA,EAAO,yCAAA;AAAA,oBACP,WAAA,EAAY;AAAA,mBAAA;AAAA,kBANP;AAAA,iBAOP;AAAA,cAEJ,CAAC,CAAA;AAAA,cAGA,SAAA,CAAU,SAAA,KAAc,MAAA,oBACvBC,eAAA,CAAAG,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,gCAAAJ,cAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,IAAI,SAAA,CAAU,SAAA;AAAA,oBACd,IAAI,SAAA,CAAU,OAAA;AAAA,oBACd,IAAI,SAAA,CAAU,SAAA;AAAA,oBACd,EAAA,EAAI,SAAA,CAAU,WAAA,GAAc,SAAA,CAAU,OAAA;AAAA,oBACtC,MAAA,EAAO,kCAAA;AAAA,oBACP,WAAA,EAAY,KAAA;AAAA,oBACZ,eAAA,EAAgB;AAAA;AAAA,iBAClB;AAAA,gCACAA,cAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,GAAG,SAAA,CAAU,SAAA;AAAA,oBACb,CAAA,EAAG,UAAU,OAAA,GAAU,EAAA;AAAA,oBACvB,UAAA,EAAW,QAAA;AAAA,oBACX,IAAA,EAAK,kCAAA;AAAA,oBACL,QAAA,EAAS,IAAA;AAAA,oBACT,UAAA,EAAW,4BAAA;AAAA,oBACZ,QAAA,EAAA;AAAA;AAAA;AAED,eAAA,EACF,CAAA;AAAA,8BAIFA,cAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAAC,eAAA,CAAC,gBAAA,EAAA,EAAe,IAAI,CAAA,cAAA,EAAiB,YAAY,CAAA,CAAA,EAAI,EAAA,EAAG,KAAI,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,GAAA,EAAI,IAAG,GAAA,EAC3E,QAAA,EAAA;AAAA,gCAAAD,cAAA,CAAC,UAAK,MAAA,EAAO,IAAA,EAAK,SAAA,EAAW,KAAA,EAAO,aAAY,KAAA,EAAM,CAAA;AAAA,+CACrD,MAAA,EAAA,EAAK,MAAA,EAAO,QAAO,SAAA,EAAW,KAAA,EAAO,aAAY,GAAA,EAAI;AAAA,eAAA,EACxD,CAAA,EACF,CAAA;AAAA,cACC,YAAA,IAAgB,UAAU,KAAA,oBACzBA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,GAAG,SAAA,CAAU,KAAA;AAAA,kBACb,IAAA,EAAM,sBAAsB,YAAY,CAAA,CAAA;AAAA;AAAA,eAC1C;AAAA,cAID,UAAU,CAAA,oBACTA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,OAAA;AAAA,kBACL,GAAG,SAAA,CAAU,CAAA;AAAA,kBACb,IAAA,EAAK,MAAA;AAAA,kBACL,MAAA,EAAQ,KAAA;AAAA,kBACR,WAAA,EAAY,GAAA;AAAA,kBACZ,aAAA,EAAc,OAAA;AAAA,kBACd,cAAA,EAAe;AAAA;AAAA,eACjB;AAAA,cAID,gBACC,SAAA,CAAU,MAAA,CAAO,GAAA,CAAI,CAAC,IAAI,CAAA,qBACxBA,cAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBAEC,IAAI,EAAA,CAAG,CAAA;AAAA,kBACP,IAAI,EAAA,CAAG,CAAA;AAAA,kBACP,CAAA,EAAE,GAAA;AAAA,kBACF,IAAA,EAAM,KAAA;AAAA,kBACN,MAAA,EAAO,uBAAA;AAAA,kBACP,WAAA,EAAY;AAAA,iBAAA;AAAA,gBANP;AAAA,eAQR,CAAA;AAAA,cAGF,SAAA,CAAU,MAAA,CAAO,GAAA,CAAI,CAAC,OAAO,CAAA,qBAC5BA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBAEC,CAAA,EAAG,SAAA,CAAU,MAAA,CAAO,CAAC,GAAG,CAAA,IAAK,CAAA;AAAA,kBAC7B,CAAA,EAAG,UAAU,WAAA,GAAc,EAAA;AAAA,kBAC3B,UAAA,EAAW,QAAA;AAAA,kBACX,IAAA,EAAK,kCAAA;AAAA,kBACL,QAAA,EAAS,IAAA;AAAA,kBACT,UAAA,EAAW,4BAAA;AAAA,kBAEV,QAAA,EAAA;AAAA,iBAAA;AAAA,gBARI;AAAA,eAUR;AAAA;AAAA;AAAA,WAEL,CAAA,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"MetricsTimelineSection-4L6DUHJ5.cjs","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioMetricsTimelineData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface MetricsTimelineSectionProps {\n  data: PortfolioMetricsTimelineData;\n}\n\ntype MetricKey = 'traffic' | 'conversions' | 'revenue' | 'rankings';\n\nconst metricColors: Record<MetricKey, string> = {\n  traffic: '#6366f1',\n  conversions: '#10b981',\n  revenue: '#f59e0b',\n  rankings: '#ec4899',\n};\n\nconst metricLabels: Record<MetricKey, string> = {\n  traffic: 'Traffic',\n  conversions: 'Conversions',\n  revenue: 'Revenue',\n  rankings: 'Rankings',\n};\n\nexport default function MetricsTimelineSection({ data }: MetricsTimelineSectionProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  const [activeMetric, setActiveMetric] = useState<MetricKey>('traffic');\n  const [hasTriggered, setHasTriggered] = useState(false);\n\n  // Determine available metrics\n  const availableMetrics = useMemo(() => {\n    const keys: MetricKey[] = ['traffic', 'conversions', 'revenue', 'rankings'];\n    return keys.filter((key) =>\n      data.dataPoints.some((dp) => dp.metrics[key] !== undefined && dp.metrics[key] !== null),\n    );\n  }, [data.dataPoints]);\n\n  // Compute chart path for the active metric\n  const chartData = useMemo(() => {\n    const values = data.dataPoints.map((dp) => dp.metrics[activeMetric] ?? 0);\n    const maxVal = Math.max(...values, 1);\n    const minVal = Math.min(...values, 0);\n    const range = maxVal - minVal || 1;\n\n    const chartWidth = 800;\n    const chartHeight = 300;\n    const padding = 40;\n\n    const points = values.map((val, i) => ({\n      x: padding + (i / Math.max(values.length - 1, 1)) * (chartWidth - padding * 2),\n      y: chartHeight - padding - ((val - minVal) / range) * (chartHeight - padding * 2),\n    }));\n\n    // Build SVG path\n    let d = '';\n    if (points.length > 0) {\n      d = `M ${points[0].x} ${points[0].y}`;\n      for (let i = 1; i < points.length; i++) {\n        const cpx1 = (points[i - 1].x + points[i].x) / 2;\n        const cpy1 = points[i - 1].y;\n        const cpx2 = (points[i - 1].x + points[i].x) / 2;\n        const cpy2 = points[i].y;\n        d += ` C ${cpx1} ${cpy1}, ${cpx2} ${cpy2}, ${points[i].x} ${points[i].y}`;\n      }\n    }\n\n    // Area fill path\n    let areaD = d;\n    if (points.length > 0) {\n      areaD += ` L ${points[points.length - 1].x} ${chartHeight - padding} L ${points[0].x} ${chartHeight - padding} Z`;\n    }\n\n    // Find baseline index\n    const baselineIdx = data.dataPoints.findIndex((dp) => dp.month === data.baselineDate);\n    const baselineX = baselineIdx >= 0 ? points[baselineIdx]?.x : undefined;\n\n    return {\n      d,\n      areaD,\n      points,\n      chartWidth,\n      chartHeight,\n      padding,\n      baselineX,\n      labels: data.dataPoints.map((dp) => dp.label),\n    };\n  }, [data.dataPoints, data.baselineDate, activeMetric]);\n\n  // Animate path draw on scroll trigger\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const path = pathRef.current;\n    const svg = svgRef.current;\n    if (!path || !svg) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const ctx = gsap.context(() => {\n      const length = path.getTotalLength();\n      gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });\n\n      if (prefersReducedMotion) {\n        gsap.set(path, { strokeDashoffset: 0 });\n        setHasTriggered(true);\n        return;\n      }\n\n      gsap.to(path, {\n        strokeDashoffset: 0,\n        duration: 2,\n        ease: 'power2.out',\n        scrollTrigger: {\n          trigger: svg,\n          start: 'top 75%',\n          toggleActions: 'play none none none',\n        },\n        onComplete: () => setHasTriggered(true),\n      });\n    });\n\n    return () => ctx.revert();\n  }, [activeMetric]);\n\n  const handleMetricChange = useCallback((metric: MetricKey) => {\n    setActiveMetric(metric);\n    setHasTriggered(false);\n  }, []);\n\n  const color = metricColors[activeMetric];\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-8 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Metric toggle pills */}\n        <ScrollReveal y={20} delay={0.1}>\n          <div className=\"flex flex-wrap gap-2 mb-8\">\n            {availableMetrics.map((metric) => (\n              <button\n                key={metric}\n                onClick={() => handleMetricChange(metric)}\n                className=\"px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer\"\n                style={{\n                  background:\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-surface, rgba(255,255,255,0.05))',\n                  color:\n                    activeMetric === metric\n                      ? '#ffffff'\n                      : 'var(--sk-text-secondary, #a1a1aa)',\n                  border: `1px solid ${\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-border, rgba(255,255,255,0.1))'\n                  }`,\n                }}\n              >\n                {metricLabels[metric]}\n              </button>\n            ))}\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.2}>\n          <GlassCard padding=\"lg\" hover={false}>\n            <svg\n              ref={svgRef}\n              viewBox={`0 0 ${chartData.chartWidth} ${chartData.chartHeight}`}\n              className=\"w-full h-auto\"\n              preserveAspectRatio=\"xMidYMid meet\"\n            >\n              {/* Grid lines */}\n              {[0, 1, 2, 3, 4].map((i) => {\n                const y =\n                  chartData.padding +\n                  (i / 4) * (chartData.chartHeight - chartData.padding * 2);\n                return (\n                  <line\n                    key={i}\n                    x1={chartData.padding}\n                    y1={y}\n                    x2={chartData.chartWidth - chartData.padding}\n                    y2={y}\n                    stroke=\"var(--sk-border, rgba(255,255,255,0.1))\"\n                    strokeWidth=\"1\"\n                  />\n                );\n              })}\n\n              {/* Baseline marker */}\n              {chartData.baselineX !== undefined && (\n                <>\n                  <line\n                    x1={chartData.baselineX}\n                    y1={chartData.padding}\n                    x2={chartData.baselineX}\n                    y2={chartData.chartHeight - chartData.padding}\n                    stroke=\"var(--sk-text-tertiary, #71717a)\"\n                    strokeWidth=\"1.5\"\n                    strokeDasharray=\"6 4\"\n                  />\n                  <text\n                    x={chartData.baselineX}\n                    y={chartData.padding - 10}\n                    textAnchor=\"middle\"\n                    fill=\"var(--sk-text-tertiary, #71717a)\"\n                    fontSize=\"11\"\n                    fontFamily=\"var(--sk-font, sans-serif)\"\n                  >\n                    Launch\n                  </text>\n                </>\n              )}\n\n              {/* Area fill (gradient) */}\n              <defs>\n                <linearGradient id={`area-gradient-${activeMetric}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stopColor={color} stopOpacity=\"0.3\" />\n                  <stop offset=\"100%\" stopColor={color} stopOpacity=\"0\" />\n                </linearGradient>\n              </defs>\n              {hasTriggered && chartData.areaD && (\n                <path\n                  d={chartData.areaD}\n                  fill={`url(#area-gradient-${activeMetric})`}\n                />\n              )}\n\n              {/* Chart line (animated draw) */}\n              {chartData.d && (\n                <path\n                  ref={pathRef}\n                  d={chartData.d}\n                  fill=\"none\"\n                  stroke={color}\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n\n              {/* Data points */}\n              {hasTriggered &&\n                chartData.points.map((pt, i) => (\n                  <circle\n                    key={i}\n                    cx={pt.x}\n                    cy={pt.y}\n                    r=\"4\"\n                    fill={color}\n                    stroke=\"var(--sk-bg, #0a0a0a)\"\n                    strokeWidth=\"2\"\n                  />\n                ))}\n\n              {/* X-axis labels */}\n              {chartData.labels.map((label, i) => (\n                <text\n                  key={i}\n                  x={chartData.points[i]?.x ?? 0}\n                  y={chartData.chartHeight - 10}\n                  textAnchor=\"middle\"\n                  fill=\"var(--sk-text-tertiary, #71717a)\"\n                  fontSize=\"10\"\n                  fontFamily=\"var(--sk-font, sans-serif)\"\n                >\n                  {label}\n                </text>\n              ))}\n            </svg>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/MetricsTimelineSection-6BT5GNFV.js

@@ -0,0 +1,253 @@
+'use client';
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var metricColors = {
+  traffic: "#6366f1",
+  conversions: "#10b981",
+  revenue: "#f59e0b",
+  rankings: "#ec4899"
+};
+var metricLabels = {
+  traffic: "Traffic",
+  conversions: "Conversions",
+  revenue: "Revenue",
+  rankings: "Rankings"
+};
+function MetricsTimelineSection({ data }) {
+  const svgRef = useRef(null);
+  const pathRef = useRef(null);
+  const [activeMetric, setActiveMetric] = useState("traffic");
+  const [hasTriggered, setHasTriggered] = useState(false);
+  const availableMetrics = useMemo(() => {
+    const keys = ["traffic", "conversions", "revenue", "rankings"];
+    return keys.filter(
+      (key) => data.dataPoints.some((dp) => dp.metrics[key] !== void 0 && dp.metrics[key] !== null)
+    );
+  }, [data.dataPoints]);
+  const chartData = useMemo(() => {
+    const values = data.dataPoints.map((dp) => dp.metrics[activeMetric] ?? 0);
+    const maxVal = Math.max(...values, 1);
+    const minVal = Math.min(...values, 0);
+    const range = maxVal - minVal || 1;
+    const chartWidth = 800;
+    const chartHeight = 300;
+    const padding = 40;
+    const points = values.map((val, i) => ({
+      x: padding + i / Math.max(values.length - 1, 1) * (chartWidth - padding * 2),
+      y: chartHeight - padding - (val - minVal) / range * (chartHeight - padding * 2)
+    }));
+    let d = "";
+    if (points.length > 0) {
+      d = `M ${points[0].x} ${points[0].y}`;
+      for (let i = 1; i < points.length; i++) {
+        const cpx1 = (points[i - 1].x + points[i].x) / 2;
+        const cpy1 = points[i - 1].y;
+        const cpx2 = (points[i - 1].x + points[i].x) / 2;
+        const cpy2 = points[i].y;
+        d += ` C ${cpx1} ${cpy1}, ${cpx2} ${cpy2}, ${points[i].x} ${points[i].y}`;
+      }
+    }
+    let areaD = d;
+    if (points.length > 0) {
+      areaD += ` L ${points[points.length - 1].x} ${chartHeight - padding} L ${points[0].x} ${chartHeight - padding} Z`;
+    }
+    const baselineIdx = data.dataPoints.findIndex((dp) => dp.month === data.baselineDate);
+    const baselineX = baselineIdx >= 0 ? points[baselineIdx]?.x : void 0;
+    return {
+      d,
+      areaD,
+      points,
+      chartWidth,
+      chartHeight,
+      padding,
+      baselineX,
+      labels: data.dataPoints.map((dp) => dp.label)
+    };
+  }, [data.dataPoints, data.baselineDate, activeMetric]);
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const path = pathRef.current;
+    const svg = svgRef.current;
+    if (!path || !svg) return;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const ctx = gsap.context(() => {
+      const length = path.getTotalLength();
+      gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });
+      if (prefersReducedMotion) {
+        gsap.set(path, { strokeDashoffset: 0 });
+        setHasTriggered(true);
+        return;
+      }
+      gsap.to(path, {
+        strokeDashoffset: 0,
+        duration: 2,
+        ease: "power2.out",
+        scrollTrigger: {
+          trigger: svg,
+          start: "top 75%",
+          toggleActions: "play none none none"
+        },
+        onComplete: () => setHasTriggered(true)
+      });
+    });
+    return () => ctx.revert();
+  }, [activeMetric]);
+  const handleMetricChange = useCallback((metric) => {
+    setActiveMetric(metric);
+    setHasTriggered(false);
+  }, []);
+  const color = metricColors[activeMetric];
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: "w-full py-20 md:py-28",
+      style: { background: "var(--sk-bg, #0a0a0a)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto px-6", children: [
+        (data.title || data.description) && /* @__PURE__ */ jsxs(ScrollReveal, { y: 30, children: [
+          data.title && /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-3xl md:text-4xl font-bold mb-4",
+              style: {
+                color: "var(--sk-text-primary, #ffffff)",
+                fontFamily: "var(--sk-font-heading, inherit)"
+              },
+              children: data.title
+            }
+          ),
+          data.description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg mb-8 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: data.description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ScrollReveal, { y: 20, delay: 0.1, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mb-8", children: availableMetrics.map((metric) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleMetricChange(metric),
+            className: "px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer",
+            style: {
+              background: activeMetric === metric ? metricColors[metric] : "var(--sk-surface, rgba(255,255,255,0.05))",
+              color: activeMetric === metric ? "#ffffff" : "var(--sk-text-secondary, #a1a1aa)",
+              border: `1px solid ${activeMetric === metric ? metricColors[metric] : "var(--sk-border, rgba(255,255,255,0.1))"}`
+            },
+            children: metricLabels[metric]
+          },
+          metric
+        )) }) }),
+        /* @__PURE__ */ jsx(ScrollReveal, { y: 40, delay: 0.2, children: /* @__PURE__ */ jsx(GlassCard, { padding: "lg", hover: false, children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: svgRef,
+            viewBox: `0 0 ${chartData.chartWidth} ${chartData.chartHeight}`,
+            className: "w-full h-auto",
+            preserveAspectRatio: "xMidYMid meet",
+            children: [
+              [0, 1, 2, 3, 4].map((i) => {
+                const y = chartData.padding + i / 4 * (chartData.chartHeight - chartData.padding * 2);
+                return /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: chartData.padding,
+                    y1: y,
+                    x2: chartData.chartWidth - chartData.padding,
+                    y2: y,
+                    stroke: "var(--sk-border, rgba(255,255,255,0.1))",
+                    strokeWidth: "1"
+                  },
+                  i
+                );
+              }),
+              chartData.baselineX !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: chartData.baselineX,
+                    y1: chartData.padding,
+                    x2: chartData.baselineX,
+                    y2: chartData.chartHeight - chartData.padding,
+                    stroke: "var(--sk-text-tertiary, #71717a)",
+                    strokeWidth: "1.5",
+                    strokeDasharray: "6 4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: chartData.baselineX,
+                    y: chartData.padding - 10,
+                    textAnchor: "middle",
+                    fill: "var(--sk-text-tertiary, #71717a)",
+                    fontSize: "11",
+                    fontFamily: "var(--sk-font, sans-serif)",
+                    children: "Launch"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `area-gradient-${activeMetric}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.3" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              ] }) }),
+              hasTriggered && chartData.areaD && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: chartData.areaD,
+                  fill: `url(#area-gradient-${activeMetric})`
+                }
+              ),
+              chartData.d && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  ref: pathRef,
+                  d: chartData.d,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: "3",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ),
+              hasTriggered && chartData.points.map((pt, i) => /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: pt.x,
+                  cy: pt.y,
+                  r: "4",
+                  fill: color,
+                  stroke: "var(--sk-bg, #0a0a0a)",
+                  strokeWidth: "2"
+                },
+                i
+              )),
+              chartData.labels.map((label, i) => /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: chartData.points[i]?.x ?? 0,
+                  y: chartData.chartHeight - 10,
+                  textAnchor: "middle",
+                  fill: "var(--sk-text-tertiary, #71717a)",
+                  fontSize: "10",
+                  fontFamily: "var(--sk-font, sans-serif)",
+                  children: label
+                },
+                i
+              ))
+            ]
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+
+export { MetricsTimelineSection as default };
+//# sourceMappingURL=MetricsTimelineSection-6BT5GNFV.js.map
+//# sourceMappingURL=MetricsTimelineSection-6BT5GNFV.js.map

package/dist/MetricsTimelineSection-6BT5GNFV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/MetricsTimelineSection.tsx"],"names":[],"mappings":"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","file":"MetricsTimelineSection-6BT5GNFV.js","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport type { PortfolioMetricsTimelineData } from '../../../types';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface MetricsTimelineSectionProps {\n  data: PortfolioMetricsTimelineData;\n}\n\ntype MetricKey = 'traffic' | 'conversions' | 'revenue' | 'rankings';\n\nconst metricColors: Record<MetricKey, string> = {\n  traffic: '#6366f1',\n  conversions: '#10b981',\n  revenue: '#f59e0b',\n  rankings: '#ec4899',\n};\n\nconst metricLabels: Record<MetricKey, string> = {\n  traffic: 'Traffic',\n  conversions: 'Conversions',\n  revenue: 'Revenue',\n  rankings: 'Rankings',\n};\n\nexport default function MetricsTimelineSection({ data }: MetricsTimelineSectionProps) {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const pathRef = useRef<SVGPathElement>(null);\n  const [activeMetric, setActiveMetric] = useState<MetricKey>('traffic');\n  const [hasTriggered, setHasTriggered] = useState(false);\n\n  // Determine available metrics\n  const availableMetrics = useMemo(() => {\n    const keys: MetricKey[] = ['traffic', 'conversions', 'revenue', 'rankings'];\n    return keys.filter((key) =>\n      data.dataPoints.some((dp) => dp.metrics[key] !== undefined && dp.metrics[key] !== null),\n    );\n  }, [data.dataPoints]);\n\n  // Compute chart path for the active metric\n  const chartData = useMemo(() => {\n    const values = data.dataPoints.map((dp) => dp.metrics[activeMetric] ?? 0);\n    const maxVal = Math.max(...values, 1);\n    const minVal = Math.min(...values, 0);\n    const range = maxVal - minVal || 1;\n\n    const chartWidth = 800;\n    const chartHeight = 300;\n    const padding = 40;\n\n    const points = values.map((val, i) => ({\n      x: padding + (i / Math.max(values.length - 1, 1)) * (chartWidth - padding * 2),\n      y: chartHeight - padding - ((val - minVal) / range) * (chartHeight - padding * 2),\n    }));\n\n    // Build SVG path\n    let d = '';\n    if (points.length > 0) {\n      d = `M ${points[0].x} ${points[0].y}`;\n      for (let i = 1; i < points.length; i++) {\n        const cpx1 = (points[i - 1].x + points[i].x) / 2;\n        const cpy1 = points[i - 1].y;\n        const cpx2 = (points[i - 1].x + points[i].x) / 2;\n        const cpy2 = points[i].y;\n        d += ` C ${cpx1} ${cpy1}, ${cpx2} ${cpy2}, ${points[i].x} ${points[i].y}`;\n      }\n    }\n\n    // Area fill path\n    let areaD = d;\n    if (points.length > 0) {\n      areaD += ` L ${points[points.length - 1].x} ${chartHeight - padding} L ${points[0].x} ${chartHeight - padding} Z`;\n    }\n\n    // Find baseline index\n    const baselineIdx = data.dataPoints.findIndex((dp) => dp.month === data.baselineDate);\n    const baselineX = baselineIdx >= 0 ? points[baselineIdx]?.x : undefined;\n\n    return {\n      d,\n      areaD,\n      points,\n      chartWidth,\n      chartHeight,\n      padding,\n      baselineX,\n      labels: data.dataPoints.map((dp) => dp.label),\n    };\n  }, [data.dataPoints, data.baselineDate, activeMetric]);\n\n  // Animate path draw on scroll trigger\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    const path = pathRef.current;\n    const svg = svgRef.current;\n    if (!path || !svg) return;\n\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const ctx = gsap.context(() => {\n      const length = path.getTotalLength();\n      gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });\n\n      if (prefersReducedMotion) {\n        gsap.set(path, { strokeDashoffset: 0 });\n        setHasTriggered(true);\n        return;\n      }\n\n      gsap.to(path, {\n        strokeDashoffset: 0,\n        duration: 2,\n        ease: 'power2.out',\n        scrollTrigger: {\n          trigger: svg,\n          start: 'top 75%',\n          toggleActions: 'play none none none',\n        },\n        onComplete: () => setHasTriggered(true),\n      });\n    });\n\n    return () => ctx.revert();\n  }, [activeMetric]);\n\n  const handleMetricChange = useCallback((metric: MetricKey) => {\n    setActiveMetric(metric);\n    setHasTriggered(false);\n  }, []);\n\n  const color = metricColors[activeMetric];\n\n  return (\n    <section\n      className=\"w-full py-20 md:py-28\"\n      style={{ background: 'var(--sk-bg, #0a0a0a)' }}\n    >\n      <div className=\"max-w-6xl mx-auto px-6\">\n        {(data.title || data.description) && (\n          <ScrollReveal y={30}>\n            {data.title && (\n              <h2\n                className=\"text-3xl md:text-4xl font-bold mb-4\"\n                style={{\n                  color: 'var(--sk-text-primary, #ffffff)',\n                  fontFamily: 'var(--sk-font-heading, inherit)',\n                }}\n              >\n                {data.title}\n              </h2>\n            )}\n            {data.description && (\n              <p\n                className=\"text-lg mb-8 max-w-2xl\"\n                style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n              >\n                {data.description}\n              </p>\n            )}\n          </ScrollReveal>\n        )}\n\n        {/* Metric toggle pills */}\n        <ScrollReveal y={20} delay={0.1}>\n          <div className=\"flex flex-wrap gap-2 mb-8\">\n            {availableMetrics.map((metric) => (\n              <button\n                key={metric}\n                onClick={() => handleMetricChange(metric)}\n                className=\"px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer\"\n                style={{\n                  background:\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-surface, rgba(255,255,255,0.05))',\n                  color:\n                    activeMetric === metric\n                      ? '#ffffff'\n                      : 'var(--sk-text-secondary, #a1a1aa)',\n                  border: `1px solid ${\n                    activeMetric === metric\n                      ? metricColors[metric]\n                      : 'var(--sk-border, rgba(255,255,255,0.1))'\n                  }`,\n                }}\n              >\n                {metricLabels[metric]}\n              </button>\n            ))}\n          </div>\n        </ScrollReveal>\n\n        <ScrollReveal y={40} delay={0.2}>\n          <GlassCard padding=\"lg\" hover={false}>\n            <svg\n              ref={svgRef}\n              viewBox={`0 0 ${chartData.chartWidth} ${chartData.chartHeight}`}\n              className=\"w-full h-auto\"\n              preserveAspectRatio=\"xMidYMid meet\"\n            >\n              {/* Grid lines */}\n              {[0, 1, 2, 3, 4].map((i) => {\n                const y =\n                  chartData.padding +\n                  (i / 4) * (chartData.chartHeight - chartData.padding * 2);\n                return (\n                  <line\n                    key={i}\n                    x1={chartData.padding}\n                    y1={y}\n                    x2={chartData.chartWidth - chartData.padding}\n                    y2={y}\n                    stroke=\"var(--sk-border, rgba(255,255,255,0.1))\"\n                    strokeWidth=\"1\"\n                  />\n                );\n              })}\n\n              {/* Baseline marker */}\n              {chartData.baselineX !== undefined && (\n                <>\n                  <line\n                    x1={chartData.baselineX}\n                    y1={chartData.padding}\n                    x2={chartData.baselineX}\n                    y2={chartData.chartHeight - chartData.padding}\n                    stroke=\"var(--sk-text-tertiary, #71717a)\"\n                    strokeWidth=\"1.5\"\n                    strokeDasharray=\"6 4\"\n                  />\n                  <text\n                    x={chartData.baselineX}\n                    y={chartData.padding - 10}\n                    textAnchor=\"middle\"\n                    fill=\"var(--sk-text-tertiary, #71717a)\"\n                    fontSize=\"11\"\n                    fontFamily=\"var(--sk-font, sans-serif)\"\n                  >\n                    Launch\n                  </text>\n                </>\n              )}\n\n              {/* Area fill (gradient) */}\n              <defs>\n                <linearGradient id={`area-gradient-${activeMetric}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stopColor={color} stopOpacity=\"0.3\" />\n                  <stop offset=\"100%\" stopColor={color} stopOpacity=\"0\" />\n                </linearGradient>\n              </defs>\n              {hasTriggered && chartData.areaD && (\n                <path\n                  d={chartData.areaD}\n                  fill={`url(#area-gradient-${activeMetric})`}\n                />\n              )}\n\n              {/* Chart line (animated draw) */}\n              {chartData.d && (\n                <path\n                  ref={pathRef}\n                  d={chartData.d}\n                  fill=\"none\"\n                  stroke={color}\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n\n              {/* Data points */}\n              {hasTriggered &&\n                chartData.points.map((pt, i) => (\n                  <circle\n                    key={i}\n                    cx={pt.x}\n                    cy={pt.y}\n                    r=\"4\"\n                    fill={color}\n                    stroke=\"var(--sk-bg, #0a0a0a)\"\n                    strokeWidth=\"2\"\n                  />\n                ))}\n\n              {/* X-axis labels */}\n              {chartData.labels.map((label, i) => (\n                <text\n                  key={i}\n                  x={chartData.points[i]?.x ?? 0}\n                  y={chartData.chartHeight - 10}\n                  textAnchor=\"middle\"\n                  fill=\"var(--sk-text-tertiary, #71717a)\"\n                  fontSize=\"10\"\n                  fontFamily=\"var(--sk-font, sans-serif)\"\n                >\n                  {label}\n                </text>\n              ))}\n            </svg>\n          </GlassCard>\n        </ScrollReveal>\n      </div>\n    </section>\n  );\n}\n"]}