@sonordev/agency-site-kit 0.1.0 → 0.1.2

package/dist/PerformanceSection-MGCEIXDX.js

@@ -0,0 +1,351 @@
+'use client';
+import { GlassCard } from './chunk-YB4B3OMC.js';
+import { ScrollReveal } from './chunk-7CFFAKDM.js';
+import { useRef, useState, useEffect } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CATEGORIES = [
+  { key: "performance", label: "Performance", color: "#10b981" },
+  { key: "seo", label: "SEO", color: "#6366f1" },
+  { key: "accessibility", label: "Accessibility", color: "#f59e0b" },
+  { key: "bestPractices", label: "Best Practices", color: "#3b82f6" }
+];
+function getScoreColor(score) {
+  if (score >= 90) return "#10b981";
+  if (score >= 50) return "#f59e0b";
+  return "#ef4444";
+}
+function ScoreGauge({
+  score,
+  label,
+  previousScore,
+  delay = 0
+}) {
+  const circleRef = useRef(null);
+  const [displayScore, setDisplayScore] = useState(0);
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    if (!circleRef.current) return;
+    const radius = 44;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - score / 100 * circumference;
+    gsap.set(circleRef.current, {
+      strokeDasharray: circumference,
+      strokeDashoffset: circumference
+    });
+    const ctx = gsap.context(() => {
+      gsap.to(circleRef.current, {
+        strokeDashoffset: offset,
+        duration: 1.5,
+        ease: "power2.out",
+        delay,
+        scrollTrigger: {
+          trigger: circleRef.current,
+          start: "top 85%",
+          toggleActions: "play none none none"
+        },
+        onUpdate: function() {
+          const progress = 1 - (this.targets()[0].style.strokeDashoffset ? parseFloat(this.targets()[0].style.strokeDashoffset) / circumference : 0);
+          setDisplayScore(Math.round(progress * score));
+        }
+      });
+    });
+    return () => ctx.revert();
+  }, [score, delay]);
+  const color = getScoreColor(score);
+  const improvement = previousScore ? score - previousScore : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative w-28 h-28", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "w-full h-full -rotate-90", viewBox: "0 0 100 100", children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "50",
+            cy: "50",
+            r: "44",
+            fill: "none",
+            stroke: "var(--sk-surface, rgba(255,255,255,0.05))",
+            strokeWidth: "6"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            ref: circleRef,
+            cx: "50",
+            cy: "50",
+            r: "44",
+            fill: "none",
+            stroke: color,
+            strokeWidth: "6",
+            strokeLinecap: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-2xl font-bold",
+          style: { color },
+          children: displayScore
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-sm font-medium text-center",
+        style: { color: "var(--sk-text-primary, #ffffff)" },
+        children: label
+      }
+    ),
+    improvement !== void 0 && improvement > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "text-xs font-semibold px-2 py-0.5 rounded-full",
+        style: {
+          background: "color-mix(in srgb, #10b981 15%, transparent)",
+          color: "#10b981"
+        },
+        children: [
+          "+",
+          improvement,
+          " pts"
+        ]
+      }
+    )
+  ] });
+}
+var SCORE_EXPLANATIONS = {
+  performance: {
+    why: "Faster sites convert more visitors into customers. A 1-second delay in load time reduces conversions by up to 7%. Google uses page speed as a direct ranking factor.",
+    competitors: "Wix and GoDaddy sites typically score 30\u201350 due to bloated JavaScript bundles and shared hosting. Template builders prioritize ease-of-use over speed."
+  },
+  seo: {
+    why: "Technical SEO determines whether search engines can properly crawl, index, and rank your pages. Higher scores mean more organic visibility and free traffic.",
+    competitors: "DIY builders often miss critical SEO fundamentals\u2014proper meta tags, structured data, canonical URLs, and server-side rendering that search engines need."
+  },
+  accessibility: {
+    why: "Accessible sites reach more customers, including the 1 in 4 adults with disabilities. It also reduces legal risk and improves usability for everyone.",
+    competitors: "Template platforms generate markup that frequently fails WCAG standards\u2014missing alt text, poor contrast ratios, and keyboard navigation issues."
+  },
+  bestPractices: {
+    why: "Best practices cover security (HTTPS, safe APIs), modern code standards, and browser compatibility. They protect your business and your visitors.",
+    competitors: "Older platforms rely on outdated libraries, insecure dependencies, and legacy patterns that create vulnerabilities and degrade user trust."
+  }
+};
+function PerformanceSection({ data }) {
+  const hasBeforeAfter = data.before && data.after;
+  const scores = data.after || data.before;
+  if (!scores && !data.cwv) return null;
+  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-5xl mx-auto px-6", children: [
+        /* @__PURE__ */ jsxs(ScrollReveal, { y: 30, children: [
+          /* @__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: "Performance"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg mb-12 max-w-2xl",
+              style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+              children: hasBeforeAfter ? "Real Lighthouse scores \u2014 before and after our rebuild." : "Real performance metrics measured by Google Lighthouse."
+            }
+          )
+        ] }),
+        scores && /* @__PURE__ */ jsx(ScrollReveal, { y: 30, children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 mb-8", children: CATEGORIES.map((cat, i) => {
+          const currentScore = scores[cat.key];
+          const previousScore = hasBeforeAfter ? data.before?.[cat.key] : void 0;
+          if (currentScore === void 0) return null;
+          return /* @__PURE__ */ jsx(
+            ScoreGauge,
+            {
+              score: currentScore,
+              label: cat.label,
+              previousScore,
+              delay: i * 0.15
+            },
+            cat.key
+          );
+        }) }) }),
+        scores && /* @__PURE__ */ jsx(ScrollReveal, { y: 30, delay: 0.2, children: /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 gap-4 mb-12", children: CATEGORIES.map((cat) => {
+          const currentScore = scores[cat.key];
+          if (currentScore === void 0) return null;
+          const explanation = SCORE_EXPLANATIONS[cat.key];
+          if (!explanation) return null;
+          return /* @__PURE__ */ jsx(GlassCard, { padding: "md", hover: false, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-10 h-10 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold",
+                style: {
+                  background: `color-mix(in srgb, ${getScoreColor(currentScore)} 15%, transparent)`,
+                  color: getScoreColor(currentScore)
+                },
+                children: currentScore
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "h4",
+                {
+                  className: "text-sm font-semibold mb-1",
+                  style: { color: "var(--sk-text-primary, #ffffff)" },
+                  children: cat.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs leading-relaxed mb-2",
+                  style: { color: "var(--sk-text-secondary, #a1a1aa)" },
+                  children: explanation.why
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs leading-relaxed",
+                  style: { color: "var(--sk-text-tertiary, #71717a)" },
+                  children: explanation.competitors
+                }
+              )
+            ] })
+          ] }) }, cat.key);
+        }) }) }),
+        hasBeforeAfter && /* @__PURE__ */ jsx(ScrollReveal, { y: 30, delay: 0.3, children: /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs(GlassCard, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: "text-sm font-semibold uppercase tracking-wider mb-4",
+                style: { color: "#ef4444" },
+                children: "Before (Original Site)"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: CATEGORIES.map((cat) => {
+              const val = data.before?.[cat.key];
+              if (val === void 0) return null;
+              return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold", style: { color: getScoreColor(val) }, children: val }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "block text-[11px] mt-1",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: cat.label
+                  }
+                )
+              ] }, cat.key);
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxs(GlassCard, { padding: "lg", hover: false, children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: "text-sm font-semibold uppercase tracking-wider mb-4",
+                style: { color: "#10b981" },
+                children: "After (Next.js Rebuild)"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: CATEGORIES.map((cat) => {
+              const val = data.after?.[cat.key];
+              if (val === void 0) return null;
+              return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold", style: { color: getScoreColor(val) }, children: val }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "block text-[11px] mt-1",
+                    style: { color: "var(--sk-text-tertiary, #71717a)" },
+                    children: cat.label
+                  }
+                )
+              ] }, cat.key);
+            }) })
+          ] })
+        ] }) }),
+        data.cwv && (data.cwv.lcp != null || data.cwv.cls != null || data.cwv.inp != null) && /* @__PURE__ */ jsx(ScrollReveal, { y: 30, delay: 0.4, children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4 mt-8", children: [
+          data.cwv.lcp != null && /* @__PURE__ */ jsxs(GlassCard, { padding: "md", hover: false, className: "text-center", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "text-2xl font-bold",
+                style: { color: data.cwv.lcp < 2500 ? "#10b981" : data.cwv.lcp < 4e3 ? "#f59e0b" : "#ef4444" },
+                children: [
+                  (data.cwv.lcp / 1e3).toFixed(1),
+                  "s"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block text-xs mt-1",
+                style: { color: "var(--sk-text-tertiary, #71717a)" },
+                children: "LCP"
+              }
+            )
+          ] }),
+          data.cwv.cls != null && /* @__PURE__ */ jsxs(GlassCard, { padding: "md", hover: false, className: "text-center", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-2xl font-bold",
+                style: { color: data.cwv.cls < 0.1 ? "#10b981" : data.cwv.cls < 0.25 ? "#f59e0b" : "#ef4444" },
+                children: data.cwv.cls.toFixed(3)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block text-xs mt-1",
+                style: { color: "var(--sk-text-tertiary, #71717a)" },
+                children: "CLS"
+              }
+            )
+          ] }),
+          data.cwv.inp != null && /* @__PURE__ */ jsxs(GlassCard, { padding: "md", hover: false, className: "text-center", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "text-2xl font-bold",
+                style: { color: data.cwv.inp < 200 ? "#10b981" : data.cwv.inp < 500 ? "#f59e0b" : "#ef4444" },
+                children: [
+                  data.cwv.inp,
+                  "ms"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block text-xs mt-1",
+                style: { color: "var(--sk-text-tertiary, #71717a)" },
+                children: "INP"
+              }
+            )
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+}
+
+export { PerformanceSection as default };
+//# sourceMappingURL=PerformanceSection-MGCEIXDX.js.map
+//# sourceMappingURL=PerformanceSection-MGCEIXDX.js.map

