// Karavi Studio · Category landing page (motion-refreshed)
const Category = ({ name, goto }) => {
  const all = window.KARAVI_PRODUCTS;
  const blurbs = window.KARAVI_CATEGORY_BLURBS;
  const info = blurbs[name] || {
    eyebrow: "The collection.",
    headline: `${name}.`,
    body: "Carefully sourced. Made by hand.",
  };

  const products = all.filter(p => p.category === name);
  const subcats = [...new Set(products.map(p => p.subcat).filter(Boolean))];

  const [activeSub, setActiveSub] = React.useState("All");
  const displayed = activeSub === "All" ? products : products.filter(p => p.subcat === activeSub);

  const IMG = {
    Bedding:  "project/assets/tiles/blush.jpg",
    Rugs:     "project/assets/tiles/walnut.jpg",
    Cushions: "project/assets/tiles/salmon.jpg",
    Lighting: "project/assets/tiles/rust.jpg",
    "Décor":  "project/assets/tiles/terrazzo.jpg",
  };
  const heroImg = IMG[name] || "project/assets/rug-organic-shapes.jpg";

  // Hero parallax
  const heroRef = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroBgY = useTransform(scrollYProgress, [0, 1], ["0%", "18%"]);

  return (
    <main>
      {/* ── HERO ──────────────────────────────── */}
      <Section bleed>
        <div ref={heroRef} style={{ position: "relative", minHeight: "65vh", overflow: "hidden" }}>
          <motion.div
            style={{
              position: "absolute", inset: "-8% 0",
              background: `url(${heroImg}) center/cover no-repeat`,
              y: heroBgY,
            }}
          />
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(45,40,30,.08) 0%, rgba(45,40,30,.55) 100%)",
          }}/>
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.85, ease: [0.22, 0.61, 0.36, 1], delay: 0.2 }}
            style={{
              position: "absolute", left: 0, right: 0, bottom: 0,
              padding: "0 40px 64px", color: "var(--karavi-cream)",
            }}
          >
            <Eyebrow color="rgba(249,236,217,.7)" style={{ marginBottom: 16 }}>{info.eyebrow}</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(42px, 6.5vw, 88px)", lineHeight: 1,
              letterSpacing: "-0.02em", margin: 0, maxWidth: 880,
              color: "var(--karavi-cream)",
            }}>
              {info.headline}
            </h1>
          </motion.div>
        </div>
      </Section>

      {/* ── EDITORIAL INTRO ──────────────────── */}
      <Section className="k-2col-layout" style={{ marginTop: 72, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <Reveal>
          <p style={{
            fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 400,
            fontSize: "clamp(20px, 2.4vw, 28px)", lineHeight: 1.4, color: "var(--fg-display)", margin: 0,
          }}>
            {info.body}
          </p>
        </Reveal>
        <Reveal delay={0.15}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <Eyebrow>Made to last · Small batches · Artisan signed</Eyebrow>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: "var(--fg-2)" }}>
              Every piece ships from our Jaipur studio in 5–7 days. We work only in natural fibres and with makers we have visited in person.
            </p>
            <div style={{ marginTop: 8 }}>
              <Button variant="secondary" onClick={() => goto("story")}>About the studio →</Button>
            </div>
          </div>
        </Reveal>
      </Section>

      {/* ── SUB-CATEGORY FILTERS ────────────── */}
      {subcats.length > 1 && (
        <Section style={{ marginTop: 64 }}>
          <Reveal>
            <Stagger
              staggerChildren={0.05}
              style={{
                display: "flex", gap: 8, flexWrap: "wrap",
                padding: "18px 0", borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)",
              }}
            >
              <StaggerItem><Chip active={activeSub === "All"} onClick={() => setActiveSub("All")}>All</Chip></StaggerItem>
              {subcats.map(s => (
                <StaggerItem key={s}><Chip active={activeSub === s} onClick={() => setActiveSub(s)}>{s}</Chip></StaggerItem>
              ))}
            </Stagger>
          </Reveal>
        </Section>
      )}

      {/* ── PRODUCT GRID ──────────────────────── */}
      <Section style={{ marginTop: 56 }}>
        <AnimatePresence mode="wait">
          {displayed.length > 0 ? (
            <Stagger key={activeSub} className="k-grid-4" style={{ rowGap: 56 }}>
              {displayed.map(p => (
                <StaggerItem key={p.id}>
                  <ProductCard p={p} onClick={() => goto(`product:${p.id}`)}/>
                </StaggerItem>
              ))}
            </Stagger>
          ) : (
            <motion.div
              key="empty"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.4 }}
              style={{ padding: "80px 0", textAlign: "center" }}
            >
              <Eyebrow style={{ justifyContent: "center", display: "flex" }}>Nothing here yet</Eyebrow>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 26, marginTop: 12, color: "var(--fg-display)" }}>
                More pieces arriving soon.
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </Section>

      {/* ── PULL QUOTE ──────────────────────── */}
      <Section style={{ marginTop: 112, textAlign: "center", paddingBottom: 8 }}>
        <KilimDivider/>
        <Reveal delay={0.1}>
          <div style={{
            fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
            fontSize: "clamp(22px, 3vw, 40px)", lineHeight: 1.3,
            color: "var(--fg-display)", maxWidth: 840, margin: "48px auto 0",
          }}>
            "We name every maker on the label, in the hope that the next room will know whose hands made it."
          </div>
        </Reveal>
        <Reveal delay={0.25}>
          <div style={{ marginTop: 18 }}>
            <Eyebrow style={{ justifyContent: "center", display: "flex" }}>— from the studio journal</Eyebrow>
          </div>
        </Reveal>
      </Section>

      {/* ── OTHER CATEGORIES ────────────────── */}
      <Section style={{ marginTop: 112 }}>
        <Reveal>
          <Eyebrow>Also in the studio</Eyebrow>
        </Reveal>
        <Stagger style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 16 }} staggerChildren={0.06}>
          {["Bedding", "Rugs", "Cushions", "Lighting", "Décor"]
            .filter(c => c !== name)
            .map(c => (
              <StaggerItem key={c}>
                <Chip onClick={() => goto(`category:${c}`)}>{c}</Chip>
              </StaggerItem>
            ))
          }
        </Stagger>
      </Section>
    </main>
  );
};
window.Category = Category;