/* global React, ReactDOM, Header, PromoBar, Footer, Logo, SocialIcon */
const { useState: useBlogState } = React;

// ============================================================
// CONTENT
// ============================================================
const CATEGORIAS = [
  { id: 'todos', label: 'Tudo' },
  { id: 'trimestre-1', label: '1º trimestre' },
  { id: 'trimestre-2', label: '2º trimestre' },
  { id: 'trimestre-3', label: '3º trimestre' },
  { id: 'pos-parto', label: 'Pós-parto' },
  { id: 'corpo', label: 'Corpo' },
  { id: 'emocao', label: 'Emoção' },
  { id: 'sono', label: 'Sono' },
  { id: 'alimentacao', label: 'Alimentação' },
];

const TRIMESTRE_STRIP = [
  { num: '01', lab: '1º trimestre', ct: '42 artigos', cat: 'trimestre-1' },
  { num: '02', lab: '2º trimestre', ct: '38 artigos', cat: 'trimestre-2' },
  { num: '03', lab: '3º trimestre', ct: '47 artigos', cat: 'trimestre-3' },
  { num: '04', lab: 'Pós-parto', ct: '29 artigos', cat: 'pos-parto' },
];

const FEATURED = {
  cat: '2º trimestre',
  tempo: '8 min',
  data: '24 mai',
  titulo: 'O que ninguém te conta sobre o segundo trimestre — e o que finalmente fica bom.',
  excerpt: 'A energia volta. A barriga aparece. A culpa também: você se sente bem demais, e isso te desconforta. Nossa obstetra explica por que esse alívio é real, fisiológico e não tem armadilha.',
  autora: 'Dra. Marina Castelli',
  papel: 'Obstetra · Conselho UAUBaby',
  initial: 'M',
  img: 'assets/box.jpg',
};

const POSTS = [
  {
    cat: 'trimestre-1', catLabel: '1º trimestre', tempo: '6 min', data: '21 mai',
    titulo: 'Náusea sem culpa: 5 rituais que funcionam sem prescrição.',
    excerpt: 'Chá de gengibre fresco, sim. Pulseira de acupressão, talvez. O que dizem os estudos sobre o que vale a pena tentar antes de medicar.',
    autora: 'Camila Vieira', papel: 'Doula sênior', initial: 'C',
    cor: 'var(--sopro)',
  },
  {
    cat: 'emocao', catLabel: 'Emoção', tempo: '11 min', data: '18 mai',
    titulo: 'Ansiedade na gestação: por que 1 em cada 3 mulheres sente — e não fala.',
    excerpt: 'Dado, sintoma, e o limite entre o normal e o que pede ajuda. Com uma checklist clínica baseada em pesquisas brasileiras.',
    autora: 'Dra. Júlia Andrade', papel: 'Psicóloga perinatal', initial: 'J',
    cor: 'var(--acolhimento)',
  },
  {
    cat: 'corpo', catLabel: 'Corpo', tempo: '5 min', data: '15 mai',
    titulo: 'Estrias: o que previne de verdade (e o que é só marketing caro).',
    excerpt: 'Spoiler: hidratação importa, mas genética importa mais. O que faz diferença, na visão de duas dermatologistas.',
    autora: 'Dra. Letícia Brum', papel: 'Dermatologia gestacional', initial: 'L',
    cor: 'var(--ritual)', light: true,
  },
  {
    cat: 'pos-parto', catLabel: 'Pós-parto', tempo: '9 min', data: '12 mai',
    titulo: 'A "quarto trimestre": o que esperar nas primeiras 12 semanas depois do parto.',
    excerpt: 'O baby blues. O retorno hormonal. A solidão. Um mapa honesto do que vai acontecer com o seu corpo e com a sua cabeça.',
    autora: 'Dra. Helena Rocha', papel: 'Pediatra', initial: 'H',
    cor: 'var(--vinculo)', light: true,
  },
  {
    cat: 'trimestre-3', catLabel: '3º trimestre', tempo: '7 min', data: '08 mai',
    titulo: 'O saco da maternidade real: o que cabe em uma mala, e o que você não vai usar.',
    excerpt: 'Lista revisada por 30 mães de Jundiaí e Campinas. O que entrou, o que ficou em casa, e os 4 itens que ninguém esperava precisar.',
    autora: 'Renata Souto', papel: 'Nutricionista materno-infantil', initial: 'R',
    cor: 'var(--serenidade)',
  },
  {
    cat: 'sono', catLabel: 'Sono', tempo: '4 min', data: '03 mai',
    titulo: 'Dormir de lado: por que a posição importa e como não acordar com dor.',
    excerpt: 'A almofada certa, o ângulo certo, e por que travesseiros entre os joelhos mudam tudo no terceiro trimestre.',
    autora: 'Camila Vieira', papel: 'Doula sênior', initial: 'C',
    cor: 'var(--sopro)',
  },
  {
    cat: 'alimentacao', catLabel: 'Alimentação', tempo: '10 min', data: '29 abr',
    titulo: 'Restrições alimentares: o guia honesto do que evitar (e do que é exagero).',
    excerpt: 'Sushi cru, sim. Queijos pasteurizados, ok. Café, com moderação. Lista revisada por nutricionista materno-infantil.',
    autora: 'Renata Souto', papel: 'Nutricionista materno-infantil', initial: 'R',
    cor: 'var(--acolhimento)',
  },
  {
    cat: 'trimestre-2', catLabel: '2º trimestre', tempo: '6 min', data: '24 abr',
    titulo: 'Quando começa a sentir o bebê mexer — e o que fazer quando você se assusta.',
    excerpt: 'Entre a semana 16 e 22 é o normal. Os movimentos mudam ao longo da gestação — aqui está como acompanhar sem virar ansiedade.',
    autora: 'Dra. Marina Castelli', papel: 'Obstetra', initial: 'M',
    cor: 'var(--ritual)', light: true,
  },
];

