// Blog index — magazine-style grid.

function CoverArt({ tint1, tint2, size = 'normal' }) {
  // Abstract gradient + dot grid cover, no images.
  return (
    <div className={`cover ${size}`} aria-hidden="true">
      <div className="cover-mesh" style={{
        background: `
          radial-gradient(ellipse 50% 60% at 20% 20%, ${tint1} 0%, transparent 60%),
          radial-gradient(ellipse 60% 70% at 80% 90%, ${tint2} 0%, transparent 60%),
          linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-card) 100%)`,
      }} />
      <svg className="cover-grid" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="b-dots" x="0" y="0" width="12" height="12" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.6" fill="rgba(22, 19, 17, 0.14)" />
          </pattern>
        </defs>
        <rect width="200" height="120" fill="url(#b-dots)" />
      </svg>
      <div className="cover-mark">{Icons.mark({ width: 60, height: 60 })}</div>
      <style>{`
        .cover {
          position: relative;
          border-radius: 16px;
          overflow: hidden;
          aspect-ratio: 5 / 3;
          border: 1px solid var(--border);
        }
        .cover.large { aspect-ratio: 16 / 9; }
        .cover-mesh, .cover-grid {
          position: absolute; inset: 0; width: 100%; height: 100%;
        }
        .cover-grid { opacity: 0.5; }
        .cover-mark {
          position: absolute;
          right: 10%; bottom: 10%;
          color: var(--text-secondary);
          filter: drop-shadow(0 4px 14px rgba(58, 49, 32, 0.10));
        }
        .cover.large .cover-mark { right: 8%; bottom: 8%; }
        .cover.large .cover-mark svg { width: 96px; height: 96px; }
      `}</style>
    </div>
  );
}

function BlogHero() {
  return (
    <section className="page-hero">
      <div className="container page-hero-body">
        <div className="eyebrow">Blog</div>
        <h1>
          Notes from the chat.
        </h1>
        <p className="page-hero-sub">
          Field notes, architecture deep-dives, transparency reports and the occasional bad joke.
          Written by the team building Octodus — and the people running real workflows on it.
        </p>
      </div>
    </section>
  );
}

function FeaturedCard({ post }) {
  return (
    <a className="bf" href={`Blog/${post.slug}.html`}>
      <div className="bf-cover">
        <CoverArt tint1={post.cover.tint1} tint2={post.cover.tint2} size="large" />
      </div>
      <div className="bf-body">
        <div className="bf-meta">
          <span className="bf-cat" style={{ '--cat': post.categoryTint }}>{post.category}</span>
          <span className="bf-dot">·</span>
          <span>{post.date}</span>
          <span className="bf-dot">·</span>
          <span>{post.read} read</span>
        </div>
        <h2 className="bf-title" dangerouslySetInnerHTML={{ __html: post.title }} />
        <p className="bf-excerpt">{post.excerpt}</p>
        <div className="bf-author">
          <img src={post.author.avatar} alt={post.author.name} loading="lazy" />
          <div>
            <div className="bf-author-name">{post.author.name}</div>
            <div className="bf-author-role">{post.author.role}</div>
          </div>
          <span className="bf-cta">Read post {Icons.arrow({ width: 16, height: 16 })}</span>
        </div>
      </div>

      <style>{`
        .bf {
          display: grid;
          grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
          gap: 48px;
          padding: 36px;
          background:
            radial-gradient(ellipse 50% 60% at 100% 10%, var(--accent-soft), transparent 60%),
            linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
          border: 1px solid var(--border);
          border-radius: 28px;
          align-items: center;
          color: inherit;
          transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
        }
        .bf:hover {
          border-color: var(--accent-tint-40);
          transform: translateY(-2px);
        }
        @media (max-width: 880px) {
          .bf { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
        }
        .bf-meta {
          display: flex; gap: 10px; align-items: center;
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-muted);
          letter-spacing: 0.04em;
        }
        .bf-cat {
          color: var(--cat);
          padding: 4px 10px;
          background: color-mix(in oklch, var(--cat) 12%, transparent);
          border: 1px solid color-mix(in oklch, var(--cat) 28%, transparent);
          border-radius: 999px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          font-weight: 600;
          font-size: 11px;
        }
        .bf-dot { opacity: 0.6; }
        .bf-title {
          font-size: clamp(1.8rem, 3.4vw, 2.6rem);
          line-height: 1.1;
          letter-spacing: -0.035em;
          margin: 16px 0 14px;
          color: var(--text);
        }
        .bf-excerpt {
          font-size: 15.5px;
          line-height: 1.6;
          color: var(--text-secondary);
          margin-bottom: 24px;
          max-width: 560px;
        }
        .bf-author {
          display: flex;
          align-items: center;
          gap: 12px;
        }
        .bf-author img {
          width: 36px; height: 36px;
          border-radius: 50%;
          object-fit: cover;
          border: 1.5px solid color-mix(in oklch, var(--accent) 35%, var(--border));
        }
        .bf-author-name {
          font-size: 14px; font-weight: 600;
        }
        .bf-author-role {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.05em;
        }
        .bf-cta {
          margin-left: auto;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.05em;
          color: var(--accent-light);
          white-space: nowrap;
        }
      `}</style>
    </a>
  );
}

