fix: Login branding, submenu display, favicon standalone, notification strategy

## 1. Apply Logo to Standalone Login Screen ✅

**Issue:** Login page shows "WooNooW" text instead of brand logo

**Fix:**
- Fetch branding from `/store/settings` API
- Display logo image if available
- Fallback to store name text
- Show tagline below logo
- Use store name in footer

**Result:**
```tsx
{branding.logo ? (
  <img src={branding.logo} alt={storeName} className="h-16" />
) : (
  <h1>{branding.storeName}</h1>
)}
{branding.tagline && <p>{branding.tagline}</p>}
```

---

## 2. Fix Submenu Display Issue ✅

**Issue:**
- Click Settings → redirects to Store Details ✓
- Settings submenu shows correctly ✓
- Click other settings pages → Dashboard submenu appears ✗

**Root Cause:** `useActiveSection` hook didn't recognize `/settings` path

**Fix:**
```tsx
// Special case: /settings should match settings section
if (pathname === '/settings' || pathname.startsWith('/settings/')) {
  const settingsNode = navTree.find(n => n.key === 'settings');
  if (settingsNode) return settingsNode;
}
```

**Result:** Settings submenu now displays correctly on all settings pages

---

## 3. Apply Favicon in Standalone ✅

**Issue:** Favicon not showing in standalone mode (/admin)

**Root Cause:** Standalone doesn't call `wp_head()`, so Branding class hooks don't run

**Fix:** Added favicon directly to StandaloneAdmin.php
```php
$icon = get_option('woonoow_store_icon', '');
if (!empty($icon)) {
    echo '<link rel="icon" href="' . esc_url($icon) . '">'
    echo '<link rel="apple-touch-icon" href="' . esc_url($icon) . '">'
}
```

**Also:** Changed title to use store name dynamically

---

## 4. Notification Settings Strategy ✅

**Your Concern:** "We should not be optimistic the notification media is only email"

**Agreed!** Created comprehensive strategy document: `NOTIFICATION_STRATEGY.md`

### Architecture:

**Core (WooNooW):**
- Notification events system
- Email channel (built-in)
- Addon integration framework
- Settings UI with addon slots

**Addons:**
- WhatsApp
- Telegram
- SMS
- Discord
- Slack
- Push notifications
- etc.

### Settings Structure:
```
Notifications
├── Events (What to notify)
│   ├── Order Placed
│   │   ├── ✓ Email (to admin)
│   │   ├── ✓ WhatsApp (to customer) [addon]
│   │   └── ✗ Telegram [addon]
│   └── Low Stock Alert
│
├── Channels (How to notify)
│   ├── Email (Built-in) ✓
│   ├── WhatsApp [Addon]
│   ├── Telegram [Addon]
│   └── SMS [Addon]
│
└── Templates
    ├── Email Templates
    └── Channel Templates [per addon]
```

### Integration Points:
```php
// Register channel
add_filter('woonoow_notification_channels', function($channels) {
    $channels['whatsapp'] = [
        'id' => 'whatsapp',
        'label' => 'WhatsApp',
        'icon' => 'message-circle',
    ];
    return $channels;
});

// Send notification
add_action('woonoow_notification_send_whatsapp', function($event, $data) {
    // Send WhatsApp message
}, 10, 2);
```

### Benefits:
- ✅ Extensible (any channel via addons)
- ✅ Flexible (multiple channels per event)
- ✅ No bloat (core = email only)
- ✅ Revenue opportunity (premium addons)
- ✅ Community friendly (free addons welcome)

---

## Summary

✅ Login screen shows brand logo + tagline
✅ Settings submenu displays correctly
✅ Favicon works in standalone mode
✅ Notification strategy documented (addon-based)

**Key Decision:** Notifications = Framework + Email core, everything else via addons

**Ready to implement notification system!**

admin-spa/src/hooks/useActiveSection.ts

@@ -5,6 +5,12 @@ export function useActiveSection(): { main: MainNode; all: MainNode[] } {
   const { pathname } = useLocation();
 
   function pick(): MainNode {
+    // Special case: /settings should match settings section
+    if (pathname === '/settings' || pathname.startsWith('/settings/')) {
+      const settingsNode = navTree.find(n => n.key === 'settings');
+      if (settingsNode) return settingsNode;
+    }
+    
     // Try to find section by matching path prefix
     for (const node of navTree) {
       if (node.path === '/') continue; // Skip dashboard for now

admin-spa/src/routes/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -12,8 +12,27 @@ export function Login() {
   const [password, setPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
+  const [branding, setBranding] = useState<{ logo: string; tagline: string; storeName: string }>({
+    logo: '',
+    tagline: '',
+    storeName: 'WooNooW'
+  });
   const navigate = useNavigate();
 
+  // Fetch branding
+  useEffect(() => {
+    fetch((window.WNW_CONFIG?.restUrl || '') + '/store/settings')
+      .then(res => res.json())
+      .then(data => {
+        setBranding({
+          logo: data.store_logo || '',
+          tagline: data.store_tagline || '',
+          storeName: data.store_name || 'WooNooW'
+        });
+      })
+      .catch(err => console.error('Failed to load branding:', err));
+  }, []);
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
@@ -52,10 +71,23 @@ export function Login() {
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8">
           {/* Logo */}
           <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              WooNooW
-            </h1>
-            <p className="text-gray-600 dark:text-gray-400 mt-2">
+            {branding.logo ? (
+              <img 
+                src={branding.logo} 
+                alt={branding.storeName}
+                className="h-16 mx-auto mb-3 object-contain"
+              />
+            ) : (
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
+                {branding.storeName}
+              </h1>
+            )}
+            {branding.tagline && (
+              <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
+                {branding.tagline}
+              </p>
+            )}
+            <p className="text-gray-600 dark:text-gray-400">
               {__('Sign in to your admin dashboard')}
             </p>
           </div>
@@ -138,7 +170,7 @@ export function Login() {
 
         {/* Site Info */}
         <div className="text-center mt-6 text-sm text-gray-600 dark:text-gray-400">
-          {window.WNW_CONFIG?.siteName || 'WooNooW'}
+          {branding.storeName}
         </div>
       </div>
     </div>