create-brainerce-store 1.40.0 → 1.41.1

package/templates/nextjs/base/src/components/content/faq-section.tsx.ejs

@@ -1,75 +1,103 @@
-/**
- * FAQ accordion — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { sanitizeHtml } from '@/lib/sanitize';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` triggers a minimal empty-state message. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const [openIdx, setOpenIdx] = React.useState<number | null>(0);
-
-  if (!faq || !faq.data.items?.length) {
-    return null;
-  }
-
-  return (
-    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{faq.name}</h1>
-      <ul className="border-border divide-border divide-y rounded-lg border">
-        {faq.data.items.map((item, idx) => {
-          const open = openIdx === idx;
-          return (
-            <li key={idx}>
-              <button
-                type="button"
-                onClick={() => setOpenIdx(open ? null : idx)}
-                aria-expanded={open}
-                className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 p-4 text-start transition-colors"
-              >
-                <span className="text-foreground text-sm font-medium sm:text-base">
-                  {item.question}
-                </span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  className={`text-muted-foreground h-4 w-4 transition-transform ${
-                    open ? 'rotate-180' : ''
-                  }`}
-                  aria-hidden="true"
-                >
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                </svg>
-              </button>
-              {open ? (
-                <div
-                  className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed"
-                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
-                />
-              ) : null}
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-}
+/**
+ * FAQ accordion — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
+ * pre-fetched payload as `faq`; this component knows nothing about which
+ * key it came from.
+ *
+ * Two render branches:
+ *   1. `faq` has items → accordion of question/answer pairs
+ *   2. `faq` is null OR has no items → friendly empty state with a contact
+ *      CTA, so the /faq page never looks broken before the merchant seeds.
+ *
+ * Security: FAQ answers may contain merchant-authored HTML — we sanitize
+ * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { sanitizeHtml } from '@/lib/sanitize';
+
+interface FaqSectionProps {
+  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
+  faq: Content<'FAQ'> | null;
+}
+
+export function FaqSection({ faq }: FaqSectionProps) {
+  const t = useTranslations('content');
+  const [openIdx, setOpenIdx] = React.useState<number | null>(0);
+
+  const items = faq?.data?.items ?? [];
+  const heading = faq?.name || t('faqTitle');
+
+  // Empty state — runs when the merchant hasn't created a FAQ row yet,
+  // or the row exists but contains no items. Keep the page non-empty and
+  // give the visitor a path to contact instead of a blank screen.
+  if (!faq || items.length === 0) {
+    return (
+      <section className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground mb-3 text-2xl font-semibold sm:text-3xl">{heading}</h1>
+        <p className="text-muted-foreground mb-6 text-sm sm:text-base">
+          <strong className="text-foreground">{t('faqEmptyTitle')}</strong>
+          <br />
+          {t('faqEmptyBody')}
+        </p>
+        <a
+          href="/contact"
+          className="bg-primary text-primary-foreground inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:opacity-90"
+        >
+          {t('faqContactCta')}
+        </a>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-semibold sm:text-3xl">{heading}</h1>
+      <ul className="border-border divide-border divide-y rounded-lg border">
+        {items.map((item, idx) => {
+          const open = openIdx === idx;
+          return (
+            <li key={idx}>
+              <button
+                type="button"
+                onClick={() => setOpenIdx(open ? null : idx)}
+                aria-expanded={open}
+                className="hover:bg-muted/40 flex w-full items-center justify-between gap-4 p-4 text-start transition-colors"
+              >
+                <span className="text-foreground text-sm font-medium sm:text-base">
+                  {item.question}
+                </span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  className={`text-muted-foreground h-4 w-4 transition-transform ${
+                    open ? 'rotate-180' : ''
+                  }`}
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              {open ? (
+                <div
+                  className="text-muted-foreground prose prose-sm dark:prose-invert max-w-none px-4 pb-4 text-sm leading-relaxed"
+                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
+                />
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/templates/nextjs/base/src/components/content/rich-text-block.tsx.ejs

@@ -1,32 +1,32 @@
-/**
- * Inline rich-text block — fully driven by the merchant's dashboard.
- *
- * The merchant configures rich-text blocks in the Brainerce dashboard
- * under Sell → Content → Rich Text. Use this component anywhere on a page
- * to drop a merchant-editable HTML block (intro copy, banner descriptions,
- * inline announcements that aren't tied to the top-of-page Announcement
- * bar, etc.).
- *
- * Security: HTML is sanitized via `sanitizeHtml` (isomorphic-dompurify)
- * before injecting via dangerouslySetInnerHTML.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { sanitizeHtml } from '@/lib/sanitize';
-
-interface RichTextBlockProps {
-  /** Pre-fetched RICH_TEXT row, e.g. via `client.content.richText.get(key, locale)`. */
-  block: Content<'RICH_TEXT'> | null;
-  /** Optional wrapper className for layout positioning. */
-  className?: string;
-}
-
-export function RichTextBlock({ block, className }: RichTextBlockProps) {
-  if (!block?.data?.html) return null;
-  return (
-    <div
-      className={className ?? 'prose prose-sm dark:prose-invert max-w-none'}
-      dangerouslySetInnerHTML={{ __html: sanitizeHtml(block.data.html) }}
-    />
-  );
-}
+/**
+ * Inline rich-text block — fully driven by the merchant's dashboard.
+ *
+ * The merchant configures rich-text blocks in the Brainerce dashboard
+ * under Sell → Content → Rich Text. Use this component anywhere on a page
+ * to drop a merchant-editable HTML block (intro copy, banner descriptions,
+ * inline announcements that aren't tied to the top-of-page Announcement
+ * bar, etc.).
+ *
+ * Security: HTML is sanitized via `sanitizeHtml` (isomorphic-dompurify)
+ * before injecting via dangerouslySetInnerHTML.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { sanitizeHtml } from '@/lib/sanitize';
+
+interface RichTextBlockProps {
+  /** Pre-fetched RICH_TEXT row, e.g. via `client.content.richText.get(key, locale)`. */
+  block: Content<'RICH_TEXT'> | null;
+  /** Optional wrapper className for layout positioning. */
+  className?: string;
+}
+
+export function RichTextBlock({ block, className }: RichTextBlockProps) {
+  if (!block?.data?.html) return null;
+  return (
+    <div
+      className={className ?? 'prose prose-sm dark:prose-invert max-w-none'}
+      dangerouslySetInnerHTML={{ __html: sanitizeHtml(block.data.html) }}
+    />
+  );
+}