function PostCard({ post }) {
  return (
    <a className="post" href={`Blog/${post.slug}.html`}>
      <CoverArt tint1={post.cover.tint1} tint2={post.cover.tint2} />
      <div className="post-meta">
        <span className="post-cat" style={{ '--cat': post.categoryTint }}>{post.category}</span>
        <span className="post-dot">·</span>
        <span>{post.read} read</span>
      </div>
      <h3 className="post-title" dangerouslySetInnerHTML={{ __html: post.title }} />
      <p className="post-excerpt">{post.excerpt}</p>
      <div className="post-foot">
        <img src={post.author.avatar} alt={post.author.name} loading="lazy" />
        <div className="post-foot-text">
          <div className="post-foot-name">{post.author.name}</div>
          <div className="post-foot-date">{post.date}</div>
        </div>
      </div>

      <style>{`
        .post {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 18px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 18px;
          color: inherit;
          transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out), transform 240ms var(--ease-out);
        }
        .post:hover {
          border-color: var(--accent-tint-30);
          background: var(--bg-card-hover);
          transform: translateY(-3px);
        }
        .post-meta {
          display: flex;
          gap: 10px;
          align-items: center;
          font-family: var(--font-mono);
          font-size: 11.5px;
          color: var(--text-muted);
          letter-spacing: 0.04em;
        }
        .post-cat {
          color: var(--cat);
          padding: 3px 9px;
          background: color-mix(in oklch, var(--cat) 12%, transparent);
          border: 1px solid color-mix(in oklch, var(--cat) 28%, transparent);
          border-radius: 999px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          font-weight: 600;
          font-size: 10.5px;
        }
        .post-dot { opacity: 0.6; }
        .post-title {
          font-size: 19px;
          line-height: 1.25;
          letter-spacing: -0.02em;
          color: var(--text);
        }
        .post-excerpt {
          font-size: 14px;
          line-height: 1.55;
          color: var(--text-secondary);
          flex: 1;
        }
        .post-foot {
          display: flex;
          align-items: center;
          gap: 10px;
          padding-top: 14px;
          border-top: 1px dashed var(--border);
        }
        .post-foot img {
          width: 28px; height: 28px;
          border-radius: 50%;
          object-fit: cover;
          border: 1.5px solid color-mix(in oklch, var(--accent) 35%, var(--border));
        }
        .post-foot-name {
          font-size: 13px;
          font-weight: 600;
        }
        .post-foot-date {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.04em;
        }
      `}</style>
    </a>
  );
}

function BlogIndex() {
  const featured = BLOG_POSTS.find((p) => p.featured) || BLOG_POSTS[0];
  const rest = BLOG_POSTS.filter((p) => p.slug !== featured.slug);

  return (
    <section className="blog-list">
      <div className="container">
        <FeaturedCard post={featured} />

        <div className="blog-rule">
          <span className="eyebrow">Latest</span>
          <span className="blog-rule-line" />
        </div>

        <div className="blog-grid">
          {rest.map((p) => <PostCard post={p} key={p.slug} />)}
        </div>

        <div className="blog-foot">
          <span className="eyebrow">New posts</span>
          <p>Every other week, give or take, when we have something honest to say.</p>
          <a className="btn btn-ghost" href="https://t.me/octodusdev" target="_blank" rel="noopener">
            {Icons.telegram({ width: 16, height: 16 })} Follow the changelog channel
          </a>
        </div>
      </div>

      <style>{`
        .blog-list { padding: 56px 0 120px; }
        .blog-rule {
          margin: 64px 0 32px;
          display: flex;
          align-items: center;
          gap: 16px;
        }
        .blog-rule-line {
          flex: 1;
          height: 1px;
          background: var(--border);
        }
        .blog-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        @media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 620px)  { .blog-grid { grid-template-columns: 1fr; } }

        .blog-foot {
          margin-top: 64px;
          padding-top: 32px;
          border-top: 1px solid var(--border);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 14px;
          text-align: center;
        }
        .blog-foot p {
          font-size: 15px;
          color: var(--text-secondary);
          max-width: 460px;
          line-height: 1.5;
        }
      `}</style>
    </section>
  );
}

function BlogApp() {
  return (
    <>
      <SiteEffects />
      <SiteNav active="blog" />
      <BlogHero />
      <BlogIndex />
      <SiteFooter />
      <SiteTweaks />
    </>
  );
}

Object.assign(window, { CoverArt, PostCard, BlogApp });