// conteudo.jsx — Página índice da seção Conteúdo.
// Index de artigos com filtro por pilar editorial.
// Babel-standalone: usa window.X exports, sem ES imports.

const PILLARS = [
  { id: 'todos',         label: 'Todos' },
  { id: 'garimpo',       label: 'Garimpo & análise' },
  { id: 'juridico',      label: 'Jurídico & documentos' },
  { id: 'financeiro',    label: 'Financeiro' },
  { id: 'reforma',       label: 'Reforma' },
  { id: 'comercial',     label: 'Comercialização' },
  { id: 'fechamento',    label: 'Fechamento' },
  { id: 'estrategia',    label: 'Estratégia' },
];

// Source-of-truth de artigos. Cada novo arquivo em /conteudo precisa de uma entry aqui.
// `featured: true` faz o card ocupar 2 colunas no grid.
// `coverImage` aponta pra Pexels CDN (licença gratuita, sem atribuição obrigatória).
const PEXELS = (id) => `https://images.pexels.com/photos/${id}/pexels-photo-${id}.jpeg?auto=compress&cs=tinysrgb&w=1200&h=675&fit=crop`;

const ARTICLES = [
  {
    slug: 'como-avaliar-imovel-de-leilao-antes-do-lance',
    title: 'Como avaliar um imóvel de leilão antes de dar o lance',
    excerpt: 'Edital, matrícula, processo, ocupação e débitos: o checklist real para decidir se vale arrematar — e por quanto.',
    pillar: 'juridico',
    pillarLabel: 'Jurídico & documentos',
    date: '2026-04-29',
    dateLabel: '29 abr 2026',
    readTime: '12 min',
    featured: true,
    coverImage: PEXELS(5669619),  // Judges desk: gavel + scales
  },
  {
    slug: 'como-calcular-margem-real-do-flip',
    title: 'Como calcular a margem real de um flip (e os custos que ninguém soma)',
    excerpt: 'Aquisição, capital parado, reforma, comercialização, impostos. O caminho do preço de venda até o lucro que entra no bolso.',
    pillar: 'financeiro',
    pillarLabel: 'Financeiro',
    date: '2026-04-22',
    dateLabel: '22 abr 2026',
    readTime: '14 min',
    coverImage: PEXELS(5915236),  // Calculator on desk with charts
  },
  {
    slug: 'orcamento-de-reforma-como-evitar-30-de-estouro',
    title: 'Orçamento de reforma: como evitar os 30% de estouro mais comuns',
    excerpt: 'Por que toda reforma estoura, onde a margem some, e como amarrar escopo, prazo e prestadores antes da primeira parede.',
    pillar: 'reforma',
    pillarLabel: 'Reforma',
    date: '2026-04-15',
    dateLabel: '15 abr 2026',
    readTime: '13 min',
    coverImage: PEXELS(834892),   // Floor plan blueprint with construction tools
  },
  {
    slug: 'matricula-atualizada-o-que-olhar-antes-de-comprar',
    title: 'Matrícula atualizada: o que olhar antes de comprar',
    excerpt: 'Os campos da matrícula que decidem se uma boa oportunidade vira problema — e como ler cada um sem virar advogado.',
    pillar: 'juridico',
    pillarLabel: 'Jurídico & documentos',
    date: '2026-04-08',
    dateLabel: '08 abr 2026',
    readTime: '7 min',
    coverImage: PEXELS(7841506),  // Close-up signing legal document
  },
  {
    slug: 'itbi-escritura-e-registro-o-custo-real-de-adquirir',
    title: 'ITBI, escritura e registro: o custo real de adquirir um imóvel no Brasil',
    excerpt: 'Os custos pós-compra que normalmente ficam de fora da conta inicial — e quanto eles realmente pesam na margem do flip.',
    pillar: 'juridico',
    pillarLabel: 'Jurídico & documentos',
    date: '2026-04-01',
    dateLabel: '01 abr 2026',
    readTime: '8 min',
    coverImage: PEXELS(34135038), // Real estate keys + documents + house models
  },
  {
    slug: 'custo-de-capital-no-flip-tempo-e-margem',
    title: 'Custo de capital no flip: por que tempo é margem',
    excerpt: 'Cada mês com o imóvel parado tem um preço. Como calcular esse preço e usar ele pra decidir velocidade da operação.',
    pillar: 'financeiro',
    pillarLabel: 'Financeiro',
    date: '2026-03-25',
    dateLabel: '25 mar 2026',
    readTime: '8 min',
    coverImage: PEXELS(7567486),  // Graph on laptop screen (analytics)
  },
  {
    slug: 'venda-direta-corretor-imobiliaria-qual-canal-escolher',
    title: 'Venda direta, corretor ou imobiliária: qual canal escolher pra cada imóvel',
    excerpt: 'O canal de saída define velocidade, preço final e margem. Como decidir caso a caso, sem amarrar exclusividade no automático.',
    pillar: 'comercial',
    pillarLabel: 'Comercialização',
    date: '2026-03-18',
    dateLabel: '18 mar 2026',
    readTime: '8 min',
    coverImage: PEXELS(8293651),  // Corretora discutindo contrato com casal no escritório
  },
  {
    slug: 'precificacao-de-saida-comparaveis-liquidez-tempo',
    title: 'Precificação de saída: comparáveis, liquidez e tempo de mercado',
    excerpt: 'Por que o preço pedido nem sempre reflete o mercado real — e como precificar pra vender no prazo planejado.',
    pillar: 'comercial',
    pillarLabel: 'Comercialização',
    date: '2026-03-11',
    dateLabel: '11 mar 2026',
    readTime: '8 min',
    coverImage: PEXELS(33461264), // Fachada geométrica de prédio moderno brasileiro
  },
  {
    slug: 'prestacao-de-contas-no-flip-fechamento-do-ciclo',
    title: 'Prestação de contas no flip: o que entregar ao investidor no fechamento',
    excerpt: 'Repasses, documentos finais, baixa de pendências. O ciclo só termina quando o resultado é conferido — e auditável.',
    pillar: 'fechamento',
    pillarLabel: 'Fechamento',
    date: '2026-03-04',
    dateLabel: '04 mar 2026',
    readTime: '8 min',
    coverImage: PEXELS(7698799),  // Team reviewing papers
  },
  {
    slug: 'flip-vs-buy-and-hold-quando-cada-estrategia-faz-sentido',
    title: 'Flip x buy & hold: quando faz sentido cada estratégia',
    excerpt: 'Liquidez, alavancagem, perfil do imóvel e perfil de capital. Como escolher antes de comprar, não depois.',
    pillar: 'estrategia',
    pillarLabel: 'Estratégia',
    date: '2026-02-25',
    dateLabel: '25 fev 2026',
    readTime: '8 min',
    coverImage: PEXELS(590045),   // Graph and line chart printed paper
  },
];

