// Blog / Education preview — three article cards over a soft section.

function Blog() {
  const articles = [
    {
      pillar: "PFL",
      pillarName: "Life",
      color: "var(--pfl-color)",
      tint: "var(--pfl-tint)",
      kicker: "Guide",
      title: "Designing a weekly family rhythm that survives Tuesday",
      excerpt: "Why most family calendars break by midweek, and a three-rule system we use inside ProFamily to keep them holding.",
      readTime: "6 min read",
      date: "Nov 12, 2025",
    },
    {
      pillar: "PFMem",
      pillarName: "Memory",
      color: "var(--pfmem-color)",
      tint: "var(--pfmem-tint)",
      kicker: "Product note",
      title: "Permission-first memory: how ProFamily handles your family's data",
      excerpt: "A walk-through of the consent model behind the Memory layer — what gets saved, who can see it, and how to delete it.",
      readTime: "9 min read",
      date: "Oct 28, 2025",
    },
    {
      pillar: "PFK",
      pillarName: "Kids",
      color: "var(--pfk-color)",
      tint: "var(--pfk-tint)",
      kicker: "Field notes",
      title: "From robotics class to a college-ready portfolio",
      excerpt: "Following one family through three years of activities, interests, and milestones — and what their Growth profile started telling them.",
      readTime: "12 min read",
      date: "Oct 14, 2025",
    },
  ];

  return (
    <section className="vh-section vh-section-paper" id="learn">
      <div className="vh-section-head">
        <div className="eyebrow">Education</div>
        <h2>Notes from inside the family OS</h2>
        <p className="vh-section-lede">
          Product thinking, family-systems writing, and the occasional behind-the-scenes look at how ProFamily decides what to do.
        </p>
      </div>

      <div className="vh-blog-grid">
        {articles.map((a) => (
          <a href="#" key={a.title} className="vh-blog-card" style={{ ["--accent"]: a.color, ["--tint"]: a.tint }}>
            <div className="vh-blog-thumb">
              <div className="vh-blog-thumb-wash" />
              <span className="vh-blog-pillar">
                <span className="vh-blog-pillar-dot" />
                {a.pillarName}
              </span>
            </div>
            <div className="vh-blog-body">
              <div className="vh-blog-kicker">{a.kicker}</div>
              <h3 className="vh-blog-title">{a.title}</h3>
              <p className="vh-blog-excerpt">{a.excerpt}</p>
              <div className="vh-blog-meta">
                <span>{a.date}</span>
                <span className="vh-blog-sep">·</span>
                <span>{a.readTime}</span>
              </div>
            </div>
          </a>
        ))}
      </div>

      <div className="vh-blog-cta">
        <a href="#" className="btn btn-secondary">
          All articles <Icon name="arrow-right" size={14} />
        </a>
      </div>
    </section>
  );
}

window.Blog = Blog;