@braintwopoint0/playback-commons 0.1.21 → 0.2.0

package/dist/email/index.d.ts

@@ -0,0 +1,44 @@
+import { Resend } from 'resend';
+
+interface SendEmailResult {
+    success: boolean;
+    error?: string;
+}
+/**
+ * Returns a memoized Resend client for the given API key. Callers should hold the
+ * returned client at module scope so one instance is reused across requests within
+ * a Next.js runtime.
+ */
+declare function createResendClient(apiKey: string | undefined): Resend | null;
+type AudienceSyncOptions = {
+    role?: string | null;
+    source?: string | null;
+    firstName?: string | null;
+    lastName?: string | null;
+};
+/**
+ * Adds a subscriber to a Resend audience. Returns the Resend contact id on success,
+ * null on any failure (misconfigured / API error / network). Callers should persist
+ * success/failure and rely on a reconciliation job to retry nulls.
+ *
+ * Intentionally does NOT throw — failures are operational, not business logic, and
+ * the caller's primary persistence (Supabase row) is already successful by the time
+ * this is invoked.
+ */
+declare function syncToResendAudience(params: {
+    client: Resend | null;
+    audienceId: string | undefined;
+    email: string;
+    options?: AudienceSyncOptions;
+}): Promise<string | null>;
+/**
+ * Remove a contact from a Resend audience (e.g. on unsubscribe). Returns true on
+ * success; false if not configured or the call fails. Safe to retry.
+ */
+declare function removeFromResendAudience(params: {
+    client: Resend | null;
+    audienceId: string | undefined;
+    contactId: string;
+}): Promise<boolean>;
+
+export { type AudienceSyncOptions, type SendEmailResult, createResendClient, removeFromResendAudience, syncToResendAudience };

package/dist/email/index.js

@@ -0,0 +1,46 @@
+// src/email/index.ts
+import { Resend } from "resend";
+var clientCache = /* @__PURE__ */ new Map();
+function createResendClient(apiKey) {
+  if (!apiKey) return null;
+  const cached = clientCache.get(apiKey);
+  if (cached) return cached;
+  const client = new Resend(apiKey);
+  clientCache.set(apiKey, client);
+  return client;
+}
+async function syncToResendAudience(params) {
+  const { client, audienceId, email, options } = params;
+  if (!client || !audienceId) return null;
+  try {
+    const res = await client.contacts.create({
+      audienceId,
+      email,
+      unsubscribed: false,
+      ...options?.firstName ? { firstName: options.firstName } : {},
+      ...options?.lastName ? { lastName: options.lastName } : {}
+    });
+    const id = res.data?.id ?? res.id ?? null;
+    return id;
+  } catch (err) {
+    console.error("[commons/email] audience sync failed", err);
+    return null;
+  }
+}
+async function removeFromResendAudience(params) {
+  const { client, audienceId, contactId } = params;
+  if (!client || !audienceId) return false;
+  try {
+    await client.contacts.remove({ audienceId, id: contactId });
+    return true;
+  } catch (err) {
+    console.error("[commons/email] audience remove failed", err);
+    return false;
+  }
+}
+export {
+  createResendClient,
+  removeFromResendAudience,
+  syncToResendAudience
+};
+//# sourceMappingURL=index.js.map

