/* global React, LITIO */
const { useState: uB } = React;
const TB = window.T;
const B_MES_ES = ['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];
const B_MES_EN = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
function bDate(s){ const [y,m,d]=s.split('-'); const M=window.CURLANG==='en'?B_MES_EN:B_MES_ES; return d+' '+M[+m-1]+' '+y; }
function readLbl(p){ return p.read+' '+TB('blog.readsuf'); }
function blogUrl(slug){ return (window.CURLANG==='en'?'/en':'')+'/blog/'+slug+'/'; }

function BlogSection(){
  const [open, setOpen] = uB(null);
  const posts = LITIO.blog;
  const art = open ? posts.find(p=>p.slug===open) : null;

  const goTo = (slug) => {
    setOpen(slug);
    const sec = document.getElementById('blog');
    if (sec) window.scrollTo({ top: sec.offsetTop - 96, behavior:'smooth' });
  };

  return (
    <section id="blog" className="sec-pad">
      <div className="container">
        {!art && (
          <React.Fragment>
            <div className="sec-head">
              <div>
                <div className="eyebrow">{TB('s.blog.ey')}</div>
                <h2>{TB('s.blog.h')}</h2>
                <p>{TB('s.blog.p')}</p>
              </div>
            </div>
            <div className="blog-grid">
              {posts.map(p=>(
                <a className={'blog-card'+(p.feat?' feat':'')} key={p.slug} href={blogUrl(p.slug)}>
                  <div className="blog-meta">
                    <span className="blog-cat">{p.cat}</span>
                    <span className="blog-read">{readLbl(p)}</span>
                  </div>
                  <h3>{p.title}</h3>
                  <p className="blog-excerpt">{p.excerpt}</p>
                  <div className="blog-foot">
                    <time dateTime={p.date}>{bDate(p.date)}</time>
                    <span className="blog-more">{TB('blog.more')}</span>
                  </div>
                </a>
              ))}
            </div>
          </React.Fragment>
        )}

        {art && (
          <article className="blog-article">
            <button className="ba-back" onClick={()=>setOpen(null)}>{TB('blog.back')}</button>
            <div className="ba-kicker"><span className="blog-cat">{art.cat}</span><span className="blog-read">{readLbl(art)}</span></div>
            <h1 className="ba-title">{art.title}</h1>
            <div className="ba-byline">{TB('blog.by')} <b>{art.author}</b> · <time dateTime={art.date}>{bDate(art.date)}</time></div>
            <p className="ba-lede">{art.excerpt}</p>
            <div className="ba-body">
              {art.body.map((b,i)=> b.h
                ? <h2 key={i}>{b.h}</h2>
                : <p key={i}>{b.p}</p>)}
            </div>
            <div className="ba-foot">
              <button className="ba-back" onClick={()=>setOpen(null)}>{TB('blog.back')}</button>
              <div className="ba-related">
                {LITIO.blog.filter(p=>p.slug!==art.slug).slice(0,2).map(p=>(
                  <a key={p.slug} className="ba-rel" onClick={()=>{setOpen(p.slug); window.scrollTo({top:document.getElementById('blog').offsetTop-96});}}>
                    <span className="blog-cat">{p.cat}</span>
                    <span className="ba-rel-title">{p.title}</span>
                  </a>
                ))}
              </div>
            </div>
          </article>
        )}
      </div>
    </section>
  );
}

window.BlogSection = BlogSection;