// journal.jsx — Journal index and Article detail pages

const JournalHero = () => {
  const ref = React.useRef(null);
  const y = useParallax(ref);
  const mediaT = `translate3d(0, ${y * 0.38}px, 0) scale(1.06)`;
  const contentT = `translate3d(0, ${y * 0.18}px, 0)`;
  const contentOp = Math.max(0, 1 - y / 600);

  return (
    <section ref={ref} className="tours-hero journal-hero">
      <div className="tours-hero__media" style={{ transform: mediaT, willChange: 'transform' }}>
        <img src="images/samples/image43.webp" alt="Sri Lanka" style={{ objectPosition: 'center 92%' }} />
      </div>
      <div className="tours-hero__veil"></div>
      <div className="wrap tours-hero__content" style={{ transform: contentT, opacity: contentOp, willChange: 'transform, opacity' }}>
        <span className="eyebrow" style={{ color: '#C6A96B' }}>The Journal</span>
        <h1 className="tours-hero__title">Field notes from <em>the island.</em></h1>
      </div>
    </section>
  );
};

const JournalAside = () => (
  <section className="tours-aside-section">
    <div className="wrap">
      <div className="tours-aside">
        <span className="tours-aside__ornament">✦</span>
        <p className="tours-aside__text">
          Four essays on Sri Lanka — the <em>wildlife</em>, the <em>hill country</em>, the <em>coast</em>, the <em>cultural triangle</em>. Written from the studio, sharpened by guests.
        </p>
      </div>
    </div>
  </section>
);

const JournalCard = ({ article, idx }) => (
  <Reveal as="article" className="jcard" delay={(idx % 2) * 80}
    onClick={() => window.__nav('article', article.id)}>
    <div className="jcard__img-wrap">
      <img className="jcard__img" src={article.hero} alt={article.title} loading="lazy" />
      <span className="jcard__tag">N° {article.no} · {article.title.split(' ').slice(0, 2).join(' ')}</span>
    </div>
    <span className="jcard__num">N° {article.no}</span>
    <h3 className="jcard__title">{article.title}</h3>
    <p className="jcard__excerpt">{article.excerpt}</p>
    <div className="jcard__meta">
      <span><i>{article.readMinutes} min read</i></span>
      <span className="jcard__region">{article.region}</span>
    </div>
    <span className="jcard__cta">Read the article →</span>
  </Reveal>
);

const JournalGrid = () => (
  <section>
    <div className="wrap">
      <div className="journal-grid">
        {ARTICLES.map((a, i) => <JournalCard key={a.id} article={a} idx={i} />)}
      </div>
    </div>
  </section>
);

const JournalCTA = () => {
  const ref = React.useRef(null);
  const top = useViewportTop(ref);
  const vh = typeof window !== 'undefined' ? window.innerHeight : 800;
  const progress = Math.max(-0.5, Math.min(1.5, 1 - top / vh));
  const mediaY = progress * 80;
  const contentY = progress * 30;

  return (
    <section ref={ref} className="final-cta">
      <div className="final-cta__media" style={{ transform: `translate3d(0, ${mediaY}px, 0) scale(1.08)`, willChange: 'transform' }}>
        <img src={IMG.cta} alt="" loading="lazy" />
      </div>
      <div className="final-cta__veil"></div>
      <div className="final-cta__content" style={{ transform: `translate3d(0, ${contentY}px, 0)`, willChange: 'transform' }}>
        <span className="eyebrow" style={{ color: '#C6A96B' }}>N° 02 — Travel</span>
        <h2 className="final-cta__title">Read what we've written. <em>Travel where it leads.</em></h2>
        <p className="final-cta__sub">Every essay describes a real journey we run. When you're ready, the studio will design yours.</p>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn--gold btn--lg" onClick={() => window.__nav('contact')}>
            Plan Your Journey <span className="btn__arrow">→</span>
          </button>
          <button className="btn btn--lg" onClick={() => window.__nav('tours')}>Browse Journeys</button>
        </div>
      </div>
    </section>
  );
};