package/dist/email/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/email/index.ts"],"sourcesContent":["// Shared email primitives for PLAYBACK and PLAYHUB.\n//\n// Transactional templates (welcome, invoice, admin invite, etc.) stay in each app's\n// `src/lib/email/` — they're brand/context specific. What lives here are the pieces\n// that both apps need identically:\n//\n// - Resend client factory (memoized per API key)\n// - Marketing-list audience sync (for footer signups, campaign lists)\n// - Shared result type\n//\n// `escapeHtml` for safe interpolation already lives in `@braintwopoint0/playback-commons/security`.\n\nimport { Resend } from 'resend'\n\nexport interface SendEmailResult {\n  success: boolean\n  error?: string\n}\n\nconst clientCache = new Map<string, Resend>()\n\n/**\n * Returns a memoized Resend client for the given API key. Callers should hold the\n * returned client at module scope so one instance is reused across requests within\n * a Next.js runtime.\n */\nexport function createResendClient(apiKey: string | undefined): Resend | null {\n  if (!apiKey) return null\n  const cached = clientCache.get(apiKey)\n  if (cached) return cached\n  const client = new Resend(apiKey)\n  clientCache.set(apiKey, client)\n  return client\n}\n\nexport type AudienceSyncOptions = {\n  role?: string | null\n  source?: string | null\n  firstName?: string | null\n  lastName?: string | null\n}\n\n/**\n * Adds a subscriber to a Resend audience. Returns the Resend contact id on success,\n * null on any failure (misconfigured / API error / network). Callers should persist\n * success/failure and rely on a reconciliation job to retry nulls.\n *\n * Intentionally does NOT throw — failures are operational, not business logic, and\n * the caller's primary persistence (Supabase row) is already successful by the time\n * this is invoked.\n */\nexport async function syncToResendAudience(params: {\n  client: Resend | null\n  audienceId: string | undefined\n  email: string\n  options?: AudienceSyncOptions\n}): Promise<string | null> {\n  const { client, audienceId, email, options } = params\n  if (!client || !audienceId) return null\n\n  try {\n    const res = await client.contacts.create({\n      audienceId,\n      email,\n      unsubscribed: false,\n      ...(options?.firstName ? { firstName: options.firstName } : {}),\n      ...(options?.lastName ? { lastName: options.lastName } : {}),\n    })\n    // Resend's typing varies across versions — defensively read the id.\n    const id =\n      (res as { data?: { id?: string } }).data?.id ??\n      (res as { id?: string }).id ??\n      null\n    return id\n  } catch (err) {\n    console.error('[commons/email] audience sync failed', err)\n    return null\n  }\n}\n\n/**\n * Remove a contact from a Resend audience (e.g. on unsubscribe). Returns true on\n * success; false if not configured or the call fails. Safe to retry.\n */\nexport async function removeFromResendAudience(params: {\n  client: Resend | null\n  audienceId: string | undefined\n  contactId: string\n}): Promise<boolean> {\n  const { client, audienceId, contactId } = params\n  if (!client || !audienceId) return false\n  try {\n    await client.contacts.remove({ audienceId, id: contactId })\n    return true\n  } catch (err) {\n    console.error('[commons/email] audience remove failed', err)\n    return false\n  }\n}\n"],"mappings":";AAYA,SAAS,cAAc;AAOvB,IAAM,cAAc,oBAAI,IAAoB;AAOrC,SAAS,mBAAmB,QAA2C;AAC5E,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,SAAS,YAAY,IAAI,MAAM;AACrC,MAAI,OAAQ,QAAO;AACnB,QAAM,SAAS,IAAI,OAAO,MAAM;AAChC,cAAY,IAAI,QAAQ,MAAM;AAC9B,SAAO;AACT;AAkBA,eAAsB,qBAAqB,QAKhB;AACzB,QAAM,EAAE,QAAQ,YAAY,OAAO,QAAQ,IAAI;AAC/C,MAAI,CAAC,UAAU,CAAC,WAAY,QAAO;AAEnC,MAAI;AACF,UAAM,MAAM,MAAM,OAAO,SAAS,OAAO;AAAA,MACvC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,GAAI,SAAS,YAAY,EAAE,WAAW,QAAQ,UAAU,IAAI,CAAC;AAAA,MAC7D,GAAI,SAAS,WAAW,EAAE,UAAU,QAAQ,SAAS,IAAI,CAAC;AAAA,IAC5D,CAAC;AAED,UAAM,KACH,IAAmC,MAAM,MACzC,IAAwB,MACzB;AACF,WAAO;AAAA,EACT,SAAS,KAAK;AACZ,YAAQ,MAAM,wCAAwC,GAAG;AACzD,WAAO;AAAA,EACT;AACF;AAMA,eAAsB,yBAAyB,QAI1B;AACnB,QAAM,EAAE,QAAQ,YAAY,UAAU,IAAI;AAC1C,MAAI,CAAC,UAAU,CAAC,WAAY,QAAO;AACnC,MAAI;AACF,UAAM,OAAO,SAAS,OAAO,EAAE,YAAY,IAAI,UAAU,CAAC;AAC1D,WAAO;AAAA,EACT,SAAS,KAAK;AACZ,YAAQ,MAAM,0CAA0C,GAAG;AAC3D,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/ui/index.d.ts

