/* Orenwell marketing-site UI kit — local primitives.
   These mirror the published DS components (window.OrenwellDesignSystem_*),
   inlined so the kit renders standalone. They read brand tokens from styles.css. */

function Button({ children, variant = "primary", size = "md", fullWidth, iconLeft, iconRight, onClick, style = {}, ...rest }) {
  const sizes = {
    sm: { padding: "9px 16px", fontSize: 14, radius: "var(--radius-sm)" },
    md: { padding: "13px 24px", fontSize: 15, radius: "var(--radius-md)" },
    lg: { padding: "16px 30px", fontSize: 16, radius: "var(--radius-md)" },
  }[size];
  const variants = {
    primary: { background: "var(--teal-700)", color: "#fff", border: "1.5px solid var(--teal-700)" },
    secondary: { background: "transparent", color: "var(--teal-700)", border: "1.5px solid var(--teal-300)" },
    ghost: { background: "transparent", color: "var(--teal-700)", border: "1.5px solid transparent" },
    accent: { background: "var(--amber-500)", color: "var(--ink-900)", border: "1.5px solid var(--amber-500)" },
    inverse: { background: "#fff", color: "var(--teal-700)", border: "1.5px solid #fff" },
  }[variant];
  const [h, setH] = React.useState(false);
  const hover = {
    primary: { background: "var(--teal-800)" }, secondary: { background: "var(--teal-50)" },
    ghost: { background: "var(--teal-50)" }, accent: { background: "var(--amber-600)" }, inverse: { background: "var(--off-white)" },
  }[variant];
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: fullWidth ? "flex" : "inline-flex", width: fullWidth ? "100%" : "auto", alignItems: "center", justifyContent: "center", gap: 9,
        fontFamily: "var(--font-body)", fontWeight: 600, letterSpacing: "0.01em", lineHeight: 1, cursor: "pointer",
        transition: "background .2s var(--ease), transform .12s var(--ease)", ...sizes, ...variants, ...(h ? hover : {}), ...style }}
      {...rest}>{iconLeft}{children}{iconRight}</button>
  );
}

function Badge({ children, variant = "neutral", dot, style = {} }) {
  const v = {
    neutral: { background: "var(--gray-100)", color: "var(--gray-600)" },
    teal: { background: "var(--teal-50)", color: "var(--teal-700)" },
    amber: { background: "var(--amber-100)", color: "var(--amber-700)" },
    success: { background: "var(--success-bg)", color: "var(--success)" },
    outline: { background: "transparent", color: "var(--teal-700)", boxShadow: "inset 0 0 0 1.5px var(--teal-200)" },
  }[variant];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 12px", fontFamily: "var(--font-body)",
      fontSize: 12, fontWeight: 600, borderRadius: "var(--radius-pill)", lineHeight: 1, ...v, ...style }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor", opacity: .9 }} />}
      {children}
    </span>
  );
}

function Eyebrow({ children, style = {} }) {
  return <div style={{ fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--amber-700)", ...style }}>{children}</div>;
}

/* Lucide icon helper — set after lucide loads */
function Icon({ name, size = 22, color = "currentColor", stroke = 1.75, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, stroke: color, "stroke-width": stroke } });
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} aria-hidden="true" style={{ display: "inline-flex", ...style }} />;
}

/* Warm photography placeholder — stands in for real lifestyle imagery */
function Photo({ tone = "warm", label = "Lifestyle photography", height = 220, radius = "var(--radius-lg)", compact = false, src, objectPosition = "center", style = {} }) {
  const tones = {
    warm: "linear-gradient(135deg,#EADBC2,#C9A878 60%,#A98A5E)",
    teal: "linear-gradient(135deg,#1A5C57,#0A4C48 70%,#062E2B)",
    cream: "linear-gradient(135deg,#FAF7F2,#EFE3CE)",
    sage: "linear-gradient(135deg,#C0D5D2,#8FB2AE 70%,#5C918C)",
    mist: "linear-gradient(135deg,#DCE2E4,#A8B7B9 68%,#7B8E90)",
  }[tone];
  const dark = tone === "teal" || tone === "warm";
  // Real photograph supplied — fill the slot edge-to-edge, no caption pill (the site-wide image disclaimer covers these)
  if (src) {
    return (
      <div role="img" aria-label={label} style={{ position: "relative", height, borderRadius: radius, background: tones, overflow: "hidden", ...style }}>
        <img src={src} alt={label} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition, display: "block" }} />
      </div>
    );
  }
  // Compact: a small product/portrait thumbnail (no caption pill) — used in horizontal category cards
  if (compact) {
    return (
      <div title={label} role="img" aria-label={label} style={{ position: "relative", height, borderRadius: radius, background: tones, overflow: "hidden",
        display: "flex", alignItems: "center", justifyContent: "center", ...style }}>
        <Icon name="image" size={20} color={dark ? "rgba(255,255,255,.85)" : "rgba(79,89,87,.66)"} />
      </div>
    );
  }
  return (
    <div role="img" aria-label={label} style={{ position: "relative", height, borderRadius: radius, background: tones, overflow: "hidden",
      display: "flex", alignItems: "flex-end", padding: 14, ...style }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-body)", fontSize: 11.5,
        fontWeight: 500, letterSpacing: "0.02em", color: dark ? "rgba(255,255,255,.9)" : "var(--gray-600)",
        background: dark ? "rgba(20,32,30,.22)" : "rgba(255,255,255,.7)", padding: "5px 10px", borderRadius: "var(--radius-pill)", backdropFilter: "blur(4px)" }}>
        <Icon name="image" size={13} color={dark ? "#fff" : "var(--gray-600)"} /> {label}
      </span>
    </div>
  );
}

/* Smooth-scroll to an on-page element by id, accounting for the sticky header.
   Used by the homepage category cards (scroll to their section) and the nav
   "Get Started" button (scroll to the category cards). Avoids scrollIntoView. */
function owScrollToId(id, offset = 76) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - offset;
  window.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
}

Object.assign(window, { Button, Badge, Eyebrow, Icon, Photo, owScrollToId });