// StoreGrid.jsx — 4 product cards on cool-white surface.

const StoreGrid = ({ items = defaultStore, onBuy = () => {} }) => (
  <div style={sgStyles.grid}>
    {items.map((it, i) => (
      <article key={i} style={sgStyles.card}>
        <div style={{ ...sgStyles.cover, background: it.bg }}>
          {it.img && <img src={it.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
        </div>
        <h3 style={sgStyles.title}>{it.title}</h3>
        <div style={sgStyles.price}><span style={sgStyles.cur}>$</span>{it.price}</div>
        <button onClick={() => onBuy(i)} style={sgStyles.buy}>
          КУПИТЬ <Icon name="bag" size={14} color="#EE077D" />
        </button>
      </article>
    ))}
  </div>
);

const defaultStore = [
  { title: "Название товара на две строчки", price: 100, bg: "linear-gradient(135deg,#FEEECC,#FDF294)" },
  { title: "Название товара на две строчки", price: 100, bg: "linear-gradient(135deg,#FDF294,#FCC655)" },
  { title: "Название товара на две строчки", price: 100, bg: "linear-gradient(135deg,#E0E5FF,#F9FAFF)" },
  { title: "Название товара на две строчки", price: 100, bg: "linear-gradient(135deg,#FEEECC,#FCC655)" },
];

const sgStyles = {
  grid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 },
  card: {
    background: "#F9FAFF", borderRadius: 16, padding: 18,
    display: "flex", flexDirection: "column", gap: 12,
    transition: "transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s",
    cursor: "pointer",
  },
  cover: { width: "100%", aspectRatio: "1/1", borderRadius: 10, overflow: "hidden" },
  title: { margin: "4px 0 0", fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 14, color: "#171717", lineHeight: 1.3 },
  price: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 22, color: "#190E83", display: "flex", alignItems: "baseline", gap: 4 },
  cur: { fontSize: 14, opacity: 0.6 },
  buy: {
    alignSelf: "flex-start", padding: "8px 14px", borderRadius: 10,
    border: "1px solid #EE077D", background: "transparent",
    color: "#EE077D", fontFamily: "'Nunito Sans', sans-serif",
    fontWeight: 700, fontSize: 12, cursor: "pointer",
    display: "inline-flex", alignItems: "center", gap: 8,
  },
};

window.StoreGrid = StoreGrid;