// 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: `<h2>Decoração que inspira em 2026</h2>
<p>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.</p>
<h3>1. Cores terrosas e biofilia</h3>
<p>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.</p>
<h3>2. Texturas sobrepostas</h3>
<p>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.</p>
<h3>3. Mobiliário multifuncional</h3>
<p>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.</p>
<h3>4. Iluminação em camadas</h3>
<p>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.</p>
<h3>5. Arte local</h3>
<p>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.</p>`,
    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: `<h2>Sabor em cada esquina</h2>
<p>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.</p>
<h3>Frutos do mar irresistíveis</h3>
<p>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.</p>
<h3>A tradição do sabor sergipano</h3>
<p>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.</p>
<h3>Cafés e confeitarias</h3>
<p>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.</p>`,
    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: `<h2>O lar começa na escolha do bairro</h2>
<p>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.</p>
<h3>Zona Sul: sofisticação e modernidade</h3>
<p>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.</p>
<h3>Barra dos Coqueiros: natureza e tranquilidade</h3>
<p>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.</p>
<h3>Zona de Expansão: o futuro de Aracaju</h3>
<p>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.</p>`,
    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: `<h2>Cuidar bem do lar é um ato de amor</h2>
<p>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.</p>
<h3>1. Revisão elétrica anual</h3>
<p>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.</p>
<h3>2. Limpeza de caixas d'água</h3>
<p>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.</p>
<h3>3. Manutenção do ar-condicionado</h3>
<p>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.</p>`,
    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: `<h2>Mais qualidade de vida, menos desperdício</h2>
