// Blog index + single-post pages.
const BL_BG="#0B0F14", BL_INK="#F5EFE3", BL_DIM="rgba(245,239,227,0.55)", BL_FAINT="rgba(245,239,227,0.18)", BL_ACCENT="#D9B27C", BL_RULE="rgba(245,239,227,0.12)";
const blFonts = {
  display: "'Playfair Display', 'Times New Roman', serif",
  ui: "'Inter', system-ui, sans-serif",
  italic: "'Instrument Serif', 'Playfair Display', serif",
};

function BlogNav() {
  const { isMobile } = window.useViewport();
  return (
    <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap", padding: isMobile ? "20px 20px" : "28px 64px", borderBottom: `1px solid ${BL_RULE}` }}>
      <a href="../index.html" style={{ fontFamily: blFonts.display, fontWeight: 500, fontSize: 22, color: BL_INK, textDecoration: "none", letterSpacing: -0.3 }}>
        rahim<span style={{ color: BL_ACCENT }}>.ae</span>
      </a>
      <a href="../index.html" style={{ fontFamily: blFonts.ui, fontSize: 11, letterSpacing: 1.4, color: BL_DIM, textTransform: "uppercase", textDecoration: "none" }}>← Back home</a>
    </nav>
  );
}

function BlogIndex() {
  const posts = window.BLOG_POSTS || [];
  const { isMobile, isCompact } = window.useViewport();
  return (
    <div style={{ background: BL_BG, color: BL_INK, minHeight: "100vh", fontFamily: blFonts.ui }}>
      <BlogNav />
      <header style={{
        padding: isMobile ? "64px 20px 40px" : isCompact ? "88px 40px 56px" : "120px 64px 64px",
        borderBottom: `1px solid ${BL_RULE}`,
      }}>
        <div style={{ fontSize: 11, letterSpacing: 2.4, color: BL_DIM, textTransform: "uppercase", marginBottom: 24 }}>§ Writing</div>
        <h1 style={{
          fontFamily: blFonts.display, fontWeight: 500,
          fontSize: isMobile ? "clamp(34px, 9vw, 52px)" : isCompact ? 68 : 96,
          lineHeight: 1.02, margin: 0, letterSpacing: isMobile ? -1 : -2, maxWidth: 1100,
        }}>
          Long-form essays on <span style={{ fontFamily: blFonts.italic, fontStyle: "italic", color: BL_ACCENT, fontWeight: 400 }}>web craft, AI and marketing</span>.
        </h1>
        <p style={{ marginTop: isMobile ? 24 : 32, fontSize: isMobile ? 17 : 22, lineHeight: 1.5, color: BL_DIM, maxWidth: 760 }}>
          Notes from the desk, written slowly and edited twice. New posts every month or so.
        </p>
      </header>
      <section style={{ padding: isMobile ? "32px 20px 64px" : isCompact ? "48px 40px 80px" : "64px 64px 96px" }}>
        {posts.map((p, i) => (
          <a key={p.slug} href={`./${p.slug}.html`} style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr auto" : isCompact ? "120px 1fr 90px" : "140px 1fr 120px 80px",
            gap: isMobile ? "6px 14px" : 32,
            alignItems: "baseline", padding: isMobile ? "24px 0" : "32px 0",
            borderTop: i === 0 ? `1px solid ${BL_RULE}` : "none",
            borderBottom: `1px solid ${BL_RULE}`,
            textDecoration: "none", color: BL_INK,
            transition: "background 200ms ease, padding-left 200ms ease",
          }}
            onMouseEnter={(e) => { if (!isMobile) e.currentTarget.style.paddingLeft = "16px"; }}
            onMouseLeave={(e) => { e.currentTarget.style.paddingLeft = "0px"; }}>
            <span style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: BL_DIM, letterSpacing: 1,
              order: isMobile ? 1 : 0,
            }}>{p.date}</span>
            <div style={{ gridColumn: isMobile ? "1 / -1" : "auto" }}>
              <div style={{ fontFamily: blFonts.display, fontSize: isMobile ? 21 : 28, lineHeight: 1.2, letterSpacing: -0.4 }}>{p.title}</div>
              <div style={{ fontSize: 14, color: BL_DIM, marginTop: 8, maxWidth: 720 }}>{p.deck}</div>
            </div>
            <span style={{
              fontSize: 11, color: BL_DIM, letterSpacing: 1.4, textTransform: "uppercase",
              order: isMobile ? 2 : 0,
            }}>{p.tag}</span>
            <span style={{
              fontSize: 11, color: BL_DIM, letterSpacing: 1.4, textTransform: "uppercase", textAlign: "right",
              order: isMobile ? 3 : 0,
            }}>{p.read} →</span>
          </a>
        ))}
      </section>
      <footer style={{ padding: isMobile ? "36px 20px" : "48px 64px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontSize: 12, color: BL_DIM }}>
        <span>© Rahim 2026 — Abu Dhabi, UAE</span>
        <a href="../index.html" style={{ color: BL_DIM, textDecoration: "none" }}>← Back home</a>
      </footer>
    </div>
  );
}

