/* global React, Photo, Eyebrow, Rule, CTABand, PhotoGallery, postFiles */

/* ------------------------------------------------------------------
   A single journal entry — route: #post/<slug> (or #post/<n>).

   Shaped as a preview gallery: a short note about the day, then the
   photographs. Entry data lives in JournalPage.jsx; see the notes at
   the top of that file for how to add one.
   ------------------------------------------------------------------ */

function JournalPostPage({ onNav, param }) {
  const posts = window.JOURNAL_POSTS || [];
  const post = posts.find((p) => p.slug === param || p.n === param) || posts[0];

  if (!post) {
    return (
      <header className="page-header">
        <div className="page-header__inner">
          <Eyebrow center>The Journal</Eyebrow>
          <h1 className="kit-headline kit-headline--lg" style={{ margin: '32px 0 24px' }}>
            Nothing here <em>yet.</em>
          </h1>
          <button className="kit-btn kit-btn--ghost" onClick={() => onNav('journal')}>
            Back to the Journal
          </button>
        </div>
      </header>
    );
  }

  const files = postFiles(post);

  return (
    <React.Fragment>
      <header className="page-header" style={{ paddingBottom: 24 }}>
        <div className="page-header__inner">
          <Eyebrow center>The Journal · {post.cat}</Eyebrow>
          <h1 className="kit-headline kit-headline--lg" style={{ margin: '32px 0 20px' }}>
            {post.title}
          </h1>
          <p className="journal-post__meta">
            {[post.date, post.place].filter(Boolean).join(' · ')}
          </p>
        </div>
      </header>

      {post.body && post.body.length > 0 && (
        <section className="journal-post__note">
          <Rule center />
          {post.body.map((para, i) => (
            <p className="entry__p" key={i}>{para}</p>
          ))}
        </section>
      )}

      {/* Same masonry the galleries use, so the layout and the lazy-loading
          behaviour match the rest of the site. */}
      {files.length > 0 && (
        <section className="gallery-section">
          <div className="gallery-section__inner">
            <PhotoGallery base={post.photos.base} files={files} />
          </div>
        </section>
      )}

      <section className="journal-post__foot">
        <button className="kit-btn kit-btn--ghost" onClick={() => onNav('journal')}>
          Back to the Journal
        </button>
      </section>

      <CTABand
        onNav={onNav}
        title={<>See something <em>you like?</em></>}
        body="If this looks like the kind of morning you're picturing, send me a note. I'd love to hear what you're planning."
        primaryLabel="Inquire Now"
        primaryTarget="contact"
      />
    </React.Fragment>
  );
}

window.JournalPostPage = JournalPostPage;