/* global React, Logo, Nav, PhoneBar, Footer */

// ═══════════════════════════════════════════════════════════════════════
// BLOG — Index page + per-post page
// build.py injects window.__DATA__ with the post list (for index) or the
// single post (for post page). Pre-render bakes the rendered HTML and
// strips this script tag before deploy.
// ═══════════════════════════════════════════════════════════════════════

function BlogIndexPage() {
  const data = (typeof window !== 'undefined' && window.__DATA__) || { posts: [] };
  const posts = data.posts || [];

  return (
    <div style={{ background: 'var(--bone)', color: 'var(--ink)', minHeight: '100%' }}>
      <PhoneBar tone="ink" />
      <Nav />

      <section style={{ padding: '64px 28px 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="eyebrow">BLOG</div>
        <h1 className="h-mega" style={{ marginTop: 18, fontSize: 'clamp(56px, 8vw, 120px)' }}>
          Latest from<br />
          <span style={{ color: 'var(--red)' }}>the shop.</span>
        </h1>
      </section>

      <section style={{ padding: '48px 28px 88px' }}>
        {posts.length === 0 && (
          <p className="body">No posts yet. Add one to <code>blog.json</code>.</p>
        )}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
          {posts.map(p => (
            <a key={p.slug} href={`/blog/${p.slug}/`} style={{
              border: '1px solid var(--ink)',
              background: 'var(--bone)',
              padding: '28px 28px',
              textDecoration: 'none',
              color: 'var(--ink)',
              display: 'block',
              transition: 'background .12s, color .12s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'var(--bone)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'var(--bone)'; e.currentTarget.style.color = 'var(--ink)'; }}>
              <div className="tiny" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'var(--red)' }}>
                {p.date}
              </div>
              <h2 className="h-mid" style={{ fontSize: 28, marginTop: 12 }}>{p.title}</h2>
              <p className="body" style={{ fontSize: 14, marginTop: 12, color: 'inherit', opacity: .8 }}>{p.excerpt}</p>
              <div className="tiny" style={{ marginTop: 18, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'inherit', opacity: .6 }}>
                READ →
              </div>
            </a>
          ))}
        </div>
      </section>

      <Footer />
    </div>
  );
}

function BlogPostPage() {
  const post = (typeof window !== 'undefined' && window.__DATA__) || { title: 'Post not found', body: '' };

  return (
    <div style={{ background: 'var(--bone)', color: 'var(--ink)', minHeight: '100%' }}>
      <PhoneBar tone="ink" />
      <Nav />

      <article style={{ padding: '64px 28px 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="tiny" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'var(--steel)' }}>
          <a href="/blog/" style={{ color: 'var(--steel)', textDecoration: 'none' }}>BLOG</a>
          {' / '}
          <span style={{ color: 'var(--ink)' }}>{post.date}</span>
        </div>
        <h1 className="h-big" style={{ marginTop: 18, fontSize: 'clamp(40px, 6vw, 72px)' }}>
          {post.title}
        </h1>
        {post.author && (
          <div className="tiny" style={{ marginTop: 18, color: 'var(--steel)' }}>By {post.author}</div>
        )}
      </article>

      <article
        style={{ padding: '48px 28px 88px', maxWidth: 760 }}
        className="prose"
        dangerouslySetInnerHTML={{ __html: post.body || '' }}
      />

      <Footer />
    </div>
  );
}

Object.assign(window, { BlogIndexPage, BlogPostPage });