function NavConteudo() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);
  return (
    <header className="nav" data-scrolled={scrolled} data-mobile-open={mobileOpen}>
      <div className="container nav-inner">
        <a href="/" className="nav-logo">
          <img src="assets/logo-app-icon-blue.png" alt="" />
          <span className="nav-wordmark">Flipper Hub</span>
        </a>
        <nav className="nav-links">
          <a className="nav-link" href="/sobre">Sobre</a>
          <a className="nav-link" href="/conteudo" aria-current="page" style={{ color: 'var(--brand-600)' }}>Conteúdo</a>
          <a className="nav-link" href="/precos">Preços</a>
        </nav>
        <div className="nav-actions">
          <a className="btn btn-ghost" href='https://app.flipperhub.com.br' target="_blank" rel="noopener">Entrar</a>
          <a className="btn btn-primary" href="/precos">Ver planos</a>
        </div>
        <button
          type="button"
          className="nav-toggle"
          aria-label={mobileOpen ? 'Fechar menu' : 'Abrir menu'}
          aria-expanded={mobileOpen}
          aria-controls="nav-mobile-drawer"
          onClick={() => setMobileOpen(v => !v)}
        >
          <span className="nav-toggle-bar" />
          <span className="nav-toggle-bar" />
          <span className="nav-toggle-bar" />
        </button>
      </div>
      <div className="nav-mobile-drawer" id="nav-mobile-drawer" hidden={!mobileOpen}>
        <nav className="nav-mobile-links" onClick={() => setMobileOpen(false)}>
          <a className="nav-mobile-link" href="/sobre">Sobre</a>
          <a className="nav-mobile-link" href="/conteudo" aria-current="page" style={{ color: 'var(--brand-600)' }}>Conteúdo</a>
          <a className="nav-mobile-link" href="/precos">Preços</a>
        </nav>
        <div className="nav-mobile-actions" onClick={() => setMobileOpen(false)}>
          <a className="btn btn-secondary btn-lg" href='https://app.flipperhub.com.br' target="_blank" rel="noopener">Entrar</a>
          <a className="btn btn-primary btn-lg" href="/precos">Ver planos</a>
        </div>
      </div>
    </header>
  );
}

