/* global React, useReveal, useLocale */
// Jullia — Philosophy. A blog-like index of short essays in the atelier's own
// voice: cover image, category, title, excerpt. Clicking an entry opens
// PhilosophyDetail. Data-driven by window.JULLIA_BLOG_POSTS.

function Philosophy({ onOpen }) {
  const { Eyebrow } = window.JulliaDesignSystem_b654aa;
  const { t, localize } = useLocale();
  const posts = (window.JULLIA_BLOG_POSTS || []).map(localize);
  const ref = useReveal();

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

      {/* Header statement */}
      <section style={{ minHeight: '54vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'var(--space-9) var(--margin-page) var(--space-8)' }}>
        <div data-reveal>
          <Eyebrow accent style={{ marginBottom: 'var(--space-6)' }}>{t('philosophy.eyebrow')}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(52px, 9vw, 108px)', lineHeight: 0.98, letterSpacing: '-0.03em', color: 'var(--text-emphasis)', margin: '0 0 var(--space-7)', maxWidth: 900 }}>
            {t('philosophy.heroTitle')}
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: 520, margin: 0 }}>
            {t('philosophy.heroSub')}
          </p>
        </div>
      </section>

      {/* Entries — the blog grid */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal style={{ marginBottom: 'var(--space-8)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <Eyebrow>{t('philosophy.entriesLabel')}</Eyebrow>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{posts.length} {t('philosophy.entries')}</span>
        </div>
        <div className="jx-grid-reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(340px, 100%), 1fr))', gap: 'var(--space-7)' }}>
          {posts.map((post) => (
            <PostTile key={post.id} post={post} readLabel={t('philosophy.readCta')} onOpen={onOpen} />
          ))}
        </div>
      </section>
    </div>
  );
}

// A single blog entry tile — cover image, ref/date, category, title, excerpt.
// The whole tile is clickable, like the commission tiles elsewhere on the site.
function PostTile({ post, readLabel, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      data-reveal
      onClick={() => onOpen && onOpen(post.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ cursor: 'pointer', border: '1px solid var(--hairline)', borderColor: hover ? 'var(--hairline-strong)' : 'var(--hairline)', transition: 'border-color var(--dur-med) var(--ease-quiet)', background: 'var(--surface)' }}
    >
      <div className="jx-tile-media" style={{ position: 'relative', aspectRatio: '3 / 2', background: 'var(--surface-inset)', overflow: 'hidden' }}>
        {post.cover && (
          <img
            src={post.cover}
            alt={post.title}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
              filter: 'grayscale(0.55) contrast(1.08) brightness(0.82)',
              transform: hover ? 'scale(1.045)' : 'scale(1)',
              transition: 'transform var(--dur-slow) var(--ease-door)',
            }}
          />
        )}
        <div style={{ position: 'absolute', inset: 0, background: post.cover ? 'linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.5) 90%), radial-gradient(120% 100% at 30% 15%, rgba(255,255,255,0.08), transparent 55%)' : 'radial-gradient(120% 100% at 30% 15%, rgba(255,255,255,0.06), transparent 55%)', opacity: hover ? 1 : 0.85, transition: 'opacity var(--dur-med) var(--ease-quiet)' }} />
        <span style={{ position: 'absolute', top: 'var(--space-5)', left: 'var(--space-5)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>№ {post.ref}</span>
        <span style={{ position: 'absolute', top: 'var(--space-5)', right: 'var(--space-5)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{post.category}</span>
      </div>
      <div style={{ padding: 'var(--space-6)' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-mono)', color: 'var(--text-tertiary)' }}>{post.date}</span>
        <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-xl)', letterSpacing: '-0.02em', color: 'var(--text-emphasis)', margin: '10px 0 var(--space-5)' }}>{post.title}</h3>
        <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-sm)', lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 var(--space-6)' }}>{post.excerpt}</p>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: hover ? 'var(--text-emphasis)' : 'var(--text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '0.7em', transition: 'var(--t-hover)' }}>
          {readLabel} <span aria-hidden="true" style={{ color: 'var(--accent)' }}>→</span>
        </span>
      </div>
    </article>
  );
}

window.Philosophy = Philosophy;