// Karavi Studio · Homepage (motion-refreshed)
const Home = ({ goto, addToCart }) => {
  const products = window.KARAVI_PRODUCTS;
  const featured = products.filter(p => p.new).slice(0, 4);
  const favourites = products.filter(p => !p.new).slice(0, 4);

  // Hero parallax — bg shifts slower than scroll
  const heroRef = React.useRef(null);
  const { scrollYProgress: heroProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroBgY = useTransform(heroProgress, [0, 1], ["0%", "20%"]);
  const heroOpacity = useTransform(heroProgress, [0, 0.6, 1], [1, 1, 0.4]);
  const heroTextY = useTransform(heroProgress, [0, 1], ["0px", "-40px"]);

  return (
    <main>
      {/* ── HERO with parallax ──────────────────── */}
      <Section bleed>
        <div ref={heroRef} style={{ position: "relative", minHeight: "92vh", overflow: "hidden" }}>
          <motion.div
            style={{
              position: "absolute", inset: "-10% 0",
              background: `url(project/assets/rug-organic-shapes.jpg) center/cover no-repeat`,
              y: heroBgY,
            }}
          />
          <motion.div
            style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(57,65,25,0) 32%, rgba(45,40,30,.62) 100%)",
              opacity: heroOpacity,
            }}
          />

          <motion.div
            style={{
              position: "absolute", left: 0, right: 0, bottom: 0,
              padding: "0 40px 76px", color: "var(--karavi-cream)",
              display: "flex", alignItems: "flex-end",
              justifyContent: "space-between", gap: 40, flexWrap: "wrap",
              y: heroTextY,
            }}
          >
            <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.3 }}
              style={{ maxWidth: 720 }}
            >
              <Eyebrow color="rgba(249,236,217,.7)" style={{ marginBottom: 18 }}>
                Spring 2026 · The Almora edit
              </Eyebrow>
              <h1 style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: "clamp(44px, 7.4vw, 108px)", lineHeight: 0.96,
                letterSpacing: "-0.02em", margin: 0,
                color: "var(--karavi-cream)",
              }}>
                A slower way<br/>
                <em style={{ fontWeight: 400, color: "var(--karavi-sand)" }}>to make a home.</em>
              </h1>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 24 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, ease: "easeOut", delay: 0.55 }}
              style={{ paddingBottom: 8, display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start", maxWidth: 340 }}
            >
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "rgba(249,236,217,.85)" }}>
                Twelve new pieces, hand-loomed in Bhuj and tufted in Bhadohi. A small batch — numbered, signed by the maker.
              </p>
              <Button variant="inverse" magnetic onClick={() => goto("shop")}>Shop the collection →</Button>
            </motion.div>
          </motion.div>

          {/* Scroll indicator */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: [0, 0.7, 0] }}
            transition={{ duration: 2, repeat: Infinity, delay: 1.2 }}
            style={{
              position: "absolute", bottom: 24, left: "50%", transform: "translateX(-50%)",
              fontSize: 10, letterSpacing: ".3em", textTransform: "uppercase",
              color: "rgba(249,236,217,.65)",
            }}
          >Scroll</motion.div>
        </div>
      </Section>

      {/* ── MARQUEE STRIP ─────────────────────── */}
      <Section bleed style={{ marginTop: 88, paddingTop: 24, paddingBottom: 24, borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)", background: "var(--karavi-paper)" }}>
        <Marquee items={[
          "Hand-loomed in Bhuj",
          "Tufted in Bhadohi",
          "Block-printed in Bagru",
          "Hand-knotted in Tabriz",
          "Stonewashed in Jaipur",
          "Resist-dyed in Kutch",
          "Wheel-thrown in Khurja",
        ]}/>
      </Section>

      {/* ── CATEGORY ROW ──────────────────────── */}
      <Section style={{ marginTop: 96 }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 28 }}>
            <Eyebrow>Browse by category</Eyebrow>
          </div>
        </Reveal>
        <Stagger className="k-grid-4" style={{ rowGap: 16 }}>
          {[
            { name: "Bedding",  sub: "9 pieces",  img: "project/assets/tiles/blush.jpg" },
            { name: "Rugs",     sub: "21 pieces", img: "project/assets/tiles/walnut.jpg" },
            { name: "Cushions", sub: "14 pieces", img: "project/assets/tiles/salmon.jpg" },
            { name: "Lighting", sub: "11 pieces", img: "project/assets/tiles/rust.jpg" },
          ].map(c => (
            <StaggerItem key={c.name}>
              <motion.a
                onClick={() => goto(`category:${c.name}`)}
                whileHover={{ y: -4 }}
                transition={{ type: "spring", stiffness: 220, damping: 24 }}
                style={{ border: 0, cursor: "pointer", color: "inherit", textDecoration: "none", display: "block" }}
              >
                <div className="k-card-img-wrap" style={{
                  aspectRatio: "3/4", borderRadius: 22,
                  background: "var(--karavi-bone)", position: "relative",
                  boxShadow: "var(--shadow-sm)",
                }}>
                  <div className="k-card-img" style={{ backgroundImage: `url(${c.img})` }}/>
                  <div style={{
                    position: "absolute", inset: 0,
                    background: "linear-gradient(180deg, transparent 45%, rgba(45,40,30,.62))",
                  }}/>
                  <div style={{ position: "absolute", left: 22, bottom: 22, color: "var(--karavi-cream)" }}>
                    <Eyebrow color="rgba(249,236,217,.65)">{c.sub}</Eyebrow>
                    <div style={{
                      fontFamily: "var(--font-display)", fontSize: "clamp(24px, 2.8vw, 36px)",
                      fontWeight: 400, marginTop: 4, lineHeight: 1.05,
                    }}>{c.name}</div>
                  </div>
                </div>
              </motion.a>
            </StaggerItem>
          ))}
        </Stagger>
      </Section>

      {/* ── FEATURED PRODUCTS ──────────────────── */}
      <Section style={{ marginTop: 112 }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 36 }}>
            <div>
              <Eyebrow>New In · Spring 2026</Eyebrow>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: "clamp(36px, 4.5vw, 56px)", letterSpacing: "-0.01em", marginTop: 8, lineHeight: 1.05,
              }}>The makers' picks.</h2>
            </div>
            <motion.a
              onClick={() => goto("shop")}
              whileHover={{ x: 4 }}
              transition={{ duration: 0.25 }}
              style={{
                border: 0, cursor: "pointer", color: "var(--fg-1)",
                fontSize: 12, letterSpacing: ".22em", textTransform: "uppercase",
                borderBottom: "1px solid var(--fg-1)", paddingBottom: 4,
                flexShrink: 0,
              }}
            >View all pieces →</motion.a>
          </div>
        </Reveal>
        <Stagger className="k-grid-4">
          {(featured.length > 0 ? featured : products.slice(0, 4)).map(p => (
            <StaggerItem key={p.id}>
              <ProductCard p={p} onClick={() => goto(`product:${p.id}`)}/>
            </StaggerItem>
          ))}
        </Stagger>
      </Section>

      {/* ── STORY SPLIT ─────────────────────────── */}
      <Section bleed style={{ marginTop: 128 }}>
        <div className="k-split-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "62vh" }}>
          <Parallax speed={0.2} style={{ minHeight: "62vh" }}>
            <div style={{
              minHeight: "120%",
              background: `url(project/assets/rug-organic-shapes.jpg) center/cover`,
            }}/>
          </Parallax>
          <Reveal as="div">
            <div style={{
              background: "var(--karavi-bone)", padding: "80px 72px",
              display: "flex", flexDirection: "column", justifyContent: "center", gap: 22,
              minHeight: "62vh",
            }}>
              <Eyebrow>Our Story</Eyebrow>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 300,
                fontSize: "clamp(32px, 3.8vw, 52px)", lineHeight: 1.08,
                color: "var(--fg-display)", letterSpacing: "-0.01em", margin: 0,
              }}>
                Karavi began in a Jaipur studio,<br/>
                <em style={{ fontWeight: 400 }}>in a corner of an atelier.</em>
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.65, maxWidth: 480, color: "var(--fg-1)", margin: 0 }}>
                Every piece is dyed, woven, or tufted by an artisan we have sat down with. We work in small batches, on natural fibres, with old looms and slow hands.
              </p>
              <div style={{ marginTop: 8 }}>
                <Button variant="ghost" onClick={() => goto("story")}>Read the story →</Button>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* ── STUDIO STATS ─────────────────────── */}
      <Section style={{ marginTop: 128, textAlign: "center" }}>
        <Reveal>
          <Eyebrow style={{ justifyContent: "center", display: "flex" }}>By the numbers</Eyebrow>
        </Reveal>
        <Stagger style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
          marginTop: 40, padding: "32px 0",
          borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)",
        }} className="k-grid-stats">
          {[
            { val: 42, suffix: "", label: "Artisan partners" },
            { val: 5,  suffix: "", label: "Regions of India" },
            { val: 6,  suffix: "", label: "Years of practice" },
            { val: 100, suffix: "%", label: "Natural fibres" },
          ].map(s => (
            <StaggerItem key={s.label}>
              <div style={{ textAlign: "center" }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 300,
                  fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1,
                  color: "var(--fg-display)",
                }}>
                  <Counter to={s.val} suffix={s.suffix}/>
                </div>
                <div style={{
                  marginTop: 12, fontSize: 11, letterSpacing: ".22em",
                  textTransform: "uppercase", color: "var(--fg-2)",
                }}>{s.label}</div>
              </div>
            </StaggerItem>
          ))}
        </Stagger>
      </Section>

      {/* ── STUDIO FAVOURITES ────────────────────── */}
      <Section style={{ marginTop: 112 }}>
        <Reveal>
          <Eyebrow>Studio favourites</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 300,
            fontSize: "clamp(32px, 3.8vw, 48px)", marginTop: 8, marginBottom: 36,
          }}>
            <em>Quietly excellent.</em>
          </h2>
        </Reveal>
        <Stagger className="k-grid-4">
          {(favourites.length > 0 ? favourites : products.slice(4, 8)).map(p => (
            <StaggerItem key={p.id}>
              <ProductCard p={p} onClick={() => goto(`product:${p.id}`)}/>
            </StaggerItem>
          ))}
        </Stagger>
      </Section>

      {/* ── DIVIDER ─────────────────────────── */}
      <Section style={{ marginTop: 96 }}>
        <KilimDivider/>
      </Section>

      {/* ── JOURNAL TEASE ────────────────────── */}
      <Section style={{ marginTop: 96, marginBottom: 8 }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 28 }}>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(28px, 3.2vw, 44px)", margin: 0,
            }}>From the journal.</h2>
            <motion.a
              whileHover={{ x: 4 }}
              transition={{ duration: 0.25 }}
              style={{
                border: 0, cursor: "pointer", fontSize: 12, letterSpacing: ".22em",
                textTransform: "uppercase", borderBottom: "1px solid var(--fg-1)", paddingBottom: 4,
                flexShrink: 0,
              }}
            >All entries →</motion.a>
          </div>
        </Reveal>
        <Stagger className="k-grid-3">
          {[
            { tag: "Field notes", title: "Two weeks at the looms in Bhuj.",        img: "project/assets/tiles/oak.jpg",      date: "April 2026" },
            { tag: "Materials",   title: "Why we still hand-spin our khadi.",      img: "project/assets/tiles/birch.jpg",    date: "March 2026" },
            { tag: "At home",     title: "Layering rugs in a small apartment.",    img: "project/assets/tiles/shapes.jpg",   date: "March 2026" },
          ].map((j, i) => (
            <StaggerItem key={i}>
              <motion.a
                whileHover={{ y: -4 }}
                transition={{ type: "spring", stiffness: 220, damping: 24 }}
                style={{ border: 0, cursor: "pointer", color: "inherit", display: "block" }}
              >
                <div className="k-card-img-wrap" style={{
                  aspectRatio: "4/3", borderRadius: 14,
                  background: "var(--karavi-bone)", boxShadow: "var(--shadow-sm)", position: "relative",
                }}>
                  <div className="k-card-img" style={{ backgroundImage: `url(${j.img})` }}/>
                </div>
                <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 10 }}>
                  <Eyebrow>{j.tag}</Eyebrow>
                  <span style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: ".05em" }}>{j.date}</span>
                </div>
                <div style={{ marginTop: 8, fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.2, color: "var(--fg-display)" }}>
                  {j.title}
                </div>
              </motion.a>
            </StaggerItem>
          ))}
        </Stagger>
      </Section>
    </main>
  );
};
window.Home = Home;