feat(CC-082): add CRM & Communication integration (WhatsApp/n8n/webhook channels)

src/app/dashboard/integrations/crm/page.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+
+const CHANNELS = [
+  { id: 'whatsapp', name: 'WhatsApp', icon: '📱', desc: 'Import conversații selectiv prin API WhatsApp Business. Necesită număr Business.' },
+  { id: 'n8n', name: 'n8n Workflows', icon: '⚙️', desc: 'Automatizări CRM prin n8n: lead routing, follow-up automat, notificări.' },
+  { id: 'typeform', name: 'Formulare (Typeform / Tally)', icon: '📋', desc: 'Importă leaduri din formulare direct în CEO OS Contacts.' },
+  { id: 'zapier', name: 'Zapier / Make', icon: '🔄', desc: 'Conectori generici prin Zapier sau Make.com la orice CRM extern.' },
+  { id: 'webhook', name: 'Webhook CRM', icon: '🔗', desc: 'Orice CRM extern poate trimite date prin webhook semnat.' },
+  { id: 'linkedin', name: 'LinkedIn (manual)', icon: '💼', desc: 'Export manual CSV din LinkedIn importat în Contacts. API LinkedIn nu este suportat (ToS).' },
+];
+
+export default function CRMIntegrationPage() {
+  const [active, setActive] = useState<string | null>(null);
+
+  return (
+    <div className="max-w-3xl space-y-6 p-6">
+      <div>
+        <h1 className="font-display text-2xl font-semibold text-ink">CRM & Comunicare</h1>
+        <p className="text-sm text-ink-faint mt-1">Canale de comunicare și CRM extern conectate la CEO OS Contacts.</p>
+      </div>
+
+      <div className="card p-4 bg-primary/5 border-primary/20 space-y-1">
+        <p className="text-xs font-semibold text-ink">Principii CRM CEO OS</p>
+        <div className="text-[10px] text-ink-faint space-y-0.5">
+          <p>• Contactele aparțin utilizatorului, nu platformei. Export complet disponibil oricând.</p>
+          <p>• Comunicările sunt importate selectiv — nu există full-sync autonom fără confirmare.</p>
+          <p>• Redactarea AI a mesajelor necesită aprobare înainte de trimitere.</p>
+          <p>• Fiecare canal are consimțământ GDPR separat pentru datele importate.</p>
+        </div>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        {CHANNELS.map((ch) => (
+          <button key={ch.id} onClick={() => setActive(active === ch.id ? null : ch.id)}
+            className={`card p-4 text-left transition-colors hover:border-primary/40 ${active === ch.id ? 'border-primary/50 bg-primary/5' : ''}`}>
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-xl">{ch.icon}</span>
+              <p className="text-sm font-medium text-ink">{ch.name}</p>
+            </div>
+            <p className="text-[10px] text-ink-faint">{ch.desc}</p>
+            {active === ch.id && (
+              <div className="mt-3 pt-3 border-t border-border/50">
+                {ch.id === 'n8n' ? (
+                  <Link href="http://n8n.boardmind.dev" target="_blank" rel="noopener"
+                    className="text-xs text-primary hover:underline">Deschide n8n →</Link>
+                ) : ch.id === 'webhook' ? (
+                  <Link href="/dashboard/integrations/webhooks"
+                    className="text-xs text-primary hover:underline">Configurează webhook →</Link>
+                ) : (
+                  <span className="text-[10px] text-ink-faint">Disponibil în curând — A3</span>
+                )}
+              </div>
+            )}
+          </button>
+        ))}
+      </div>
+
+      <Link href="/dashboard/integrations" className="text-xs text-primary hover:underline">← Toate integrările</Link>
+    </div>
+  );
+}