@@ -404,6 +404,78 @@ declare function FadeIn({ children, className, delay, direction, ...props }: Fad
 
 declare function LumaSpin(): react_jsx_runtime.JSX.Element;
 
-declare function Footer(): react_jsx_runtime.JSX.Element;
+type FooterLinkDef = {
+    label: string;
+    href: string;
+    external?: boolean;
+};
+type FooterColumnDef = {
+    title: string;
+    links: FooterLinkDef[];
+};
+type FooterSocialDef = {
+    label: string;
+    href: string;
+    src: string;
+};
+type FooterProps = {
+    columns?: FooterColumnDef[];
+    socials?: FooterSocialDef[];
+    newsletter?: boolean;
+    tagline?: string;
+    showTagline?: boolean;
+    logoSrc?: string;
+    logoAlt?: string;
+    siteName?: string;
+    creditHref?: string;
+    creditLabel?: string;
+    newsletterAction?: (email: string) => void | Promise<void>;
+    className?: string;
+};
+declare function Footer({ columns, socials, newsletter, tagline, showTagline, logoSrc, logoAlt, siteName, creditHref, creditLabel, newsletterAction, className, }?: FooterProps): react_jsx_runtime.JSX.Element;
 
-export { AnimatedTooltip, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DataRow, type DataRowProps, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, FadeIn, type FadeInProps, FlipWords, Footer, HeroHighlight, Highlight, HoverCard, HoverCardDescription, HoverCardTitle, HoverEffect, Input, type InputProps, Label, LumaSpin, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SearchBar, type SearchBarProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type StatItem, StatsGrid, type StatsGridProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, easeSmooth, fadeInDown, fadeInUp, hoverLift, hoverScale, pageTransition, springBounce, staggerContainer, staggerItem };
+type FooterSocialLink = {
+    label: string;
+    href: string;
+    src: string;
+};
+type FooterCreditsBarProps = {
+    /**
+     * Social links to render on the left. Defaults to the PLAYBACK brand socials.
+     * Note: `src` paths are resolved by the consuming app's Next.js static file
+     * server, so the assets must exist in the app's /public directory.
+     */
+    socials?: FooterSocialLink[];
+    /**
+     * Company name used in the copyright line. Defaults to "PLAYBACK".
+     */
+    companyName?: string;
+    /**
+     * Credit link href. Defaults to BRAIN2.0's homepage.
+     */
+    creditHref?: string;
+    /**
+     * Show the "Built by BRAIN2.0" credit next to the socials. Defaults to true.
+     * The credit uses the Averta Semibold + Thin split-weight wordmark for
+     * "BRAIN2.0". Those @font-face declarations must be loaded by the consuming
+     * app's globals.css (AvertaStd-Semibold.ttf + AvertaStd-Thin.ttf).
+     */
+    showCredit?: boolean;
+    /**
+     * Starting year for the copyright range. Defaults to current year.
+     */
+    copyrightYear?: number;
+    /**
+     * Additional classes on the outer container.
+     */
+    className?: string;
+};
+/**
+ * Shared footer bottom-bar: social icons + BRAIN2.0 credit on the left,
+ * copyright right-aligned on desktop and centered on mobile.
+ *
+ * Use inside an existing footer container. Provides its own top hairline.
+ */
+declare function FooterCreditsBar({ socials, companyName, creditHref, showCredit, copyrightYear, className, }?: FooterCreditsBarProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedTooltip, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DataRow, type DataRowProps, DatePicker, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, FadeIn, type FadeInProps, FlipWords, Footer, type FooterColumnDef, FooterCreditsBar, type FooterCreditsBarProps, type FooterLinkDef, type FooterProps, type FooterSocialDef, type FooterSocialLink, HeroHighlight, Highlight, HoverCard, HoverCardDescription, HoverCardTitle, HoverEffect, Input, type InputProps, Label, LumaSpin, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SearchBar, type SearchBarProps, SectionCard, type SectionCardProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type StatItem, StatsGrid, type StatsGridProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimePicker, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, easeSmooth, fadeInDown, fadeInUp, hoverLift, hoverScale, pageTransition, springBounce, staggerContainer, staggerItem };

package/dist/ui/index.js

@@ -2364,69 +2364,361 @@ function LumaSpin() {
 }
 
 // src/ui/footer.tsx
+import * as React26 from "react";
 import Image2 from "next/image";
 import Link2 from "next/link";
 import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
-function Footer() {
-  return /* @__PURE__ */ jsxs19("footer", { className: "container mx-auto flex p-5 items-center justify-between border-t border-[var(--timberwolf)]", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx35(Link2, { href: "https://www.instagram.com/playback_global", target: "_blank", children: /* @__PURE__ */ jsx35(
-        Image2,
-        {
-          src: "/assets/instagram.png",
-          alt: "PLAYBACK Instagram",
-          height: 50,
-          width: 50,
-          className: "h-9 w-9"
-        }
-      ) }),
-      /* @__PURE__ */ jsx35(Link2, { href: "https://youtube.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx35(
-        Image2,
-        {
-          src: "/assets/youtube.png",
-          alt: "PLAYBACK YouTube",
-          height: 50,
-          width: 50,
-          className: "h-9 w-9"
-        }
-      ) }),
-      /* @__PURE__ */ jsx35(Link2, { href: "https://www.tiktok.com/@playback_global", target: "_blank", children: /* @__PURE__ */ jsx35(
-        Image2,
-        {
-          src: "/assets/tiktok.png",
-          alt: "PLAYBACK TikTok",
-          height: 50,
-          width: 50,
-          className: "h-9 w-9"
-        }
-      ) }),
-      /* @__PURE__ */ jsx35(
-        Link2,
-        {
-          href: "https://www.linkedin.com/company/playbacksports/",
-          target: "_blank",
-          children: /* @__PURE__ */ jsx35(
-            Image2,
+var DEFAULT_SOCIALS = [
+  {
+    label: "Instagram",
+    href: "https://www.instagram.com/playback_global",
+    src: "/assets/instagram.png"
+  },
+  {
+    label: "YouTube",
+    href: "https://youtube.com/@playback_global",
+    src: "/assets/youtube.png"
+  },
+  {
+    label: "TikTok",
+    href: "https://www.tiktok.com/@playback_global",
+    src: "/assets/tiktok.png"
+  },
+  {
+    label: "LinkedIn",
+    href: "https://www.linkedin.com/company/playbacksports/",
+    src: "/assets/linkedin.png"
+  }
+];
+function NewsletterForm({
+  onSubmit
+}) {
+  const [email, setEmail] = React26.useState("");
+  const [state, setState] = React26.useState("idle");
+  const handle = async (e) => {
+    e.preventDefault();
+    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
+    if (!ok) {
+      setState("error");
+      return;
+    }
+    try {
+      if (onSubmit) await onSubmit(email.trim());
+      setState("sent");
+      setEmail("");
+    } catch {
+      setState("error");
+    }
+  };
+  return /* @__PURE__ */ jsxs19(
+    "form",
+    {
+      onSubmit: handle,
+      noValidate: true,
+      "aria-label": "Subscribe to updates",
+      className: "w-full max-w-md",
+      children: [
+        /* @__PURE__ */ jsx35(
+          "label",
+          {
+            htmlFor: "footer-newsletter",
+            className: "block text-[12px] uppercase tracking-[0.14em] text-[rgba(214,213,201,0.44)] mb-3",
+            children: "Stay in the loop"
+          }
+        ),
+        /* @__PURE__ */ jsxs19("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+          /* @__PURE__ */ jsx35(
+            "input",
             {
-              src: "/assets/linkedin.png",
-              alt: "PLAYBACK LinkedIn",
-              height: 50,
-              width: 50,
-              className: "h-9 w-9"
+              id: "footer-newsletter",
+              type: "email",
+              inputMode: "email",
+              autoComplete: "email",
+              required: true,
+              value: email,
+              onChange: (e) => {
+                setEmail(e.target.value);
+                if (state !== "idle") setState("idle");
+              },
+              placeholder: "you@club.com",
+              "aria-invalid": state === "error",
+              "aria-describedby": "footer-newsletter-feedback",
+              className: cn(
+                "flex-1 h-11 rounded-full bg-[var(--surface-1,#0f1512)] border px-4 text-[14px] text-[var(--timberwolf)] placeholder:text-[rgba(214,213,201,0.44)]",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                state === "error" ? "border-[rgba(237,106,106,0.5)]" : "border-[rgba(214,213,201,0.08)]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx35(
+            "button",
+            {
+              type: "submit",
+              className: "inline-flex items-center justify-center h-11 px-5 rounded-full bg-[var(--timberwolf)] text-[var(--night)] text-[14px] font-medium hover:bg-[var(--ash-grey)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+              children: "Subscribe"
             }
           )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs19("h2", { className: "text-lg", children: [
-      "by",
-      " ",
-      /* @__PURE__ */ jsx35(Link2, { href: "https://www.braintwopoint0.com", children: /* @__PURE__ */ jsxs19("span", { style: { fontFamily: "AvertaStd-Semibold" }, children: [
-        "BRAIN",
-        /* @__PURE__ */ jsx35("span", { style: { fontFamily: "AvertaStd-Thin" }, children: "2.0" })
-      ] }) })
-    ] })
-  ] });
+        ] }),
+        /* @__PURE__ */ jsxs19(
+          "p",
+          {
+            id: "footer-newsletter-feedback",
+            className: cn(
+              "mt-2 text-[13px] min-h-[1.25rem]",
+              state === "sent" && "text-[var(--timberwolf)]",
+              state === "error" && "text-[rgb(237,106,106)]",
+              state === "idle" && "text-[rgba(214,213,201,0.44)]"
+            ),
+            role: state === "error" ? "alert" : void 0,
+            children: [
+              state === "sent" && "Thanks \u2014 we\u2019ll be in touch.",
+              state === "error" && "Please enter a valid email address.",
+              state === "idle" && "Monthly notes on product, network, and matches."
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function FooterLinkItem({ link }) {
+  const classes = "text-[14px] text-[rgba(214,213,201,0.64)] hover:text-[var(--timberwolf)] transition-colors rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-0,#0a100d)]";
+  if (link.external) {
+    return /* @__PURE__ */ jsx35(
+      "a",
+      {
+        href: link.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: classes,
+        children: link.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx35(Link2, { href: link.href, className: classes, children: link.label });
+}
+function Footer({
+  columns,
+  socials = DEFAULT_SOCIALS,
+  newsletter = false,
+  tagline = "You PLAY. We BACK.",
+  showTagline = true,
+  logoSrc = "/branding/PLAYBACK-Text.png",
+  logoAlt = "PLAYBACK",
+  siteName = "PLAYBACK",
+  creditHref = "https://www.braintwopoint0.com",
+  creditLabel = "Built by BRAIN2.0",
+  newsletterAction,
+  className
+} = {}) {
+  const hasColumns = columns && columns.length > 0;
+  return /* @__PURE__ */ jsxs19(
+    "footer",
+    {
+      id: "footer",
+      className: cn(
+        "mt-24 border-t border-[rgba(214,213,201,0.08)] bg-[var(--surface-0,#0a100d)]",
+        className
+      ),
+      "aria-labelledby": "footer-heading",
+      children: [
+        /* @__PURE__ */ jsxs19("h2", { id: "footer-heading", className: "sr-only", children: [
+          siteName,
+          " site footer"
+        ] }),
+        /* @__PURE__ */ jsxs19("div", { className: "mx-auto max-w-[1400px] px-6 sm:px-10", children: [
+          /* @__PURE__ */ jsxs19(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-1 gap-12 py-16",
+                newsletter ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-end" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-8", children: [
+                  /* @__PURE__ */ jsx35(
+                    Link2,
+                    {
+                      href: "/",
+                      className: "inline-flex items-center gap-3 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                      "aria-label": `${siteName} home`,
+                      children: /* @__PURE__ */ jsx35(
+                        Image2,
+                        {
+                          src: logoSrc,
+                          alt: logoAlt,
+                          width: 200,
+                          height: 40,
+                          className: "h-7 w-auto"
+                        }
+                      )
+                    }
+                  ),
+                  showTagline && tagline ? /* @__PURE__ */ jsx35("p", { className: "font-semibold text-[clamp(28px,3.6vw,44px)] leading-[1.05] tracking-[-0.035em] text-[var(--timberwolf)] max-w-[18ch]", children: tagline }) : null
+                ] }),
+                newsletter ? /* @__PURE__ */ jsx35("div", { className: "lg:justify-self-end w-full lg:max-w-md", children: /* @__PURE__ */ jsx35(NewsletterForm, { onSubmit: newsletterAction }) }) : null
+              ]
+            }
+          ),
+          hasColumns ? /* @__PURE__ */ jsx35("div", { className: "border-t border-[rgba(214,213,201,0.08)] py-14", children: /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-2 gap-x-6 gap-y-10 md:grid-cols-4", children: columns.map((col) => /* @__PURE__ */ jsxs19("nav", { "aria-label": col.title, children: [
+            /* @__PURE__ */ jsx35("p", { className: "text-[12px] uppercase tracking-[0.14em] text-[rgba(214,213,201,0.44)] mb-4", children: col.title }),
+            /* @__PURE__ */ jsx35("ul", { className: "flex flex-col gap-3", children: col.links.map((link) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35(FooterLinkItem, { link }) }, `${col.title}-${link.label}`)) })
+          ] }, col.title)) }) }) : null,
+          /* @__PURE__ */ jsxs19("div", { className: "border-t border-[rgba(214,213,201,0.08)] py-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+            /* @__PURE__ */ jsx35("ul", { className: "flex items-center gap-2", children: socials.map(({ label, href, src }) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35(
+              "a",
+              {
+                href,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": `${siteName} on ${label}`,
+                className: "inline-flex items-center justify-center h-9 w-9 rounded-full hover:bg-[var(--surface-1,#0f1512)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                children: /* @__PURE__ */ jsx35(
+                  Image2,
+                  {
+                    src,
+                    alt: "",
+                    width: 20,
+                    height: 20,
+                    className: "h-[18px] w-[18px] object-contain opacity-80 hover:opacity-100 transition-opacity"
+                  }
+                )
+              }
+            ) }, label)) }),
+            /* @__PURE__ */ jsxs19("p", { className: "text-[13px] text-[rgba(214,213,201,0.44)] order-last sm:order-none", children: [
+              "\xA9 ",
+              (/* @__PURE__ */ new Date()).getFullYear(),
+              " ",
+              siteName,
+              ". All rights reserved."
+            ] }),
+            /* @__PURE__ */ jsx35(
+              "a",
+              {
+                href: creditHref,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "text-[13px] text-[rgba(214,213,201,0.44)] hover:text-[var(--timberwolf)] transition-colors rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                children: creditLabel
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/ui/footer-credits-bar.tsx
+import Image3 from "next/image";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var DEFAULT_SOCIALS2 = [
+  {
+    label: "Instagram",
+    href: "https://www.instagram.com/playback_global",
+    src: "/assets/instagram.png"
+  },
+  {
+    label: "YouTube",
+    href: "https://youtube.com/@playback_global",
+    src: "/assets/youtube.png"
+  },
+  {
+    label: "TikTok",
+    href: "https://www.tiktok.com/@playback_global",
+    src: "/assets/tiktok.png"
+  },
+  {
+    label: "LinkedIn",
+    href: "https://www.linkedin.com/company/playbacksports/",
+    src: "/assets/linkedin.png"
+  }
+];
+function FooterCreditsBar({
+  socials = DEFAULT_SOCIALS2,
+  companyName = "PLAYBACK",
+  creditHref = "https://www.braintwopoint0.com",
+  showCredit = true,
+  copyrightYear,
+  className
+} = {}) {
+  const year = copyrightYear ?? (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: cn(
+        "border-t py-6 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center",
+        "border-[rgba(214,213,201,0.08)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-4 sm:justify-self-start", children: [
+          /* @__PURE__ */ jsx36("ul", { className: "flex items-center gap-2", children: socials.map(({ label, href, src }) => /* @__PURE__ */ jsx36("li", { children: /* @__PURE__ */ jsx36(
+            "a",
+            {
+              href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": `${companyName} on ${label}`,
+              className: cn(
+                "inline-flex items-center justify-center h-10 w-10 rounded-full",
+                "hover:bg-[var(--surface-1,#0f1512)] transition-colors",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]"
+              ),
+              children: /* @__PURE__ */ jsx36(
+                Image3,
+                {
+                  src,
+                  alt: "",
+                  width: 24,
+                  height: 24,
+                  className: "h-[22px] w-[22px] object-contain opacity-80 hover:opacity-100 transition-opacity"
+                }
+              )
+            }
+          ) }, label)) }),
+          showCredit ? /* @__PURE__ */ jsxs20(Fragment5, { children: [
+            /* @__PURE__ */ jsx36(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "h-5 w-px bg-[rgba(214,213,201,0.16)] flex-shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx36(
+              "a",
+              {
+                href: creditHref,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Built by BRAIN2.0",
+                className: cn(
+                  "text-[13px] text-[rgba(214,213,201,0.44)] hover:text-[var(--timberwolf)] transition-colors rounded-sm",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--timberwolf)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--night)]",
+                  "whitespace-nowrap"
+                ),
+                children: /* @__PURE__ */ jsxs20("span", { "aria-hidden": true, children: [
+                  "Built by",
+                  " ",
+                  /* @__PURE__ */ jsxs20("span", { style: { fontFamily: "AvertaStd-Semibold" }, children: [
+                    "BRAIN",
+                    /* @__PURE__ */ jsx36("span", { style: { fontFamily: "AvertaStd-Thin" }, children: "2.0" })
+                  ] })
+                ] })
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs20("p", { className: "text-[13px] text-[rgba(214,213,201,0.44)] text-center sm:text-right sm:justify-self-end", children: [
+          "\xA9 ",
+          year,
+          " ",
+          companyName,
+          ". All rights reserved."
+        ] })
+      ]
+    }
+  );
 }
 export {
   AnimatedTooltip,
@@ -2470,6 +2762,7 @@ export {
   FadeIn,
   FlipWords,
   Footer,
+  FooterCreditsBar,
   HeroHighlight,
   Highlight,
   HoverCard,