// HomeScreen — The Little Scoop homepage.
const HS = window.TheLittleScoopDesignSystem_cee583;

// Hero slideshow data. Drop real photo URLs into `img` and they replace the
// themed placeholder automatically (object-fit: cover).
const HERO_SLIDES = [
  { id: "spring",  img: "slides/springtime-sunshine.png", grad: "linear-gradient(135deg,#DCF2BE,#B6E27F)", caption: "Springtime Sunshine" },
  { id: "berry",   img: "slides/strawberry-lemonade.png", grad: "linear-gradient(135deg,#B6E3D9,#94d1c5)", caption: "Strawberry Lemonade" },
  { id: "dino",    img: "slides/dino-discovery.png", grad: "linear-gradient(135deg,#B6E3D9,#94d1c5)", caption: "Dino Discovery" },
];

function HeroSlideshow({ onNav, mobile }) {
  const { Button, Badge } = HS;
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = HERO_SLIDES.length;
  const go = (d) => setI((p) => (p + d + n) % n);

  React.useEffect(() => {
    if (paused) return;
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    const t = setInterval(() => setI((p) => (p + 1) % n), 7000);
    return () => clearInterval(t);
  }, [paused, n]);

  const height = mobile ? "78vh" : "min(82vh, 660px)";

  return (
    <section
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{ position: "relative", width: "100%", height, minHeight: mobile ? 460 : 520, overflow: "hidden", background: "var(--ink-900)" }}
    >
      {/* Slides */}
      {HERO_SLIDES.map((s, idx) => (
        <div key={s.id} aria-hidden={idx !== i} style={{
          position: "absolute", inset: 0,
          background: s.img ? `center/cover no-repeat url(${s.img})` : s.grad,
          opacity: idx === i ? 1 : 0,
          transform: idx === i ? "scale(1.04)" : "scale(1)",
          transition: "opacity 900ms var(--ease-out), transform 6000ms linear",
          display: "flex", alignItems: "flex-end", justifyContent: "flex-end",
        }}>
          {!s.img && (
            <span style={{ padding: "var(--space-6) var(--space-5)", fontFamily: "var(--font-display)", fontWeight: 600, color: "rgba(42,36,64,.30)", fontSize: "var(--text-lg)" }}>{s.caption} · photo</span>
          )}
        </div>
      ))}

      {/* Legibility scrim */}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(42,36,64,.80) 0%, rgba(42,36,64,.52) 40%, rgba(42,36,64,.12) 72%)" }} />

      {/* Overlaid copy */}
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center" }}>
        <div style={{ maxWidth: "var(--container-max)", width: "100%", margin: "0 auto", padding: "0 var(--container-pad)" }}>
          <div style={{ maxWidth: 560 }}>
            <h1 style={{ margin: "0 0 var(--space-4)", fontFamily: "var(--font-display)", fontWeight: 600,
              fontSize: mobile ? "var(--text-4xl)" : "var(--text-5xl)", lineHeight: 1.04, letterSpacing: "-0.02em", color: "#fff", textShadow: "0 2px 18px rgba(42,36,64,.35)" }}>
              BIG IMAGINATION,<br/><span style={{ color: "#94d1c5" }}>one little scoop</span> AT A TIME.
            </h1>
            <p style={{ margin: "0 0 var(--space-5)", fontSize: "var(--text-lg)", lineHeight: 1.6, color: "rgba(255,255,255,.92)", maxWidth: 460 }}>
              Hand-packed sensory bins bursting with color, texture, and tiny treasures. Calm, busy, happy hands — no screens required.
            </p>
            <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
              <Button variant="primary" size="lg" onClick={() => onNav("products")} style={{ background: "#fff", color: "var(--ink-900)" }}>Shop all bins</Button>
            </div>
          </div>
        </div>
      </div>

      {/* Arrows */}
      {!mobile && [["‹", -1, "left"], ["›", 1, "right"]].map(([g, d, side]) => (
        <button key={side} onClick={() => go(d)} aria-label={d < 0 ? "Previous slide" : "Next slide"} style={{
          position: "absolute", top: "50%", [side]: "var(--space-5)", transform: "translateY(-50%)",
          width: 52, height: 52, borderRadius: "50%", border: "none", cursor: "pointer",
          background: "rgba(255,255,255,.88)", color: "var(--ink-900)", fontSize: 28, lineHeight: 1,
          fontFamily: "var(--font-display)", boxShadow: "var(--shadow-md)", display: "flex", alignItems: "center", justifyContent: "center", paddingBottom: 4,
        }}>{g}</button>
      ))}

      {/* Dots */}
      <div style={{ position: "absolute", bottom: "var(--space-5)", left: 0, right: 0, display: "flex", justifyContent: "center", gap: 10 }}>
        {HERO_SLIDES.map((s, idx) => (
          <button key={s.id} onClick={() => setI(idx)} aria-label={"Go to slide " + (idx + 1)} style={{
            width: idx === i ? 30 : 11, height: 11, borderRadius: "var(--radius-pill)", border: "none", cursor: "pointer",
            background: idx === i ? "#fff" : "rgba(255,255,255,.5)", transition: "width var(--dur-med) var(--ease-out), background var(--dur-med)",
          }} />
        ))}
      </div>
    </section>
  );
}

