// mb-blog.jsx — Blog Morar Bem: lista de posts + detalhe + redesign editorial // ── Dados ───────────────────────────────────────────────────── const BLOG_MOCK_CATS = [ { id: "bc1", name: "Decoração", color: "#F59E0B" }, { id: "bc2", name: "Gastronomia", color: "#EF4444" }, { id: "bc3", name: "Imóveis", color: "#3B82F6" }, { id: "bc4", name: "Serviços", color: "#10B981" }, { id: "bc5", name: "Estilo de Vida", color: "#8B5CF6" }, ]; const BLOG_AUTHORS = { equipe: { id: "equipe", name: "Equipe Morar Bem", role: "Redação", initials: "MB", bio: "Nossa equipe editorial reúne jornalistas, arquitetos e especialistas em gastronomia e qualidade de vida, com foco em tudo que acontece em Sergipe e região.", photo_url: null, instagram: "@morarbem", }, ana: { id: "ana", name: "Ana Lima", role: "Editora de Decoração", initials: "AL", bio: "Arquiteta de interiores apaixonada por design sustentável, texturas naturais e arte local. Escreve sobre decoração e arquitetura no Morar Bem há 3 anos.", photo_url: null, instagram: "@analima.design", }, carlos: { id: "carlos", name: "Carlos Menezes", role: "Editor de Gastronomia", initials: "CM", bio: "Gastrônomo e crítico culinário que percorre os melhores estabelecimentos de Sergipe em busca da próxima experiência inesquecível.", photo_url: null, instagram: "@carlos.gastro", }, lucia: { id: "lucia", name: "Lúcia Santos", role: "Editora de Imóveis", initials: "LS", bio: "Especialista no mercado imobiliário sergipano. Acompanha tendências, valorizações e as melhores regiões para quem quer investir ou morar com qualidade.", photo_url: null, instagram: "@lucia.imoveis", }, }; const BLOG_MOCK_POSTS = [ { id: "bp1", category_id: "bc1", category_name: "Decoração", category_color: "#F59E0B", title: "5 tendências de decoração para sala de estar em 2026", excerpt: "Descubra as paletas de cores, texturas e estilos que estão dominando os interiores modernos de Aracaju.", cover_url: null, cover_gradient: ["#F59E0B", "#92400E"], photos: null, content: `

Decoração que inspira em 2026

O ano de 2026 traz uma série de tendências emocionantes para quem deseja renovar a decoração da sala de estar. As principais novidades incluem paletas terrosas, materiais naturais e móveis multifuncionais.

1. Cores terrosas e biofilia

Tons como ocre, terracota, verde salva e marrom chocolate criam ambientes aconchegantes e atemporais. A biofilia — incorporação de elementos naturais ao interior — continua em alta, com plantas, madeira bruta e pedras naturais.

2. Texturas sobrepostas

Mixar tapetes, almofadas e cortinas com diferentes texturas é uma das formas mais fáceis de deixar o ambiente sofisticado sem grandes reformas. Veludo, linho e couro natural são os materiais favoritos.

3. Mobiliário multifuncional

Sofás com chaise desmontável, estantes modulares e mesas expansíveis são opções inteligentes para quem vive em espaços menores mas não abre mão do estilo e do conforto.

4. Iluminação em camadas

Combinar luminárias de teto, pendentes, abajures e spots direcionais cria diferentes atmosferas ao longo do dia e da noite, transformando completamente a percepção do espaço.

5. Arte local

Valorizar artistas locais de Sergipe dá personalidade única ao ambiente e apoia a cultura regional. Peças de cerâmica, tapeçaria e pinturas ganham destaque nas composições mais elegantes de 2026.

`, font_family: "Plus Jakarta Sans", read_min: 5, published: true, created_at: "2026-06-20", author_id: "ana", author: "Ana Lima", }, { id: "bp2", category_id: "bc2", category_name: "Gastronomia", category_color: "#EF4444", title: "Os melhores restaurantes de Aracaju para conhecer este mês", excerpt: "Um guia completo com as melhores experiências gastronômicas que a capital sergipana tem a oferecer.", cover_url: null, cover_gradient: ["#EF4444", "#7F1D1D"], photos: null, content: `

Sabor em cada esquina

A cena gastronômica de Aracaju tem surpreendido moradores e turistas com novidades que vão da culinária sergipana tradicional a experiências internacionais de alto nível.

Frutos do mar irresistíveis

Com sua localização privilegiada às margens do Atlântico, Aracaju é paraíso para os amantes de frutos do mar. Moquecas, camarões e ostras frescas são o destaque de muitos estabelecimentos.

