// Blog / Journal page

function BlogPage({ setPage }) {
  const [post, setPost] = useState(null);
  if (post) return <BlogPost post={post} onBack={() => setPost(null)} />;
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <div className="eyebrow" style={{ marginBottom: 22 }}>THE JOURNAL · LONG-FORM PREP NOTES</div>
        <h1 className="h-section" style={{ margin: 0, maxWidth: 1080 }}>
          Field notes from the <em>interview floor.</em>
        </h1>
        <p style={{ marginTop: 24, fontSize: 17, color: "var(--text-2)", maxWidth: 620, lineHeight: 1.55 }}>
          What we learn from coaching hundreds of candidates each cycle: the patterns, the tells, the traps, and the small adjustments that move scores.
        </p>
      </section>

      <FeaturedPost post={D.blogPosts[0]} onOpen={() => setPost(D.blogPosts[0])} />

      <section className="container" style={{ paddingTop: 60, paddingBottom: 80 }}>
        <div className="eyebrow" style={{ marginBottom: 30 }}>MORE FROM THE JOURNAL</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--border)", border: "1px solid var(--border)", borderRadius: 12, overflow: "hidden" }} data-mobile="stack">
          {D.blogPosts.slice(1).map(p => (
            <button key={p.id} onClick={() => setPost(p)} style={{ textAlign: "left", padding: 32, background: "var(--bg)", transition: "background 0.2s", display: "flex", flexDirection: "column", gap: 18 }}
              onMouseOver={e => e.currentTarget.style.background = "var(--surface)"}
              onMouseOut={e => e.currentTarget.style.background = "var(--bg)"}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="chip">{p.tag}</span>
                <span style={{ fontSize: 11, color: "var(--text-3)", fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>{p.readTime} MIN</span>
              </div>
              <h3 className="serif" style={{ margin: 0, fontSize: 26, lineHeight: 1.15, letterSpacing: "-0.015em", minHeight: 90 }}>{p.title}</h3>
              <p style={{ margin: 0, color: "var(--text-2)", fontSize: 13.5, lineHeight: 1.55 }}>{p.excerpt}</p>
              <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: "1px solid var(--border)" }}>
                <span style={{ fontSize: 12, color: "var(--text-3)" }}>{p.date}</span>
                <span style={{ fontSize: 12, color: "var(--accent)" }}>Read →</span>
              </div>
            </button>
          ))}
        </div>

        <NewsletterStrip />
      </section>
    </div>
  );
}

function FeaturedPost({ post, onOpen }) {
  return (
    <section className="container" style={{ paddingTop: 40 }}>
      <button onClick={onOpen} style={{ textAlign: "left", width: "100%", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 0, border: "1px solid var(--border)", borderRadius: 16, overflow: "hidden", background: "var(--surface)", transition: "all 0.2s" }} data-mobile="stack"
        onMouseOver={e => e.currentTarget.style.borderColor = "var(--border-strong)"}
        onMouseOut={e => e.currentTarget.style.borderColor = "var(--border)"}>
        <div style={{ padding: 60 }}>
          <span className="chip chip-dot">FEATURED · LATEST</span>
          <h2 className="serif" style={{ marginTop: 28, fontSize: 52, lineHeight: 1.05, letterSpacing: "-0.025em" }}>
            {post.title}
          </h2>
          <p style={{ marginTop: 28, color: "var(--text-2)", fontSize: 16, lineHeight: 1.55, maxWidth: 480 }}>{post.excerpt}</p>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 40, color: "var(--text-3)", fontSize: 12.5, fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>
            <span>{post.date.toUpperCase()}</span><span>·</span>
            <span>{post.readTime} MIN READ</span><span>·</span>
            <span style={{ color: "var(--accent)" }}>{post.tag.toUpperCase()}</span>
          </div>
        </div>
        <div className="placeholder-img" style={{ minHeight: 360, borderRadius: 0, borderLeft: "1px solid var(--border)", border: "none", borderLeftWidth: 1 }}>
          EDITORIAL IMAGE · {post.id}
        </div>
      </button>
    </section>
  );
}

function BlogPost({ post, onBack }) {
  return (
    <div className="page-enter page-in">
      <section className="container" style={{ paddingTop: 40, paddingBottom: 20 }}>
        <button onClick={onBack} className="btn btn-dark btn-sm">← Back to journal</button>
      </section>
      <article className="container" style={{ paddingTop: 30, paddingBottom: 80, maxWidth: 760 }}>
        <span className="chip">{post.tag}</span>
        <h1 className="serif" style={{ marginTop: 24, fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.05, letterSpacing: "-0.025em" }}>{post.title}</h1>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 28, color: "var(--text-3)", fontSize: 12.5, fontFamily: "var(--mono)", letterSpacing: "0.06em" }}>
          <span>BY THE FBO DESK</span><span>·</span>
          <span>{post.date.toUpperCase()}</span><span>·</span>
          <span>{post.readTime} MIN READ</span>
        </div>
        <div className="placeholder-img" style={{ height: 360, marginTop: 40, marginBottom: 50 }}>EDITORIAL IMAGE</div>

        <div style={{ fontSize: 18, lineHeight: 1.65, color: "var(--text)", fontFamily: "var(--sans)" }}>
          <p style={{ fontSize: 22, lineHeight: 1.5, color: "var(--text)", marginTop: 0 }}>
            {post.excerpt}
          </p>
          {(post.body || []).map((sec, i) => (
            <section key={i}>
              <h2 className="serif-italic" style={{ fontSize: 32, marginTop: 56, marginBottom: 20, letterSpacing: "-0.02em" }}>
                <span style={{ fontFamily: "var(--mono)", fontStyle: "normal", fontSize: 14, color: "var(--accent)", marginRight: 14, verticalAlign: 3 }}>§ {i + 1}</span>
                {sec.h}
              </h2>
              {sec.p.map((para, j) => <p key={j} style={{ marginTop: 0, marginBottom: 18, color: "var(--text-2)" }}>{para}</p>)}
            </section>
          ))}
        </div>

        <div style={{ marginTop: 80, padding: 32, background: "var(--surface)", border: "1px solid var(--accent-dim)", borderRadius: 12, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>RELATED BANK</div>
            <div className="serif-italic" style={{ fontSize: 24 }}>Get the materials for your target firm.</div>
          </div>
          <button onClick={onBack} className="btn btn-primary">Browse catalogue →</button>
        </div>
      </article>
    </div>
  );
}

function NewsletterStrip() {
  return (
    <div style={{ marginTop: 80, padding: 48, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 14 }}>THE WEEKLY DROP</div>
        <h3 className="serif-italic" style={{ fontSize: 36, margin: 0, lineHeight: 1.05 }}>One short note. <span style={{ color: "var(--accent)" }}>Every Sunday.</span></h3>
        <p style={{ color: "var(--text-2)", fontSize: 14, marginTop: 14, lineHeight: 1.55 }}>What changed in the interview cycle this week, who's opened applications, and one tactical thing to drill before next round.</p>
      </div>
      <form onSubmit={e => e.preventDefault()} style={{ display: "flex", gap: 10 }}>
        <input className="input" type="email" placeholder="your@email.com" />
        <button className="btn btn-primary" type="submit">Subscribe</button>
      </form>
    </div>
  );
}

Object.assign(window, { BlogPage });