// GSP — Conocimiento (Blog): índice + artículo.
function BlogReveal({ children, delay = 0, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    const ob = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }), { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    ob.observe(el);
    return () => ob.disconnect();
  }, []);
  return <div ref={ref} className="reveal" style={{ transitionDelay: delay + 's', ...style }}>{children}</div>;
}

function BlogIndex() {
  const Icon = window.Icon;
  const featured = window.GSP_ARTICLE;
  const cats = ['Todos', 'Vigilancia', 'Alarmas', 'Cámaras', 'Control de Accesos'];
  const [active, setActive] = React.useState('Todos');
  const all = window.GSP_ARTICLES;
  const list = active === 'Todos' ? all : all.filter(a => a[2] === active);

  return (
    <React.Fragment>
      <section className="blog-hero">
        <div className="blog-hero-inner">
          <div className="hero-eyebrow">Centro de Conocimiento</div>
          <h1>Seguridad que se entiende</h1>
          <p>Guías, comparativas y consejos prácticos para proteger tu hogar, tu comercio y tu empresa. Sin tecnicismos innecesarios.</p>
          <div className="blog-filters">
            {cats.map(c => (
              <button key={c} className={'blog-filter' + (active === c ? ' active' : '')} onClick={() => setActive(c)}>{c}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="section blog-list">
        <div className="blog-list-inner">
          {(active === 'Todos' || active === featured.category) && (
            <BlogReveal>
              <a className="blog-featured" href="conocimiento-articulo.html">
                <div className="bf-img">
                  <span className="bf-badge"><Tag>Destacado</Tag></span>
                  <div className="img-ph-icon"><Icon name={featured.heroIcon} size={32} /></div>
                </div>
                <div className="bf-body">
                  <span className="blog-cat">{featured.category}</span>
                  <h2>{featured.title}</h2>
                  <p>{featured.lead}</p>
                  <div className="blog-meta"><span>{featured.date}</span><span className="dot" /><span>{featured.readTime}</span></div>
                </div>
              </a>
            </BlogReveal>
          )}

          <div className="blog-grid">
            {list.map(([cls, icon, cat, title, excerpt, date, href], i) => (
              <BlogReveal key={title} delay={0.06 * (i + 1)}>
                <a className="blog-card" href={href}>
                  <div className={'bc-img ' + cls}><Icon name={icon} size={30} /></div>
                  <div className="bc-body">
                    <span className="blog-cat">{cat}</span>
                    <h3>{title}</h3>
                    <p>{excerpt}</p>
                    <div className="blog-meta"><span>{date}</span></div>
                  </div>
                </a>
              </BlogReveal>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.BlogIndex = BlogIndex;

function Article() {
  const Icon = window.Icon;
  const a = window.GSP_ARTICLE;
  return (
    <React.Fragment>
      <section className="article-hero">
        <div className="article-hero-inner">
          <div className="article-breadcrumb"><a href="index.html">Inicio</a> · <a href="conocimiento.html">Conocimiento</a> · {a.category}</div>
          <span className="blog-cat">{a.category}</span>
          <h1>{a.title}</h1>
          <div className="article-meta"><strong>{a.author}</strong><span className="dot" /><span>{a.date}</span><span className="dot" /><span>{a.readTime}</span></div>
        </div>
      </section>

      <section className="article-body">
        <div className="article-layout">
          <div className="article-main">
            <p className="article-lead">{a.lead}</p>
            <div className="article-content" dangerouslySetInnerHTML={{ __html: a.body }} />
          </div>
          <aside className="article-aside">
            <div className="aside-box aside-toc">
              <h4>En este artículo</h4>
              {a.toc.map(([id, label]) => <a key={id} href={'#' + id}>{label}</a>)}
            </div>
            <div className="aside-box aside-cta">
              <h4>Cotización sin cargo</h4>
              <p>Un especialista evalúa tu propiedad y te recomienda la solución exacta.</p>
              <Button as="a" href="contacto" variant="primary" size="sm" fullWidth>Solicitar cotización</Button>
            </div>
          </aside>
        </div>
      </section>

      <section className="section article-related">
        <div className="article-related-inner">
          <SectionHeading overline="Seguí leyendo" title="Artículos relacionados" />
          <div className="blog-grid" style={{ marginTop: '3rem' }}>
            {window.GSP_ARTICLES.slice(0, 3).map(([cls, icon, cat, title, excerpt, date, href]) => (
              <a className="blog-card" href={href} key={title}>
                <div className={'bc-img ' + cls}><Icon name={icon} size={30} /></div>
                <div className="bc-body">
                  <span className="blog-cat">{cat}</span>
                  <h3>{title}</h3>
                  <p>{excerpt}</p>
                  <div className="blog-meta"><span>{date}</span></div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.Article = Article;