const JournalPage = () => (
  <>
    <JournalHero />
    <JournalAside />
    <JournalGrid />
    <JournalCTA />
  </>
);

// Renders a paragraph child that is either a plain string or an array of
// inline nodes (text runs or { kind: 'tourLink', tourId, text }).
const ArticleParagraph = ({ children }) => {
  if (typeof children === 'string') return <p>{children}</p>;
  return (
    <p>
      {children.map((node, i) => {
        if (typeof node === 'string') return <React.Fragment key={i}>{node}</React.Fragment>;
        if (node.kind === 'tourLink') {
          return (
            <button
              key={i}
              className="ulink ulink--gold article-body__inline-link"
              onClick={() => window.__nav('detail', node.tourId)}
            >
              {node.text}
            </button>
          );
        }
        return null;
      })}
    </p>
  );
};

const ArticleLede = ({ paragraphs }) => (
  <div className="article-body__lede">
    {paragraphs.map((p, i) => <ArticleParagraph key={i}>{p}</ArticleParagraph>)}
  </div>
);

const ArticleDivider = () => (
  <div className="article-body__divider" aria-hidden="true">
    <span className="article-body__divider-rule"></span>
    <span className="article-body__divider-mark">✦</span>
    <span className="article-body__divider-rule"></span>
  </div>
);

const ArticleSection = ({ section }) => (
  <section className="article-section">
    <span className="article-section__numeral">{section.no}</span>
    <h2 className="article-section__heading">{section.heading}</h2>
    {section.paragraphs.map((p, i) => <ArticleParagraph key={i}>{p}</ArticleParagraph>)}
  </section>
);

const ArticlePullQuote = ({ quote }) => (
  <figure className="article-pullquote">
    <div className="article-pullquote__rule"></div>
    <blockquote>{quote.text}</blockquote>
    {quote.attribution && <figcaption>— {quote.attribution}</figcaption>}
    <div className="article-pullquote__rule"></div>
  </figure>
);

const ArticleHero = ({ article }) => {
  const ref = React.useRef(null);
  const y = useParallax(ref);
  const mediaT = `translate3d(0, ${y * 0.38}px, 0) scale(1.06)`;
  const contentT = `translate3d(0, ${y * 0.18}px, 0)`;
  const metaT = `translate3d(0, ${y * 0.10}px, 0)`;
  const contentOp = Math.max(0, 1 - y / 700);

  return (
    <section ref={ref} className="article-hero">
      <div className="article-hero__media" style={{ transform: mediaT, willChange: 'transform' }}>
        <img src={article.hero} alt={article.title} />
      </div>
      <div className="article-hero__veil"></div>
      <div className="wrap article-hero__content" style={{ transform: contentT, opacity: contentOp, willChange: 'transform, opacity' }}>
        <button className="article-hero__crumb" onClick={() => window.__nav('journal')}>
          ← The Journal
        </button>
        <span className="eyebrow" style={{ color: '#C6A96B' }}>{article.eyebrow}</span>
        <h1 className="article-hero__title">{article.titlePre} <em>{article.titleEm}</em></h1>
        <div className="article-hero__rule"></div>
        <div className="article-hero__meta" style={{ transform: metaT }}>
          <span>{article.publishedOn}</span>
          <span className="article-hero__meta-sep">·</span>
          <span>{article.readMinutes} min read</span>
          <span className="article-hero__meta-sep">·</span>
          <span>{article.region}</span>
        </div>
      </div>
    </section>
  );
};