function BlogPost() {
  const posts = window.BLOG_POSTS || [];
  const { isMobile, isCompact } = window.useViewport();
  const slug = window.POST_SLUG;
  const p = posts.find(x => x.slug === slug);
  const idx = posts.findIndex(x => x.slug === slug);
  const next = posts[(idx + 1) % posts.length];
  if (!p) return <div style={{ padding: 64 }}><BlogNav /><h1>Post not found</h1></div>;
  return (
    <div style={{ background: BL_BG, color: BL_INK, minHeight: "100vh", fontFamily: blFonts.ui }}>
      <BlogNav />
      <article style={{ maxWidth: 760, margin: "0 auto", padding: isMobile ? "56px 20px 56px" : "120px 32px 64px" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: isMobile ? 12 : 24, fontSize: 11, letterSpacing: 1.6, color: BL_DIM, textTransform: "uppercase", marginBottom: isMobile ? 24 : 32 }}>
          <span>{p.date}</span><span>·</span><span>{p.tag}</span><span>·</span><span>{p.read} read</span>
        </div>
        <h1 style={{
          fontFamily: blFonts.display, fontWeight: 500,
          fontSize: isMobile ? "clamp(30px, 8.5vw, 44px)" : isCompact ? 52 : 64,
          lineHeight: 1.08, letterSpacing: isMobile ? -0.8 : -1.5, margin: "0 0 24px",
        }}>{p.title}</h1>
        <p style={{ fontFamily: blFonts.italic, fontStyle: "italic", fontSize: isMobile ? 19 : 24, lineHeight: 1.4, color: BL_ACCENT, margin: isMobile ? "0 0 40px" : "0 0 56px" }}>{p.deck}</p>
        {p.body.map((para, i) => (
          <p key={i} style={{ fontSize: isMobile ? 17 : 19, lineHeight: 1.7, color: i === 0 ? BL_INK : "rgba(245,239,227,0.85)", margin: "0 0 28px" }}>
            {i === 0 ? <span style={{ fontFamily: blFonts.display, fontSize: isMobile ? 46 : 56, lineHeight: 0.9, float: "left", marginRight: 12, marginTop: 6, color: BL_INK }}>{para[0]}</span> : null}
            {i === 0 ? para.slice(1) : para}
          </p>
        ))}
        <div style={{ borderTop: `1px solid ${BL_RULE}`, marginTop: isMobile ? 56 : 80, paddingTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20 }}>
          <a href="./index.html" style={{ fontSize: 11, letterSpacing: 1.4, color: BL_DIM, textTransform: "uppercase", textDecoration: "none", flexShrink: 0 }}>← All writing</a>
          {next && next.slug !== p.slug && (
            <a href={`./${next.slug}.html`} style={{ textDecoration: "none", color: BL_INK, textAlign: "right" }}>
              <div style={{ fontSize: 10, letterSpacing: 1.4, color: BL_DIM, textTransform: "uppercase", marginBottom: 6 }}>Next →</div>
              <div style={{ fontFamily: blFonts.display, fontSize: isMobile ? 17 : 20 }}>{next.title}</div>
            </a>
          )}
        </div>
      </article>
      <footer style={{ padding: isMobile ? "36px 20px" : "48px 64px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontSize: 12, color: BL_DIM }}>
        <span>© Rahim 2026 — Abu Dhabi, UAE</span>
        <a href="../index.html" style={{ color: BL_DIM, textDecoration: "none" }}>← Back home</a>
      </footer>
    </div>
  );
}

window.BlogIndex = BlogIndex;
window.BlogPost = BlogPost;