// CategoriesScreen — "Shop by category" landing page (grid of category covers).
const CS_DATA = [
  { id: "scoop-kits", label: "Scoop & Pour Kits", img: "categories/scoop-kits.png" },
  { id: "filler-bags", label: "Scoop & Pour Filler Bags", img: "categories/filler-bags.png" },
  { id: "masterpiece", label: "Masterpiece Box Kit", img: null },
  { id: "playpack", label: "Playpack Bag Kit", img: "categories/playpack.png" },
  { id: "little-wonder", label: "Little Wonder Kit", img: null },
  { id: "treasure-jars", label: "Treasure Jars", img: "categories/treasure-jars.png" },
  { id: "dough-jars", label: "Dough Jars", img: null },
  { id: "coming-soon", label: "Coming Soon", img: null },
];

function CategoriesScreen({ onOpenCategory, mobile }) {
  const [hover, setHover] = React.useState(null);
  return (
    <div style={{ background: "#fff", minHeight: "100vh" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--space-7) var(--container-pad) var(--space-9)" }}>
        <div style={{ textAlign: "center", marginBottom: "var(--space-7)" }}>
          <h1 style={{ margin: "0 0 8px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: mobile ? "var(--text-3xl)" : "var(--text-4xl)", color: "var(--text-strong)" }}>Shop by category</h1>
          <p style={{ margin: 0, fontSize: "var(--text-lg)", color: "var(--text-body)" }}>Pick a collection to start exploring.</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: "var(--space-5)" }}>
          {CS_DATA.map((c) => (
            <button key={c.id} onClick={() => onOpenCategory(c.id)}
              onMouseEnter={() => setHover(c.id)} onMouseLeave={() => setHover(null)}
              style={{ border: "none", padding: 0, cursor: "pointer", background: "transparent", overflow: "hidden",
                boxShadow: "var(--shadow-sm)", position: "relative", aspectRatio: "1 / 1",
                transition: "transform var(--dur-med) var(--ease-bounce), box-shadow var(--dur-med) var(--ease-out)",
                transform: hover === c.id ? "translateY(-4px)" : "none" }}>
              <div style={{ position: "absolute", inset: 0,
                background: c.img ? `center/cover no-repeat url(${c.img})` : "linear-gradient(150deg,#B6E3D9,#94d1c5)" }} />
              <div style={{ position: "absolute", inset: 0, background: "rgba(42,36,64,.34)", opacity: (mobile || hover === c.id) ? 1 : 0, transition: "opacity var(--dur-med) var(--ease-out)" }} />
              {!c.img && <span style={{ position: "absolute", top: 12, right: 14, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-2xs)", color: "rgba(255,255,255,.7)", letterSpacing: "0.05em" }}>photo</span>}
              <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--space-3)",
                fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-lg)", lineHeight: 1.18, color: "#fff", textAlign: "center",
                textShadow: "0 1px 8px rgba(42,36,64,.55)", opacity: (mobile || hover === c.id) ? 1 : 0, transition: "opacity var(--dur-med) var(--ease-out)" }}>{c.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CategoriesScreen });