feat: add SEOHead to all SPA pages for dynamic page titles

Added SEOHead component to:
- ThankYou page (both template styles)
- Login page
- Account/Dashboard
- Account/Orders
- Account/Downloads
- Account/Addresses
- Account/Wishlist
- Account/Licenses
- Account/AccountDetails
- Public Wishlist page

Also created usePageTitle hook as alternative for non-Helmet usage.

customer-spa/src/pages/Account/AccountDetails.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import { api } from '@/lib/api/client';
+import SEOHead from '@/components/SEOHead';
 
 interface AvatarSettings {
   allow_custom_avatar: boolean;
@@ -198,6 +199,7 @@ export default function AccountDetails() {
 
   return (
     <div>
+      <SEOHead title="Account Details" description="Edit your account information" />
       <h1 className="text-2xl font-bold mb-6">Account Details</h1>
 
       {/* Avatar Section */}

customer-spa/src/pages/Account/Addresses.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { MapPin, Plus, Edit, Trash2, Star } from 'lucide-react';
 import { api } from '@/lib/api/client';
 import { toast } from 'sonner';
+import SEOHead from '@/components/SEOHead';
 
 interface Address {
   id: number;
@@ -153,6 +154,7 @@ export default function Addresses() {
 
   return (
     <div>
+      <SEOHead title="Addresses" description="Manage your shipping and billing addresses" />
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">Addresses</h1>
         <button

customer-spa/src/pages/Account/Dashboard.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { ShoppingBag, Package, MapPin, User } from 'lucide-react';
+import SEOHead from '@/components/SEOHead';
 
 export default function Dashboard() {
   const user = (window as any).woonoowCustomer?.user;
 
   return (
     <div>
+      <SEOHead title="My Account" description="Manage your account" />
       <h1 className="text-2xl font-bold mb-6">
         Hello {user?.display_name || 'there'}!
       </h1>

customer-spa/src/pages/Account/Downloads.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { api } from '@/lib/api/client';
 import { toast } from 'sonner';
 import { formatPrice } from '@/lib/currency';
+import SEOHead from '@/components/SEOHead';
 
 interface DownloadItem {
   download_id: string;
@@ -97,6 +98,7 @@ export default function Downloads() {
 
   return (
     <div>
+      <SEOHead title="Downloads" description="Your purchased downloads" />
       <h1 className="text-2xl font-bold mb-6">Downloads</h1>
 
       <div className="space-y-4">

customer-spa/src/pages/Account/Licenses.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Key, Copy, Check, ChevronDown, ChevronUp, Monitor, Globe, Power } from 'lucide-react';
 import { toast } from 'sonner';
+import SEOHead from '@/components/SEOHead';
 
 interface Activation {
     id: number;
@@ -94,6 +95,7 @@ export default function Licenses() {
 
     return (
         <div className="space-y-6">
+            <SEOHead title="Licenses" description="Manage your software licenses" />
             <div>
                 <h1 className="text-2xl font-bold flex items-center gap-2">
                     <Key className="h-6 w-6" />

customer-spa/src/pages/Account/Orders.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { Package, Eye } from 'lucide-react';
 import { api } from '@/lib/api/client';
 import { toast } from 'sonner';
+import SEOHead from '@/components/SEOHead';
 
 interface Order {
   id: number;
@@ -86,6 +87,7 @@ export default function Orders() {
 
   return (
     <div>
+      <SEOHead title="Orders" description="View your order history" />
       <h1 className="text-2xl font-bold mb-6">Orders</h1>
 
       <div className="space-y-4">

customer-spa/src/pages/Account/Wishlist.tsx

@@ -8,6 +8,7 @@ import { formatPrice } from '@/lib/currency';
 import { toast } from 'sonner';
 import { useModules } from '@/hooks/useModules';
 import { useModuleSettings } from '@/hooks/useModuleSettings';
+import SEOHead from '@/components/SEOHead';
 
 interface WishlistItem {
   product_id: number;
@@ -126,119 +127,120 @@ export default function Wishlist() {
 
   return (
     <div>
+      <SEOHead title="Wishlist" description="Your saved products" />
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
-          <div>
-            <h1 className="text-2xl font-bold">My Wishlist</h1>
-            <p className="text-gray-600 text-sm mt-1">
-              {items.length} {items.length === 1 ? 'item' : 'items'}
-            </p>
-          </div>
-          {items.length > 0 && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleClearAll}
-              className="text-red-600 hover:text-red-700 hover:border-red-600"
-            >
-              <Trash2 className="w-4 h-4 mr-2" />
-              Clear All
-            </Button>
-          )}
+        <div>
+          <h1 className="text-2xl font-bold">My Wishlist</h1>
+          <p className="text-gray-600 text-sm mt-1">
+            {items.length} {items.length === 1 ? 'item' : 'items'}
+          </p>
         </div>
+        {items.length > 0 && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleClearAll}
+            className="text-red-600 hover:text-red-700 hover:border-red-600"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Clear All
+          </Button>
+        )}
+      </div>
 
-        {/* Empty State */}
-        {items.length === 0 ? (
-          <div className="text-center py-16 bg-white border rounded-lg">
-            <Heart className="w-16 h-16 mx-auto text-gray-300 mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Your wishlist is empty</h2>
-            <p className="text-gray-600 mb-6">
-              Save your favorite products to buy them later
-            </p>
-            <Button onClick={() => navigate('/shop')}>
-              Browse Products
-            </Button>
-          </div>
-        ) : (
-          /* Wishlist Grid */
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {items.map((item) => (
-              <div
-                key={item.product_id}
-                className="bg-white border rounded-lg overflow-hidden hover:shadow-lg transition-shadow group"
-              >
-                {/* Image */}
-                <div className="relative aspect-square bg-gray-100">
-                  <button
-                    onClick={() => handleRemove(item.product_id)}
-                    className="absolute top-3 right-3 z-10 p-2 bg-white rounded-full shadow-md hover:bg-red-50 transition-colors"
-                    title="Remove from wishlist"
-                  >
-                    <X className="w-4 h-4 text-red-600" />
-                  </button>
+      {/* Empty State */}
+      {items.length === 0 ? (
+        <div className="text-center py-16 bg-white border rounded-lg">
+          <Heart className="w-16 h-16 mx-auto text-gray-300 mb-4" />
+          <h2 className="text-xl font-semibold mb-2">Your wishlist is empty</h2>
+          <p className="text-gray-600 mb-6">
+            Save your favorite products to buy them later
+          </p>
+          <Button onClick={() => navigate('/shop')}>
+            Browse Products
+          </Button>
+        </div>
+      ) : (
+        /* Wishlist Grid */
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {items.map((item) => (
+            <div
+              key={item.product_id}
+              className="bg-white border rounded-lg overflow-hidden hover:shadow-lg transition-shadow group"
+            >
+              {/* Image */}
+              <div className="relative aspect-square bg-gray-100">
+                <button
+                  onClick={() => handleRemove(item.product_id)}
+                  className="absolute top-3 right-3 z-10 p-2 bg-white rounded-full shadow-md hover:bg-red-50 transition-colors"
+                  title="Remove from wishlist"
+                >
+                  <X className="w-4 h-4 text-red-600" />
+                </button>
 
-                  <img
-                    src={item.image || '/placeholder.png'}
-                    alt={item.name}
-                    className="w-full h-full object-cover cursor-pointer"
-                    onClick={() => navigate(`/product/${item.slug}`)}
-                  />
+                <img
+                  src={item.image || '/placeholder.png'}
+                  alt={item.name}
+                  className="w-full h-full object-cover cursor-pointer"
+                  onClick={() => navigate(`/product/${item.slug}`)}
+                />
 
-                  {item.on_sale && (
-                    <div className="absolute top-3 left-3 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
-                      SALE
-                    </div>
+                {item.on_sale && (
+                  <div className="absolute top-3 left-3 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
+                    SALE
+                  </div>
+                )}
+              </div>
+
+              {/* Content */}
+              <div className="p-4">
+                <h3
+                  className="font-medium text-gray-900 mb-2 line-clamp-2 cursor-pointer hover:text-primary transition-colors"
+                  onClick={() => navigate(`/product/${item.slug}`)}
+                >
+                  {item.name}
+                </h3>
+
+                {/* Price */}
+                <div className="flex items-center gap-2 mb-4">
+                  {item.on_sale && item.regular_price ? (
+                    <>
+                      <span className="text-lg font-bold text-primary">
+                        {formatPrice(item.sale_price || item.price)}
+                      </span>
+                      <span className="text-sm text-gray-500 line-through">
+                        {formatPrice(item.regular_price)}
+                      </span>
+                    </>
+                  ) : (
+                    <span className="text-lg font-bold text-gray-900">
+                      {formatPrice(item.price)}
+                    </span>
                   )}
                 </div>
 
-                {/* Content */}
-                <div className="p-4">
-                  <h3
-                    className="font-medium text-gray-900 mb-2 line-clamp-2 cursor-pointer hover:text-primary transition-colors"
-                    onClick={() => navigate(`/product/${item.slug}`)}
+                {/* Actions */}
+                {(wishlistSettings.show_add_to_cart_button ?? true) && (
+                  <Button
+                    onClick={() => handleAddToCart(item)}
+                    disabled={item.stock_status === 'outofstock'}
+                    className="w-full"
+                    size="sm"
                   >
-                    {item.name}
-                  </h3>
-
-                  {/* Price */}
-                  <div className="flex items-center gap-2 mb-4">
-                    {item.on_sale && item.regular_price ? (
-                      <>
-                        <span className="text-lg font-bold text-primary">
-                          {formatPrice(item.sale_price || item.price)}
-                        </span>
-                        <span className="text-sm text-gray-500 line-through">
-                          {formatPrice(item.regular_price)}
-                        </span>
-                      </>
-                    ) : (
-                      <span className="text-lg font-bold text-gray-900">
-                        {formatPrice(item.price)}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Actions */}
-                  {(wishlistSettings.show_add_to_cart_button ?? true) && (
-                    <Button
-                      onClick={() => handleAddToCart(item)}
-                      disabled={item.stock_status === 'outofstock'}
-                      className="w-full"
-                      size="sm"
-                    >
-                      <ShoppingCart className="w-4 h-4 mr-2" />
-                      {item.stock_status === 'outofstock'
-                        ? 'Out of Stock'
-                        : item.type === 'variable'
+                    <ShoppingCart className="w-4 h-4 mr-2" />
+                    {item.stock_status === 'outofstock'
+                      ? 'Out of Stock'
+                      : item.type === 'variable'
                         ? 'Select Options'
                         : 'Add to Cart'}
-                    </Button>
-                  )}
-                </div>
+                  </Button>
+                )}
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

customer-spa/src/pages/Login/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { toast } from 'sonner';
 import Container from '@/components/Layout/Container';
+import SEOHead from '@/components/SEOHead';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -115,6 +116,7 @@ export default function Login() {
 
     return (
         <Container>
+            <SEOHead title="Login" description="Sign in to your account" />
             <div className="min-h-[60vh] flex items-center justify-center py-12">
                 <div className="w-full max-w-md">
                     {/* Back link */}

customer-spa/src/pages/ThankYou/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useParams, Link, useSearchParams } from 'react-router-dom';
 import { useThankYouSettings } from '@/hooks/useAppearanceSettings';
 import Container from '@/components/Layout/Container';
+import SEOHead from '@/components/SEOHead';
 import { CheckCircle, ShoppingBag, Package, Truck, User, LogIn } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { formatPrice } from '@/lib/currency';
@@ -74,6 +75,7 @@ export default function ThankYou() {
   if (template === 'receipt') {
     return (
       <div style={{ backgroundColor }}>
+        <SEOHead title="Order Confirmed" description={`Order #${order?.number || orderId} confirmed`} />
         <Container>
           <div className="py-12 max-w-2xl mx-auto">
             {/* Receipt Container */}
@@ -351,6 +353,7 @@ export default function ThankYou() {
   // Render basic style template (default)
   return (
     <div style={{ backgroundColor }}>
+      <SEOHead title="Order Confirmed" description={`Order #${order?.number || orderId} confirmed`} />
       <Container>
         <div className="py-12 max-w-3xl mx-auto">
           {/* Success Header */}

customer-spa/src/pages/Wishlist.tsx

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { apiClient } from '@/lib/api/client';
 import { formatPrice } from '@/lib/currency';
+import SEOHead from '@/components/SEOHead';
 
 interface ProductData {
   id: number;
@@ -106,6 +107,7 @@ export default function Wishlist() {
 
   return (
     <div className="container mx-auto px-4 py-8">
+      <SEOHead title="Wishlist" description="Your saved products" />
       <div className="max-w-4xl mx-auto">
         <div className="flex items-center justify-between mb-6">
           <h1 className="text-3xl font-bold">My Wishlist</h1>