// WritingPreview.jsx — three most-recent posts linking out to blog.spencervoorhees.com.

function WritingPreview() {
  const posts = [
    {
      date:  "May 12, 2026",
      read:  "8 min",
      title: "A pragmatic guide to event-driven systems",
      summary:
        "When to reach for queues, the four traps to avoid, and how to keep a monolith honest along the way.",
      tag: "Systems",
    },
    {
      date:  "Apr 02, 2026",
      read:  "12 min",
      title: "Reading code like a senior engineer",
      summary:
        "A repeatable method I use to onboard onto unfamiliar codebases in days, not weeks.",
      tag: "Practice",
    },
    {
      date:  "Feb 18, 2026",
      read:  "6 min",
      title: "The two paragraphs every RFC needs",
      summary:
        "If your design doc opens with anything other than context and forcing function, rewrite it.",
      tag: "Writing",
    },
  ];

  return (
    <section id="writing" style={wpStyles.section}>
      <div style={wpStyles.inner}>
        <div style={wpStyles.head}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Writing</div>
            <h2 style={wpStyles.title}>Notes from the field.</h2>
          </div>
          <a href="https://blog.spencervoorhees.com" style={wpStyles.headLink}>
            <span>All posts at blog.spencervoorhees.com</span>
            <i data-lucide="arrow-up-right" style={{ width: 14, height: 14 }}></i>
          </a>
        </div>

        <ul style={wpStyles.list}>
          {posts.map((p, i) => (
            <PostRow key={p.title} post={p} last={i === posts.length - 1} />
          ))}
        </ul>
      </div>
    </section>
  );
}

function PostRow({ post, last }) {
  const [hover, setHover] = React.useState(false);
  return (
    <li style={{ borderBottom: last ? "none" : "1px solid var(--border-subtle)" }}>
      <a href="https://blog.spencervoorhees.com"
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
         className="post-row"
         style={{
           ...prStyles.row,
           background: hover ? "var(--bg-subtle)" : "transparent",
         }}>
        <div className="post-meta" style={prStyles.meta}>
          <span>{post.date}</span>
          <span style={prStyles.dot}>·</span>
          <span>{post.read}</span>
        </div>
        <div style={prStyles.middle}>
          <div style={prStyles.titleRow}>
            <div style={prStyles.title}>{post.title}</div>
            <span style={prStyles.tag}>{post.tag}</span>
          </div>
          <div style={prStyles.summary}>{post.summary}</div>
        </div>
        <div className="post-chevron" style={{
          ...prStyles.chevron,
          transform: hover ? "translateX(2px)" : "translateX(0)",
          color: hover ? "var(--accent)" : "var(--fg-quaternary)",
        }}>
          <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
        </div>
      </a>
    </li>
  );
}

const wpStyles = {
  section: {
    padding: "var(--sec-y, 96px) 0",
    borderTop: "1px solid var(--border-subtle)",
  },
  inner: { maxWidth: 1080, margin: "0 auto", padding: "0 max(20px, 5vw)" },
  head: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    marginBottom: 40, gap: 24, flexWrap: "wrap",
  },
  title: {
    fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 600,
    letterSpacing: "-0.024em", lineHeight: 1.08, color: "var(--fg)", margin: 0,
  },
  headLink: {
    fontFamily: "var(--font-mono)",
    fontSize: 12, color: "var(--fg-tertiary)", textDecoration: "none",
    display: "inline-flex", gap: 6, alignItems: "center", fontWeight: 500,
  },
  list: {
    listStyle: "none", padding: 0, margin: 0,
    borderTop: "1px solid var(--border-subtle)",
  },
};

const prStyles = {
  row: {
    display: "grid",
    gridTemplateColumns: "170px 1fr 32px",
    gap: 28, alignItems: "center",
    padding: "22px 16px", margin: "0 -16px",
    textDecoration: "none", color: "inherit",
    borderRadius: 12,
    transition: "background 160ms cubic-bezier(.16,1,.30,1)",
  },
  meta: {
    display: "flex", gap: 8, alignItems: "center",
    fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-tertiary)",
    whiteSpace: "nowrap",
  },
  dot: { opacity: 0.5 },
  middle: { minWidth: 0 },
  titleRow: { display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" },
  title: {
    fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600,
    letterSpacing: "-0.014em", color: "var(--fg)",
  },
  tag: {
    fontFamily: "var(--font-mono)", fontSize: 10,
    color: "var(--fg-tertiary)",
    padding: "2px 7px",
    border: "1px solid var(--border-subtle)",
    borderRadius: 999,
    letterSpacing: "0.02em",
    textTransform: "lowercase",
  },
  summary: {
    marginTop: 4, fontSize: 14.5, color: "var(--fg-tertiary)", lineHeight: 1.55,
    maxWidth: 620,
  },
  chevron: {
    display: "flex", justifyContent: "flex-end",
    transition: "transform 200ms cubic-bezier(.16,1,.30,1), color 160ms",
  },
};

window.WritingPreview = WritingPreview;