{data.brand||'Minha marca'}
);
}
function HeroBlock({ data, page, st }) {
return (
{['Home','Sobre','Portfólio','Contato'].map(l => (
{l}
))}
{data.headline||'Título principal aqui'}
{data.sub||'Subtítulo descritivo da sua página'}
{data.cta && (
{data.cta}
)}
{data.heading &&
);
}
function ImagemBlock({ data, st }) {
return (
{data.heading}
}{data.body||'Texto aqui...'}
{data.src
? 
:
}
{data.caption &&
);
}
function VideoBlock({ data, st }) {
return (
🖼
Cole a URL da imagem nas opções do bloco
{data.caption}
}
{data.heading &&
);
}
function PortfolioBlock({ data, st }) {
const items = (data.items||'Projeto A, Projeto B, Projeto C, Projeto D').split(',').map(s=>s.trim()).filter(Boolean);
const COLORS = ['linear-gradient(135deg,#1D39C4,#36CFC9)','linear-gradient(135deg,#FA541C,#FADB14)','linear-gradient(135deg,#7C3AED,#FA541C)','linear-gradient(135deg,#22C55E,#1890FF)'];
return (
{data.heading}
}
{items.map((item, i) => (
))}
{item}
{data.heading &&
);
}
function SobreBlock({ data, st }) {
return (
{data.heading}
}
{items.slice(0,4).map((item, i) => (
))}
{item}
Ver projeto →
{data.heading &&
{data.heading}
}{data.body||'Conte sobre você ou sua empresa...'}
✦
{items.map((item, i) => (
);
}
function TimelineBlock({ data, st }) {
const items = (data.items||'2018 Fundação, 2020 Expansão, 2024 Novos mercados').split(',').map(s=>s.trim());
return (
0?`1px solid ${st.cardBorder}`:'none', padding:'24px 0' }}>
))}
{item.value}
{item.label}
{data.heading &&
);
}
function DepoimentosBlock({ data, st }) {
const ITEMS = [
{ name:'Ana Lima', txt:'Excelente trabalho! Superou todas as expectativas.' },
{ name:'Carlos Mendes', txt:'Profissionalismo e criatividade incríveis.' },
];
return (
{data.heading}
}
{items.map((item, i) => (
))}
{item}
{data.heading &&
);
}
function CTABlock({ data, st }) {
return (
{data.heading}
}
{ITEMS.map((d, i) => (
))}
"{d.txt}"
— {d.name}
{data.heading||'Vamos conversar?'}
{data.sub &&{data.sub}
}
{data.cta||'Entrar em contato'}
{data.brand||page.t.split('·')[0].trim()}
{data.copy||'© 2026 Todos os direitos reservados.'}
);
}
function BlockPreview({ block, page, st, ps }) {
const data = block.data || {};
if (block.type === 'Menu / Logo' || block.type === 'Header') return
{block.type} · bloco
);
}
// ─── Visualizar Página Modal ──────────────────────────────────────────────────
function VisualizarPaginaModal({ page, onClose, onEdit, onStatusChange }) {
const ps = PAGE_STYLES.find(s => s.id === (page.estilo||'moderno')) || PAGE_STYLES[0];
const isDark = page.estilo !== 'minimalista';
const st = {
fg: ps.textC,
accent: ps.accent,
btnBg: ps.btnBg,
cardBg: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
cardBorder: isDark ? 'rgba(255,255,255,0.09)' : 'rgba(0,0,0,0.10)',
mutedFg: isDark ? 'rgba(255,255,255,0.48)' : 'rgba(0,0,0,0.42)',
};
const [copied, setCopied] = useState(false);
const [viewDevice, setViewDevice] = useState('desktop');
const DEVICES = [{ id:'desktop', icon:'▣', w:null }, { id:'tablet', icon:'▭', w:768 }, { id:'mobile', icon:'▯', w:390 }];
const STATUS_CFG = {
publicado: { label:'Publicado', dot:'#22C55E', nextStatus:'privado', nextLabel:'Tornar privado' },
privado: { label:'Privado', dot:'#1D39C4', nextStatus:'publicado', nextLabel:'Publicar' },
rascunho: { label:'Rascunho', dot:'#8B8B9B', nextStatus:'publicado', nextLabel:'Publicar' },
};
const sc = STATUS_CFG[page.status] || STATUS_CFG.rascunho;
function copyLink() {
window.__toast?.('Link copiado!', { tone:'success' });
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}
function toggleStatus() {
const tone = sc.nextStatus === 'publicado' ? 'success' : sc.nextStatus === 'privado' ? 'brand' : 'neutral';
onStatusChange?.({ ...page, status: sc.nextStatus, tone });
window.__toast?.(`Página ${sc.nextStatus === 'publicado' ? 'publicada' : 'tornada privada'}!`, { tone: sc.nextStatus === 'publicado' ? 'success' : 'brand' });
}
return (
{/* Browser bar */}
);
}
// ─── Visual Editor (full-screen) ─────────────────────────────────────────────
function VisualEditorView({ page, onBack, onSave }) {
const pt = PAGE_TYPES.find(p => p.kind === page.kind) || PAGE_TYPES[0];
const [blocks, setBlocks] = useState(() => (page.blocks?.length ? page.blocks : defaultBlocks(page.kind)).map(b => ({ ...b, data: b.data || { ...(BLOCK_DEFAULTS[b.type]||{}) } })));
const [selectedId, setSelectedId] = useState(null);
const [estilo, setEstilo] = useState(page.estilo || 'moderno');
const [layout, setLayout] = useState('Empilhado');
const [title, setTitle] = useState(page.t);
const [visibility, setVisibility] = useState(page.status);
const [jsonInput, setJsonInput] = useState('');
const [slug, setSlug] = useState(page.url.replace(pt.base, ''));
const [showContact, setShowContact] = useState(true);
const [emailNotif, setEmailNotif] = useState(true);
const [duration, setDuration] = useState('60');
const [instagram, setInstagram] = useState('');
const [site, setSite] = useState('');
const [settingsTab, setSettingsTab] = useState('blocos');
const [previewDevice, setPreviewDevice] = useState('desktop');
const ps = PAGE_STYLES.find(s => s.id === estilo) || PAGE_STYLES[0];
const isDark = estilo !== 'minimalista';
const st = {
fg: ps.textC,
accent: ps.accent,
btnBg: ps.btnBg,
cardBg: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
cardBorder: isDark ? 'rgba(255,255,255,0.09)' : 'rgba(0,0,0,0.10)',
mutedFg: isDark ? 'rgba(255,255,255,0.48)' : 'rgba(0,0,0,0.42)',
};
const IS = { width:'100%', padding:'7px 10px', borderRadius:7, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-primary)', fontFamily:'inherit', fontSize:12, outline:'none', boxSizing:'border-box' };
const LS = { fontSize:11, color:'var(--fg-muted)', display:'block', marginBottom:5 };
const visOpts = [
{ v:'publicado', l:'Público' },
{ v:'privado', l:'Privado' },
{ v:'rascunho', l:'Rascunho' },
];
function addBlock(type) {
const nb = { id: type.toLowerCase().replace(/[\s\/]+/g, '-') + '-' + Date.now(), type, data: { ...(BLOCK_DEFAULTS[type]||{}) } };
setBlocks(prev => [...prev, nb]);
setSelectedId(nb.id);
}
function removeBlock(id) {
setBlocks(prev => {
const next = prev.filter(b => b.id !== id);
if (selectedId === id) setSelectedId(null);
return next;
});
}
function updateBlockData(blockId, key, value) {
setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, data: { ...(b.data||{}), [key]: value } } : b));
}
function loadTemplate() {
try {
const parsed = JSON.parse(jsonInput);
if (Array.isArray(parsed)) {
setBlocks(parsed.map((b, i) => ({ id:(b.id||b.type||'block')+'-'+i, type:b.type||b.id||'Hero', data:b.data||{ ...(BLOCK_DEFAULTS[b.type]||{}) } })));
window.__toast?.('Template carregado!', { tone:'success' });
}
} catch { window.__toast?.('JSON inválido', { tone:'danger' }); }
}
function handleSave(publish) {
const finalStatus = publish ? 'publicado' : visibility;
const tone = finalStatus==='publicado'?'success':finalStatus==='privado'?'brand':'neutral';
const finalSlug = slug.trim() || slugify(title || page.t);
onSave({ ...page, t:title.trim()||page.t, url:`${pt.base}${finalSlug}`, estilo, status:finalStatus, tone, blocks });
}
const [dragIdx, setDragIdx] = useState(null);
const [overIdx, setOverIdx] = useState(null);
function reorderBlocks(fromIdx, toIdx) {
if (fromIdx === toIdx) return;
setBlocks(prev => {
const next = [...prev];
const [moved] = next.splice(fromIdx, 1);
next.splice(toIdx, 0, moved);
return next;
});
}
const DEVICE_CFG = [{ id:'desktop', icon:'▣', w:null }, { id:'tablet', icon:'▭', w:768 }, { id:'mobile', icon:'▯', w:390 }];
const selBlock = blocks.find(b => b.id === selectedId);
const blockFields = selBlock ? (BLOCK_FIELDS[selBlock.type] || []) : [];
const SIDEBAR_BTN = (active, label, onClick) => (
);
return (
e.stopPropagation()} style={{ width:'min(860px,100%)', marginBottom:12, display:'flex', alignItems:'center', gap:10, background:'var(--bg-surface)', border:'1px solid var(--border-strong)', borderRadius:12, padding:'10px 16px', flexShrink:0 }}>
{/* Page frame */}
{page.url}
{/* Device toggle */}
{DEVICES.map(d => (
))}
{sc.label}
e.stopPropagation()} style={{ width: DEVICES.find(d=>d.id===viewDevice)?.w ? DEVICES.find(d=>d.id===viewDevice).w : 'min(860px,100%)', background:ps.bg, borderRadius:16, border:'1px solid rgba(255,255,255,0.07)', overflow:'hidden', boxShadow:'0 32px 80px rgba(0,0,0,0.65)', marginBottom:24, transition:'width 300ms ease', flexShrink:0 }}>
{/* Header */}
{/* Body */}
{/* Footer */}
{page.kind}
{page.t}
{page.url}
Página criada com inBrivvo
{/* ── Top bar ── */}
{/* ── Main ── */}
Editor Visual
{title||page.t} — {pt.label}
{/* Left panel */}
{/* Tab switcher */}
{SIDEBAR_BTN(settingsTab==='blocos', 'Blocos', () => { setSettingsTab('blocos'); if(settingsTab!=='blocos') setSelectedId(null); })}
{SIDEBAR_BTN(settingsTab==='config', 'Configurações', () => setSettingsTab('config'))}
{/* ── Block editor panel (when a block is selected) ── */}
{settingsTab === 'blocos' && selBlock && (
{blockFields.length > 0
? blockFields.map(f => (
{selBlock.type}
Editando bloco
{f.type === 'textarea'
?