{label && {label}{required && *}} {textarea ?

setF(true)} onBlur={() => setF(false)} style={istyle} />
        : options
        ? <select value={value} onChange={onChange} onFocus={() => setF(true)} onBlur={() => setF(false)} style={{ ...istyle, appearance: "none", cursor: "pointer" }}>{options.map((o) => <option key={o} value={o}>{o}</option>)}</select>
        : <input type={type} placeholder={placeholder} value={value} onChange={onChange} onFocus={() => setF(true)} onBlur={() => setF(false)} style={istyle} />}
    </div>
  );
}

/* ---------- Logo ---------- */
function Logo({ variant = "green", size = 38, withText = true, textColor }) {
  const src = WW.LOGO + (variant === "cream" ? "wonderwild-mark-cream.png" : "wonderwild-mark-green.png");
  const tc = textColor || (variant === "cream" ? "var(--cream-100)" : "var(--green-800)");
  return (
    <a href="index" style={{ display: "inline-flex", alignItems: "center", gap: "12px", textDecoration: "none" }}>
      <img src={src} alt="Wonderwild" width={size} height={size} className="ww-logo-img" style={{ objectFit: "contain" }} />
      {withText && <span className="ww-logo-wordmark" style={{ fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.22em", fontSize: "1.05rem", color: tc }}>Wonderwild</span>}
    </a>
  );
}

/* ---------- tiny inline UI glyphs (Lucide-style strokes) ---------- */
function Glyph({ d, size = 20, stroke = "currentColor", sw = 1.5, style }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>{d}</svg>;
}
const Icons = {
  arrowRight: <Glyph d={<><path d="M5 12h14" /><path d="m13 5 7 7-7 7" /></>} />,
  arrowLeft: <Glyph d={<><path d="M19 12H5" /><path d="m11 19-7-7 7-7" /></>} />,
  chevDown: (p) => <Glyph size={14} d={<path d="m6 9 6 6 6-6" />} {...p} />,
  chevRight: (p) => <Glyph size={16} d={<path d="m9 6 6 6-6 6" />} {...p} />,
  plus: (p) => <Glyph d={<><path d="M12 5v14" /><path d="M5 12h14" /></>} {...p} />,
  minus: (p) => <Glyph d={<path d="M5 12h14" />} {...p} />,
  menu: <Glyph d={<><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>} />,
  close: <Glyph d={<><path d="M18 6 6 18" /><path d="M6 6l12 12" /></>} />,
  pin: <Glyph size={16} d={<><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></>} />,
  clock: <Glyph size={16} d={<><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>} />,
  train: <Glyph size={16} d={<><rect x="4" y="3" width="16" height="14" rx="2" /><path d="M4 11h16" /><path d="m6 21 2-3M18 21l-2-3" /><circle cx="8.5" cy="14" r="0.6" fill="currentColor" /><circle cx="15.5" cy="14" r="0.6" fill="currentColor" /></>} />,
  car: <Glyph size={16} d={<><path d="M5 13 6.5 8.5A2 2 0 0 1 8.4 7h7.2a2 2 0 0 1 1.9 1.5L19 13" /><path d="M3 13h18v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" /><circle cx="7" cy="15.5" r="0.6" fill="currentColor" /><circle cx="17" cy="15.5" r="0.6" fill="currentColor" /></>} />,
  instagram: <Glyph d={<><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" /></>} />,
  facebook: <Glyph d={<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />} />,
  check: <Glyph d={<path d="M20 6 9 17l-5-5" />} />,
  leaf: <Glyph size={16} d={<><path d="M11 20A7 7 0 0 1 4 13c0-5 4-9 16-9 0 12-5 16-9 16Z" /><path d="M5 20c4-6 8-8 12-9" /></>} />,
};

function ScrollCarousel({ children, trackStyle }) {
  const scrollRef = React.useRef(null);
  const [canLeft,  setCanLeft]  = React.useState(false);
  const [canRight, setCanRight] = React.useState(false);

const check = React.useCallback(() => {
    const el = scrollRef.current;
    if (!el) return;
    setCanLeft(el.scrollLeft > 4);
    setCanRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 4);
  }, []);

React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    check();
    el.addEventListener('scroll', check, { passive: true });
    const ro = new ResizeObserver(check);
    ro.observe(el);
    return () => { el.removeEventListener('scroll', check); ro.disconnect(); };
  }, [check]);

const shift = (dir) => {
    const el = scrollRef.current;
    if (el) el.scrollBy({ left: dir * el.clientWidth * 0.78, behavior: 'smooth' });
  };

const needsScroll = canLeft || canRight;

return (
    <div>
      {needsScroll && (
        <div style={{ display: "flex", justifyContent: "flex-end", paddingRight: "clamp(20px, 5vw, 80px)", marginBottom: "16px" }}>
          <div style={{ display: "flex", gap: "8px" }}>
            {arrowBtn(-1, canLeft,  "Previous")}
            {arrowBtn( 1, canRight, "Next")}
          </div>
        </div>
      )}
      <div className="ww-exp-scroll" ref={scrollRef}>
        <div className="ww-exp-track" style={trackStyle}>
          {children}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WW, PAGES, NAV, Img, Button, Eyebrow, Tag, Field, Logo, Glyph, Icons, ScrollCarousel });