function ValueProp({ color, title, body, icon }) {
  return (
    <div style={{ textAlign: "center", padding: "var(--space-4)" }}>
      <div style={{ width: 64, height: 64, margin: "0 auto var(--space-3)", borderRadius: "var(--radius-xl)",
        background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-sm)" }}>
        {icon}
      </div>
      <h3 style={{ margin: "0 0 6px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-lg)", color: "var(--text-strong)" }}>{title}</h3>
      <p style={{ margin: 0, fontSize: "var(--text-sm)", lineHeight: 1.6, color: "var(--text-body)" }}>{body}</p>
    </div>
  );
}

function ic(path) {
  return <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffe398" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">{path}</svg>;
}

function HomeScreen({ onNav, onCategory, onAdd, onOpen, mobile }) {
  const { Button, ProductCard, Badge } = HS;
  const themes = window.SCOOP_DATA.themes;
  const pad = "0 var(--container-pad)";
  const [activeCat, setActiveCat] = React.useState("scoop");
  const [hoverCat, setHoverCat] = React.useState(null);
  const featured = window.SCOOP_DATA.products.filter((p) => p.cat === activeCat).slice(0, 4);
  return (
    <div>
      {/* Hero slideshow — full-bleed, auto-advancing */}
      <HeroSlideshow onNav={onNav} mobile={mobile} />

      {/* Value props */}
      <section style={{ maxWidth: "var(--container-max)", margin: "var(--space-7) auto 0", padding: pad }}>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: "var(--space-4)" }}>
          <ValueProp color="var(--theme-berry)" title="Taste-safe fillers" body="Every filler is non-toxic and taste-safe, so little explorers can dig in worry-free."
            icon={ic(<><path d="M9 11l3 3 8-8"/><path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9"/></>)} />
          <ValueProp color="var(--theme-ocean)" title="Hand-packed with love" body="Each bin is assembled by hand and ready to open — no prep, no fuss, just play."
            icon={ic(<><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8z"/></>)} />
          <ValueProp color="var(--theme-spring)" title="Builds little skills" body="Scooping, sorting, and pouring grow fine-motor skills, focus, and calm."
            icon={ic(<><path d="M12 2v20M2 12h20"/><circle cx="12" cy="12" r="9"/></>)} />
        </div>
      </section>

      {/* ===== White section (tabs → down) ===== */}
      <div style={{ background: "#fff", paddingTop: "var(--space-8)", paddingBottom: "var(--space-9)", marginTop: "var(--space-8)" }}>
      {/* Featured */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: pad }}>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: mobile ? "var(--space-5)" : "var(--space-8)", marginBottom: "var(--space-5)" }}>
          {[
            { id: "scoop", label: "Scoop & Pour", color: "#3FA893" },
            { id: "sculpt", label: "Sculpt & Create", color: "#3FA893" },
          ].map((c) => {
            const active = activeCat === c.id;
            return (
              <button key={c.id}
                onMouseEnter={() => !mobile && setActiveCat(c.id)}
                onClick={() => setActiveCat(c.id)}
                aria-pressed={active}
                style={{
                  cursor: "pointer", border: "none", background: "transparent", padding: "0 0 var(--space-3)",
                  borderBottom: active ? `3px solid ${c.color}` : "3px solid transparent",
                  color: active ? c.color : "var(--text-strong)",
                  opacity: active ? 1 : 0.55,
                  fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-2xl)", lineHeight: 1.1, whiteSpace: "nowrap",
                  transition: "opacity var(--dur-med), color var(--dur-med), border-color var(--dur-med)",
                }}
              >
                Shop {c.label}
              </button>
            );
          })}
        </div>
        <div style={{ height: 2, background: "var(--border-soft)", marginBottom: "var(--space-6)" }} />
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${mobile ? 2 : 4}, 1fr)`, gap: "var(--space-5)" }}>
          {featured.map((p) => (
            <ProductCard key={p.id} title={p.title} price={typeof p.priceNoBin === "number" ? p.priceNoBin : p.price} from={typeof p.priceNoBin === "number"} ages={p.ages} theme={p.theme} badge={p.badge} image={p.image}
              onAdd={() => onAdd(p)} onClick={() => onOpen(p)} />
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: "var(--space-5)" }}>
          <Button variant="outline" size="md" onClick={() => onNav("products")}>See all bins →</Button>
        </div>
      </section>

      {/* Shop by theme */}
      <section style={{ maxWidth: "var(--container-max)", margin: "var(--space-8) auto 0", padding: pad }}>
        <h2 style={{ margin: "0 0 var(--space-5)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-3xl)", color: "var(--text-strong)", textAlign: "center" }}>Shop by themes</h2>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${mobile ? 2 : 5}, 1fr)`, gap: "var(--space-4)" }}>
          {themes.map((t) => (
            <button key={t.id} onClick={() => onNav("products")} style={{ border: "2px solid #94d1c5", background: "#94d1c5",
              borderRadius: "var(--radius-xl)", padding: "var(--space-6) var(--space-3)", cursor: "pointer", boxShadow: "var(--shadow-sm)",
              minHeight: 92, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", transition: "transform var(--dur-med) var(--ease-bounce)" }}
              onMouseEnter={(e) => (e.currentTarget.style.transform = "translateY(-4px)")}
              onMouseLeave={(e) => (e.currentTarget.style.transform = "none")}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-md)", color: "#fff" }}>{t.label}</span>
            </button>
          ))}
        </div>
      </section>

      {/* Shop by category */}
      <section style={{ maxWidth: "var(--container-max)", margin: "var(--space-8) auto 0", padding: pad }}>
        <h2 style={{ margin: "0 0 var(--space-5)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-3xl)", color: "var(--text-strong)", textAlign: "center" }}>Shop by category</h2>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: "var(--space-5)" }}>
          {[
            { 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 },
          ].map((c) => (
            <button key={c.id} onClick={() => onCategory(c.id)} style={{ border: "none", padding: 0, cursor: "pointer", background: "transparent",
              borderRadius: "0", 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)" }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-lg)"; setHoverCat(c.id); }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; setHoverCat(null); }}>
              {/* Image (or teal placeholder until a real photo is added) */}
              <div style={{ position: "absolute", inset: 0,
                background: c.img ? `center/cover no-repeat url(${c.img})` : "linear-gradient(150deg,#B6E3D9,#94d1c5)" }} />
              {/* Readability scrim — only while the title is visible */}
              {(() => { const show = mobile || hoverCat === c.id; return (
                <div style={{ position: "absolute", inset: 0, background: "rgba(42,36,64,.34)", opacity: show ? 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>}
              {/* Centered label — always on mobile, on hover for desktop */}
              <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 || hoverCat === c.id) ? 1 : 0, transition: "opacity var(--dur-med) var(--ease-out)" }}>{c.label}</span>
            </button>
          ))}
        </div>
      </section>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen });