{(items || []).map((chip, i) => (
{chip}
))}
setVal(e.target.value)} onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), add())} placeholder={placeholder}
style={{ flex: 1, fontSize: 12, padding: '6px 10px', borderRadius: 6, background: 'var(--bg-sunken)', border: '1px solid var(--border)', color: 'var(--text)', outline: 'none' }} />
);
};
// ─── Badge ───────────────────────────────────────────────────────────────────
const BlockBadge = ({ badge }) => {
const cfg = BADGE_CFG[badge] || BADGE_CFG['MARKETING'];
return (
A carregar...
;
return (
{marcas.map(m => {
const pct = calcMarcaPct(m);
const scfg = MARCAS_STATUS_CFG[m.estrategia_status || 'rascunho'] || MARCAS_STATUS_CFG.rascunho;
return (
onSelect(m)}
style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderRadius: 10, cursor: 'pointer', background: 'var(--bg-sunken)', border: '1px solid var(--border)', transition: 'border-color 0.15s' }}
onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
{m.name}
{m.estrategia_updated_at && (
Actualizado {new Date(m.estrategia_updated_at).toLocaleDateString('pt-PT', { day: '2-digit', month: 'short', year: 'numeric' })}
)}
{pct}%
= 80 ? '#22c55e' : pct >= 40 ? '#f59e0b' : 'var(--accent)', transition: 'width 0.4s' }} />
{scfg.label}
);
})}
);
};
// ─── Form de Marca ─────────────────────────────────────────────────────────────
const MarcaForm = ({ brandId, brandName, brandColor, onBack }) => {
const [activeBloco, setActiveBloco] = React.useState('b1');
const [data, setData] = React.useState(null);
const [b1, setB1] = React.useState(EMPTY_B1);
const [b2, setB2] = React.useState(EMPTY_B2);
const [b3, setB3] = React.useState([]);
const [b4, setB4] = React.useState(EMPTY_B4);
const [b5, setB5] = React.useState([]);
const [canais, setCanais] = React.useState([]);
const [saving, setSaving] = React.useState(false);
const [saved, setSaved] = React.useState(false);
const [generating, setGenerating] = React.useState(null);
const [genError, setGenError] = React.useState(null);
const saveTimers = React.useRef({});
React.useEffect(() => {
fetch(`/api/marketing/marcas/${brandId}`).then(r => r.json()).then(d => {
setData(d);
if (d.block1_identity) setB1({ ...EMPTY_B1, ...d.block1_identity });
if (d.block2_icp) setB2({ ...EMPTY_B2, ...d.block2_icp });
if (d.block3_personas) setB3(d.block3_personas);
if (d.block4_tom_voz) setB4({ ...EMPTY_B4, ...d.block4_tom_voz });
if (d.block5_concorrentes) setB5(d.block5_concorrentes);
if (d.canais_preferidos?.length) setCanais(d.canais_preferidos);
});
}, [brandId]);
const autoSave = React.useCallback((blockKey, blockData) => {
clearTimeout(saveTimers.current[blockKey]);
saveTimers.current[blockKey] = setTimeout(async () => {
setSaving(true); setSaved(false);
try {
await fetch(`/api/marketing/marcas/${brandId}/blocks/${blockKey}`, {
method: 'PUT', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ data: blockData }),
});
setSaved(true); setTimeout(() => setSaved(false), 2000);
} finally { setSaving(false); }
}, 800);
}, [brandId]);
React.useEffect(() => { if (data) autoSave('block1_identity', b1); }, [b1]);
React.useEffect(() => { if (data) autoSave('block2_icp', b2); }, [b2]);
React.useEffect(() => { if (data) autoSave('block3_personas', b3); }, [b3]);
React.useEffect(() => { if (data) autoSave('block4_tom_voz', b4); }, [b4]);
React.useEffect(() => { if (data) autoSave('block5_concorrentes', b5); }, [b5]);
React.useEffect(() => { if (data) autoSave('canais_preferidos', canais); }, [canais]);
async function generate(type) {
const endpointMap = { icp: 'generate-icp', personas: 'generate-personas', tom: 'generate-tom', competitors: 'analyze-competitors' };
setGenerating(type); setGenError(null);
try {
const res = await fetch(`/api/marketing/marcas/${brandId}/${endpointMap[type]}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}) });
const json = await res.json();
if (!res.ok) { setGenError(json.error || 'Erro na geração'); return; }
if (type === 'icp' && json.icp) { setB2(p => ({ ...p, ...json.icp })); setActiveBloco('b2'); }
if (type === 'personas' && json.personas) { setB3(json.personas); setActiveBloco('b3'); }
if (type === 'tom' && json.tom) { setB4(p => ({ ...p, ...json.tom })); setActiveBloco('b4'); }
if (type === 'competitors' && json.concorrentes) { setB5(json.concorrentes); setActiveBloco('b5'); }
} catch { setGenError('Erro de rede'); }
finally { setGenerating(null); }
}
async function handleSubmit() {
await fetch(`/api/marketing/marcas/${brandId}/submit`, { method: 'POST' });
}
if (!data) return
A carregar...
;
const statusCfg = MARCAS_STATUS_CFG[data.status || 'rascunho'] || MARCAS_STATUS_CFG.rascunho;
return (
{/* Header */}
MARKETING · MARCAS E ESTRATÉGIA
{brandName}
{statusCfg.label}
{saved && Guardado}
{saving && A guardar...}
{/* Tabs dos blocos */}
{BLOCOS.map((b, i) => (
))}
{/* Body */}
{genError && (
{genError}
)}
{/* B1 — IDENTIDADE */}
{activeBloco === 'b1' && (
setB1(p => ({ ...p, mission: e.target.value }))} placeholder="O propósito da marca..." />
setB1(p => ({ ...p, vision: e.target.value }))} placeholder="Onde queremos estar..." />
setB1(p => ({ ...p, positioning_narrative: e.target.value }))} placeholder="Como nos diferenciamos..." />
setB1(p => ({ ...p, usps_marca: v }))} placeholder="Adicionar USP..." />
setB1(p => ({ ...p, values: v }))} placeholder="Adicionar valor..." />
{CANAIS_LISTA.map(c => (
))}
)}
{/* B2 — ICP */}
{activeBloco === 'b2' && (
setB2(p => ({ ...p, sectors: v }))} placeholder="Ex: Artes gráficas..." />
setB2(p => ({ ...p, company_size: v }))} placeholder="Ex: PME 10-50..." />
setB2(p => ({ ...p, geo: v }))} placeholder="Ex: Portugal, Espanha..." />
setB2(p => ({ ...p, decision_makers: v }))} placeholder="Ex: Director de produção..." />
setB2(p => ({ ...p, budget_range: { ...p.budget_range, min: Number(e.target.value) } }))} />
setB2(p => ({ ...p, budget_range: { ...p.budget_range, max: Number(e.target.value) } }))} />
setB2(p => ({ ...p, purchase_cycle: v }))} options={[['short','Curto (<3m)'],['medium','Médio (3-12m)'],['long','Longo (>12m)']]} />
setB2(p => ({ ...p, maturity: v }))} options={[['early','Emergente'],['growing','Em crescimento'],['mature','Maduro']]} />
)}
{/* B3 — PERSONAS */}
{activeBloco === 'b3' && (
{b3.length === 0 &&
Gera personas com AI ou adiciona manualmente.
}
{b3.map((p, idx) => (
Persona {idx + 1}{p.name ? ` · ${p.name}` : ''}
setB3(prev => prev.map((x, i) => i === idx ? { ...x, name: e.target.value } : x))} placeholder="Ana Rodrigues" />
setB3(prev => prev.map((x, i) => i === idx ? { ...x, role: e.target.value } : x))} />
setB3(prev => prev.map((x, i) => i === idx ? { ...x, age_range: e.target.value } : x))} placeholder="38-48" />
setB3(prev => prev.map((x, i) => i === idx ? { ...x, seniority: v } : x))} options={[['mid','Mid'],['senior','Senior'],['director','Director'],['c-level','C-Level']]} />
setB3(prev => prev.map((x, i) => i === idx ? { ...x, decision_weight: v } : x))} options={[['high','Alto'],['medium','Médio'],['low','Baixo']]} />
setB3(prev => prev.map((x, i) => i === idx ? { ...x, goals: v } : x))} placeholder="Objectivo..." />
setB3(prev => prev.map((x, i) => i === idx ? { ...x, pains: v } : x))} placeholder="Dor..." />
setB3(prev => prev.map((x, i) => i === idx ? { ...x, objections: v } : x))} placeholder="Objecção..." />
))}
)}
{/* B4 — TOM & VOZ */}
{activeBloco === 'b4' && (
setB4(p => ({ ...p, tone: e.target.value }))} placeholder="Ex: Técnico, directo e confiante..." />
setB4(p => ({ ...p, attributes: v }))} placeholder="Atributo..." />
setB4(p => ({ ...p, do: v }))} placeholder="Boa prática..." />
setB4(p => ({ ...p, dont: v }))} placeholder="A evitar..." />
setB4(p => ({ ...p, reference_brands: v }))} placeholder="Ex: Bosch..." />
setB4(p => ({ ...p, vocabulary_avoid: v }))} placeholder="Ex: Revolucionário..." />
)}
{/* B5 — CONCORRENTES */}
{activeBloco === 'b5' && (
{b5.length === 0 &&
Clica em "Analisar com AI" para identificar concorrentes.
}
{b5.map((c, idx) => (
{c.name || `Concorrente ${idx + 1}`}
setB5(p => p.map((x, i) => i === idx ? { ...x, name: e.target.value } : x))} />
setB5(p => p.map((x, i) => i === idx ? { ...x, website: e.target.value } : x))} placeholder="concorrente.com" />
setB5(p => p.map((x, i) => i === idx ? { ...x, positioning: e.target.value } : x))} />
setB5(p => p.map((x, i) => i === idx ? { ...x, strengths: v } : x))} placeholder="Força..." />
setB5(p => p.map((x, i) => i === idx ? { ...x, weaknesses: v } : x))} placeholder="Fraqueza..." />
setB5(p => p.map((x, i) => i === idx ? { ...x, differentiation_vs_us: e.target.value } : x))} />
))}
)}
);
};
function SectionH({ title, badge, children }) {
return (
{title}
{children &&
{children}
}
);
}
// ─── MktMarcasScreen ──────────────────────────────────────────────────────────
const MktMarcasScreen = () => {
const [selected, setSelected] = React.useState(null);
if (selected) {
return
setSelected(null)} />;
}
return (
MARKETING · MARCAS E ESTRATÉGIA
Marcas e Estratégia
Repositório estratégico · ICP · Personas · Tom de voz · Concorrentes
);
};
window.MktMarcasScreen = MktMarcasScreen;