function PostCard({ p }) {
  return (
    <article className="post-card">
      <div className="post-card-photo placeholder" style={{ background: p.cor, color: p.light ? 'var(--leveza)' : 'var(--vinculo)' }}>
        <span className="kicker" style={{ fontSize: 28, color: p.light ? 'rgba(255,255,255,0.6)' : 'rgba(43,68,95,0.32)' }}>
          {p.catLabel.toLowerCase()}
        </span>
      </div>
      <p className="post-card-meta">
        <span className="tag-inline">{p.catLabel}</span>
        <span className="dot"></span>
        <span>{p.tempo}</span>
        <span className="dot"></span>
        <span>{p.data}</span>
      </p>
      <h3>{p.titulo}</h3>
      <p className="post-card-excerpt">{p.excerpt}</p>
      <div className="post-card-author">
        <div className="post-card-author-av">{p.initial}</div>
        <div>
          <strong style={{ color: 'var(--vinculo)', fontWeight: 600 }}>{p.autora}</strong>
          <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>{p.papel}</div>
        </div>
      </div>
    </article>
  );
}

function BlogApp() {
  const [filter, setFilter] = useBlogState('todos');
  const [search, setSearch] = useBlogState('');

  const filtered = POSTS.filter(p => {
    const matchesCat = filter === 'todos' || p.cat === filter;
    const matchesSearch = !search || (p.titulo + p.excerpt).toLowerCase().includes(search.toLowerCase());
    return matchesCat && matchesSearch;
  });

  return (
    <>
      <PromoBar />
      <Header active="blog" />

      <section className="blog-hero">
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 40px' }}>
            <span className="eyebrow">Diário UAUBaby</span>
            <h1 style={{
              fontFamily: 'var(--font-serif)', fontWeight: 400,
              fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1.05, letterSpacing: '-0.01em',
              color: 'var(--vinculo)', margin: '20px 0 24px'
            }}>
              Tudo o que a gente queria<br/>ter sabido <em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>antes.</em>
            </h1>
            <p className="lead" style={{ margin: '0 auto', textAlign: 'center' }}>
              Artigos escritos com nosso conselho clínico. Sem patrocínio cruzado, sem listas infinitas,
              sem clickbait. Só o que importa naquela semana — e na sua.
            </p>
          </div>

          <div className="trimestre-strip">
            {TRIMESTRE_STRIP.map((t, i) => (
              <div
                key={t.num}
                className={`trimestre-strip-item ${filter === t.cat ? 'is-active' : ''}`}
                onClick={() => setFilter(t.cat)}
              >
                <div className="num">{t.num}</div>
                <span className="lab">{t.lab}</span>
                <span className="ct">{t.ct}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <div className="blog-filters">
        <div className="container">
          <div className="blog-filters-row">
            <div className="blog-chips">
              {CATEGORIAS.map(c => (
                <button
                  key={c.id}
                  className={`chip ${filter === c.id ? 'is-active' : ''}`}
                  onClick={() => setFilter(c.id)}
                >{c.label}</button>
              ))}
            </div>
            <div className="blog-search">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
              <input placeholder="Buscar por tema, semana…" value={search} onChange={e => setSearch(e.target.value)} />
            </div>
          </div>
        </div>
      </div>

      <div className="container">
        <div className="blog-layout">
          <div>
            {filter === 'todos' && !search && (
              <div className="featured-row">
                <div className="featured-title">
                  <h2>Em <em>destaque</em> esta semana</h2>
                  <span style={{ fontSize: 12.5, color: 'var(--ink-mute)' }}>atualizado segunda-feira</span>
                </div>
                <article style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 40, alignItems: 'center' }}>
                  <div className="post-card-photo" style={{ aspectRatio: '4/3', borderRadius: 'var(--r-lg)' }}>
                    <img src={FEATURED.img} alt={FEATURED.titulo} loading="lazy" />
                  </div>
                  <div>
                    <p className="post-card-meta">
                      <span className="tag-inline">{FEATURED.cat}</span>
                      <span className="dot"></span>
                      <span>{FEATURED.tempo}</span>
                      <span className="dot"></span>
                      <span>{FEATURED.data}</span>
                    </p>
                    <h3 style={{
                      fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 36, lineHeight: 1.12,
                      letterSpacing: '-0.005em', color: 'var(--vinculo)', margin: '12px 0 16px'
                    }}>
                      {FEATURED.titulo}
                    </h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.55, margin: '0 0 24px' }}>
                      {FEATURED.excerpt}
                    </p>
                    <div className="post-card-author" style={{ marginBottom: 24 }}>
                      <div className="post-card-author-av">{FEATURED.initial}</div>
                      <div>
                        <strong style={{ color: 'var(--vinculo)', fontWeight: 600 }}>{FEATURED.autora}</strong>
                        <div style={{ fontSize: 12, color: 'var(--ink-mute)' }}>{FEATURED.papel}</div>
                      </div>
                    </div>
                    <a href="#" className="btn btn-primary">Ler o artigo completo</a>
                  </div>
                </article>
              </div>
            )}

            <div className="featured-title">
              <h2>
                {filter === 'todos'
                  ? <>Todos os <em>artigos</em></>
                  : <>{(CATEGORIAS.find(c => c.id === filter) || {}).label} <em style={{fontSize: 18, fontStyle: 'italic'}}>· {filtered.length} artigos</em></>}
              </h2>
              <span style={{ fontSize: 12.5, color: 'var(--ink-mute)' }}>{filtered.length} resultados</span>
            </div>

            <div className="posts-grid">
              {filtered.length === 0 ? (
                <div style={{ gridColumn: '1 / -1', padding: '80px 24px', textAlign: 'center', color: 'var(--ink-mute)' }}>
                  <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink-soft)' }}>
                    Nada por aqui ainda.
                  </p>
                  <p style={{ marginTop: 8, fontSize: 14 }}>Tente outra categoria — ou nos escreva sobre o que você quer ler.</p>
                </div>
              ) : filtered.map((p, i) => <PostCard key={i} p={p} />)}
            </div>
          </div>

          <aside className="blog-sidebar">
            <div className="side-card is-cta">
              <h4>Newsletter</h4>
              <h3 style={{
                fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 24, lineHeight: 1.2,
                color: 'var(--leveza)', margin: '0 0 12px'
              }}>
                Uma carta por semana — sob medida pra sua DPP.
              </h3>
              <p>Escreva sua data provável do parto e a gente te manda o que importa naquela semana.</p>
              <button className="btn btn-accent">Quero receber</button>
            </div>

            <div className="side-card">
              <h4>Mais lidos · 7 dias</h4>
              <ul>
                <li><span className="num">01</span><span>Quando o corpo "estica": dor lombar no 2º trimestre.</span></li>
                <li><span className="num">02</span><span>Como conversar com seu obstetra sobre plano de parto.</span></li>
                <li><span className="num">03</span><span>Qual fralda escolher: 8 marcas testadas por mães reais.</span></li>
                <li><span className="num">04</span><span>O que faz o segundo trimestre ser o mais leve da gestação.</span></li>
                <li><span className="num">05</span><span>Voltar ao trabalho: o que negociar antes do nascimento.</span></li>
              </ul>
            </div>

            <div className="side-card">
              <h4>Por especialista</h4>
              <ul style={{ gap: 10 }}>
                {['Dra. Marina Castelli · Obstetra','Dra. Helena Rocha · Pediatra','Dra. Júlia Andrade · Psicóloga perinatal','Camila Vieira · Doula sênior','Dra. Letícia Brum · Dermatologia','Renata Souto · Nutricionista'].map(s => (
                  <li key={s} style={{ fontSize: 13.5, paddingTop: 10, borderTop: '1px solid var(--line-soft)' }}>{s}</li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </div>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BlogApp />);