feat: persist branding, visual identity, and database integration changes

frontend/Dockerfile

@@ -7,4 +7,5 @@ RUN npm run build
 
 FROM nginx:alpine
 COPY --from=builder /app/frontend/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 3014

frontend/nginx.conf

@@ -0,0 +1 @@
+server { listen 3014; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } }

frontend/src/App.tsx

@@ -4,9 +4,24 @@ import { APP_VERSION } from './constants';
 const API = '/api';
 
 interface Domain {
-  domain: string;
-  id?: number;
-  status?: string;
+  id: number;
+  name: string;
+  hostinger_id?: string;
+}
+
+interface Subdomain {
+  id: number;
+  domain_id: number;
+  subdomain: string;
+  full_domain: string;
+  type: string;
+  value: string;
+  logo_url?: string;
+  primary_color?: string;
+  secondary_color?: string;
+  title?: string;
+  description?: string;
+  favicon_url?: string;
 }
 
 export default function App() {
@@ -18,19 +33,48 @@ export default function App() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
 
+  // Navigation states
+  const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
+  const [subdomains, setSubdomains] = useState<Subdomain[]>([]);
+  const [loadingSubdomains, setLoadingSubdomains] = useState(false);
+  const [editingBranding, setEditingBranding] = useState<Subdomain | null>(null);
+
   // Form states
-  const [selectedDomain, setSelectedDomain] = useState('');
   const [newSubdomain, setNewSubdomain] = useState('');
   const [newValue, setNewValue] = useState('');
   const [creating, setCreating] = useState(false);
 
+  // Branding states
+  const [brandingForm, setBrandingForm] = useState({
+    title: '',
+    description: '',
+    logo_url: '',
+    primary_color: '#FF6B00',
+    secondary_color: '#1A1A1A',
+    favicon_url: ''
+  });
+
   useEffect(() => {
-    fetch(`${API}/config`)
-      .then(r => r.json())
-      .then(d => setHasKey(d.has_api_key))
-      .catch(() => setHasKey(false));
+    fetchConfig();
+    fetchDomains();
   }, []);
 
+  useEffect(() => {
+    if (selectedDomain) {
+      fetchSubdomains(selectedDomain.id);
+    }
+  }, [selectedDomain]);
+
+  async function fetchConfig() {
+    try {
+      const r = await fetch(`${API}/config`);
+      const d = await r.json();
+      setHasKey(d.has_api_key);
+    } catch (e) {
+      setHasKey(false);
+    }
+  }
+
   async function saveKey() {
     if (!apiKeyInput.trim()) return;
     setSaving(true);
@@ -45,7 +89,8 @@ export default function App() {
       if (r.ok) { 
         setHasKey(true); 
         setApiKeyInput(''); 
-        setSuccess('Chave API salva e configurada com sucesso.'); 
+        setSuccess('Chave API salva e configurada.'); 
+        fetchDomains();
       } else { 
         const d = await r.json(); 
         setError(d.error || 'Erro ao salvar chave.'); 
@@ -55,25 +100,45 @@ export default function App() {
 
   async function fetchDomains() {
     setLoadingDomains(true);
-    setError('');
-    setSuccess('');
     try {
-      const r = await fetch(`${API}/subdomains`);
-      const d = await r.json();
+      const r = await fetch(`${API}/domains`);
       if (r.ok) {
-        setDomains(Array.isArray(d) ? d : d.data || []);
-      } else {
-        setError(d.error || 'Erro ao buscar domínios na Hostinger.');
+        const d = await r.json();
+        setDomains(d);
       }
     } finally { setLoadingDomains(false); }
   }
 
+  async function syncDomains() {
+    setLoadingDomains(true);
+    setError('');
+    setSuccess('');
+    try {
+      const r = await fetch(`${API}/domains/sync`, { method: 'POST' });
+      const d = await r.json();
+      if (r.ok) {
+        setDomains(d.domains);
+        setSuccess('Sincronização concluída com sucesso!');
+      } else {
+        setError(d.error || 'Erro na sincronização.');
+      }
+    } finally { setLoadingDomains(false); }
+  }
+
+  async function fetchSubdomains(domainId: number) {
+    setLoadingSubdomains(true);
+    try {
+      const r = await fetch(`${API}/domains/${domainId}/subdomains`);
+      if (r.ok) {
+        const d = await r.json();
+        setSubdomains(d);
+      }
+    } finally { setLoadingSubdomains(false); }
+  }
+
   async function createSubdomain(e: React.FormEvent) {
     e.preventDefault();
-    if (!selectedDomain || !newSubdomain || !newValue) {
-      setError('Preencha todos os campos do subdomínio.');
-      return;
-    }
+    if (!selectedDomain || !newSubdomain || !newValue) return;
     setCreating(true);
     setError('');
     setSuccess('');
@@ -82,201 +147,371 @@ export default function App() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          domain: selectedDomain,
+          domainId: selectedDomain.id,
+          domainName: selectedDomain.name,
           subdomain: newSubdomain,
           value: newValue
         })
       });
-      const d = await r.json();
       if (r.ok) {
-        setSuccess(`Sucesso! ${newSubdomain}.${selectedDomain} foi criado/atualizado.`);
+        setSuccess(`Subdomínio ${newSubdomain}.${selectedDomain.name} criado.`);
         setNewSubdomain('');
         setNewValue('');
+        fetchSubdomains(selectedDomain.id);
       } else {
+        const d = await r.json();
         setError(d.error || 'Erro ao criar subdomínio.');
       }
-    } catch (err: any) {
-      setError(err.message);
     } finally { setCreating(false); }
   }
 
