// blogpost.jsx — shared article template for individual blog posts.
// Each post page renders: <BlogArticle title category date hero heroAlt> ...body JSX... </BlogArticle>

function BlogArticle({ title, category, date, hero, heroAlt, heroPos, children }) {
  return (
    <div>
      <Header active="Blog" />
      <article>
        <section className="bg-linen" style={{ padding: '70px 0 64px', borderBottom: '1px solid var(--color-border-subtle)' }}>
          <div className="container-narrow" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 22, alignItems: 'center' }}>
            <a href="/blog/" className="link-arrow" style={{ textDecoration: 'none' }}>← The Journal</a>
            <Eyebrow>{category}</Eyebrow>
            <h1 className="h-display" style={{ fontSize: 'clamp(36px, 4.6vw, 60px)', maxWidth: 880 }}>{title}</h1>
            {date && <div className="eyebrow" style={{ color: 'var(--color-text-muted)' }}>{date}</div>}
          </div>
        </section>

        {hero && (
          <div className="container-narrow" style={{ marginTop: 56 }}>
            <div className="photo-frame" style={{ aspectRatio: '16 / 9', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)' }}>
              <img src={hero} alt={heroAlt || title} style={heroPos ? { objectPosition: heroPos } : undefined} />
            </div>
          </div>
        )}

        <section style={{ padding: '64px 0 100px' }}>
          <div className="container blog-prose">
            {children}
          </div>
          <div className="container">
            <div style={{ maxWidth: 760, margin: '56px auto 0', paddingTop: 36, borderTop: '1px solid var(--color-border-subtle)', display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
              <Button variant="primary" href="#book-now">Book a Consultation</Button>
              <a href="/blog/" className="link-arrow">← Back to the Journal</a>
            </div>
          </div>
        </section>
      </article>
      <BookCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { BlogArticle });