// Askable — shared UI kit primitives (globals on window)
// Depends on colors_and_type.css + React 18 UMD + Babel standalone.

const { useState } = React;

const Logo = ({ variant = "red", height = 32 }) => (
  <img src={`assets/askable-logo-${variant}.svg?v=3`} alt="Askable" style={{ height }} />
);

const IconMark = ({ variant = "red", size = 28 }) => (
  <img src={`assets/askable-icon-${variant}.svg?v=3`} alt="" style={{ height: size, width: "auto" }} />
);

// Lucide-style inline icons (1.5 stroke, round)
const Icon = ({ name, size = 20, color = "currentColor", strokeWidth = 1.5 }) => {
  const paths = {
    arrowRight: <><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></>,
    arrowLeft:  <><path d="M19 12H5"/><path d="M11 19l-7-7 7-7"/></>,
    chevronDown:<path d="m6 9 6 6 6-6"/>,
    menu: <><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></>,
    close: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    user: <><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    play: <polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/>,
    check: <path d="M20 6 9 17l-5-5"/>,
    video: <><rect x="2" y="6" width="14" height="12" rx="2"/><path d="m22 8-6 4 6 4V8Z"/></>,
    bolt: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" fill="currentColor" stroke="none"/>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor" stroke="none"/>,
    sparkle: <><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="m5 5 3 3"/><path d="m16 16 3 3"/><path d="m5 19 3-3"/><path d="m16 8 3-3"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: "inline-block", verticalAlign: "middle", flexShrink: 0 }}>
      {paths[name]}
    </svg>
  );
};

// Pill button — Bricolage Grotesque Bold label, three styles, four sizes.
const Button = ({ variant = "solid", size = "lg", icon, iconLeft, children, onClick, style }) => {
  const [hover, setHover] = useState(false);
  const [pressed, setPressed] = useState(false);

  const sizes = {
    xl: { h: 64, pad: "0 40px", fz: 22, gap: 8, ic: 24 },
    lg: { h: 54, pad: "0 32px", fz: 20, gap: 8, ic: 20 },
    md: { h: 48, pad: "0 24px", fz: 18, gap: 8, ic: 18 },
    sm: { h: 36, pad: "0 16px", fz: 16, gap: 8, ic: 16 },
  }[size];

  const variants = {
    solid:  { bg: hover ? "#1c1c1c"            : "rgb(15,15,15)", fg: "#fff", border: "rgb(15,15,15)" },
    red:    { bg: hover ? "rgb(255,121,123)"   : "rgb(251,81,83)", fg: "#fff", border: "transparent" },
    white:  { bg: hover ? "rgba(255,255,255,.92)" : "#fff", fg: "rgb(34,6,19)", border: "transparent" },
    hollow: { bg: hover ? "rgba(15,15,15,.06)" : "transparent", fg: "rgb(34,6,19)", border: "rgb(15,15,15)" },
    empty:  { bg: hover ? "rgba(15,15,15,.06)" : "transparent", fg: "rgb(34,6,19)", border: "transparent" },
  }[variant];

  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); }}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      style={{
        height: sizes.h, padding: sizes.pad, borderRadius: 999,
        background: variants.bg, color: variants.fg,
        border: `1px solid ${variants.border}`,
        fontFamily: "Bricolage Grotesque, sans-serif", fontWeight: 700, fontSize: sizes.fz,
        lineHeight: 0.94, letterSpacing: "0.002em",
        display: "inline-flex", alignItems: "center", gap: sizes.gap, cursor: "pointer",
        transform: pressed ? "translateY(0)" : hover ? "translateY(-1px)" : "translateY(0)",
        transition: "transform .15s ease, background .15s ease, box-shadow .2s ease",
        whiteSpace: "nowrap", flexShrink: 0,
        ...style,
      }}
    >
      {iconLeft && <Icon name={iconLeft} size={sizes.ic} />}
      {children}
      {icon && <Icon name={icon} size={sizes.ic} />}
    </button>
  );
};

// Chip / pill label — for category, status
const Chip = ({ children, tone = "peach", dot, style }) => {
  const tones = {
    peach: { bg: "rgb(255,239,241)", fg: "rgb(34,6,19)", dot: "rgb(251,81,83)" },
    mint:  { bg: "#EEF7F3", fg: "#0E5A45", dot: "#1a8a6a" },
    lilac: { bg: "rgb(223,181,255)", fg: "rgb(15,15,15)", dot: "rgb(15,15,15)" },
    ink:   { bg: "rgb(15,15,15)", fg: "#fff", dot: "#fff" },
    neutral: { bg: "#F1F1F1", fg: "rgb(15,15,15)", dot: "rgb(15,15,15)" },
  }[tone];
  const baseSize = (style && style.fontSize) || 13;
  const baseH = baseSize >= 16 ? 36 : 30;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6, height: baseH, padding: "0 14px",
      borderRadius: 999, background: tones.bg, color: tones.fg,
      fontFamily: "Instrument Sans, sans-serif", fontWeight: 600, fontSize: 13, lineHeight: 1,
      ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: tones.dot }} />}
      {children}
    </span>
  );
};

// Card wrapper — default warm-paper-on-white style
const Card = ({ children, style, pad = 24, tone = "paper", elevation = 3 }) => {
  const bg = tone === "paper" ? "rgb(249,245,244)" : tone === "white" ? "#fff" : tone;
  const elev = {
    1: "0 1px 2px rgba(44,17,11,0.05)",
    2: "0 2.6px 9.9px 0 rgba(44,17,11,0.1)",
    3: "0 7.9px 13.2px -6.6px rgba(44,17,11,0.1), 0 2.6px 9.9px 0 rgba(44,17,11,0.1)",
    4: "0 10.5px 17.5px -8.7px rgba(44,17,11,0.1), 0 3.5px 13.1px 0 rgba(44,17,11,0.1)",
  }[elevation];
  return (
    <div style={{
      background: bg, borderRadius: 20, padding: pad,
      border: "1px solid rgba(34,6,19,0.10)", boxShadow: elev,
      ...style,
    }}>{children}</div>
  );
};

Object.assign(window, { Logo, IconMark, Icon, Button, Chip, Card });