package/dist/PerformanceSection-MGCEIXDX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/portfolio/components/sections/PerformanceSection.tsx"],"names":[],"mappings":"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","file":"PerformanceSection-MGCEIXDX.js","sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState } from 'react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport ScrollReveal from '../primitives/ScrollReveal';\nimport GlassCard from '../primitives/GlassCard';\n\ninterface LighthouseScores {\n  performance?: number;\n  seo?: number;\n  accessibility?: number;\n  bestPractices?: number;\n}\n\ninterface PerformanceSectionProps {\n  data: {\n    before?: LighthouseScores;\n    after?: LighthouseScores;\n    cwv?: {\n      lcp?: number;\n      cls?: number;\n      inp?: number;\n    };\n  };\n}\n\nconst CATEGORIES = [\n  { key: 'performance', label: 'Performance', color: '#10b981' },\n  { key: 'seo', label: 'SEO', color: '#6366f1' },\n  { key: 'accessibility', label: 'Accessibility', color: '#f59e0b' },\n  { key: 'bestPractices', label: 'Best Practices', color: '#3b82f6' },\n] as const;\n\nfunction getScoreColor(score: number): string {\n  if (score >= 90) return '#10b981'; // green\n  if (score >= 50) return '#f59e0b'; // amber\n  return '#ef4444'; // red\n}\n\nfunction ScoreGauge({\n  score,\n  label,\n  previousScore,\n  delay = 0,\n}: {\n  score: number;\n  label: string;\n  previousScore?: number;\n  delay?: number;\n}) {\n  const circleRef = useRef<SVGCircleElement>(null);\n  const [displayScore, setDisplayScore] = useState(0);\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger);\n    if (!circleRef.current) return;\n\n    const radius = 44;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference - (score / 100) * circumference;\n\n    gsap.set(circleRef.current, {\n      strokeDasharray: circumference,\n      strokeDashoffset: circumference,\n    });\n\n    const ctx = gsap.context(() => {\n      gsap.to(circleRef.current, {\n        strokeDashoffset: offset,\n        duration: 1.5,\n        ease: 'power2.out',\n        delay,\n        scrollTrigger: {\n          trigger: circleRef.current,\n          start: 'top 85%',\n          toggleActions: 'play none none none',\n        },\n        onUpdate: function () {\n          const progress = 1 - (this.targets()[0].style.strokeDashoffset\n            ? parseFloat(this.targets()[0].style.strokeDashoffset) / circumference\n            : 0);\n          setDisplayScore(Math.round(progress * score));\n        },\n      });\n    });\n\n    return () => ctx.revert();\n  }, [score, delay]);\n\n  const color = getScoreColor(score);\n  const improvement = previousScore ? score - previousScore : undefined;\n\n  return (\n    <div className=\"flex flex-col items-center gap-3\">\n      <div className=\"relative w-28 h-28\">\n        <svg className=\"w-full h-full -rotate-90\" viewBox=\"0 0 100 100\">\n          {/* Background circle */}\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r=\"44\"\n            fill=\"none\"\n            stroke=\"var(--sk-surface, rgba(255,255,255,0.05))\"\n            strokeWidth=\"6\"\n          />\n          {/* Score arc */}\n          <circle\n            ref={circleRef}\n            cx=\"50\"\n            cy=\"50\"\n            r=\"44\"\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"6\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n        {/* Score text */}\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <span\n            className=\"text-2xl font-bold\"\n            style={{ color }}\n          >\n            {displayScore}\n          </span>\n        </div>\n      </div>\n      <span\n        className=\"text-sm font-medium text-center\"\n        style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n      >\n        {label}\n      </span>\n      {improvement !== undefined && improvement > 0 && (\n        <span\n          className=\"text-xs font-semibold px-2 py-0.5 rounded-full\"\n          style={{\n            background: 'color-mix(in srgb, #10b981 15%, transparent)',\n            color: '#10b981',\n          }}\n        >\n          +{improvement} pts\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** Explains why each Lighthouse category matters for the business */\nconst SCORE_EXPLANATIONS: Record<string, { why: string; competitors: string }> = {\n  performance: {\n    why: 'Faster sites convert more visitors into customers. A 1-second delay in load time reduces conversions by up to 7%. Google uses page speed as a direct ranking factor.',\n    competitors: 'Wix and GoDaddy sites typically score 30\\u201350 due to bloated JavaScript bundles and shared hosting. Template builders prioritize ease-of-use over speed.',\n  },\n  seo: {\n    why: 'Technical SEO determines whether search engines can properly crawl, index, and rank your pages. Higher scores mean more organic visibility and free traffic.',\n    competitors: 'DIY builders often miss critical SEO fundamentals\\u2014proper meta tags, structured data, canonical URLs, and server-side rendering that search engines need.',\n  },\n  accessibility: {\n    why: 'Accessible sites reach more customers, including the 1 in 4 adults with disabilities. It also reduces legal risk and improves usability for everyone.',\n    competitors: 'Template platforms generate markup that frequently fails WCAG standards\\u2014missing alt text, poor contrast ratios, and keyboard navigation issues.',\n  },\n  bestPractices: {\n    why: 'Best practices cover security (HTTPS, safe APIs), modern code standards, and browser compatibility. They protect your business and your visitors.',\n    competitors: 'Older platforms rely on outdated libraries, insecure dependencies, and legacy patterns that create vulnerabilities and degrade user trust.',\n  },\n};\n\nexport default function PerformanceSection({ data }: PerformanceSectionProps) {\n  const hasBeforeAfter = data.before && data.after;\n  const scores = data.after || data.before;\n  if (!scores && !data.cwv) return null;\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-5xl mx-auto px-6\">\n        <ScrollReveal y={30}>\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            Performance\n          </h2>\n          <p\n            className=\"text-lg mb-12 max-w-2xl\"\n            style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n          >\n            {hasBeforeAfter\n              ? 'Real Lighthouse scores — before and after our rebuild.'\n              : 'Real performance metrics measured by Google Lighthouse.'}\n          </p>\n        </ScrollReveal>\n\n        {/* Score gauges */}\n        {scores && (\n          <ScrollReveal y={30}>\n            <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-8\">\n              {CATEGORIES.map((cat, i) => {\n                const currentScore = (scores as any)[cat.key];\n                const previousScore = hasBeforeAfter ? (data.before as any)?.[cat.key] : undefined;\n                if (currentScore === undefined) return null;\n                return (\n                  <ScoreGauge\n                    key={cat.key}\n                    score={currentScore}\n                    label={cat.label}\n                    previousScore={previousScore}\n                    delay={i * 0.15}\n                  />\n                );\n              })}\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Why these scores matter — explanation cards */}\n        {scores && (\n          <ScrollReveal y={30} delay={0.2}>\n            <div className=\"grid md:grid-cols-2 gap-4 mb-12\">\n              {CATEGORIES.map((cat) => {\n                const currentScore = (scores as any)[cat.key];\n                if (currentScore === undefined) return null;\n                const explanation = SCORE_EXPLANATIONS[cat.key];\n                if (!explanation) return null;\n                return (\n                  <GlassCard key={cat.key} padding=\"md\" hover={false}>\n                    <div className=\"flex items-start gap-3\">\n                      <div\n                        className=\"w-10 h-10 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold\"\n                        style={{\n                          background: `color-mix(in srgb, ${getScoreColor(currentScore)} 15%, transparent)`,\n                          color: getScoreColor(currentScore),\n                        }}\n                      >\n                        {currentScore}\n                      </div>\n                      <div>\n                        <h4\n                          className=\"text-sm font-semibold mb-1\"\n                          style={{ color: 'var(--sk-text-primary, #ffffff)' }}\n                        >\n                          {cat.label}\n                        </h4>\n                        <p\n                          className=\"text-xs leading-relaxed mb-2\"\n                          style={{ color: 'var(--sk-text-secondary, #a1a1aa)' }}\n                        >\n                          {explanation.why}\n                        </p>\n                        <p\n                          className=\"text-xs leading-relaxed\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {explanation.competitors}\n                        </p>\n                      </div>\n                    </div>\n                  </GlassCard>\n                );\n              })}\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Before/After comparison cards */}\n        {hasBeforeAfter && (\n          <ScrollReveal y={30} delay={0.3}>\n            <div className=\"grid md:grid-cols-2 gap-4\">\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#ef4444' }}\n                >\n                  Before (Original Site)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.before as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n              <GlassCard padding=\"lg\" hover={false}>\n                <h3\n                  className=\"text-sm font-semibold uppercase tracking-wider mb-4\"\n                  style={{ color: '#10b981' }}\n                >\n                  After (Next.js Rebuild)\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3\">\n                  {CATEGORIES.map((cat) => {\n                    const val = (data.after as any)?.[cat.key];\n                    if (val === undefined) return null;\n                    return (\n                      <div key={cat.key} className=\"text-center\">\n                        <span className=\"text-2xl font-bold\" style={{ color: getScoreColor(val) }}>\n                          {val}\n                        </span>\n                        <span\n                          className=\"block text-[11px] mt-1\"\n                          style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                        >\n                          {cat.label}\n                        </span>\n                      </div>\n                    );\n                  })}\n                </div>\n              </GlassCard>\n            </div>\n          </ScrollReveal>\n        )}\n\n        {/* Core Web Vitals */}\n        {data.cwv && (data.cwv.lcp != null || data.cwv.cls != null || data.cwv.inp != null) && (\n          <ScrollReveal y={30} delay={0.4}>\n            <div className=\"grid grid-cols-3 gap-4 mt-8\">\n              {data.cwv.lcp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.lcp < 2500 ? '#10b981' : data.cwv.lcp < 4000 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {(data.cwv.lcp / 1000).toFixed(1)}s\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    LCP\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.cls != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.cls < 0.1 ? '#10b981' : data.cwv.cls < 0.25 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.cls.toFixed(3)}\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    CLS\n                  </span>\n                </GlassCard>\n              )}\n              {data.cwv.inp != null && (\n                <GlassCard padding=\"md\" hover={false} className=\"text-center\">\n                  <span\n                    className=\"text-2xl font-bold\"\n                    style={{ color: data.cwv.inp < 200 ? '#10b981' : data.cwv.inp < 500 ? '#f59e0b' : '#ef4444' }}\n                  >\n                    {data.cwv.inp}ms\n                  </span>\n                  <span\n                    className=\"block text-xs mt-1\"\n                    style={{ color: 'var(--sk-text-tertiary, #71717a)' }}\n                  >\n                    INP\n                  </span>\n                </GlassCard>\n              )}\n            </div>\n          </ScrollReveal>\n        )}\n      </div>\n    </section>\n  );\n}\n"]}