/* global React */
const BS = window.FlavioCorretoraDesignSystem_9d5869;
const BD = window.FCS_DATA;
const B = window.FCS;
const { Button, Icon, Card, Tag, Badge } = BS;

const CATS = ['Todos', 'Automóvel', 'Vida', 'Previdência', 'Empresas', 'Sinistro'];

function PostArt({ p, tall }) {
  return (
    <div style={{ background: 'linear-gradient(135deg, var(--blue-800), var(--blue-950))', height: tall ? '100%' : 168, minHeight: tall ? 300 : 168, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
      {p.image
        ? <img className="fcs-feat-img" src={p.image} alt={p.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        : <React.Fragment>
            <div style={{ position: 'absolute', inset: 0, opacity: 0.14, backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 22px)' }} />
            <Icon name={(BD.productBySlug(p.related) || {}).icon || 'newspaper'} size={tall ? 56 : 38} strokeWidth={1.2} color="var(--blue-200)" />
          </React.Fragment>}
      <span style={{ position: 'absolute', top: 14, left: 14, display: 'inline-flex', alignItems: 'center', padding: '4px 10px', borderRadius: 'var(--radius-pill)', background: 'rgba(11,42,71,0.55)', backdropFilter: 'blur(8px)', color: 'var(--neutral-0)', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-xs)', fontWeight: 600 }}>{p.cat}</span>
    </div>
  );
}

function BlogApp() {
  const [cat, setCat] = React.useState('Todos');
  const featured = BD.POSTS.filter((p) => p.featured)[0] || BD.POSTS[0];
  const list = cat === 'Todos' ? BD.POSTS : BD.POSTS.filter((p) => p.cat === cat);

  return (
    <React.Fragment>
      {/* DESTAQUE */}
      <section style={{ ...B.sectionPad, paddingBottom: 'calc(var(--section-pad-y) / 2)' }}>
        <div style={B.wrap}>
          <a href={'post.html?post=' + featured.slug} style={{ textDecoration: 'none' }}>
            <div style={{ ...B.glassStyle, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.1fr 1fr' }} className="fcs-prod-grid">
              <PostArt p={featured} tall />
              <div style={{ padding: 'clamp(28px,4vw,44px)', display: 'flex', flexDirection: 'column', gap: 16, justifyContent: 'center' }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}><Badge tone="accent">Destaque</Badge><Tag>{featured.cat}</Tag></div>
                <h2 style={{ margin: 0, fontSize: 'var(--fs-h1)', fontWeight: 400, lineHeight: 1.15, color: 'var(--text-strong)' }}>{featured.title}</h2>
                <p style={{ margin: 0, fontSize: 'var(--fs-lead)', color: 'var(--text-muted)', lineHeight: 'var(--lh-relaxed)' }}>{featured.excerpt}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>
                  <span>{featured.author}</span><span>·</span><span>{featured.date}</span><span>·</span><span>{featured.read}</span>
                </div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--blue-800)', fontFamily: 'var(--font-sans)', fontWeight: 600 }}>Ler artigo <Icon name="arrow-right" size={16} strokeWidth={2} /></span>
              </div>
            </div>
          </a>
        </div>
      </section>

      {/* FILTRO + GRID */}
      <section style={{ paddingBottom: 'var(--section-pad-y)' }}>
        <div style={B.wrap}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32 }}>
            {CATS.map((c) => (
              <button key={c} onClick={() => setCat(c)} style={{
                cursor: 'pointer', padding: '8px 18px', borderRadius: 'var(--radius-pill)',
                border: '1px solid ' + (cat === c ? 'var(--blue-800)' : 'var(--border-subtle)'),
                background: cat === c ? 'var(--blue-800)' : 'var(--surface-card)',
                color: cat === c ? 'var(--neutral-0)' : 'var(--text-body)',
                fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', fontWeight: 500,
                transition: 'all var(--dur-fast) var(--ease-standard)',
              }}>{c}</button>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="fcs-seg-grid-3">
            {list.map((p) => (
              <a key={p.slug} href={'post.html?post=' + p.slug} style={{ textDecoration: 'none' }}>
                  <Card padding="0" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
                    <PostArt p={p} />
                    <div style={{ padding: '22px 22px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                      <h3 style={{ margin: 0, fontSize: 'var(--fs-h4)', fontWeight: 500, lineHeight: 1.25, color: 'var(--text-strong)' }}>{p.title}</h3>
                      <p style={{ margin: 0, fontSize: 'var(--fs-sm)', color: 'var(--text-muted)', lineHeight: 'var(--lh-relaxed)', flex: 1 }}>{p.excerpt}</p>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-xs)', color: 'var(--text-muted)', paddingTop: 8, borderTop: '1px solid var(--border-subtle)' }}>
                        <span>{p.date}</span><span>·</span><span>{p.read}</span>
                      </div>
                    </div>
                  </Card>
                </a>
            ))}
          </div>
          {list.length === 0 && <p style={{ textAlign: 'center', color: 'var(--text-muted)', fontFamily: 'var(--font-sans)', padding: '40px 0' }}>Nenhum artigo nesta categoria ainda.</p>}
        </div>
      </section>

      {/* NEWSLETTER */}
      <section style={{ ...B.sectionPad, background: 'var(--surface-subtle)' }}>
        <div style={{ ...B.wrap, maxWidth: 680, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <B.Eyebrow>Newsletter</B.Eyebrow>
          <h2 style={{ margin: 0, fontSize: 'var(--fs-h1)', fontWeight: 400 }}>Receba nossos conteúdos</h2>
          <p style={{ margin: 0, maxWidth: '44ch', color: 'var(--text-muted)', lineHeight: 'var(--lh-relaxed)' }}>Dicas práticas sobre seguros, direto no seu e-mail. Sem spam, prometemos.</p>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: 'flex', gap: 10, maxWidth: 460, width: '100%', margin: '8px auto 0', flexWrap: 'wrap', justifyContent: 'center' }}>
            <input placeholder="voce@email.com" style={{ flex: 1, minWidth: 220, padding: '13px 16px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-strong)', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-base)', background: 'var(--surface-card)' }} />
            <Button type="submit" size="lg">Inscrever</Button>
          </form>
        </div>
      </section>
    </React.Fragment>
  );
}

/* Monta apenas em contexto standalone (não dentro do _ds_bundle.js). */
if (typeof __ds_ns === 'undefined')
B.mount(() => (
  <React.Fragment>
    <B.PageHero crumbs={[{ label: 'Início', href: 'index.html' }, { label: 'Blog' }]} eyebrow="Blog" title="Conteúdo que descomplica seguros" accent="descomplica"
      intro="Guias, dicas e explicações sem juridiquês, para você decidir com clareza e confiança." align="center" />
    <BlogApp />
  </React.Fragment>
));