-  return (
-    <div className="min-h-screen bg-[#05080a] text-gray-100 p-4 md:p-10 font-sans selection:bg-orange-500/30">
-      <div className="max-w-4xl mx-auto space-y-8">
+  function openBranding(sub: Subdomain) {
+    setEditingBranding(sub);
+    setBrandingForm({
+      title: sub.title || '',
+      description: sub.description || '',
+      logo_url: sub.logo_url || '',
+      primary_color: sub.primary_color || '#FF6B00',
+      secondary_color: sub.secondary_color || '#1A1A1A',
+      favicon_url: sub.favicon_url || ''
+    });
+  }
 
+  async function saveBranding() {
+    if (!editingBranding) return;
+    try {
+      const r = await fetch(`${API}/branding/${editingBranding.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(brandingForm)
+      });
+      if (r.ok) {
+        setSuccess('Identidade visual atualizada!');
+        setEditingBranding(null);
+        if (selectedDomain) fetchSubdomains(selectedDomain.id);
+      }
+    } catch (e: any) {
+      setError(e.message);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#05080a] text-gray-100 font-sans selection:bg-orange-500/30">
+      
+      {/* BACKGROUND DECORATION */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute -top-24 -left-24 w-96 h-96 bg-orange-600/10 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 -right-24 w-64 h-64 bg-blue-600/5 rounded-full blur-3xl" />
+      </div>
+
+      <div className="max-w-7xl mx-auto px-6 py-10 relative">
+        
         {/* HEADER */}
-        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-gray-800/50 pb-8">
-          <div className="flex items-center gap-4">
-            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-lg shadow-orange-500/20">
-              <span className="font-black text-2xl text-white">C</span>
+        <header className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
+          <div className="flex items-center gap-5">
+            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-2xl shadow-orange-500/20 transform hover:rotate-12 transition-transform cursor-pointer">
+              <span className="font-black text-3xl text-white">S</span>
             </div>
             <div>
-              <h1 className="font-black text-2xl uppercase tracking-tighter text-white">Gerenciador de DNS</h1>
-              <p className="text-gray-500 text-sm font-medium">Clube67 — Automação Hostinger</p>
+              <h1 className="font-black text-3xl uppercase tracking-tighter text-white">Subdominio<span className="text-orange-500">.</span>Manager</h1>
+              <p className="text-gray-500 text-sm font-bold uppercase tracking-widest">Identidade Visual & DNS</p>
             </div>
           </div>
-          
-          {hasKey && (
-            <div className="flex items-center gap-2 bg-gray-900/50 border border-gray-800 px-4 py-2 rounded-2xl">
-              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-              <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">API Hostinger Ativa</span>
-            </div>
-          )}
-        </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-          
-          {/* COLUNA ESQUERDA: CONFIG & LISTA */}
-          <div className="lg:col-span-5 space-y-8">
-            
-            {/* CONFIG CARD */}
-            {!hasKey && (
-              <div className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 backdrop-blur-sm">
-                <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-4">Configuração Necessária</h2>
-                <div className="space-y-4">
-                  <input
-                    type="password"
-                    placeholder="Token de API Hostinger..."
-                    value={apiKeyInput}
-                    onChange={e => setApiKeyInput(e.target.value)}
-                    className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all placeholder:text-gray-700"
-                  />
-                  <button
-                    onClick={saveKey}
-                    disabled={saving || !apiKeyInput.trim()}
-                    className="w-full bg-white text-black font-black py-4 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-500 hover:text-white transition-all disabled:opacity-20"
-                  >
-                    {saving ? 'Configurando...' : 'Ativar Sistema'}
-                  </button>
-                </div>
-              </div>
-            )}
-
-            {/* LISTA DE DOMÍNIOS */}
+          <div className="flex items-center gap-4">
             {hasKey && (
-              <div className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 backdrop-blur-sm flex flex-col min-h-[400px]">
-                <div className="flex items-center justify-between mb-6">
-                  <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500">Meus Domínios</h2>
-                  <button 
-                    onClick={fetchDomains}
-                    disabled={loadingDomains}
-                    className="text-[10px] font-bold text-orange-500 hover:text-orange-400 transition-colors uppercase tracking-widest"
+              <button 
+                onClick={syncDomains}
+                disabled={loadingDomains}
+                className="group flex items-center gap-3 bg-gray-900/50 hover:bg-orange-500 border border-gray-800 hover:border-orange-400 px-6 py-3 rounded-2xl transition-all"
+              >
+                <div className={`w-2 h-2 rounded-full ${loadingDomains ? 'bg-orange-400 animate-spin' : 'bg-green-500 group-hover:bg-white'}`} />
+                <span className="text-xs font-black uppercase tracking-widest group-hover:text-white">Sincronizar Hostinger</span>
+              </button>
+            )}
+            <div className="bg-gray-900/50 border border-gray-800 px-4 py-3 rounded-2xl">
+              <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">v{APP_VERSION}</span>
+            </div>
+          </div>
+        </header>
+
+        {/* ALERTS */}
+        {(error || success) && (
+          <div className="mb-8 animate-in fade-in slide-in-from-top-4 duration-300">
+            {error && <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-5 rounded-3xl text-sm font-bold">🚨 {error}</div>}
+            {success && <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-5 rounded-3xl text-sm font-bold">✅ {success}</div>}
+          </div>
+        )}
+
+        {!hasKey && hasKey !== null && (
+          <div className="max-w-xl mx-auto bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-10 backdrop-blur-xl text-center">
+            <h2 className="text-xl font-black mb-6">Configuração da API</h2>
+            <p className="text-gray-400 text-sm mb-8">Insira sua chave de API da Hostinger para começar a gerenciar seus domínios e identidades visuais.</p>
+            <div className="space-y-4">
+              <input
+                type="password"
+                placeholder="Token de API Hostinger..."
+                value={apiKeyInput}
+                onChange={e => setApiKeyInput(e.target.value)}
+                className="w-full bg-gray-950/50 border border-gray-800 rounded-2xl px-6 py-5 text-sm focus:outline-none focus:border-orange-500 transition-all text-center"
+              />
+              <button
+                onClick={saveKey}
+                disabled={saving || !apiKeyInput.trim()}
+                className="w-full bg-white text-black font-black py-5 rounded-2xl text-xs uppercase tracking-[0.2em] hover:bg-orange-500 hover:text-white transition-all disabled:opacity-20"
+              >
+                {saving ? 'Validando...' : 'Ativar Sistema'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {hasKey && (
+          <div className="space-y-12">
+            
+            {/* DOMAIN CARDS GRID */}
+            <section>
+              <div className="flex items-center justify-between mb-8">
+                <h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Selecione um Domínio</h2>
+                <div className="h-px bg-gray-800 flex-1 ml-6" />
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                {domains.map((dom) => (
+                  <button
+                    key={dom.id}
+                    onClick={() => setSelectedDomain(dom)}
+                    className={`group relative overflow-hidden p-8 rounded-[2rem] border transition-all text-left ${
+                      selectedDomain?.id === dom.id 
+                        ? 'bg-orange-500 border-orange-400 shadow-2xl shadow-orange-500/20' 
+                        : 'bg-gray-900/40 border-gray-800 hover:border-gray-600'
+                    }`}
                   >
-                    {loadingDomains ? 'Atualizando...' : 'Sincronizar'}
+                    <div className={`absolute -right-4 -bottom-4 w-24 h-24 rounded-full blur-2xl transition-all ${
+                      selectedDomain?.id === dom.id ? 'bg-white/20' : 'bg-gray-800/20 group-hover:bg-orange-500/10'
+                    }`} />
+                    
+                    <div className={`w-10 h-10 rounded-xl mb-6 flex items-center justify-center font-black text-lg ${
+                      selectedDomain?.id === dom.id ? 'bg-white text-orange-500' : 'bg-gray-800 text-gray-400 group-hover:text-orange-500'
+                    }`}>
+                      {dom.name.charAt(0).toUpperCase()}
+                    </div>
+                    
+                    <h3 className={`font-black text-lg leading-tight mb-2 ${selectedDomain?.id === dom.id ? 'text-white' : 'text-gray-200'}`}>
+                      {dom.name}
+                    </h3>
+                    <p className={`text-[10px] font-bold uppercase tracking-widest ${selectedDomain?.id === dom.id ? 'text-orange-100' : 'text-gray-500'}`}>
+                      ID: {dom.hostinger_id || 'LOCAL'}
+                    </p>
                   </button>
+                ))}
+              </div>
+            </section>
+
+            {/* SELECTED DOMAIN VIEW */}
+            {selectedDomain && (
+              <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 animate-in fade-in slide-in-from-bottom-8 duration-500">
+                
+                {/* SUBDOMAINS LIST */}
+                <div className="lg:col-span-8 space-y-6">
+                  <div className="flex items-center justify-between">
+                    <h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Subdomínios de {selectedDomain.name}</h2>
+                    <span className="bg-gray-900 border border-gray-800 px-3 py-1 rounded-full text-[10px] font-bold text-gray-400">
+                      {subdomains.length} registros
+                    </span>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {subdomains.map((sub) => (
+                      <div key={sub.id} className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 hover:border-gray-700 transition-all group">
+                        <div className="flex items-start justify-between mb-4">
+                          <div className="flex items-center gap-3">
+                            {sub.logo_url ? (
+                              <img src={sub.logo_url} className="w-10 h-10 rounded-xl object-cover bg-white" alt="Logo" />
+                            ) : (
+                              <div className="w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center text-xs font-black text-gray-500">
+                                {sub.subdomain.charAt(0).toUpperCase()}
+                              </div>
+                            )}
+                            <div>
+                              <h4 className="font-black text-sm text-white">{sub.full_domain}</h4>
+                              <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Aponta para: {sub.value}</p>
+                            </div>
+                          </div>
+                          <button 
+                            onClick={() => openBranding(sub)}
+                            className="w-8 h-8 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-orange-500 transition-colors"
+                          >
+                            🎨
+                          </button>
+                        </div>
+                        
+                        <div className="flex gap-2">
+                          <div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.primary_color || '#FF6B00' }} />
+                          <div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.secondary_color || '#1A1A1A' }} />
+                        </div>
+                      </div>
+                    ))}
+                    
+                    {/* ADD NEW BOX */}
+                    <div className="border-2 border-dashed border-gray-800 rounded-3xl p-6 flex flex-col items-center justify-center text-center group hover:border-orange-500/50 transition-all">
+                      <div className="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center mb-3 group-hover:bg-orange-500 transition-colors">
+                        <span className="font-black text-gray-500 group-hover:text-white">+</span>
+                      </div>
+                      <p className="text-[10px] font-black uppercase tracking-widest text-gray-600">Novo Subdomínio</p>
+                    </div>
+                  </div>
                 </div>
 
-                <div className="flex-1 space-y-2 overflow-y-auto max-h-[500px] pr-2 custom-scrollbar">
-                  {domains.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-gray-800/50 rounded-3xl">
-                      <p className="text-gray-600 text-xs text-center px-10">Clique em sincronizar para listar seus domínios da Hostinger.</p>
-                    </div>
-                  ) : (
-                    domains.map((d, i) => (
+                {/* CREATE FORM */}
+                <div className="lg:col-span-4">
+                  <div className="bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-8 sticky top-10 backdrop-blur-xl">
+                    <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-8">Criar Subdomínio</h2>
+                    <form onSubmit={createSubdomain} className="space-y-6">
+                      <div className="space-y-2">
+                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Subdomínio</label>
+                        <div className="flex items-center bg-gray-950 border border-gray-800 rounded-2xl pr-5 overflow-hidden focus-within:border-orange-500 transition-all">
+                          <input
+                            placeholder="ex: app"
+                            value={newSubdomain}
+                            onChange={e => setNewSubdomain(e.target.value)}
+                            className="flex-1 bg-transparent px-5 py-4 text-sm focus:outline-none"
+                          />
+                          <span className="text-xs font-bold text-gray-600">.{selectedDomain.name}</span>
+                        </div>
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Destino (IPv4)</label>
+                        <input
+                          placeholder="0.0.0.0"
+                          value={newValue}
+                          onChange={e => setNewValue(e.target.value)}
+                          className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
+                        />
+                      </div>
                       <button
-                        key={i}
-                        onClick={() => setSelectedDomain(d.domain)}
-                        className={`w-full flex items-center justify-between p-4 rounded-2xl transition-all border ${
-                          selectedDomain === d.domain 
-                            ? 'bg-orange-500/10 border-orange-500/50 text-white' 
-                            : 'bg-gray-950/50 border-gray-800/50 text-gray-400 hover:border-gray-700'
-                        }`}
+                        type="submit"
+                        disabled={creating || !newSubdomain || !newValue}
+                        className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-600 shadow-xl shadow-orange-500/20 transition-all disabled:opacity-20"
                       >
-                        <span className="text-sm font-bold truncate">{d.domain}</span>
-                        <div className={`w-1.5 h-1.5 rounded-full ${selectedDomain === d.domain ? 'bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.6)]' : 'bg-gray-800'}`} />
+                        {creating ? 'Criando...' : 'Confirmar Registro'}
                       </button>
-                    ))
-                  )}
+                    </form>
+                  </div>
                 </div>
+
               </div>
             )}
           </div>
+        )}
 
-          {/* COLUNA DIREITA: FORMULÁRIO DE CRIAÇÃO */}
-          <div className="lg:col-span-7">
-            <div className="bg-gray-900/40 border border-gray-800 rounded-3xl p-8 backdrop-blur-sm h-full relative overflow-hidden">
-              <div className="absolute top-0 right-0 p-8 opacity-5">
-                <span className="text-8xl font-black">DNS</span>
+        {/* BRANDING MODAL */}
+        {editingBranding && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-6 backdrop-blur-sm bg-black/60">
+            <div className="bg-gray-900 border border-gray-800 w-full max-w-2xl rounded-[2.5rem] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200">
+              <div className="p-8 border-b border-gray-800 flex items-center justify-between bg-gray-900/50">
+                <div>
+                  <h2 className="font-black text-xl text-white">Identidade Visual</h2>
+                  <p className="text-gray-500 text-[10px] font-bold uppercase tracking-widest">{editingBranding.full_domain}</p>
+                </div>
+                <button onClick={() => setEditingBranding(null)} className="text-gray-500 hover:text-white transition-colors text-2xl font-black">×</button>
+              </div>
+              
+              <div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 max-h-[70vh] overflow-y-auto custom-scrollbar">
+                <div className="space-y-6">
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Título da Página</label>
+                    <input
+                      value={brandingForm.title}
+                      onChange={e => setBrandingForm({...brandingForm, title: e.target.value})}
+                      className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:border-orange-500 transition-all"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Descrição (Meta)</label>
+                    <textarea
+                      rows={3}
+                      value={brandingForm.description}
+                      onChange={e => setBrandingForm({...brandingForm, description: e.target.value})}
+                      className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:border-orange-500 transition-all"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">URL do Logo</label>
+                    <input
+                      value={brandingForm.logo_url}
+                      onChange={e => setBrandingForm({...brandingForm, logo_url: e.target.value})}
+                      className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:border-orange-500 transition-all"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-6">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Cor Primária</label>
+                      <input
+                        type="color"
+                        value={brandingForm.primary_color}
+                        onChange={e => setBrandingForm({...brandingForm, primary_color: e.target.value})}
+                        className="w-full h-12 bg-gray-950 border border-gray-800 rounded-2xl p-1 cursor-pointer"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Cor Secundária</label>
+                      <input
+                        type="color"
+                        value={brandingForm.secondary_color}
+                        onChange={e => setBrandingForm({...brandingForm, secondary_color: e.target.value})}
+                        className="w-full h-12 bg-gray-950 border border-gray-800 rounded-2xl p-1 cursor-pointer"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Favicon URL</label>
+                    <input
+                      value={brandingForm.favicon_url}
+                      onChange={e => setBrandingForm({...brandingForm, favicon_url: e.target.value})}
+                      className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:border-orange-500 transition-all"
+                    />
+                  </div>
+
+                  {/* PREVIEW */}
+                  <div className="p-4 bg-gray-950 border border-gray-800 rounded-3xl mt-4">
+                    <p className="text-[10px] font-black uppercase tracking-widest text-gray-700 mb-3 text-center">Preview</p>
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-2xl border border-white/5">
+                      <div className="w-8 h-8 rounded-lg" style={{ backgroundColor: brandingForm.primary_color }} />
+                      <div className="w-8 h-8 rounded-lg" style={{ backgroundColor: brandingForm.secondary_color }} />
+                      <span className="text-[10px] font-bold text-gray-400">Paleta de Cores</span>
+                    </div>
+                  </div>
+                </div>
               </div>
 
-              <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-8">Novo Subdomínio</h2>
-
-              <form onSubmit={createSubdomain} className="space-y-8">
-                <div className="space-y-2">
-                  <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Domínio Selecionado</label>
-                  <div className="bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm font-bold text-gray-300">
-                    {selectedDomain || 'Selecione um domínio na lista ao lado'}
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  <div className="space-y-2">
-                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Subdomínio (Nome)</label>
-                    <input
-                      placeholder="ex: app, bot, api"
-                      value={newSubdomain}
-                      onChange={e => setNewSubdomain(e.target.value)}
-                      className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all placeholder:text-gray-800"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Destino (IPv4)</label>
-                    <input
-                      placeholder="0.0.0.0"
-                      value={newValue}
-                      onChange={e => setNewValue(e.target.value)}
-                      className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500/50 transition-all placeholder:text-gray-800"
-                    />
-                  </div>
-                </div>
-
-                <div className="pt-4">
-                  <button
-                    type="submit"
-                    disabled={creating || !selectedDomain || !newSubdomain || !newValue}
-                    className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-sm uppercase tracking-widest hover:bg-orange-600 shadow-lg shadow-orange-500/20 transition-all disabled:opacity-20 disabled:grayscale"
-                  >
-                    {creating ? 'Processando na Hostinger...' : 'Criar Registro DNS'}
-                  </button>
-                </div>
-
-                {error && (
-                  <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-2xl text-xs font-bold animate-shake">
-                    🚨 {error}
-                  </div>
-                )}
-
-                {success && (
-                  <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-4 rounded-2xl text-xs font-bold">
-                    ✅ {success}
-                  </div>
-                )}
-              </form>
+              <div className="p-8 bg-gray-900/50 border-t border-gray-800 flex gap-4">
+                <button 
+                  onClick={() => setEditingBranding(null)}
+                  className="flex-1 bg-gray-800 hover:bg-gray-700 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest transition-all"
+                >
+                  Cancelar
+                </button>
+                <button 
+                  onClick={saveBranding}
+                  className="flex-1 bg-orange-500 hover:bg-orange-600 text-white font-black py-4 rounded-2xl text-xs uppercase tracking-widest transition-all shadow-lg shadow-orange-500/20"
+                >
+                  Salvar Identidade
+                </button>
+              </div>
             </div>
           </div>
-        </div>
+        )}
 
-        {/* FOOTER */}
-        <div className="flex items-center justify-center gap-4 pt-4">
-          <div className="h-px bg-gray-800 flex-1" />
-          <p className="text-[10px] font-bold text-gray-600 uppercase tracking-[0.2em] whitespace-nowrap">
-            <span className="bg-gray-900 border border-gray-800 px-2 py-1 rounded-md text-gray-400 mr-2">{APP_VERSION}</span>
-            subdominio.clube67.com — acesso restrito VPN
-          </p>
-          <div className="h-px bg-gray-800 flex-1" />
-        </div>
       </div>
 
       <style>{`
         .custom-scrollbar::-webkit-scrollbar { width: 4px; }
         .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
         .custom-scrollbar::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 10px; }
-        @keyframes shake {
-          0%, 100% { transform: translateX(0); }
-          25% { transform: translateX(-4px); }
-          75% { transform: translateX(4px); }
-        }
-        .animate-shake { animation: shake 0.2s ease-in-out 0s 2; }
       `}</style>
     </div>
   );