const ArticleBody = ({ article }) => {
  const sections = article.sections;
  const quoteAfter = article.pullQuote ? Math.min(sections.length - 1, Math.max(1, Math.floor(sections.length * 2 / 3))) : -1;
  return (
    <article className="article-body">
      <div className="wrap article-body__inner">
        <ArticleLede paragraphs={article.lede} />
        <ArticleDivider />
        {sections.map((s, i) => (
          <React.Fragment key={i}>
            <ArticleSection section={s} />
            {i === quoteAfter && <ArticlePullQuote quote={article.pullQuote} />}
          </React.Fragment>
        ))}
      </div>
    </article>
  );
};

const ArticleRelatedTour = ({ article }) => {
  const tour = TOUR_DETAILS[article.relatedTour.tourId];
  if (!tour) return null;
  return (
    <section className="article-related">
      <div className="wrap">
        <div className="article-related__inner">
          <div className="article-related__media">
            <img src={tour.hero} alt={tour.title} loading="lazy" />
          </div>
          <div className="article-related__body">
            <span className="article-related__kicker">{article.relatedTour.kicker}</span>
            <h3 className="article-related__title">{tour.title}.</h3>
            <p className="article-related__note">{article.relatedTour.note}</p>
            <div className="article-related__meta">
              {tour.meta.map(m => (
                <span key={m.lbl}><i>{m.val}</i> {m.lbl}</span>
              ))}
            </div>
            <button className="ulink ulink--gold article-related__cta" onClick={() => window.__nav('detail', tour.id)}>
              View this Journey →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

const ArticlePager = ({ article }) => {
  const idx = ARTICLES.findIndex(a => a.id === article.id);
  const prev = idx > 0 ? ARTICLES[idx - 1] : null;
  const next = idx < ARTICLES.length - 1 ? ARTICLES[idx + 1] : null;
  return (
    <section className="article-pager">
      <div className="wrap">
        <div className="article-pager__grid">
          {prev ? (
            <button className="article-pager__card article-pager__card--prev" onClick={() => window.__nav('article', prev.id)}>
              <span className="article-pager__label">← Previous</span>
              <div className="article-pager__row">
                <img className="article-pager__thumb" src={prev.hero} alt="" loading="lazy" />
                <div>
                  <span className="article-pager__no">N° {prev.no}</span>
                  <span className="article-pager__title">{prev.title}</span>
                </div>
              </div>
            </button>
          ) : <div />}
          {next ? (
            <button className="article-pager__card article-pager__card--next" onClick={() => window.__nav('article', next.id)}>
              <span className="article-pager__label">Next →</span>
              <div className="article-pager__row">
                <div className="article-pager__text-right">
                  <span className="article-pager__no">N° {next.no}</span>
                  <span className="article-pager__title">{next.title}</span>
                </div>
                <img className="article-pager__thumb" src={next.hero} alt="" loading="lazy" />
              </div>
            </button>
          ) : <div />}
        </div>
        <div className="article-return">
          <button className="ulink ulink--gold" onClick={() => window.__nav('journal')}>
            ← Return to the Journal
          </button>
        </div>
      </div>
    </section>
  );
};

const ArticlePage = ({ articleId }) => {
  const article = ARTICLES_BY_ID[articleId] || ARTICLES[0];

  React.useEffect(() => {
    const originalTitle = document.title;
    document.title = article.meta.title;
    let metaEl = document.querySelector('meta[name="description"]');
    const created = !metaEl;
    if (!metaEl) {
      metaEl = document.createElement('meta');
      metaEl.setAttribute('name', 'description');
      document.head.appendChild(metaEl);
    }
    const originalDescription = metaEl.getAttribute('content');
    metaEl.setAttribute('content', article.meta.description);

    return () => {
      document.title = originalTitle;
      if (created) {
        metaEl.remove();
      } else {
        metaEl.setAttribute('content', originalDescription || '');
      }
    };
  }, [article.id]);

  return (
    <>
      <ArticleHero article={article} />
      <ArticleBody article={article} />
      <ArticleRelatedTour article={article} />
      <ArticlePager article={article} />
      <FinalCTA />
    </>
  );
};

Object.assign(window, { JournalPage, ArticlePage });