feat: add dynamic meta tags for social sharing (Phase 4-5)

Phase 4: Dynamic Meta Tags
- Added react-helmet-async dependency
- Created SEOHead component with Open Graph and Twitter Card support
- Added HelmetProvider wrapper to App.tsx
- Integrated SEOHead in Product page (title, description, image, product info)
- Integrated SEOHead in Shop page (basic meta tags)

Phase 5: Auto-Flush Permalinks
- Enhanced settings change handler to only flush when spa_mode,
  spa_page, or use_browser_router changes
- Plugin already flushes on activation (Installer.php)

This enables proper link previews when sharing product URLs
on Facebook, Twitter, Slack, etc.

customer-spa/src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { HashRouter, BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { HelmetProvider } from 'react-helmet-async';
 import { Toaster } from 'sonner';
 
 // Theme
@@ -128,16 +129,18 @@ function App() {
   const toastPosition = (appearanceSettings?.general?.toast_position || 'top-right') as any;
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider config={themeConfig}>
-        <RouterProvider>
-          <AppRoutes />
-        </RouterProvider>
+    <HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider config={themeConfig}>
+          <RouterProvider>
+            <AppRoutes />
+          </RouterProvider>
 
-        {/* Toast notifications - position from settings */}
-        <Toaster position={toastPosition} richColors />
-      </ThemeProvider>
-    </QueryClientProvider>
+          {/* Toast notifications - position from settings */}
+          <Toaster position={toastPosition} richColors />
+        </ThemeProvider>
+      </QueryClientProvider>
+    </HelmetProvider>
   );
 }