// ArticleGrid.jsx — 3 article excerpts with "Читать →" CTA.

const ArticleGrid = ({ items = defaultArticles, onRead = () => {} }) => (
  <div style={articleStyles.grid}>
    {items.map((it, i) => (
      <article key={i} style={articleStyles.card}>
        <h3 style={articleStyles.title}>{it.title}</h3>
        <p style={articleStyles.body}>{it.body}</p>
        <a href="#" onClick={(e) => { e.preventDefault(); onRead(i); }} style={articleStyles.cta}>
          Читать <Icon name="arrow" size={20} color="#EE077D" />
        </a>
      </article>
    ))}
  </div>
);

const defaultArticles = [
  { title: "Импровизация в музыке — импровизация жизни", body: "Lorem Ipsum — это текст‑«рыба», часто используемый в печати и вёб‑дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века." },
  { title: "Импровизация в музыке — импровизация жизни", body: "Lorem Ipsum — это текст‑«рыба», часто используемый в печати и вёб‑дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века." },
  { title: "Импровизация в музыке — импровизация жизни", body: "Lorem Ipsum — это текст‑«рыба», часто используемый в печати и вёб‑дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века." },
];

const articleStyles = {
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  card: { display: "flex", flexDirection: "column", gap: 12 },
  title: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 16, color: "#171717", lineHeight: 1.3, letterSpacing: "-0.02em" },
  body: { margin: 0, fontFamily: "'Lato', serif", fontWeight: 400, fontSize: 13, color: "#171717", lineHeight: 1.55 },
  cta: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 14, color: "#EE077D", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10 },
};

window.ArticleGrid = ArticleGrid;