/* Recetas y Blog Page — with full article view */
const RecetarioPage = ({ setPage, activeArticle, setActiveArticle }) => {
  const allBlogs = window.BLOG_POSTS || [];
  const [filter, setFilter] = React.useState('Todos');
  
  const cats = ['Todos', 'Ingredientes', 'Técnica', 'Herramientas', 'Recetas'];
  const filtered = filter === 'Todos' ? allBlogs : allBlogs.filter(p => p.cat === filter);
  
  const catColors = { Ingredientes: '#FEF0DC', Técnica: '#EAF5D6', Herramientas: '#E8F6FD', Recetas: '#FFE5B4' };
  const catAccent = { Ingredientes: 'var(--or)', Técnica: 'var(--gr)', Herramientas: '#2a90c0', Recetas: '#D97D15' };

  const openArticle = (article) => {
    setActiveArticle(article);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const closeArticle = () => {
    setActiveArticle(null);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  if (activeArticle) {
    return <BlogArticleView article={activeArticle} onBack={closeArticle} setPage={setPage} />;
  }

  return (
    <div>
      <div style={{ background: '#fff', padding: '48px 0 32px', borderBottom: '1px solid var(--bd)' }}>
        <div className="container">
          <span className="sec-label sec-label-orange">Recetas y Blog</span>
          <h2>Aprende con <span style={{ color: 'var(--or)' }}>nosotros</span></h2>
          <span className="heading-bar" style={{ background: 'var(--or)' }}></span>
          <p style={{ maxWidth: 520, marginBottom: 24 }}>Recetas, técnicas, guías y tendencias del mundo de la repostería. Contenido creado por expertos para ti.</p>
          <div className="filters">
            {cats.map(c => (
              <button key={c} className={"filter-btn filter-btn-or" + (filter === c ? " active" : "")} onClick={() => setFilter(c)}>
                {c} {c !== 'Todos' && <span style={{ opacity: 0.6 }}>({allBlogs.filter(b => b.cat === c).length})</span>}
              </button>
            ))}
          </div>
        </div>
      </div>
      <section style={{ background: 'var(--bg)' }}>
        <div className="container">
          <div className="grid-3">
            {filtered.map((p, i) => (
              <div key={p.id} className="card" onClick={() => openArticle(p)} style={{ cursor: 'pointer' }}>
                <div style={{ height: 180, position: 'relative', overflow: 'hidden', background: `linear-gradient(135deg, ${catColors[p.cat] || '#FEF0DC'}, #fff)` }}>
                  {p.imagen
                    ? <img src={p.imagen} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 42, color: 'var(--or)', opacity: 0.12 }}>LK</div></div>
                  }
                  <span style={{ position: 'absolute', top: 10, left: 10, background: catAccent[p.cat] || 'var(--or)', color: '#fff', fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 10, padding: '3px 10px', borderRadius: 'var(--r-p)' }}>{p.cat}</span>
                </div>
                <div style={{ padding: 18 }}>
                  <div style={{ fontSize: 11, color: 'var(--t3)', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                    <span>LKA Mejía</span>
                    <span>·</span>
                    <span>{p.sectionCount} min lectura</span>
                  </div>
                  <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 15, color: 'var(--t1)', marginBottom: 7, lineHeight: 1.35 }}>{p.title}</div>
                  {p.seo && p.seo.metaDesc && (
                    <p style={{ fontSize: 13, color: 'var(--t3)', lineHeight: 1.5, marginBottom: 12, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                      {p.seo.metaDesc}
                    </p>
                  )}
                  {p.seo && p.seo.keyword && (
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
                      <span style={{ fontSize: 11, fontFamily: 'var(--font-d)', fontWeight: 600, padding: '3px 10px', borderRadius: 'var(--r-p)', border: '1px solid var(--bd)', color: 'var(--t3)' }}>{p.seo.keyword}</span>
                    </div>
                  )}
                  <span style={{ color: 'var(--or)', fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 13, display: 'flex', alignItems: 'center', gap: 5 }}>Leer artículo <Icon name="arrowRight" size={14} color="var(--or)" /></span>
                </div>
              </div>
            ))}
          </div>
          {filtered.length === 0 && (
            <p style={{ textAlign: 'center', padding: 48, color: 'var(--t3)' }}>No hay publicaciones en esta categoría aún.</p>
          )}
        </div>
      </section>
      {/* Newsletter */}
      <div style={{ padding: '48px 40px', background: '#fff' }}>
        <div style={{ background: 'var(--gr)', padding: '44px 48px', borderRadius: 'var(--r-lg)', maxWidth: 1200, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 32 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 22, color: '#fff', marginBottom: 6 }}>Únete a +4.000 reposteros</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)' }}>que reciben contenido educativo exclusivo cada semana.</div>
          </div>
          <div style={{ flex: 1, display: 'flex', background: '#fff', borderRadius: 'var(--r-p)', overflow: 'hidden', height: 46 }}>
            <input style={{ flex: 1, border: 'none', outline: 'none', padding: '0 18px', fontFamily: 'var(--font-b)', fontSize: 14 }} placeholder="Tu correo electrónico" />
            <button style={{ background: 'var(--or)', color: '#fff', fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, border: 'none', padding: '0 22px', cursor: 'pointer' }}>Suscribirme</button>
          </div>
        </div>
      </div>
    </div>
  );
};

/* Full Blog Article View */
const BlogArticleView = ({ article, onBack, setPage }) => {
  const catColors = { Ingredientes: '#FEF0DC', Técnica: '#EAF5D6', Herramientas: '#E8F6FD', Recetas: '#FFE5B4' };
  const catAccent = { Ingredientes: 'var(--or)', Técnica: 'var(--gr)', Herramientas: '#2a90c0', Recetas: '#D97D15' };

  return (
    <div>
      {/* Hero header */}
      <div style={{ background: `linear-gradient(135deg, ${catColors[article.cat] || '#FEF0DC'}, #fff)`, padding: '32px 0 40px' }}>
        <div className="container" style={{ maxWidth: 800, margin: '0 auto' }}>
          <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.8)', border: '1px solid var(--bd)', borderRadius: 'var(--r-p)', padding: '8px 16px', cursor: 'pointer', fontFamily: 'var(--font-d)', fontWeight: 600, fontSize: 13, color: 'var(--t2)', marginBottom: 24, transition: 'all 150ms' }}>
            <Icon name="chevLeft" size={16} /> Volver a Recetas y Blog
          </button>
          <span style={{ background: catAccent[article.cat] || 'var(--or)', color: '#fff', fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 11, padding: '4px 14px', borderRadius: 'var(--r-p)', display: 'inline-block', marginBottom: 14 }}>{article.cat}</span>
          <h1 style={{ fontSize: 'clamp(28px, 3.5vw, 42px)', lineHeight: 1.2, marginBottom: 14, maxWidth: 700 }}>{article.title}</h1>
          {article.seo && article.seo.metaDesc && (
            <p style={{ fontSize: 16, color: 'var(--t2)', lineHeight: 1.6, maxWidth: 600 }}>{article.seo.metaDesc}</p>
          )}
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--bd)' }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--or)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: '#fff' }}>LK</div>
            <div>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: 'var(--t1)' }}>LKA Mejía</div>
              <div style={{ fontSize: 12, color: 'var(--t3)' }}>Escuela y Tienda de Repostería · Bogotá</div>
            </div>
          </div>
        </div>
      </div>

      {/* Article body */}
      <div style={{ background: '#fff', padding: '48px 0 64px' }}>
        <div className="container" style={{ maxWidth: 740, margin: '0 auto' }}>
          {article.sections.map((s, i) => {
            if (i === 0) return null; // Skip title (already in header)
            if (s.type === 'h2') {
              return (
                <h2 key={i} style={{ fontSize: 24, marginTop: 36, marginBottom: 14, color: 'var(--t1)', fontFamily: 'var(--font-d)', lineHeight: 1.3 }}>
                  {s.text}
                </h2>
              );
            }
            return (
              <p key={i} style={{ fontSize: 16, lineHeight: 1.75, color: 'var(--t2)', marginBottom: 16 }}>
                {s.text}
              </p>
            );
          })}

          {/* SEO keywords */}
          {article.seo && article.seo.keywords && (
            <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--bd)' }}>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 13, color: 'var(--t3)', marginBottom: 10, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Temas relacionados</div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {article.seo.keywords.split(',').map((kw, j) => (
                  <span key={j} style={{ fontSize: 12, fontFamily: 'var(--font-d)', fontWeight: 600, padding: '5px 14px', borderRadius: 'var(--r-p)', border: '1px solid var(--bd)', color: 'var(--t3)', background: 'var(--bg)' }}>{kw.trim()}</span>
                ))}
              </div>
            </div>
          )}

          {/* CTA */}
          <div style={{ background: 'var(--or-lt)', borderRadius: 'var(--r-lg)', padding: '28px 32px', marginTop: 40, display: 'flex', alignItems: 'center', gap: 20 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 18, color: 'var(--t1)', marginBottom: 6 }}>¿Quieres aprender más?</div>
              <p style={{ fontSize: 14, color: 'var(--t2)', margin: 0 }}>Explora nuestros talleres presenciales y lleva tus habilidades al siguiente nivel.</p>
            </div>
            <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
              <button className="btn btn-md btn-green" onClick={() => setPage('academia')}>Ver talleres</button>
              <a href="#" onClick={(e) => openExternal(waLink('más información'), e)} className="btn btn-md btn-orange">
                <WhatsAppIcon size={14} /> Contactar
              </a>
            </div>
          </div>

          {/* Back button */}
          <div style={{ textAlign: 'center', marginTop: 32 }}>
            <button onClick={onBack} className="btn btn-lg btn-outline-orange">
              <Icon name="chevLeft" size={16} color="var(--or)" /> Volver a Recetas y Blog
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { RecetarioPage, BlogArticleView });