/* global React, Media, useReveal, useLocale */
// Jullia — a single philosophy entry. Data-driven by window.JULLIA_BLOG_POSTS.
// Title, cover, the lead line, body, and a quiet way back / forward.

function PhilosophyDetail({ post: rawPost, onBack, onOpen }) {
  const { Eyebrow, Button } = window.JulliaDesignSystem_b654aa;
  const { t, localize } = useLocale();
  const ref = useReveal();
  const posts = (window.JULLIA_BLOG_POSTS || []).map(localize);
  const post = localize(rawPost);
  if (!post) return null;
  const next = posts[(posts.findIndex((p) => p.id === post.id) + 1) % Math.max(posts.length, 1)];

  return (
    <div ref={ref} style={{ background: 'var(--canvas)' }}>

      {/* Back */}
      <section style={{ padding: 'var(--space-8) var(--margin-page) 0' }}>
        <button
          onClick={onBack}
          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)', display: 'inline-flex', alignItems: 'center', gap: '0.7em' }}
        >
          <span aria-hidden="true">←</span> {t('philosophy.detail.backLink')}
        </button>
      </section>

      {/* Title block */}
      <section style={{ padding: 'var(--space-7) var(--margin-page) var(--space-9)' }}>
        <div data-reveal style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 'var(--space-6)' }}>
          <div>
            <Eyebrow index={post.ref} accent style={{ marginBottom: 'var(--space-6)' }}>{t('philosophy.detail.entryLabel')}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(38px, 6vw, 76px)', lineHeight: 1.02, letterSpacing: '-0.03em', color: 'var(--text-emphasis)', margin: 0, maxWidth: 900 }}>
              {post.title}
            </h1>
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{post.date} · {post.category}</span>
        </div>
      </section>

      {/* Cover */}
      <section style={{ padding: '0 var(--margin-page) var(--space-9)' }}>
        <div data-reveal>
          <Media ratio="21 / 9" src={post.cover} alt={post.title} showCaption={false} />
        </div>
      </section>

      {/* Narrative */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)', maxWidth: 720 }}>
        <div data-reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(26px,4vw,44px)', lineHeight: 1.15, letterSpacing: '-0.015em', color: 'var(--text-primary)', margin: 0 }}>
            {post.lead}
          </p>
          {post.body.map((p, i) => (
            <p key={i} style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', lineHeight: 1.65, color: 'var(--text-secondary)', margin: 0 }}>{p}</p>
          ))}
        </div>
      </section>

      {/* Next / invitation */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'var(--space-6)' }}>
        <div data-reveal>
          <Button variant="ghost" trailing="→" onClick={() => onOpen && next && onOpen(next.id)}>{t('philosophy.detail.nextPrefix')}{next ? next.title : ''}</Button>
        </div>
        <div data-reveal>
          <Button variant="line" size="lg" trailing="→">{t('home.invitationCta')}</Button>
        </div>
      </section>
    </div>
  );
}

window.PhilosophyDetail = PhilosophyDetail;