package/templates/nextjs/base/src/components/content/site-footer.tsx.ejs

@@ -1,164 +1,164 @@
-/**
- * Storefront footer — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures the footer in the Brainerce dashboard under
- *   Sell → Content → Footer
- *
- * Renders a brand block (store-name + social icons), the merchant's link
- * columns, and a copyright bar. Social icons are inline SVGs so the
- * scaffold stays dependency-free; unknown platforms fall back to a
- * letter avatar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — we render a minimal fallback so the layout never
- *   crashes when the merchant hasn't seeded the footer yet.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-interface SiteFooterProps {
-  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
-  footer: Content<'FOOTER'> | null;
-  /** Store name shown in the brand block + fallback copyright. */
-  storeName?: string;
-}
-
-type SvgComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-const InstagramIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
-    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
-  </svg>
-);
-
-const FacebookIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
-    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-  </svg>
-);
-
-const XIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-  </svg>
-);
-
-const LinkedInIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" />
-  </svg>
-);
-
-const YouTubeIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-  </svg>
-);
-
-const TikTokIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z" />
-  </svg>
-);
-
-const SOCIAL_ICONS: Record<string, SvgComponent> = {
-  instagram: InstagramIcon,
-  facebook: FacebookIcon,
-  x: XIcon,
-  twitter: XIcon,
-  linkedin: LinkedInIcon,
-  youtube: YouTubeIcon,
-  tiktok: TikTokIcon,
-};
-
-export function SiteFooter({ footer, storeName }: SiteFooterProps) {
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
-    return (
-      <footer className="border-border bg-muted/30 text-muted-foreground mt-16 border-t py-8 text-sm">
-        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
-          © {year} {brandLabel}. All rights reserved.
-        </div>
-      </footer>
-    );
-  }
-
-  return (
-    <footer className="border-border bg-muted/30 mt-16 border-t">
-      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
-          <div className="md:col-span-4">
-            <a
-              href="/"
-              className="text-foreground text-lg font-semibold tracking-tight"
-            >
-              {brandLabel}
-            </a>
-            {social.length > 0 ? (
-              <div className="mt-4 flex flex-wrap items-center gap-2">
-                {social.map((entry, idx) => {
-                  const key = entry.platform.toLowerCase();
-                  const Icon = SOCIAL_ICONS[key];
-                  return (
-                    <a
-                      key={`${entry.platform}-${idx}`}
-                      href={entry.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={entry.platform}
-                      className="border-border hover:border-foreground/40 hover:text-foreground text-muted-foreground inline-flex h-9 w-9 items-center justify-center rounded-full border transition-colors"
-                    >
-                      {Icon ? (
-                        <Icon className="h-4 w-4" />
-                      ) : (
-                        <span className="text-xs font-medium uppercase">
-                          {entry.platform.charAt(0)}
-                        </span>
-                      )}
-                    </a>
-                  );
-                })}
-              </div>
-            ) : null}
-          </div>
-
-          {columns.length > 0 ? (
-            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
-              {columns.map((col, idx) => (
-                <div key={`${col.title}-${idx}`}>
-                  <h3 className="text-foreground mb-3 text-sm font-semibold tracking-wide">
-                    {col.title}
-                  </h3>
-                  <ul className="space-y-2">
-                    {col.links.map((link, linkIdx) => (
-                      <li key={`${link.url}-${linkIdx}`}>
-                        <a
-                          href={link.url}
-                          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                        >
-                          {link.label}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          ) : null}
-        </div>
-
-        <div className="border-border text-muted-foreground mt-10 flex flex-col items-center justify-between gap-2 border-t pt-6 text-xs sm:flex-row">
-          <span>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</span>
-        </div>
-      </div>
-    </footer>
-  );
-}
+/**
+ * Storefront footer — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures the footer in the Brainerce dashboard under
+ *   Sell → Content → Footer
+ *
+ * Renders a brand block (store-name + social icons), the merchant's link
+ * columns, and a copyright bar. Social icons are inline SVGs so the
+ * scaffold stays dependency-free; unknown platforms fall back to a
+ * letter avatar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — we render a minimal fallback so the layout never
+ *   crashes when the merchant hasn't seeded the footer yet.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+interface SiteFooterProps {
+  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
+  footer: Content<'FOOTER'> | null;
+  /** Store name shown in the brand block + fallback copyright. */
+  storeName?: string;
+}
+
+type SvgComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+const InstagramIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
+    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+  </svg>
+);
+
+const FacebookIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>
+    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+  </svg>
+);
+
+const XIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+  </svg>
+);
+
+const LinkedInIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.852 3.37-1.852 3.601 0 4.267 2.37 4.267 5.455v6.288zM5.337 7.433a2.062 2.062 0 1 1 0-4.125 2.063 2.063 0 0 1 0 4.125zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" />
+  </svg>
+);
+
+const YouTubeIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+  </svg>
+);
+
+const TikTokIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z" />
+  </svg>
+);
+
+const SOCIAL_ICONS: Record<string, SvgComponent> = {
+  instagram: InstagramIcon,
+  facebook: FacebookIcon,
+  x: XIcon,
+  twitter: XIcon,
+  linkedin: LinkedInIcon,
+  youtube: YouTubeIcon,
+  tiktok: TikTokIcon,
+};
+
+export function SiteFooter({ footer, storeName }: SiteFooterProps) {
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
+    return (
+      <footer className="border-border bg-muted/30 text-muted-foreground mt-16 border-t py-8 text-sm">
+        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
+          © {year} {brandLabel}. All rights reserved.
+        </div>
+      </footer>
+    );
+  }
+
+  return (
+    <footer className="border-border bg-muted/30 mt-16 border-t">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
+          <div className="md:col-span-4">
+            <a
+              href="/"
+              className="text-foreground text-lg font-semibold tracking-tight"
+            >
+              {brandLabel}
+            </a>
+            {social.length > 0 ? (
+              <div className="mt-4 flex flex-wrap items-center gap-2">
+                {social.map((entry, idx) => {
+                  const key = entry.platform.toLowerCase();
+                  const Icon = SOCIAL_ICONS[key];
+                  return (
+                    <a
+                      key={`${entry.platform}-${idx}`}
+                      href={entry.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={entry.platform}
+                      className="border-border hover:border-foreground/40 hover:text-foreground text-muted-foreground inline-flex h-9 w-9 items-center justify-center rounded-full border transition-colors"
+                    >
+                      {Icon ? (
+                        <Icon className="h-4 w-4" />
+                      ) : (
+                        <span className="text-xs font-medium uppercase">
+                          {entry.platform.charAt(0)}
+                        </span>
+                      )}
+                    </a>
+                  );
+                })}
+              </div>
+            ) : null}
+          </div>
+
+          {columns.length > 0 ? (
+            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
+              {columns.map((col, idx) => (
+                <div key={`${col.title}-${idx}`}>
+                  <h3 className="text-foreground mb-3 text-sm font-semibold tracking-wide">
+                    {col.title}
+                  </h3>
+                  <ul className="space-y-2">
+                    {col.links.map((link, linkIdx) => (
+                      <li key={`${link.url}-${linkIdx}`}>
+                        <a
+                          href={link.url}
+                          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                        >
+                          {link.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="border-border text-muted-foreground mt-10 flex flex-col items-center justify-between gap-2 border-t pt-6 text-xs sm:flex-row">
+          <span>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</span>
+        </div>
+      </div>
+    </footer>
+  );
+}