// Karavi Studio · Shared components (motion-enhanced)
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

/* ── Icons ─────────────────────────────────────── */
const Icon = ({ name, size = 18, style, ...rest }) => {
  const s = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    search:    <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    user:      <><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></>,
    heart:     <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z"/>,
    bag:       <><path d="M20 7H4l1.5 13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2L20 7z"/><path d="M9 7a3 3 0 1 1 6 0"/></>,
    menu:      <path d="M3 6h18M3 12h18M3 18h18"/>,
    close:     <path d="M18 6L6 18M6 6l12 12"/>,
    chevron:   <path d="M6 9l6 6 6-6"/>,
    chevronR:  <path d="M9 6l6 6-6 6"/>,
    arrow:     <><path d="M7 17L17 7"/><path d="M9 7h8v8"/></>,
    plus:      <path d="M12 5v14M5 12h14"/>,
    minus:     <path d="M5 12h14"/>,
    truck:     <><path d="M3 7h11v9H3z"/><path d="M14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".7" fill="currentColor"/></>,
    mail:      <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></>,
    filter:    <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/>,
    sparkle:   <><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...s} style={style} {...rest} aria-hidden="true">
      {paths[name]}
    </svg>
  );
};

/* ── Wordmark ──────────────────────────────────── */
const Wordmark = ({ size = 22, color }) => (
  <span style={{
    fontFamily: "var(--font-display)", fontWeight: 400, fontSize: size,
    letterSpacing: "0.22em", color: color || "var(--karavi-ebony)",
    userSelect: "none",
  }}>KARAVI</span>
);

/* ── Logo (brand mark; transparent PNG, two color variants) ── */
const Logo = ({ height = 44, variant = "light", style, ...rest }) => {
  const src = variant === "dark"
    ? "project/assets/logo-cream.png"
    : "project/assets/logo.png";
  return (
    <img
      src={src}
      alt="Karavi Studio"
      style={{
        height, width: "auto", display: "block",
        userSelect: "none",
        ...style,
      }}
      draggable={false}
      {...rest}
    />
  );
};

/* ── Buttons (with motion lift + tap) ──────────── */
const baseBtn = {
  fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500,
  letterSpacing: "0.22em", textTransform: "uppercase",
  padding: "14px 28px", borderRadius: 999, border: "0",
  cursor: "pointer",
  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
  minHeight: 48,
};
const Button = ({ variant = "primary", children, full, onClick, style, disabled, magnetic, ...rest }) => {
  const variants = {
    primary:   { background: "var(--karavi-ebony)",   color: "var(--karavi-cream)" },
    secondary: { background: "transparent", color: "var(--karavi-ebony)", border: "1px solid var(--karavi-ebony)" },
    inverse:   { background: "var(--karavi-cream)",   color: "var(--karavi-ebony)" },
    clay:      { background: "var(--karavi-clay)",    color: "var(--karavi-cream)" },
    ghost:     {
      background: "transparent", color: "var(--karavi-ebony)",
      padding: "12px 4px", borderBottom: "1px solid var(--karavi-ebony)",
      borderRadius: 0, letterSpacing: ".18em",
    },
  };
  const finalStyle = {
    ...baseBtn,
    ...variants[variant],
    width: full ? "100%" : undefined,
    opacity: disabled ? 0.5 : 1,
    cursor: disabled ? "not-allowed" : "pointer",
    ...style,
  };

  const Comp = magnetic && !disabled ? MagneticButton : motion.button;

  return (
    <Comp
      onClick={onClick}
      disabled={disabled}
      style={finalStyle}
      whileHover={!disabled ? { y: -2 } : undefined}
      whileTap={!disabled ? { scale: 0.97 } : undefined}
      transition={{ type: "spring", stiffness: 380, damping: 24 }}
      {...rest}
    >
      {children}
    </Comp>
  );
};