function ConteudoHero() {
  return (
    <section className="conteudo-hero">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow">Conteúdo</span>
          <h1>Inteligência operacional<br/>do <span className="accent">flip imobiliário</span><br/>brasileiro.</h1>
          <p className="lede">
            Artigos, guias e materiais sobre como operar imóveis com mais método, controle e clareza —
            do garimpo ao fechamento. Conteúdo escrito por quem opera, pra quem opera.
          </p>
        </div>
      </div>
    </section>
  );
}

function PillarFilter({ active, counts, onChange }) {
  const ref = React.useRef(null);
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      setStuck(r.top <= 81); // matches sticky top + 1
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div ref={ref} className={`conteudo-filter ${stuck ? 'is-stuck' : ''}`}>
      <div className="container">
        <div className="conteudo-filter-row" role="tablist" aria-label="Filtrar por pilar editorial">
          {PILLARS.map(p => (
            <button
              key={p.id}
              type="button"
              role="tab"
              aria-pressed={active === p.id}
              className="pill"
              onClick={() => onChange(p.id)}
            >
              {p.label}
              <span className="pill-count">{counts[p.id] ?? 0}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function ArticleCard({ a, featured }) {
  return (
    <a className={`article-card ${featured ? 'is-featured' : ''} reveal`} href={`conteudo/${a.slug}.html`}>
      <div className="article-card-cover">
        <img
          className="cover-img"
          src={a.coverImage}
          alt=""
          loading="lazy"
          decoding="async"
        />
        <span className="cover-pillar-tag">{a.pillarLabel}</span>
      </div>
      <div className="article-card-body">
        <div className="article-card-meta">
          <span>{a.dateLabel}</span>
          <span className="dot" />
          <span>{a.readTime} de leitura</span>
        </div>
        <h3>{a.title}</h3>
        <p className="article-card-excerpt">{a.excerpt}</p>
        <span className="article-card-link">Ler artigo</span>
      </div>
    </a>
  );
}

function ConteudoGrid({ active }) {
  const filtered = active === 'todos'
    ? ARTICLES
    : ARTICLES.filter(a => a.pillar === active);

  return (
    <section className="conteudo-grid-section">
      <div className="container">
        <div className="conteudo-grid">
          {filtered.length === 0 ? (
            <div className="conteudo-empty">
              Nada por aqui ainda nesse pilar. Em breve.
            </div>
          ) : filtered.map((a, i) => (
            <ArticleCard key={a.slug} a={a} featured={i === 0 && active === 'todos'} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  return (
    <section className="conteudo-newsletter">
      <div className="container">
        <div className="newsletter-card reveal">
          <h3>Receba um artigo novo no seu email, toda semana.</h3>
          <p>Conteúdo prático sobre flip imobiliário, gestão de operação e o que o mercado brasileiro está aprendendo na marra. Sem spam.</p>
          <form className="newsletter-form" onSubmit={(e) => { e.preventDefault(); alert('Inscrição registrada (placeholder).'); }}>
            <input type="email" required placeholder="seu@email.com" aria-label="Seu email" />
            <button type="submit" className="btn btn-primary">Assinar</button>
          </form>
          <p className="newsletter-disclaimer">Você pode cancelar a inscrição a qualquer momento.</p>
        </div>
      </div>
    </section>
  );
}

function ConteudoPage() {
  const [active, setActive] = React.useState('todos');

  const counts = React.useMemo(() => {
    const c = { todos: ARTICLES.length };
    for (const a of ARTICLES) c[a.pillar] = (c[a.pillar] || 0) + 1;
    return c;
  }, []);

  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.06 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [active]);

  return (
    <div className="fh-site">
      <NavConteudo />
      <main>
        <ConteudoHero />
        <PillarFilter active={active} counts={counts} onChange={setActive} />
        <ConteudoGrid active={active} />
        <Newsletter />
      </main>
      <window.SiteFooter />
    </div>
  );
}

window.ConteudoPage = ConteudoPage;