A tradição do sabor sergipano

A culinária típica sergipana não pode ser deixada de lado. Pratos como mão de vaca, sarapatel e arrumadinho fazem parte da identidade cultural da cidade e são celebrados em restaurantes tradicionais e modernos.

Cafés e confeitarias

O cenário de cafés especiais em Aracaju também está em expansão. Espaços aconchegantes com grãos selecionados, bolos artesanais e ambiente instagramável conquistam cada vez mais frequentadores.

`, font_family: "DM Sans", read_min: 7, published: true, created_at: "2026-06-15", author_id: "carlos", author: "Carlos Menezes", }, { id: "bp3", category_id: "bc3", category_name: "Imóveis", category_color: "#3B82F6", title: "Como escolher o bairro ideal para morar em Aracaju", excerpt: "Critérios essenciais para encontrar o lugar perfeito considerando infraestrutura, segurança e qualidade de vida.", cover_url: null, cover_gradient: ["#3B82F6", "#1E3A8A"], photos: null, content: `

O lar começa na escolha do bairro

Escolher onde morar é uma das decisões mais importantes da vida. Em Aracaju, cada bairro tem seu charme e seus desafios — conhecer bem cada opção faz toda a diferença para a felicidade da família.

Zona Sul: sofisticação e modernidade

Bairros como Farolândia e Jardins oferecem infraestrutura completa, shoppings, restaurantes e fácil acesso. Ideal para quem busca comodidade no dia a dia e boa valorização do imóvel.

Barra dos Coqueiros: natureza e tranquilidade

Para quem quer fugir do agito da capital sem abrir mão de boas opções de lazer, a Barra dos Coqueiros é uma excelente opção. A praia, o parque dos coqueiros e o crescimento imobiliário acelerado tornam a região muito atraente.

Zona de Expansão: o futuro de Aracaju

Com condomínios modernos, praias preservadas e uma qualidade de vida inigualável, a Zona de Expansão vem ganhando cada vez mais famílias que buscam espaço, natureza e segurança.

`, font_family: "Plus Jakarta Sans", read_min: 6, published: true, created_at: "2026-06-10", author_id: "lucia", author: "Lúcia Santos", }, { id: "bp4", category_id: "bc4", category_name: "Serviços", category_color: "#10B981", title: "Os 10 serviços essenciais para manter seu lar em ordem", excerpt: "Da manutenção preventiva à limpeza especializada: conheça os profissionais que fazem a diferença no cotidiano.", cover_url: null, cover_gradient: ["#10B981", "#064E3B"], photos: null, content: `

Cuidar bem do lar é um ato de amor

Manter uma casa bem cuidada vai além da limpeza diária. Uma boa manutenção preventiva pode economizar muito dinheiro e evitar dores de cabeça no futuro.

1. Revisão elétrica anual

A instalação elétrica deve ser revisada pelo menos uma vez por ano por um profissional qualificado, especialmente em imóveis mais antigos. Fios envelhecidos são a principal causa de incêndios residenciais.

2. Limpeza de caixas d'água

A ANVISA recomenda a limpeza da caixa d'água a cada seis meses para garantir a qualidade da água consumida pela família e prevenir doenças como leptospirose.

3. Manutenção do ar-condicionado

Em Aracaju, onde o calor é intenso durante todo o ano, manter o ar-condicionado limpo e revisado é fundamental para eficiência energética e qualidade do ar no interior da casa.

`, font_family: "DM Sans", read_min: 4, published: true, created_at: "2026-06-05", author_id: "equipe", author: "Equipe Morar Bem", }, { id: "bp5", category_id: "bc5", category_name: "Estilo de Vida", category_color: "#8B5CF6", title: "Como economizar nas contas de casa sem abrir mão do conforto", excerpt: "Dicas práticas e eficientes para reduzir gastos domésticos e melhorar a qualidade de vida da sua família.", cover_url: null, cover_gradient: ["#8B5CF6", "#4C1D95"], photos: null, content: `

Mais qualidade de vida, menos desperdício

Com um pouco de planejamento e algumas mudanças de hábito, é possível reduzir significativamente os gastos mensais sem sacrificar o conforto e o bem-estar da família.

Energia elétrica: pequenas mudanças, grande economia

Substituir lâmpadas por modelos LED pode reduzir o consumo elétrico em até 80%. Além disso, desligar aparelhos da tomada quando não usados elimina o consumo em stand-by, que pode representar até 12% da conta de luz.

Planejamento de compras