<p>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.</p>
<h3>Energia elétrica: pequenas mudanças, grande economia</h3>
<p>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.</p>
<h3>Planejamento de compras</h3>
<p>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.</p>
<h3>Reutilização e upcycling</h3>
<p>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.</p>`,
    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 <svg {...a}><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 011.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/><circle cx="7" cy="12" r="1" fill={color} stroke="none"/><circle cx="9.5" cy="7.5" r="1" fill={color} stroke="none"/><circle cx="14.5" cy="7.5" r="1" fill={color} stroke="none"/><circle cx="17" cy="12" r="1" fill={color} stroke="none"/></svg>;
  if (catId === "bc2") return <svg {...a}><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>;
  if (catId === "bc3") return <svg {...a}><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>;
  if (catId === "bc4") return <svg {...a}><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>;
  if (catId === "bc5") return <svg {...a}><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>;
  // Todos — grade
  return <svg {...a}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
}

// ── 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 <img src={author.photo_url} alt={author.name} style={{ width: size, height: size, borderRadius: 999, objectFit: "cover", flexShrink: 0 }} />;
  }
  return (
    <div style={{ width: size, height: size, borderRadius: 999, background: bg, color: "#fff", font: `800 ${fs}px var(--ui)`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, letterSpacing: "-.02em" }}>
      {(author.initials || author.name || "?").slice(0, 2)}
    </div>
  );
}

// ── Modal do autor ────────────────────────────────────────────
function AuthorModal({ author, allPosts, onClose }) {
  const authorPosts = (allPosts || []).filter(p => p.author_id === author.id);
  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 200, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,.52)", backdropFilter: "blur(4px)" }} />
      <div style={{ position: "relative", background: "var(--surface)", borderRadius: "24px 24px 0 0", padding: "22px 20px 48px", maxHeight: "82vh", overflowY: "auto" }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: "var(--line)", margin: "0 auto 24px" }} />

        {/* Cabeçalho do autor */}
        <div style={{ display: "flex", gap: 16, alignItems: "flex-start", marginBottom: 16 }}>
          <AuthorAvatar author={author} size={68} />
          <div style={{ flex: 1 }}>
            <div style={{ font: "800 18px var(--ui)", color: "var(--text)", lineHeight: 1.2 }}>{author.name}</div>
            <div style={{ font: "600 13px var(--ui)", color: "var(--accent)", marginTop: 3 }}>{author.role}</div>
            {author.instagram && (
              <a href={"https://instagram.com/" + author.instagram.replace(/^@/, "")} target="_blank" rel="noopener noreferrer"
                style={{ display: "inline-flex", alignItems: "center", gap: 5, marginTop: 8, font: "600 12px var(--ui)", color: "var(--muted)", textDecoration: "none", background: "var(--bg)", borderRadius: 8, padding: "4px 10px" }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#C026D3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><circle cx="17.5" cy="6.5" r=".5" fill="#C026D3" stroke="none"/></svg>
                {author.instagram}
              </a>
            )}
          </div>
        </div>

        {/* Bio */}
        {author.bio && (
          <p style={{ margin: "0 0 20px", font: "400 14px var(--ui)", color: "var(--text)", lineHeight: 1.7 }}>{author.bio}</p>
        )}

        {/* Posts do autor */}
        {authorPosts.length > 0 && (
          <div style={{ borderTop: "1px solid var(--line)", paddingTop: 18 }}>
            <div style={{ font: "700 11px var(--ui)", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 14 }}>
              {authorPosts.length} publicaç{authorPosts.length === 1 ? "ão" : "ões"}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {authorPosts.map(p => {
                const grad = p.cover_gradient || ["#1B2A6B", "#0E1330"];
                return (
                  <div key={p.id} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <div style={{ width: 44, height: 44, borderRadius: 12, background: `linear-gradient(135deg, ${grad[0]}, ${grad[1]})`, flexShrink: 0, overflow: "hidden", position: "relative" }}>
                      {p.cover_url && <img src={p.cover_url} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ font: "600 13px var(--ui)", color: "var(--text)", lineHeight: 1.35, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{p.title}</div>
                      <div style={{ font: "500 11px var(--ui)", color: "var(--muted)", marginTop: 2 }}>{p.read_min} min · {fmtDate(p.created_at)}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ── 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 (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg)", display: "flex", flexDirection: "column", zIndex: 50, overflowY: "auto" }}>

      {/* ── Capa / Hero com carousel ── */}
      <div style={{ height: 300, position: "relative", flexShrink: 0, background: `linear-gradient(135deg, ${grad[0]}, ${grad[1]})`, overflow: "hidden" }}>
        {/* Fotos em transição */}
        {photos.length > 0
          ? photos.map((url, i) => (
              <img key={i} src={url} alt={post.title}
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: i === photoIdx ? 1 : 0, transition: "opacity .6s ease" }} />
            ))
          : null
        }
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.06) 40%, rgba(0,0,0,.72) 100%)" }} />

        {/* Botão voltar */}
        <button onClick={onBack} style={{ position: "absolute", top: "max(52px, env(safe-area-inset-top, 52px))", left: 16, width: 40, height: 40, borderRadius: 12, background: "rgba(255,255,255,.18)", backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,.2)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="arrowL" size={20} color="#fff" sw={2.2} />
        </button>

        {/* Chip de categoria — top right */}
        <div style={{ position: "absolute", top: "max(54px, env(safe-area-inset-top, 54px))", right: 16, display: "inline-flex", alignItems: "center", gap: 5, background: (post.category_color || "#051E52") + "CC", backdropFilter: "blur(8px)", borderRadius: 999, padding: "5px 12px" }}>
          <CatIcon catId={post.category_id} color="#fff" size={12} />
          <span style={{ font: "700 10.5px var(--ui)", color: "#fff", letterSpacing: ".04em" }}>{post.category_name}</span>
        </div>

        {/* Dots de fotos */}
        {photos.length > 1 && (
          <div style={{ position: "absolute", bottom: 80, left: 0, right: 0, display: "flex", justifyContent: "center", gap: 5 }}>
            {photos.map((_, i) => (
              <div key={i} onClick={() => 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" }} />
            ))}
          </div>
        )}

        {/* Título na capa */}
        <div style={{ position: "absolute", bottom: 18, left: 20, right: 20 }}>
          <h1 style={{ margin: 0, font: "800 22px var(--ui)", color: "#fff", lineHeight: 1.2, textShadow: "0 2px 10px rgba(0,0,0,.4)", letterSpacing: "-.01em" }}>{post.title}</h1>
        </div>
      </div>

      {/* ── Barra do autor (clicável) ── */}
      <div style={{ background: "var(--surface)", padding: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
        <button onClick={() => setAuthorOpen(true)} style={{ display: "flex", alignItems: "center", gap: 10, flex: 1, background: "none", border: "none", cursor: "pointer", textAlign: "left", padding: 0 }}>
          <div style={{ position: "relative" }}>
            <AuthorAvatar author={author} size={40} />
            <div style={{ position: "absolute", bottom: -1, right: -1, width: 14, height: 14, borderRadius: 999, background: "var(--accent)", border: "2px solid var(--surface)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </div>
          </div>
          <div>
            <div style={{ font: "700 13px var(--ui)", color: "var(--text)" }}>{author.name}</div>
            <div style={{ font: "500 11.5px var(--ui)", color: "var(--muted)", marginTop: 1 }}>{author.role} · {fmtDate(post.created_at)} · {post.read_min} min</div>
          </div>
        </button>
        <button onClick={() => {
          if (navigator.share) navigator.share({ title: post.title, text: post.excerpt, url: window.location.href });
          else navigator.clipboard?.writeText(window.location.href).then(() => {});
        }} style={{ width: 38, height: 38, borderRadius: 11, background: "var(--bg)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0 }}>
          <Icon name="share" size={17} color="var(--muted)" sw={2} />
        </button>
      </div>

      {/* ── Conteúdo rich text ── */}
      <div style={{ padding: "26px 20px 72px" }}>
        <style>{`
          .blog-rich { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
          .blog-rich h2 {
            font: 700 17px ${ff}; color: var(--text); margin: 32px 0 14px; line-height: 1.25;
            letter-spacing: -.022em; padding-bottom: 9px; border-bottom: 1px solid var(--line);
          }
          .blog-rich h2:first-child { margin-top: 0; }
          .blog-rich h3 { font: 700 10.5px ${ff}; color: var(--muted); margin: 26px 0 10px; text-transform: uppercase; letter-spacing: .09em; }
          .blog-rich h4 { font: 700 10px ${ff}; color: var(--muted); margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .1em; }
          .blog-rich p  { font: 400 15.5px ${ff}; color: var(--text); margin: 0 0 20px; line-height: 1.9; text-align: justify; hyphens: auto; letter-spacing: .012em; }
          .blog-rich ul, .blog-rich ol { margin: 0 0 20px 22px; padding: 0; }
          .blog-rich li { font: 400 15px ${ff}; color: var(--text); margin-bottom: 10px; line-height: 1.8; }
          .blog-rich blockquote { border-left: 3px solid var(--accent); margin: 24px 0; padding: 14px 18px; background: var(--accent-50); border-radius: 0 12px 12px 0; }
          .blog-rich blockquote p { margin: 0; font-style: italic; opacity: .82; text-align: left; }
          .blog-rich img { max-width: 100%; border-radius: 14px; margin: 20px 0; display: block; box-shadow: 0 4px 18px rgba(16,18,45,.09); }
          .blog-rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
          .blog-rich strong { font-weight: 600; color: var(--text); }
          .blog-rich em { font-style: italic; }
          .blog-rich hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
          .blog-rich iframe { max-width: 100%; border-radius: 14px; border: none; width: 100%; }
          .blog-rich .video-wrap { position: relative; padding-bottom: 56.25%; height: 0; margin: 20px 0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(16,18,45,.12); }
          .blog-rich .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        `}</style>
        <div className="blog-rich" dangerouslySetInnerHTML={{ __html: post.content }} />
      </div>

      {/* Modal do autor */}
      {authorOpen && <AuthorModal author={author} allPosts={allPosts || BLOG_MOCK_POSTS} onClose={() => setAuthorOpen(false)} />}
    </div>
  );
}

// ── 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 (
    <button onClick={() => onOpen(post)} style={{ display: "block", width: "100%", position: "relative", height: 252, overflow: "hidden", background: `linear-gradient(135deg, ${grad[0]}, ${grad[1]})`, border: "none", cursor: "pointer", padding: 0 }}>
      {photos.map((url, i) => (
        <img key={i} src={url} alt={post.title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: i === photoIdx ? 1 : 0, transition: "opacity .6s" }} />
      ))}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.08) 100%)" }} />

      {/* Em destaque */}
      <div style={{ position: "absolute", top: 14, left: 14, display: "inline-flex", alignItems: "center", gap: 5, background: "rgba(255,255,255,.18)", backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,.28)", borderRadius: 999, padding: "4px 11px" }}>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="#fff"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
        <span style={{ font: "700 10px var(--ui)", color: "#fff", letterSpacing: ".05em" }}>EM DESTAQUE</span>
      </div>

      {/* Categoria */}
      <div style={{ position: "absolute", top: 14, right: 14, display: "inline-flex", alignItems: "center", gap: 5, background: (post.category_color || "#051E52") + "CC", backdropFilter: "blur(6px)", borderRadius: 999, padding: "4px 11px" }}>
        <CatIcon catId={post.category_id} color="#fff" size={11} />
        <span style={{ font: "700 10px var(--ui)", color: "#fff", letterSpacing: ".04em" }}>{post.category_name}</span>
      </div>

      {/* Dots */}
      {photos.length > 1 && (
        <div style={{ position: "absolute", bottom: 80, left: 0, right: 0, display: "flex", justifyContent: "center", gap: 5 }}>
          {photos.map((_, i) => (
            <div key={i} style={{ width: i === photoIdx ? 18 : 5, height: 5, borderRadius: 999, background: i === photoIdx ? "#fff" : "rgba(255,255,255,.4)", transition: "width .25s" }} />
          ))}
        </div>
      )}

      {/* Conteúdo bottom */}
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "18px 16px" }}>
        <h2 style={{ margin: "0 0 10px", font: "800 20px var(--ui)", color: "#fff", lineHeight: 1.2, textAlign: "left", textShadow: "0 2px 10px rgba(0,0,0,.4)", letterSpacing: "-.01em" }}>{post.title}</h2>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <AuthorAvatar author={author} size={24} />
          <span style={{ font: "600 12px var(--ui)", color: "rgba(255,255,255,.9)" }}>{author.name}</span>
          <span style={{ width: 3, height: 3, borderRadius: 999, background: "rgba(255,255,255,.45)", flexShrink: 0 }} />
          <span style={{ font: "500 11.5px var(--ui)", color: "rgba(255,255,255,.7)" }}>{post.read_min} min de leitura</span>
          <span style={{ font: "500 11.5px var(--ui)", color: "rgba(255,255,255,.55)", marginLeft: "auto" }}>{fmtDate(post.created_at)}</span>
        </div>
      </div>
    </button>
  );
}

// ── 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 (
    <button onClick={() => onOpen(post)} style={{ display: "flex", gap: 14, padding: "14px 16px", background: "none", border: "none", cursor: "pointer", textAlign: "left", width: "100%", borderTop: "1px solid var(--line)" }}>
      {/* Miniatura */}
      <div style={{ width: 88, height: 88, borderRadius: 16, overflow: "hidden", flexShrink: 0, position: "relative", background: `linear-gradient(135deg, ${grad[0]}, ${grad[1]})` }}>
        {post.cover_url && <img src={post.cover_url} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />}
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,.35), transparent 60%)" }} />
        {/* Ícone da categoria no thumbnail */}
        <div style={{ position: "absolute", bottom: 6, left: 7 }}>
          <CatIcon catId={post.category_id} color="rgba(255,255,255,.85)" size={13} />
        </div>
      </div>

      {/* Conteúdo */}
      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
        {/* Chip categoria */}
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, font: "700 10px var(--ui)", letterSpacing: ".04em", color: post.category_color || "var(--accent)", background: (post.category_color || "var(--accent)") + "18", borderRadius: 999, padding: "2px 8px", marginBottom: 5, alignSelf: "flex-start" }}>
          <CatIcon catId={post.category_id} color={post.category_color || "var(--accent)"} size={10} />
          {post.category_name}
        </span>
        {/* Título */}
        <div style={{ font: "700 14px var(--ui)", color: "var(--text)", lineHeight: 1.35, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", flex: 1 }}>
          {post.title}
        </div>
        {/* Autor + meta */}
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8 }}>
          <AuthorAvatar author={author} size={20} />
          <span style={{ font: "600 11px var(--ui)", color: "var(--muted)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{author.name}</span>
          <span style={{ font: "500 11px var(--ui)", color: "var(--muted)", flexShrink: 0 }}>{post.read_min} min</span>
        </div>
      </div>
    </button>
  );
}

// ── 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 <BlogPostDetail post={openPost} allPosts={posts} onBack={() => setOpenPost(null)} />;
  }

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* ── Header ── */}
      <div style={{ background: "var(--surface)", borderBottom: "1px solid var(--line)", flexShrink: 0, paddingTop: "max(52px, env(safe-area-inset-top, 52px))" }}>
        <div style={{ padding: "0 16px 14px" }}>
          <div style={{ font: "800 24px var(--ui)", color: "var(--text)", letterSpacing: "-.02em" }}>Blog</div>
          <div style={{ font: "500 12.5px var(--ui)", color: "var(--muted)", marginTop: 1 }}>Inspiração e informação</div>
        </div>

        {/* Busca (sempre visível) */}
        <div style={{ padding: "0 16px 12px" }}>
          <div style={{ height: 40, background: "var(--bg)", borderRadius: 11, border: "1.5px solid var(--line)", display: "flex", alignItems: "center", gap: 9, padding: "0 12px" }}>
            <Icon name="search" size={15} color="var(--muted)" />
            <input value={search} onChange={e => 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 && <button onClick={() => setSearch("")} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--muted)", font: "700 18px var(--ui)", lineHeight: 1, padding: 0 }}>×</button>}
          </div>
        </div>

        {/* Categorias com ícones */}
        <div style={{ display: "flex", gap: 8, padding: "0 16px 14px", overflowX: "auto" }} className="mb-noscroll">
          {/* Todos */}
          <button onClick={() => setSelCat(null)} style={{
            flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 6,
            height: 36, padding: "0 13px", borderRadius: 999, cursor: "pointer",
            border: selCat === null ? "none" : "1.5px solid var(--line)",
            background: selCat === null ? "var(--accent)" : "var(--bg)",
            color: selCat === null ? "#fff" : "var(--muted)",
            font: `${selCat === null ? 700 : 600} 12.5px var(--ui)`,
          }}>
            <CatIcon catId="todos" color={selCat === null ? "#fff" : "var(--muted)"} size={14} />
            Todos
          </button>
          {categories.map(c => {
            const active = selCat === c.id;
            return (
              <button key={c.id} onClick={() => setSelCat(active ? null : c.id)} style={{
                flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 6,
                height: 36, padding: "0 13px", borderRadius: 999, cursor: "pointer",
                border: active ? "none" : `1.5px solid ${c.color}30`,
                background: active ? c.color : c.color + "14",
                color: active ? "#fff" : c.color,
                font: `${active ? 700 : 600} 12.5px var(--ui)`,
              }}>
                <CatIcon catId={c.id} color={active ? "#fff" : c.color} size={14} />
                {c.name}
              </button>
            );
          })}
        </div>
      </div>

      {/* ── Lista ── */}
      <div style={{ flex: 1, overflowY: "auto", paddingBottom: (typeof TAB_H2 !== "undefined" ? TAB_H2 : "80px") }}>
        {loading ? (
          <div style={{ display: "flex", justifyContent: "center", padding: "60px 0" }}>
            <div style={{ width: 28, height: 28, borderRadius: 999, border: "3px solid var(--line)", borderTopColor: "var(--accent)", animation: "spin .7s linear infinite" }} />
          </div>
        ) : filtered.length === 0 ? (
          <div style={{ textAlign: "center", padding: "60px 28px" }}>
            <div style={{ font: "700 42px var(--ui)", marginBottom: 12 }}>📖</div>
            <div style={{ font: "800 17px var(--ui)", color: "var(--text)", marginBottom: 8 }}>Nenhum artigo encontrado</div>
            <div style={{ font: "500 13.5px var(--ui)", color: "var(--muted)" }}>Tente outra categoria ou busca.</div>
          </div>
        ) : (
          <>
            {/* Post em destaque (capa) */}
            {featured && <FeaturedPost post={featured} onOpen={setOpenPost} />}

            {/* Título da seção de lista */}
            {listPosts.length > 0 && (
              <div style={{ padding: "18px 16px 4px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ font: "800 15px var(--ui)", color: "var(--text)", letterSpacing: "-.01em" }}>
                  {featured ? "Mais artigos" : "Artigos"}
                </div>
                <div style={{ font: "500 12px var(--ui)", color: "var(--muted)" }}>{filtered.length} publicaç{filtered.length === 1 ? "ão" : "ões"}</div>
              </div>
            )}

            {listPosts.map(p => <BlogPostCard key={p.id} post={p} onOpen={setOpenPost} />)}
          </>
        )}
      </div>
    </div>
  );
}

// ── 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 (
    <div style={{ marginTop: 24 }}>
      <div style={{ padding: "0 16px 14px", display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
        <div>
          <h3 style={{ margin: 0, font: "800 18px var(--ui)", color: "var(--text)", letterSpacing: "-.01em" }}>Blog Morar Bem</h3>
          <div style={{ font: "500 12.5px var(--ui)", color: "var(--muted)", marginTop: 2 }}>Inspiração e informação</div>
        </div>
        <button onClick={() => onOpenBlog()} style={{ background: "none", border: "none", cursor: "pointer", font: "700 12.5px var(--ui)", color: "var(--accent)", display: "flex", alignItems: "center", gap: 3 }}>
          Ver todos <Icon name="chevR" size={13} color="var(--accent)" sw={2.6} />
        </button>
      </div>

      <div style={{ display: "flex", gap: 12, padding: "0 16px 4px", overflowX: "auto" }} className="mb-noscroll">
        {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 (
            <button key={p.id} onClick={() => onOpenBlog(p)} style={{ flexShrink: 0, width: 200, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 18, overflow: "hidden", cursor: "pointer", textAlign: "left", boxShadow: "0 4px 16px rgba(16,18,45,.07)", transition: "transform .2s, box-shadow .2s", padding: 0 }}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 12px 28px rgba(16,18,45,.13)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "0 4px 16px rgba(16,18,45,.07)"; }}>
              {/* Cover */}
              <div style={{ height: 118, background: `linear-gradient(135deg, ${grad[0]}, ${grad[1]})`, position: "relative", overflow: "hidden" }}>
                {p.cover_url && <img src={p.cover_url} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />}
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,.4), transparent 60%)" }} />
                {/* Chip no cover */}
                <div style={{ position: "absolute", top: 8, left: 10, display: "inline-flex", alignItems: "center", gap: 4, background: "rgba(0,0,0,.35)", backdropFilter: "blur(4px)", borderRadius: 999, padding: "3px 9px" }}>
                  <CatIcon catId={p.category_id} color="#fff" size={10} />
                  <span style={{ font: "700 9.5px var(--ui)", color: "#fff", letterSpacing: ".04em" }}>{p.category_name}</span>
                </div>
              </div>
              {/* Body */}
              <div style={{ padding: "11px 13px 14px" }}>
                <div style={{ font: "700 13px var(--ui)", color: "var(--text)", lineHeight: 1.35, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden", marginBottom: 9 }}>
                  {p.title}
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                  <AuthorAvatar author={author} size={20} />
                  <span style={{ font: "500 11px var(--ui)", color: "var(--muted)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{author.name.split(" ")[0]}</span>
                  <span style={{ font: "500 11px var(--ui)", color: "var(--muted)", flexShrink: 0, display: "flex", alignItems: "center", gap: 3 }}>
                    <Icon name="clock" size={11} color="var(--muted)" sw={2} />{p.read_min} min
                  </span>
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { BLOG_MOCK_CATS, BLOG_MOCK_POSTS, BLOG_AUTHORS, BlogPostDetail, BlogPostCard, BlogScreen, BlogHomePreview });
