// Karavi Studio · Our Story page (motion-refreshed)
const Story = ({ goto }) => {
  // Hero parallax
  const heroRef = React.useRef(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroBgY = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]);

  return (
    <main>
      {/* ── HERO ─────────────────────────────── */}
      <Section bleed>
        <div ref={heroRef} style={{ position: "relative", minHeight: "82vh", overflow: "hidden" }}>
          <motion.div
            style={{
              position: "absolute", inset: "-10% 0",
              background: "url(project/assets/rug-organic-shapes.jpg) center/cover no-repeat",
              y: heroBgY,
            }}
          />
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(45,40,30,.12), rgba(45,40,30,.58))",
          }}/>
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.9, ease: [0.22, 0.61, 0.36, 1], delay: 0.2 }}
            style={{
              position: "absolute", left: 0, right: 0, bottom: 0,
              padding: "0 40px 72px", color: "var(--karavi-cream)",
            }}
          >
            <Eyebrow color="rgba(249,236,217,.7)" style={{ marginBottom: 18 }}>Our Story</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 300,
              fontSize: "clamp(44px, 7vw, 100px)",
              lineHeight: 1, letterSpacing: "-0.02em",
              margin: 0, maxWidth: 980, color: "var(--karavi-cream)",
            }}>
              <em style={{ fontWeight: 400, color: "var(--karavi-sand)" }}>A slower way</em><br/>
              to make a home.
            </h1>
          </motion.div>
        </div>
      </Section>

      {/* ── LEDE ─────────────────────────────── */}
      <Section style={{ maxWidth: 760, marginTop: 96 }}>
        <Reveal>
          <p style={{
            fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 400,
            fontSize: "clamp(22px, 2.8vw, 34px)", lineHeight: 1.4,
            color: "var(--fg-display)", margin: 0,
          }}>
            Karavi began in a Jaipur studio, in a corner of a hand-block printer's atelier.
          </p>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--fg-1)", marginTop: 28 }}>
            We were three people, then four. We had a loom on lease, a small dye yard, and a list of artisans we wanted to work with — properly, slowly, with their names on the label. Five years on, that list has grown to forty-two.
          </p>
        </Reveal>
        <Reveal delay={0.2}>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--fg-1)", marginTop: 18 }}>
            Every piece in the studio is dyed, woven, knotted or tufted by an artisan we have sat down with. We work in small batches because that is what the looms can hold. We work on natural fibres because they breathe. And we sign every piece, in the maker's hand, because every piece passes through one.
          </p>
        </Reveal>
        <Reveal delay={0.3}>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--fg-1)", marginTop: 18 }}>
            The studio itself is quiet — two rooms in an old merchant's haveli off the old city. The walls smell of indigo and dust. Some mornings there is a goat in the lane. This is the texture of the place that makes Karavi, and it is not incidental.
          </p>
        </Reveal>
      </Section>

      {/* ── IMAGE BREAK with parallax ──────── */}
      <Section bleed style={{ marginTop: 96 }}>
        <Parallax speed={0.3} style={{ height: "62vh" }}>
          <div style={{
            height: "120%",
            background: "url(project/assets/textures-grid.jpg) center/cover no-repeat",
          }}/>
        </Parallax>
      </Section>

      {/* ── STAT COUNTERS ────────────────── */}
      <Section style={{ marginTop: 96, textAlign: "center" }}>
        <Reveal>
          <Eyebrow style={{ justifyContent: "center", display: "flex" }}>Five years on</Eyebrow>
        </Reveal>
        <Stagger style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
          marginTop: 40, padding: "40px 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" },
            { val: 4200, suffix: "+", label: "Hours per rug" },
            { val: 100, suffix: "%", label: "Natural fibres" },
          ].map(s => (
            <StaggerItem key={s.label}>
              <div>
                <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>

      {/* ── THREE PILLARS ─────────────────── */}
      <Section style={{ marginTop: 96 }}>
        <Stagger className="k-grid-3" style={{ gap: 56, rowGap: 64 }} staggerChildren={0.12}>
          {[
            {
              kicker: "01",
              title: "Materials",
              body: "Khadi cotton hand-spun in Kutch. New Zealand wool tufted in Bhadohi. European flax stonewashed in small lots. We use no synthetics — ever. Every fibre is chosen for how it will age, not only how it looks on a product page.",
            },
            {
              kicker: "02",
              title: "Makers",
              body: "Forty-two artisans across five regions. We pay per-piece, not per-day, and we share the run sheet so the maker knows what their work has become. Their names are on the label; their voices are in the journal.",
            },
            {
              kicker: "03",
              title: "Method",
              body: "Pit looms, hand-knot frames, kalamkari pens. Old tools, slow tools. We do not promise overnight delivery; we promise something worth the wait. Every Karavi piece takes longer to make than to ship.",
            },
          ].map(b => (
            <StaggerItem key={b.kicker}>
              <div>
                <div style={{
                  fontFamily: "var(--font-display)", fontStyle: "italic",
                  fontSize: "clamp(40px, 5vw, 64px)",
                  color: "var(--karavi-clay)", lineHeight: 1,
                }}>{b.kicker}</div>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontWeight: 400,
                  fontSize: "clamp(24px, 2.8vw, 34px)",
                  marginTop: 16, color: "var(--fg-display)",
                }}>{b.title}</h3>
                <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.7, color: "var(--fg-1)" }}>{b.body}</p>
              </div>
            </StaggerItem>
          ))}
        </Stagger>
      </Section>

      {/* ── SECOND IMAGE BREAK ───────────── */}
      <Section bleed style={{ marginTop: 96 }}>
        <div className="k-split-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "44vh" }}>
          <Parallax speed={0.18} style={{ minHeight: "44vh" }}>
            <div style={{ minHeight: "115%", background: "url(project/assets/rug-organic-shapes.jpg) center/cover" }}/>
          </Parallax>
          <Reveal>
            <div style={{
              background: "var(--karavi-bone)",
              display: "flex", flexDirection: "column", justifyContent: "center",
              padding: "64px 72px", gap: 20, minHeight: "44vh",
            }}>
              <Eyebrow>The Studio</Eyebrow>
              <p style={{
                fontFamily: "var(--font-display)", fontStyle: "italic",
                fontSize: "clamp(20px, 2.4vw, 28px)", lineHeight: 1.4,
                color: "var(--fg-display)", margin: 0,
              }}>
                Two rooms in an old merchant's haveli, off the old city of Jaipur.
              </p>
              <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--fg-2)", margin: 0 }}>
                If you are in Jaipur and would like to visit, write to us. We welcome guests on Tuesday mornings when the dye yard is running.
              </p>
              <Button variant="ghost" onClick={() => goto("contact")} style={{ alignSelf: "flex-start" }}>
                Write to us →
              </Button>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* ── PULL QUOTE ──────────────────── */}
      <Section style={{ marginTop: 112, textAlign: "center" }}>
        <Reveal>
          <div style={{
            fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 300,
            fontSize: "clamp(28px, 5vw, 72px)", lineHeight: 1.1,
            color: "var(--fg-display)",
            maxWidth: 1000, margin: "0 auto", letterSpacing: "-0.01em",
          }}>
            "A house is something you build over years, not over a weekend."
          </div>
        </Reveal>
        <Reveal delay={0.2}>
          <div style={{ marginTop: 22 }}>
            <Eyebrow style={{ justifyContent: "center", display: "flex" }}>— Aslam Khan, master tufter, Bhadohi</Eyebrow>
          </div>
        </Reveal>
      </Section>

      {/* ── SHOP CTA ────────────────────── */}
      <Section style={{ marginTop: 112, marginBottom: 32, textAlign: "center" }}>
        <KilimDivider/>
        <Reveal delay={0.1}>
          <Eyebrow style={{ marginTop: 48, justifyContent: "center", display: "flex" }}>Continue</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 300,
            fontSize: "clamp(32px, 4vw, 56px)", marginTop: 12, marginBottom: 32,
          }}>
            Pieces from the same hands.
          </h2>
          <Button onClick={() => goto("shop")} magnetic>Shop the studio →</Button>
        </Reveal>
      </Section>
    </main>
  );
};
window.Story = Story;