Fazer uma lista de compras antes de ir ao mercado e respeitá-la é um dos hábitos mais eficientes para quem quer economizar. Aproveite as feiras livres da cidade para comprar frutas e verduras mais baratas e frescas.

Reutilização e upcycling

Transformar móveis antigos, usar tecidos reutilizados em projetos de decoração e dar nova vida a objetos que seriam descartados é uma tendência que une economia e sustentabilidade.

`, font_family: "Plus Jakarta Sans", read_min: 5, published: true, created_at: "2026-05-28", author_id: "equipe", author: "Equipe Morar Bem", }, ]; // ── Utilitários ─────────────────────────────────────────────── function fmtDate(iso) { try { const d = new Date(iso + "T00:00:00"); return d.toLocaleDateString("pt-BR", { day: "numeric", month: "short", year: "numeric" }); } catch { return iso; } } // ── Ícone de categoria (SVG inline) ─────────────────────────── function CatIcon({ catId, color = "currentColor", size = 18 }) { const a = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }; if (catId === "bc1") return ; if (catId === "bc2") return ; if (catId === "bc3") return ; if (catId === "bc4") return ; if (catId === "bc5") return ; // Todos — grade return ; } // ── Avatar do autor ──────────────────────────────────────────── const AVATAR_COLORS = ["#6366F1","#0EA5E9","#10B981","#F59E0B","#EF4444","#8B5CF6","#EC4899","#14B8A6"]; function AuthorAvatar({ author, size = 32 }) { const bg = AVATAR_COLORS[(author.name || "").charCodeAt(0) % AVATAR_COLORS.length]; const fs = Math.max(10, Math.round(size * 0.38)); if (author.photo_url) { return {author.name}; } return (
{(author.initials || author.name || "?").slice(0, 2)}
); } // ── Modal do autor ──────────────────────────────────────────── function AuthorModal({ author, allPosts, onClose }) { const authorPosts = (allPosts || []).filter(p => p.author_id === author.id); return (
{/* Cabeçalho do autor */}
{author.name}
{author.role}
{author.instagram && ( {author.instagram} )}
{/* Bio */} {author.bio && (

{author.bio}

)} {/* Posts do autor */} {authorPosts.length > 0 && (
{authorPosts.length} publicaç{authorPosts.length === 1 ? "ão" : "ões"}
{authorPosts.map(p => { const grad = p.cover_gradient || ["#1B2A6B", "#0E1330"]; return (
{p.cover_url && }
{p.title}
{p.read_min} min · {fmtDate(p.created_at)}
); })}
)}
); } // ── Detalhe do post (tela cheia) ────────────────────────────── function BlogPostDetail({ post, allPosts, onBack }) { const grad = post.cover_gradient || ["#1B2A6B", "#0E1330"]; const ff = post.font_family ? `'${post.font_family}', var(--ui)` : "var(--ui)"; const _authorById = BLOG_AUTHORS[post.author_id]; const _authorByName = !_authorById ? Object.values(BLOG_AUTHORS).find(a => a.name === post.author) : null; const author = _authorById || _authorByName || { name: post.author || "Morar Bem", role: post.author_role || "Redação", initials: (post.author || "M").charAt(0), photo_url: post.author_photo_url || null, instagram: null, bio: post.author_bio || null, }; // Carousel de fotos const photos = [post.cover_url, ...(post.photos || [])].filter(Boolean); const [photoIdx, setPhotoIdx] = React.useState(0); const [authorOpen, setAuthorOpen] = React.useState(false); React.useEffect(() => { if (photos.length < 2) return; const t = setInterval(() => setPhotoIdx(i => (i + 1) % photos.length), 3800); return () => clearInterval(t); }, [photos.length]); return (
{/* ── Capa / Hero com carousel ── */}
{/* Fotos em transição */} {photos.length > 0 ? photos.map((url, i) => ( {post.title} )) : null }
{/* Botão voltar */} {/* Chip de categoria — top right */}
{post.category_name}
{/* Dots de fotos */} {photos.length > 1 && (
{photos.map((_, i) => (
setPhotoIdx(i)} style={{ width: i === photoIdx ? 20 : 6, height: 6, borderRadius: 999, background: i === photoIdx ? "#fff" : "rgba(255,255,255,.45)", transition: "width .28s", cursor: "pointer" }} /> ))}
)} {/* Título na capa */}

{post.title}

{/* ── Barra do autor (clicável) ── */}
{/* ── Conteúdo rich text ── */}
{/* Modal do autor */} {authorOpen && setAuthorOpen(false)} />}
); } // ── Post em destaque (hero da lista) ────────────────────────── function FeaturedPost({ post, onOpen }) { const grad = post.cover_gradient || ["#1B2A6B", "#0E1330"]; const photos = [post.cover_url, ...(post.photos || [])].filter(Boolean); const [photoIdx, setPhotoIdx] = React.useState(0); const author = BLOG_AUTHORS[post.author_id] || { name: post.author, initials: (post.author || "M").charAt(0), photo_url: null }; React.useEffect(() => { if (photos.length < 2) return; const t = setInterval(() => setPhotoIdx(i => (i + 1) % photos.length), 4200); return () => clearInterval(t); }, [photos.length]); return ( ); } // ── Card de post na lista ───────────────────────────────────── function BlogPostCard({ post, onOpen }) { const grad = post.cover_gradient || ["#1B2A6B", "#0E1330"]; const author = BLOG_AUTHORS[post.author_id] || { name: post.author, initials: (post.author || "M").charAt(0), photo_url: null }; return ( ); } // ── Tela principal do blog ──────────────────────────────────── function BlogScreen({ initialPost, onClearInitial }) { const MB_API_OBJ = (typeof API !== "undefined" && API) ? API : null; const [categories, setCategories] = React.useState(BLOG_MOCK_CATS); const [posts, setPosts] = React.useState(BLOG_MOCK_POSTS); const [selCat, setSelCat] = React.useState(null); const [search, setSearch] = React.useState(""); const [openPost, setOpenPost] = React.useState(null); const [loading, setLoading] = React.useState(false); React.useEffect(() => { if (!MB_API_OBJ) return; setLoading(true); const bail = new Promise((_, rej) => setTimeout(() => rej(new Error("timeout")), 7000)); Promise.race([ Promise.all([ MB_API_OBJ.blog.categories().catch(() => null), MB_API_OBJ.blog.posts().catch(() => null), ]), bail, ]).then(([cats, pd]) => { if (cats?.categories?.length) setCategories(cats.categories); if (pd?.posts?.length) setPosts(pd.posts.filter(p => p.published !== false)); }).catch(() => {}) .finally(() => setLoading(false)); }, []); React.useEffect(() => { if (initialPost) { setOpenPost(initialPost); onClearInitial?.(); } }, [initialPost]); const filtered = posts.filter(p => { if (selCat && p.category_id !== selCat) return false; if (search) { const q = search.toLowerCase(); if (!p.title.toLowerCase().includes(q) && !(p.excerpt || "").toLowerCase().includes(q)) return false; } return true; }); const featured = !selCat && !search && filtered[0]; const listPosts = featured ? filtered.slice(1) : filtered; if (openPost) { return setOpenPost(null)} />; } return (
{/* ── Header ── */}
Blog
Inspiração e informação
{/* Busca (sempre visível) */}
setSearch(e.target.value)} placeholder="Buscar artigos…" style={{ flex: 1, border: "none", background: "none", outline: "none", font: "500 14px var(--ui)", color: "var(--text)" }} /> {search && }
{/* Categorias com ícones */}
{/* Todos */} {categories.map(c => { const active = selCat === c.id; return ( ); })}
{/* ── Lista ── */}
{loading ? (
) : filtered.length === 0 ? (
📖
Nenhum artigo encontrado
Tente outra categoria ou busca.
) : ( <> {/* Post em destaque (capa) */} {featured && } {/* Título da seção de lista */} {listPosts.length > 0 && (
{featured ? "Mais artigos" : "Artigos"}
{filtered.length} publicaç{filtered.length === 1 ? "ão" : "ões"}
)} {listPosts.map(p => )} )}
); } // ── Preview horizontal para a Home ─────────────────────────── function BlogHomePreview({ onOpenBlog }) { const MB_API_OBJ = (typeof API !== "undefined" && API) ? API : null; const [posts, setPosts] = React.useState(BLOG_MOCK_POSTS.slice(0, 5)); React.useEffect(() => { if (!MB_API_OBJ) return; MB_API_OBJ.blog.posts().then(d => { const list = (d?.posts || []).filter(p => p.published !== false); if (list.length) setPosts(list.slice(0, 5)); }).catch(() => {}); }, []); return (

Blog Morar Bem

Inspiração e informação
{posts.map(p => { const grad = p.cover_gradient || ["#1B2A6B", "#0E1330"]; const author = BLOG_AUTHORS[p.author_id] || { name: p.author, initials: (p.author || "M").charAt(0), photo_url: null }; return ( ); })}
); } Object.assign(window, { BLOG_MOCK_CATS, BLOG_MOCK_POSTS, BLOG_AUTHORS, BlogPostDetail, BlogPostCard, BlogScreen, BlogHomePreview });