function Blog() {
  const D = (window.SITE && window.SITE.blog) || {};
  const POSTS = (window.SITE && window.SITE.posts) || [];

  if (!POSTS.length) {
    return (
      <section id="blog" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">{D.eyebrow}</span>
            <h2>{D.title} <span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span></h2>
          </div>
          <p style={{ color: 'var(--muted)' }}>Em breve, novos artigos.</p>
        </div>
      </section>
    );
  }

  const featured = POSTS.find(p => p.featured) || POSTS[0];
  const rest = POSTS.filter(p => p !== featured);

  return (
    <section id="blog" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, gap: 20, flexWrap: 'wrap' }}>
          <div className="section-head" style={{ marginBottom: 0 }}>
            <span className="eyebrow">{D.eyebrow}</span>
            <h2>{D.title}<br/><span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span></h2>
          </div>
          <a href="#" className="btn btn-ghost">{D.ctaLabel} <Icon.Arrow width="16" height="16" /></a>
        </div>

        <div className="blog-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 20 }}>
          <BlogCard post={featured} feature />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {rest[0] && <BlogCard post={rest[0]} compact />}
            {rest[1] && <BlogCard post={rest[1]} compact />}
          </div>
          {rest[2] && <BlogCard post={rest[2]} />}
        </div>

        {(rest[3] || rest[4]) && (
          <div className="blog-grid-secondary" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 20 }}>
            {rest[3] && <BlogCard post={rest[3]} horizontal />}
            {rest[4] && <BlogCard post={rest[4]} horizontal />}
          </div>
        )}

        <style>{`
          @media (max-width: 900px) {
            .blog-grid, .blog-grid-secondary { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function BlogCard({ post, feature, compact, horizontal }) {
  return (
    <article style={{
      background: 'var(--bg)', border: '1px solid var(--line)',
      borderRadius: 'var(--radius-lg)', overflow: 'hidden',
      display: 'flex', flexDirection: horizontal ? 'row' : 'column',
      cursor: 'pointer', transition: 'transform .18s ease, box-shadow .18s ease',
      flex: compact ? 1 : 'initial',
    }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
       onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
      {!compact && (
        <div className="ph" style={{
          height: feature ? 280 : horizontal ? 'auto' : 180,
          width: horizontal ? 160 : '100%',
          flexShrink: 0,
          borderRadius: 0, border: 'none',
          background: post.cover ? `center/cover no-repeat url(${post.cover})` : (feature ? 'var(--primary)' : 'var(--warm)'),
          color: feature ? 'color-mix(in oklab, var(--primary-ink) 70%, transparent)' : 'var(--ph-fg)',
        }}>
          {!post.cover && <span style={{ fontFamily: 'var(--mono)', fontSize: 11 }}>imagem · {(post.cat||'').toLowerCase()}</span>}
        </div>
      )}
      <div style={{ padding: compact ? 18 : horizontal ? 20 : 24, flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{
            display: 'inline-block', padding: '3px 9px', background: 'var(--tag-blog-bg)',
            color: 'var(--tag-blog-fg)', borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: '.02em',
          }}>{post.cat}</span>
          <span style={{ fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--mono)' }}>{post.date} · {post.read}</span>
        </div>
        <h3 style={{ fontSize: feature ? 26 : compact || horizontal ? 17 : 20, lineHeight: 1.25 }}>{post.title}</h3>
        {(feature || horizontal) && post.excerpt && (
          <p style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 2 }}>{post.excerpt}</p>
        )}
        {post.author && !compact && (
          <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--line)', fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
            por {post.author}
          </div>
        )}
      </div>
    </article>
  );
}

function FAQ() {
  const D = (window.SITE && window.SITE.faq) || {};
  const settings = (window.SITE && window.SITE.settings) || {};
  const items = D.items || [];
  const [open, setOpen] = React.useState(0);
  const waDigits = (settings.contact && settings.contact.whatsappDigits) || '5544999451010';

  return (
    <section style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="faq-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 60, alignItems: 'flex-start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <span className="eyebrow">{D.eyebrow}</span>
            <h2 style={{ marginTop: 14, marginBottom: 18 }}>{D.title}</h2>
            <p style={{ fontSize: 16, marginBottom: 24 }}>{D.subtitle}</p>
            <a href={`https://wa.me/${waDigits}`} target="_blank" rel="noopener" className="btn btn-whatsapp">
              <Icon.Whatsapp width="16" height="16" /> {D.ctaLabel}
            </a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {items.map((it, i) => {
              const isOpen = i === open;
              return (
                <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: '100%', textAlign: 'left',
                    padding: '22px 0', background: 'transparent',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                    color: 'var(--ink)', fontSize: 17, fontWeight: 500, fontFamily: 'var(--serif)',
                  }}>
                    {it.q}
                    <span style={{
                      width: 32, height: 32, borderRadius: '50%',
                      background: isOpen ? 'var(--primary)' : 'var(--warm)',
                      color: isOpen ? 'var(--primary-ink)' : 'var(--ink)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                      transition: 'all .2s ease',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    }}>
                      <Icon.Plus width="16" height="16" />
                    </span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 400 : 0, overflow: 'hidden',
                    transition: 'max-height .3s ease, padding .3s ease',
                    paddingBottom: isOpen ? 22 : 0,
                  }}>
                    <p style={{ fontSize: 15.5, color: 'var(--ink-2)', maxWidth: 620 }}>{it.a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .faq-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
            .faq-layout > div:first-child { position: static !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Blog = Blog;
window.FAQ = FAQ;