/* global React */
const XS = window.FlavioCorretoraDesignSystem_9d5869;
const XD = window.FCS_DATA;
const X = window.FCS;
const { Button, Icon, Card, Badge, Tag } = XS;

const postParams = new URLSearchParams(location.search);
const post = XD.postBySlug(postParams.get('post')) || XD.POSTS[0];
const relProd = XD.productBySlug(post.related);
const morePosts = XD.POSTS.filter((p) => p.slug !== post.slug).slice(0, 3);

function Block({ b }) {
  if (b.type === 'h')
    return <h2 style={{ margin: '18px 0 0', fontSize: 'var(--fs-h3)', fontWeight: 400, color: 'var(--text-strong)', letterSpacing: 'var(--ls-tight)' }}>{b.text}</h2>;
  if (b.type === 'ul')
    return (
      <ul style={{ margin: 0, paddingLeft: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {b.items.map((it, i) => (
          <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 'var(--fs-lead)', color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)' }}>
            <Icon name="check" size={20} strokeWidth={2} color="var(--gold-500)" style={{ flex: '0 0 auto', marginTop: 5 }} />
            <span>{it}</span>
          </li>
        ))}
      </ul>
    );
  return <p style={{ margin: 0, fontSize: 'var(--fs-lead)', color: 'var(--text-body)', lineHeight: 'var(--lh-relaxed)' }}>{b.text}</p>;
}

/* Monta apenas em contexto standalone (não dentro do _ds_bundle.js). */
if (typeof __ds_ns === 'undefined')
X.mount(() => (
  <React.Fragment>
    {/* HERO */}
    <section style={{ background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden', marginTop: 'calc(-1 * var(--header-h))' }}>
      <X.Blobs tone="dark" />
      <div style={{ ...X.wrap, position: 'relative', maxWidth: 820, paddingTop: 'calc(var(--header-h) + 2.5rem)', paddingBottom: 'clamp(3rem, 2rem + 4vw, 5rem)', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <X.HeroCrumbs items={[{ label: 'Início', href: 'index.html' }, { label: 'Blog', href: 'blog.html' }, { label: post.title }]} />
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}><Tag>{post.cat}</Tag></div>
        <h1 style={{ margin: 0, fontSize: 'var(--fs-display-2)', fontWeight: 300, color: 'var(--neutral-0)', lineHeight: 1.08, letterSpacing: 'var(--ls-tight)' }}>{post.title}</h1>
        <p style={{ margin: 0, fontSize: 'var(--fs-lead)', color: 'var(--blue-200)', lineHeight: 'var(--lh-relaxed)', maxWidth: '58ch' }}>{post.excerpt}</p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', color: 'var(--blue-200)' }}>
          <span>{post.author}</span><span>·</span><span>{post.date}</span><span>·</span><span>{post.read} de leitura</span>
        </div>
      </div>
    </section>

    {post.image && (
      <div style={{ ...X.wrap, marginTop: 'calc(-1 * clamp(2rem, 1rem + 3vw, 3.5rem))', position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 900, margin: '0 auto', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', aspectRatio: '16 / 9' }}>
          <img src={post.image} alt={post.title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
      </div>
    )}

    {/* CORPO */}
    <section style={X.sectionPad}>
      <div style={{ ...X.wrap, maxWidth: 720, display: 'flex', flexDirection: 'column', gap: 22 }}>
        {post.body.map((b, i) => <Block key={i} b={b} />)}

        {relProd && (
          <div style={{ ...X.glassStyle, marginTop: 20, padding: 28, display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              <span style={{ width: 52, height: 52, flex: '0 0 auto', borderRadius: 'var(--radius-md)', background: 'var(--surface-inverse)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={relProd.icon} size={26} strokeWidth={1.5} color="var(--gold-500)" />
              </span>
              <div>
                <p style={{ margin: '0 0 2px', fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-xs)', textTransform: 'uppercase', letterSpacing: 'var(--ls-wide)', color: 'var(--text-muted)' }}>Seguro relacionado</p>
                <p style={{ margin: 0, fontSize: 'var(--fs-h4)', fontWeight: 500, color: 'var(--text-strong)' }}>{relProd.title}</p>
              </div>
            </div>
            <Button href={'produto.html?p=' + relProd.slug} iconTrailing="arrow-right">Ver cobertura</Button>
          </div>
        )}

        <div style={{ marginTop: 8 }}>
          <a href="blog.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-sm)', fontWeight: 600, color: 'var(--blue-800)', textDecoration: 'none' }}>
            <Icon name="arrow-left" size={16} strokeWidth={2} /> Voltar ao blog
          </a>
        </div>
      </div>
    </section>

    {/* MAIS ARTIGOS */}
    <section style={{ ...X.sectionPad, background: 'var(--surface-subtle)' }}>
      <div style={X.wrap}>
        <X.SectionHead eyebrow="Continue lendo" title="Mais do nosso blog" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="fcs-seg-grid-3">
          {morePosts.map((p, i) => (
            <X.Reveal key={p.slug} delay={(i % 3) * 60}>
              <a href={'post.html?post=' + p.slug} style={{ textDecoration: 'none' }}>
                <Card padding="0" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
                  <div style={{ background: 'linear-gradient(135deg, var(--blue-800), var(--blue-950))', height: 150, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
                    {p.image
                      ? <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={(XD.productBySlug(p.related) || {}).icon || 'newspaper'} size={36} strokeWidth={1.2} color="var(--blue-200)" />
                        </React.Fragment>}
                    <span style={{ position: 'absolute', top: 14, left: 14, 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>
                  <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>
            </X.Reveal>
          ))}
        </div>
      </div>
    </section>
  </React.Fragment>
));