/* ── Eyebrow / Badge / Chip ────────────────────── */
const Eyebrow = ({ children, color, style }) => (
  <div style={{
    fontFamily: "var(--font-body)", fontSize: 11.5, fontWeight: 500,
    letterSpacing: "0.22em", textTransform: "uppercase",
    color: color || "var(--fg-2)", ...style,
  }}>{children}</div>
);

const Badge = ({ tone = "ebony", children }) => {
  const tones = {
    ebony:   { background: "var(--karavi-ebony)", color: "var(--karavi-cream)" },
    cosmos:  { background: "var(--karavi-cosmos)", color: "var(--karavi-cream)" },
    bone:    { background: "var(--karavi-bone)", color: "var(--karavi-cocoa)" },
    outline: { border: "1px solid var(--karavi-cocoa)", color: "var(--karavi-cocoa)" },
  };
  return (
    <motion.span
      initial={{ opacity: 0, scale: 0.85 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={springs.pop}
      style={{
        fontFamily: "var(--font-body)", fontSize: 10.5, fontWeight: 500,
        letterSpacing: "0.18em", textTransform: "uppercase",
        padding: "5px 10px", borderRadius: 4, display: "inline-block", ...tones[tone],
      }}
    >{children}</motion.span>
  );
};

const Chip = ({ active, onClick, children, style }) => (
  <motion.button
    onClick={onClick}
    whileHover={{ y: -1 }}
    whileTap={{ scale: 0.96 }}
    transition={springs.pop}
    style={{
      fontFamily: "var(--font-body)", fontSize: 13,
      padding: "9px 18px", borderRadius: 999, minHeight: 44,
      border: `1px solid ${active ? "var(--karavi-ebony)" : "var(--line-medium)"}`,
      background: active ? "var(--karavi-ebony)" : "transparent",
      color: active ? "var(--karavi-cream)" : "var(--fg-1)",
      cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 8,
      ...style,
    }}
  >{children}</motion.button>
);

/* ── Field ─────────────────────────────────────── */
const Field = ({ label, textarea, ...rest }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
    <span style={{ fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--fg-2)" }}>{label}</span>
    {textarea ? (
      <textarea {...rest} rows={4} style={{
        background: "transparent", border: 0, borderBottom: "1px solid var(--line-medium)",
        padding: "8px 0", fontFamily: "var(--font-body)", fontSize: 15,
        color: "var(--fg-1)", outline: "none", resize: "vertical",
      }}/>
    ) : (
      <input {...rest} style={{
        background: "transparent", border: 0, borderBottom: "1px solid var(--line-medium)",
        padding: "8px 0", fontFamily: "var(--font-body)", fontSize: 15,
        color: "var(--fg-1)", outline: "none",
      }}/>
    )}
  </label>
);

/* ── Product card (motion hover) ───────────────── */
const ProductCard = ({ p, onClick }) => (
  <motion.a
    onClick={onClick}
    role="button"
    tabIndex={0}
    onKeyDown={e => e.key === "Enter" && onClick()}
    whileHover={{ y: -4 }}
    transition={{ type: "spring", stiffness: 220, damping: 24 }}
    style={{
      textDecoration: "none", border: 0, cursor: "pointer",
      color: "inherit", display: "block",
    }}
    className="k-card-link"
  >
    <div className="k-card-img-wrap" style={{
      aspectRatio: "4 / 5", borderRadius: 14,
      background: "var(--karavi-bone)", position: "relative",
      boxShadow: "var(--shadow-sm)",
    }}>
      <div className="k-card-img" style={{ backgroundImage: `url(${p.image})` }}/>
      <AnimatePresence>
        {p.new && (
          <motion.div
            key="new"
            initial={{ opacity: 0, y: -4 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.15, duration: 0.4 }}
            style={{ position: "absolute", top: 14, left: 14, zIndex: 2 }}
          ><Badge>New In</Badge></motion.div>
        )}
        {p.was && (
          <motion.div
            key="sale"
            initial={{ opacity: 0, y: -4 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2, duration: 0.4 }}
            style={{ position: "absolute", top: 14, right: 14, zIndex: 2 }}
          ><Badge tone="cosmos">{`−${Math.round((1 - p.price / p.was) * 100)}%`}</Badge></motion.div>
        )}
      </AnimatePresence>
    </div>
    <div style={{ paddingTop: 14, display: "flex", flexDirection: "column", gap: 4 }}>
      <Eyebrow>{p.type}</Eyebrow>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1.18,
        color: "var(--fg-display)", fontWeight: 400,
      }}>{p.name} <em style={{ fontWeight: 400 }}>{p.sub}</em></div>
      <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
        {p.swatches.map((s, i) => (
          <span key={i} style={{
            width: 14, height: 14, borderRadius: 999,
            background: s, boxShadow: "var(--shadow-inset)",
            display: "inline-block",
          }}/>
        ))}
      </div>
      <div style={{ marginTop: 6, display: "flex", gap: 10, alignItems: "baseline", fontSize: 15 }}>
        <span style={{ fontFamily: "var(--font-body)" }}>₹ {p.price.toLocaleString("en-IN")}</span>
        {p.was && <s style={{ color: "var(--fg-3)", fontSize: 13 }}>₹ {p.was.toLocaleString("en-IN")}</s>}
      </div>
    </div>
  </motion.a>
);

/* ── Mobile nav (motion spring drawer) ─────────── */
const MobileNav = ({ open, onClose, goto, openCart, cartCount }) => {
  const nav = window.KARAVI_NAV || [];
  const [expanded, setExpanded] = useStateC(null);
  const navigate = (target) => { onClose(); goto(target); };

  return (
    <AnimatePresence>
      {open && (
        <>
          <motion.div
            key="scrim"
            className="k-mobile-nav-scrim"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            onClick={onClose}
          />
          <motion.div
            key="drawer"
            initial={{ x: "-100%" }}
            animate={{ x: 0 }}
            exit={{ x: "-100%" }}
            transition={springs.drawer}
            role="dialog"
            aria-label="Navigation"
            style={{
              position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 200,
              width: 320, maxWidth: "90vw",
              background: "var(--karavi-cream)", padding: "28px 24px",
              overflowY: "auto", display: "flex", flexDirection: "column",
              boxShadow: "var(--shadow-lg)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 32 }}>
              <Logo height={44}/>
              <button onClick={onClose} style={{ background: "none", border: 0, cursor: "pointer", padding: 4, minHeight: 44 }} aria-label="Close menu">
                <Icon name="close" size={20}/>
              </button>
            </div>

            <Stagger as="div" staggerChildren={0.04} delayChildren={0.1}>
              {nav.map(item => (
                <StaggerItem key={item.name} as="div" style={{ borderBottom: "1px solid var(--line-soft)" }}>
                  <div style={{
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    padding: "16px 0", cursor: "pointer", minHeight: 56,
                  }}
                    onClick={() => {
                      if (item.sub.length === 0) {
                        navigate(item.name === "Our Story" ? "story" : item.name === "Contact" ? "contact" : `category:${item.name}`);
                      } else {
                        setExpanded(expanded === item.name ? null : item.name);
                      }
                    }}
                  >
                    <span style={{
                      fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500,
                      letterSpacing: ".22em", textTransform: "uppercase",
                    }}>{item.name}</span>
                    {item.sub.length > 0 && (
                      <motion.span
                        animate={{ rotate: expanded === item.name ? 180 : 0 }}
                        transition={{ duration: 0.2 }}
                      ><Icon name="chevron" size={16}/></motion.span>
                    )}
                  </div>
                  <AnimatePresence initial={false}>
                    {item.sub.length > 0 && expanded === item.name && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.28, ease: [0.22, 0.61, 0.36, 1] }}
                        style={{ overflow: "hidden" }}
                      >
                        <div style={{ paddingBottom: 16, paddingLeft: 16, display: "flex", flexDirection: "column" }}>
                          {item.sub.map(sub => (
                            <button key={sub} onClick={() => navigate(`shop:${sub}`)} style={{
                              background: "none", border: 0, cursor: "pointer", textAlign: "left",
                              padding: "10px 0", fontSize: 14, color: "var(--fg-2)", minHeight: 44,
                            }}>{sub}</button>
                          ))}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </StaggerItem>
              ))}
            </Stagger>

            <div style={{ marginTop: 32, display: "flex", gap: 20, alignItems: "center" }}>
              <button style={{ background: "none", border: 0, cursor: "pointer", minHeight: 44 }} aria-label="Search">
                <Icon name="search" size={20}/>
              </button>
              <button style={{ background: "none", border: 0, cursor: "pointer", minHeight: 44 }} aria-label="Wishlist">
                <Icon name="heart" size={20}/>
              </button>
              <button onClick={() => { onClose(); openCart(); }} style={{
                background: "none", border: 0, cursor: "pointer", minHeight: 44,
                display: "flex", alignItems: "center", gap: 6,
              }} aria-label="Cart">
                <Icon name="bag" size={20}/>
                {cartCount > 0 && <span style={{
                  fontSize: 11, background: "var(--karavi-ebony)", color: "var(--karavi-cream)",
                  padding: "1px 7px", borderRadius: 999,
                }}>{cartCount}</span>}
              </button>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

/* ── Header (motion entry + scrolled blur) ─────── */
const Header = ({ goto, openCart, cartCount }) => {
  const [scrolled, setScrolled] = useStateC(false);
  const [mobileOpen, setMobileOpen] = useStateC(false);
  const nav = window.KARAVI_NAV || [];

  useEffectC(() => {
    const onS = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onS);
    return () => window.removeEventListener("scroll", onS);
  }, []);

  const handleNavClick = (item) => {
    if (item.name === "Our Story") goto("story");
    else if (item.name === "Contact") goto("contact");
    else goto(`category:${item.name}`);
  };

  return (
    <>
      <motion.header
        initial={{ y: -8, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.5, ease: [0.22, 0.61, 0.36, 1] }}
        style={{
          position: "sticky", top: 0, zIndex: 50, height: 72,
          padding: "0 40px", display: "flex", alignItems: "center", gap: 32,
          background: scrolled ? "rgba(249,236,217,.82)" : "rgba(249,236,217,0)",
          backdropFilter: scrolled ? "blur(14px)" : "none",
          WebkitBackdropFilter: scrolled ? "blur(14px)" : "none",
          borderBottom: scrolled ? "1px solid var(--line-soft)" : "1px solid transparent",
          transition: "all .3s var(--ease-standard)",
        }}>
        <button
          className="k-mobile-only"
          onClick={() => setMobileOpen(true)}
          style={{ background: "none", border: 0, cursor: "pointer", padding: 4, minHeight: 44, color: "var(--fg-1)" }}
          aria-label="Open navigation"
        >
          <Icon name="menu" size={22}/>
        </button>

        <a onClick={() => goto("home")} style={{ border: 0, cursor: "pointer", flexShrink: 0, display: "inline-block" }}>
          <Logo height={52}/>
        </a>

        <nav className="k-desktop-only" style={{ gap: 0, flex: 1, justifyContent: "center" }}>
          {nav.map(item => (
            <div key={item.name} className="k-nav-item">
              <motion.a
                onClick={() => handleNavClick(item)}
                whileHover={{ opacity: 0.65 }}
                style={{
                  border: 0, cursor: "pointer", display: "flex", alignItems: "center", gap: 4,
                  padding: "8px 18px", fontSize: 11.5, fontWeight: 500, letterSpacing: ".22em",
                  textTransform: "uppercase", color: "var(--fg-1)", minHeight: 44,
                }}
              >
                {item.name}
                {item.sub.length > 0 && <Icon name="chevron" size={12}/>}
              </motion.a>
              {item.sub.length > 0 && (
                <div className="k-nav-dropdown">
                  <Eyebrow style={{ marginBottom: 12 }}>{item.name}</Eyebrow>
                  {item.sub.map(sub => (
                    <a key={sub} onClick={() => goto(`shop:${sub}`)} style={{
                      display: "block", padding: "8px 0", fontSize: 14,
                      color: "var(--fg-1)", border: 0, cursor: "pointer",
                      transition: "opacity .15s",
                    }}
                      onMouseEnter={e => e.currentTarget.style.opacity = .6}
                      onMouseLeave={e => e.currentTarget.style.opacity = 1}
                    >{sub}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>

        <div className="k-desktop-only" style={{ marginLeft: "auto", gap: 18, alignItems: "center", color: "var(--fg-1)" }}>
          {["search", "user", "heart"].map(n => (
            <motion.button key={n} whileHover={{ y: -1 }} style={{ background: "none", border: 0, cursor: "pointer", color: "inherit", minHeight: 44, padding: 4 }} aria-label={n}>
              <Icon name={n}/>
            </motion.button>
          ))}
          <motion.button
            onClick={openCart}
            whileHover={{ y: -1 }}
            whileTap={{ scale: 0.94 }}
            style={{
              background: "none", border: 0, cursor: "pointer", color: "inherit",
              display: "inline-flex", alignItems: "center", gap: 5, minHeight: 44, padding: 4,
            }}
            aria-label={`Cart, ${cartCount} items`}
          >
            <Icon name="bag"/>
            <AnimatePresence>
              {cartCount > 0 && (
                <motion.span
                  key="badge"
                  initial={{ scale: 0, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0, opacity: 0 }}
                  transition={springs.pop}
                  style={{
                    fontSize: 11, background: "var(--karavi-ebony)", color: "var(--karavi-cream)",
                    padding: "1px 7px", borderRadius: 999, display: "inline-block",
                  }}>{cartCount}</motion.span>
              )}
            </AnimatePresence>
          </motion.button>
        </div>

        <motion.button
          className="k-mobile-only"
          onClick={openCart}
          whileTap={{ scale: 0.94 }}
          style={{
            marginLeft: "auto", background: "none", border: 0, cursor: "pointer",
            color: "var(--fg-1)", display: "flex", alignItems: "center", gap: 5, minHeight: 44,
          }}
          aria-label={`Cart, ${cartCount} items`}
        >
          <Icon name="bag"/>
          {cartCount > 0 && <span style={{
            fontSize: 11, background: "var(--karavi-ebony)", color: "var(--karavi-cream)",
            padding: "1px 7px", borderRadius: 999,
          }}>{cartCount}</span>}
        </motion.button>
      </motion.header>

      <MobileNav
        open={mobileOpen}
        onClose={() => setMobileOpen(false)}
        goto={goto}
        openCart={openCart}
        cartCount={cartCount}
      />
    </>
  );
};

/* ── Footer (with reveal) ──────────────────────── */
const Footer = ({ goto }) => (
  <footer style={{ background: "var(--karavi-ebony)", color: "var(--karavi-cream)", marginTop: 96, overflow: "hidden" }}>
    <Reveal>
      <div className="k-footer-grid" style={{
        maxWidth: 1280, margin: "0 auto", padding: "80px 40px 36px",
        display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 48,
      }}>
        <div>
          <Logo height={72} variant="dark"/>
          <div style={{
            marginTop: 18, fontFamily: "var(--font-display)", fontSize: 24,
            fontStyle: "italic", lineHeight: 1.25, color: "var(--karavi-sand)",
          }}>
            Thoughts on craft,<br/>twice a month.
          </div>
          <div style={{
            marginTop: 16, display: "flex", gap: 0,
            borderBottom: "1px solid rgba(249,236,217,.4)", paddingBottom: 6,
          }}>
            <input
              placeholder="your email"
              aria-label="Email for newsletter"
              style={{
                flex: 1, background: "transparent", border: 0, outline: "none",
                color: "var(--karavi-cream)", fontSize: 14, padding: "6px 0",
              }}
            />
            <motion.button
              whileHover={{ x: 3 }}
              transition={{ duration: 0.2 }}
              style={{
                background: "none", border: 0, cursor: "pointer",
                color: "var(--karavi-cream)", fontSize: 11, letterSpacing: ".22em",
                textTransform: "uppercase", minHeight: 44,
              }}
            >Subscribe →</motion.button>
          </div>
          <div style={{ marginTop: 24, display: "flex", gap: 14, alignItems: "center" }}>
            {["instagram", "mail"].map(n => (
              <motion.button key={n} whileHover={{ y: -2 }} style={{ background: "none", border: 0, cursor: "pointer", color: "var(--karavi-cream)", minHeight: 44 }} aria-label={n}>
                <Icon name={n} size={18}/>
              </motion.button>
            ))}
          </div>
        </div>

        {[
          { title: "Shop", items: [["Bedding", "category:Bedding"], ["Rugs", "category:Rugs"], ["Cushions", "category:Cushions"], ["Lighting", "category:Lighting"], ["Décor", "category:Décor"]] },
          { title: "Studio", items: [["Our Story", "story"], ["Journal", "home"], ["Trade Program", "home"], ["Sustainability", "home"]] },
          { title: "Help", items: [["Shipping & Returns", "contact"], ["Care Guide", "contact"], ["Sizing", "contact"], ["Contact", "contact"]] },
        ].map(col => (
          <div key={col.title}>
            <Eyebrow color="rgba(249,236,217,.55)">{col.title}</Eyebrow>
            <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
              {col.items.map(([label, target]) => (
                <motion.a
                  key={label}
                  onClick={() => goto(target)}
                  whileHover={{ x: 3, opacity: 1 }}
                  transition={{ duration: 0.2 }}
                  style={{
                    border: 0, cursor: "pointer", color: "var(--karavi-cream)",
                    fontSize: 14, opacity: 0.8, display: "block", minHeight: 32,
                  }}
                >{label}</motion.a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </Reveal>

    <div style={{ borderTop: "1px solid rgba(249,236,217,.18)" }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto", padding: "20px 40px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        fontSize: 12, color: "rgba(249,236,217,.6)", letterSpacing: ".06em",
        flexWrap: "wrap", gap: 12,
      }}>
        <div>© 2026 Karavi Studio · Jaipur</div>
        <div>Free shipping above ₹ 4,000 · Made in India</div>
      </div>
    </div>
  </footer>
);

/* ── Section ───────────────────────────────────── */
const Section = ({ children, style, bleed, className }) => (
  <section className={className} style={{
    maxWidth: bleed ? "100%" : 1280,
    margin: "0 auto", padding: bleed ? 0 : "0 40px",
    ...style,
  }}>{children}</section>
);

/* ── Kilim divider ─────────────────────────────── */
const KilimDivider = ({ style }) => (
  <Reveal>
    <div style={{ display: "flex", alignItems: "center", gap: 16, opacity: 0.28, ...style }}>
      <div style={{ flex: 1, height: 1, background: "var(--karavi-ebony)" }}/>
      <svg width="22" height="22" viewBox="0 0 22 22" fill="var(--karavi-ebony)">
        <path d="M11 0 L15.4 6.6 L22 11 L15.4 15.4 L11 22 L6.6 15.4 L0 11 L6.6 6.6 Z"/>
      </svg>
      <div style={{ flex: 1, height: 1, background: "var(--karavi-ebony)" }}/>
    </div>
  </Reveal>
);

Object.assign(window, {
  Icon, Wordmark, Logo, Button, Eyebrow, Badge, Chip, Field,
  ProductCard, Header, Footer, Section, KilimDivider, MobileNav,
});