// MobileVideoCard.jsx — single video still stacked vertically;
// MobileAlbumGrid.jsx — 2-up album grid; MobileStoreCard.jsx —
// single-column store card with pagination dots above.

const MobileVideoCard = ({ title, subtitle, bg = "#D8D8DC", onPlay = () => {} }) => (
  <article style={mvStyles.card}>
    <div style={{ ...mvStyles.still, background: bg }}>
      <button onClick={onPlay} style={mvStyles.play} aria-label="Play">
        <Icon name="play-lg" size={56} />
      </button>
    </div>
    <h3 style={mvStyles.title}>{title}</h3>
    <p style={mvStyles.sub}>{subtitle}</p>
  </article>
);

const mvStyles = {
  card: { margin: "0 16px 18px", display: "flex", flexDirection: "column", gap: 8 },
  still: { position: "relative", width: "100%", aspectRatio: "16/9", borderRadius: 10, overflow: "hidden" },
  play: { position: "absolute", inset: 0, margin: "auto", width: 56, height: 56, background: "transparent", border: 0, cursor: "pointer", padding: 0 },
  title: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 14, color: "#171717", letterSpacing: "-0.02em" },
  sub: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 12, color: "#171717" },
};

const MobileAlbumGrid = ({ items = defaultMobAlbums, onPlay = () => {} }) => (
  <div style={magStyles.grid}>
    {items.map((it, i) => (
      <article key={i} style={magStyles.card}>
        <div style={{ ...magStyles.cover, background: it.bg || "linear-gradient(135deg,#FEEECC,#FDF294)" }}>
          <button onClick={() => onPlay(i)} style={magStyles.play} aria-label="Play"><Icon name="play-lg" size={40} /></button>
        </div>
        <h3 style={magStyles.title}>{it.title}</h3>
      </article>
    ))}
  </div>
);

const defaultMobAlbums = [
  { title: "Music for the Soul" }, { title: "Music for the Soul" },
  { title: "Music for the Soul" }, { title: "Music for the Soul" },
];

const magStyles = {
  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, padding: "0 16px" },
  card: { display: "flex", flexDirection: "column", gap: 6 },
  cover: { position: "relative", width: "100%", aspectRatio: "1/1", borderRadius: 10, overflow: "hidden" },
  play: { position: "absolute", inset: 0, margin: "auto", width: 40, height: 40, background: "transparent", border: 0, cursor: "pointer", padding: 0 },
  title: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 12, fontWeight: 700, color: "#171717", lineHeight: 1.3 },
};

const MobileStoreCarousel = ({ items = defaultMobStore, onBuy = () => {} }) => {
  const [i, setI] = React.useState(0);
  const it = items[i];
  return (
    <div style={mscStyles.wrap}>
      <article style={mscStyles.card}>
        <div style={{ ...mscStyles.cover, background: it.bg }} />
        <h3 style={mscStyles.title}>{it.title}</h3>
        <div style={mscStyles.price}><span style={mscStyles.cur}>$</span>{it.price}</div>
        <button onClick={() => onBuy(i)} style={mscStyles.buy}>
          КУПИТЬ <Icon name="bag" size={12} color="#EE077D" />
        </button>
      </article>
      <div style={mscStyles.dots}>
        {items.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={`Item ${k + 1}`} style={{ ...mscStyles.dot, ...(k === i ? mscStyles.dotOn : {}) }} />
        ))}
      </div>
    </div>
  );
};

const defaultMobStore = [
  { 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)" },
];

const mscStyles = {
  wrap: { padding: "0 16px" },
  card: { background: "#F9FAFF", borderRadius: 14, padding: 16, display: "flex", flexDirection: "column", gap: 10 },
  cover: { width: "100%", aspectRatio: "1/1", borderRadius: 8 },
  title: { margin: 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 },
  dots: { display: "flex", justifyContent: "center", gap: 6, marginTop: 12 },
  dot: { width: 6, height: 6, borderRadius: "50%", background: "rgba(23,23,23,0.25)", border: 0, padding: 0, cursor: "pointer" },
  dotOn: { background: "#EE077D" },
};

window.MobileVideoCard = MobileVideoCard;
window.MobileAlbumGrid = MobileAlbumGrid;
window.MobileStoreCarousel = MobileStoreCarousel;