import Layout from './Layout.jsx'

function related(all, current, n = 4) {
  const i = all.findIndex((a) => a.slug === current.slug)
  const out = []
  for (let k = 1; out.length < n && k < all.length; k++) {
    out.push(all[(i + k) % all.length])
  }
  return out
}

export default function Article({ article, all }) {
  const rel = related(all || [], article)
  return (
    <Layout>
      <section
        className="bn-article-hero"
        style={{ backgroundImage: `linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.66)), url("${article.image}")` }}
      >
        <div className="bn-article-hero-inner">
          <a className="bn-back" href="/blog/">← Voltar ao blog</a>
          <span className="bn-article-date">{article.date}</span>
          <h1 className="bn-article-title">{article.title}</h1>
        </div>
      </section>

      <div className="bn-article-wrap">
        <div className="bn-article-main">
          <article
            className="bn-article article-content"
            dangerouslySetInnerHTML={{ __html: article.content }}
          />

          {Array.isArray(article.faq) && article.faq.length > 0 && (
            <section className="bn-faq" aria-labelledby="faq-h">
              <span className="bn-faq-eyebrow">FAQ</span>
              <h2 id="faq-h">Perguntas frequentes</h2>
              <div className="bn-faq-list">
                {article.faq.map((f, i) => (
                  <details className="bn-faq-item" key={i} open={i === 0}>
                    <summary>
                      <h3 className="bn-faq-q">{f.q}</h3>
                      <span className="bn-faq-ico" aria-hidden="true" />
                    </summary>
                    <div className="bn-faq-a"><p>{f.a}</p></div>
                  </details>
                ))}
              </div>
            </section>
          )}
        </div>

        <aside className="bn-sidebar">
          <div className="bn-related">
            <h4 className="bn-related-h">Artigos relacionados</h4>
            {rel.map((r) => (
              <a key={r.slug} className="bn-related-item" href={`/${r.slug}/`}>
                <span className="bn-related-thumb" style={{ backgroundImage: `url("${r.image}")` }} />
                <span className="bn-related-info">
                  <span className="bn-related-date">{r.date}</span>
                  <span className="bn-related-title">{r.title}</span>
                </span>
              </a>
            ))}
          </div>
        </aside>
      </div>

      <section className="bn-cta">
        <div className="bn-cta-inner">
          <h3>Viva a experiência Buenas</h3>
          <p>Carnes nobres na parrilla e massas artesanais, num só lugar. Reserve sua mesa e venha provar.</p>
          <div className="bn-cta-btns">
            <a className="bn-btn bn-btn-primary" href="/contato/">Fazer uma reserva</a>
            <a className="bn-btn bn-btn-ghost" href="/blog/">Ver mais artigos</a>
          </div>
        </div>
      </section>
    </Layout>
  )
}
