const { Link: Link_bp, useParams: useParams_bp, Navigate: Navigate_bp } = ReactRouterDOM;

function BlogPost() {
  const { slug } = useParams_bp();
  const article = window.getArticle(slug);

  useSEO({
    title: article ? `${article.title} | Cyrion AI` : 'Article not found | Cyrion AI',
    description: article ? article.description : 'This article could not be found.',
    path: `/blog/${slug}`,
  });

  if (!article) return <Navigate_bp to="/blog" replace />;

  const related = window.ARTICLES.filter((a) => a.slug !== article.slug);
  const jsonLd = {
    '@context': 'https://schema.org', '@type': 'BlogPosting', headline: article.title,
    datePublished: article.date, author: { '@type': 'Organization', name: 'Cyrion AI' },
    publisher: { '@type': 'Organization', name: 'Cyrion AI', logo: { '@type': 'ImageObject', url: 'https://cyrion.ai/favicon.svg' } },
    mainEntityOfPage: `https://cyrion.ai/blog/${article.slug}`, description: article.description,
  };

  return (
    <div data-screen-label={`blog-${article.slug}`}>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <section className="page-hero" style={{ paddingBottom: 36 }}>
        <div className="page">
          <div className="breadcrumb" style={{ marginBottom: 20 }}><Link_bp to="/">Home</Link_bp><span>/</span><Link_bp to="/blog">Blog</Link_bp><span>/</span><span className="ink">{article.title}</span></div>
          <div className="row" style={{ gap: 10, marginBottom: 18, flexWrap: 'wrap' }}><span className="tag-chip">{article.tag}</span><span className="caption tnum">{article.date} · {article.readTime} read · by Cyrion Research</span></div>
          <h1 className="h1" style={{ maxWidth: 760, fontSize: 'clamp(30px,4.4vw,56px)' }}>{article.title}</h1>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="page">
          <div className="prose" dangerouslySetInnerHTML={{ __html: article.html }} />
          <div className="row" style={{ gap: 14, marginTop: 48, paddingTop: 32, borderTop: '1px solid var(--line)', flexWrap: 'wrap' }}>
            <Link_bp className="btn btn-primary" to="/#access">Get early access →</Link_bp>
            <Link_bp className="btn btn-ghost" to="/blog">← Back to blog</Link_bp>
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="page">
          <div className="caption" style={{ marginBottom: 20 }}>Related</div>
          <div className="auto-fit-240">
            {related.map((a) => (
              <Link_bp key={a.slug} to={`/blog/${a.slug}`} className="card card-hover" style={{ padding: 20, textDecoration: 'none' }}>
                <div className="h3" style={{ fontSize: 15 }}>{a.title}</div>
                <div className="caption" style={{ marginTop: 8 }}>{a.readTime} read</div>
              </Link_bp>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BlogPost });