/* global React */
const { useState } = React;

const INK = "#1A1A1A";
const GREEN = "#1A6B3C";
const GREEN_DEEP = "#0F4D29";
const BRIGHT = "#2E9E5B";
const BRIGHT_HI = "#3DB86D";
const YELLOW = "#F2C12E";
const YELLOW_HI = "#FFD34A";
const OFF = "#F5F5F0";
const PAPER = "#FFFFFF";

// ---------- Button ----------
function Button({ children, variant = "primary", size = "md", onClick, style, href, as }) {
  const base = {
    fontFamily: "'DM Sans', sans-serif",
    fontWeight: 800,
    boxSizing: "border-box",
    border: `2.5px solid ${INK}`,
    borderRadius: 12,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
    boxShadow: `6px 6px 0 0 ${INK}`,
    transition: "transform 150ms cubic-bezier(.2,.7,.2,1), box-shadow 150ms cubic-bezier(.2,.7,.2,1), background 150ms",
    textDecoration: "none",
    letterSpacing: "-0.01em",
    lineHeight: 1,
  };
  const sizes = {
    sm: { padding: "10px 16px", fontSize: 14 },
    md: { padding: "14px 22px", fontSize: 16 },
    lg: { padding: "18px 30px", fontSize: 18 },
    xl: { padding: "22px 36px", fontSize: 22 },
  };
  const variants = {
    primary: { background: BRIGHT, color: "#fff" },
    primaryHover: { background: BRIGHT_HI },
    secondary: { background: YELLOW, color: INK },
    secondaryHover: { background: YELLOW_HI },
    ghostDark: { background: "transparent", color: "#fff", borderColor: "#fff", boxShadow: "none" },
    outline: { background: "transparent", color: INK, boxShadow: `4px 4px 0 0 ${INK}` },
  };
  const [hover, setHover] = useState(false);
  const [press, setPress] = useState(false);
  const variantStyle = variants[variant] || variants.primary;
  const hoverBg = variant === "primary" ? BRIGHT_HI : variant === "secondary" ? YELLOW_HI : variantStyle.background;
  const hoverStyle = hover && !press ? { transform: "translate(-1px,-1px)", boxShadow: variant === "ghostDark" ? "none" : `7px 7px 0 0 ${INK}`, background: hoverBg } : {};
  const pressStyle = press ? { transform: "translate(3px,3px)", boxShadow: variant === "ghostDark" ? "none" : `2px 2px 0 0 ${INK}`, background: variant === "primary" ? "#248048" : variant === "secondary" ? "#D9A719" : variantStyle.background } : {};
  const Tag = as || (href ? "a" : "button");
  const extra = href ? { href } : {};
  return (
    <Tag
      {...extra}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      onClick={onClick}
      style={{ ...base, ...sizes[size], ...variantStyle, ...hoverStyle, ...pressStyle, ...style }}
    >
      {children}
    </Tag>
  );
}

// ---------- Pill ----------
function Pill({ children, tone = "off", style }) {
  const tones = {
    off: { background: OFF, color: INK, border: `2.5px solid ${INK}` },
    paper: { background: PAPER, color: INK, border: `2.5px solid ${INK}` },
    yellow: { background: YELLOW, color: INK, border: `2.5px solid ${INK}` },
    green: { background: BRIGHT, color: "#fff", border: `2.5px solid ${INK}` },
    dark: { background: GREEN, color: OFF, border: `2.5px solid ${INK}` },
  };
  return (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      borderRadius: 999,
      padding: "6px 14px",
      fontFamily: "'DM Sans', sans-serif",
      fontWeight: 700,
      fontSize: 13,
      letterSpacing: ".02em",
      whiteSpace: "nowrap",
      ...tones[tone],
      ...style,
    }}>{children}</span>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children, color = BRIGHT, style }) {
  return (
    <div style={{
      fontFamily: "'DM Sans', sans-serif",
      fontWeight: 700,
      fontSize: 13,
      letterSpacing: ".14em",
      textTransform: "uppercase",
      color,
      ...style,
    }}>{children}</div>
  );
}

// ---------- Yellow marker highlight ----------
function HL({ children, tone = "yellow" }) {
  if (tone === "green") {
    return <span className="marker-green">{children}</span>;
  }
  return <span className="marker">{children}</span>;
}

// ---------- Icon: simple inline stroke SVG so it picks up currentColor ----------
function Icon({ name, size = 24, stroke = 1.75, style }) {
  const paths = {
    check: <path d="M20 6L9 17L4 12"/>,
    clock: <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    video: <><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M22 8l-6 4 6 4V8z"/></>,
    pdf: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></>,
    chart: <><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></>,
    trophy: <><path d="M6 9a6 6 0 0 0 12 0V3H6z"/><path d="M6 3H2v3a4 4 0 0 0 4 4"/><path d="M18 3h4v3a4 4 0 0 1-4 4"/><path d="M10 15h4v6h-4z"/><path d="M8 21h8"/></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    volumeOff: <><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></>,
    puzzle: <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z"/>,
    key: <><path d="M21 2l-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/><path d="M15.5 7.5l3 3"/></>,
    map: <><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></>,
    brain: <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2zm5 0a2.5 2.5 0 0 0-2.5 2.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2z"/>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowDown: <><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></>,
    lightning: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    shield: <path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/>,
    sparkles: <><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z"/><path d="M19 14l1 2.5L22.5 17.5 20 18.5 19 21l-1-2.5L15.5 17.5 18 16.5 19 14z"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={stroke}
      strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name] || paths.check}
    </svg>
  );
}

// ---------- IconCapsule (40x40 yellow box around an icon) ----------
function IconCapsule({ name, tone = "yellow", size = 48 }) {
  const tones = {
    yellow: { bg: YELLOW, fg: INK },
    green: { bg: BRIGHT, fg: "#fff" },
    ink: { bg: INK, fg: YELLOW },
    paper: { bg: PAPER, fg: INK },
  };
  const t = tones[tone];
  return (
    <div style={{
      width: size, height: size,
      background: t.bg, color: t.fg,
      border: `2.5px solid ${INK}`,
      borderRadius: 14,
      display: "flex", alignItems: "center", justifyContent: "center",
      flex: "none",
      boxShadow: `3px 3px 0 0 ${INK}`,
    }}>
      <Icon name={name} size={Math.round(size * 0.55)} stroke={2} />
    </div>
  );
}

Object.assign(window, {
  Button, Pill, Eyebrow, HL, Icon, IconCapsule,
  INK, GREEN, GREEN_DEEP, BRIGHT, BRIGHT_HI, YELLOW, YELLOW_HI, OFF, PAPER,
});
