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

/* Pinned CDNs — `@latest` on unpkg returns 302 redirects that iOS Safari and
   slow mobile networks often fail to follow, which was making icons go
   invisible on phones. jsdelivr serves the file directly without a redirect.

   Two sources:
     - lucide-static  →  UI icons (default)
     - simple-icons   →  brand logos (LinkedIn, YouTube, etc.)
                         Trigger by prefixing the name with "brand:", e.g.
                         <Icon name="brand:linkedin" /> */
const LUCIDE_VERSION = "1.8.0";
const SIMPLE_ICONS_VERSION = "13";

function Icon({ name, size = 20, color = "currentColor", style }) {
  const isBrand = typeof name === "string" && name.startsWith("brand:");
  const iconName = isBrand ? name.slice("brand:".length) : name;
  const src = isBrand
    ? `https://cdn.jsdelivr.net/npm/simple-icons@${SIMPLE_ICONS_VERSION}/icons/${iconName}.svg`
    : `https://cdn.jsdelivr.net/npm/lucide-static@${LUCIDE_VERSION}/icons/${iconName}.svg`;
  return (
    <span
      role="img"
      aria-label={iconName}
      style={{
        display: "inline-block",
        width: size,
        height: size,
        backgroundColor: color,
        WebkitMask: `url("${src}") center / contain no-repeat`,
        mask: `url("${src}") center / contain no-repeat`,
        flexShrink: 0,
        ...style,
      }}
    />
  );
}

/* Button — Combo B: primary is a blue gradient that lifts + glows deeper on
   hover; secondary is a tinted-blue outline that shares the brand colour. */
function Button({ variant = "primary", children, icon, onClick, as = "button", href, ...rest }) {
  const bmBtnStyles = {
    base: {
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center",
      gap: 10,
      fontFamily: "var(--bm-font-body)",
      fontSize: 15,
      fontWeight: 600,
      padding: "14px 22px",
      borderRadius: 14,
      border: "none",
      cursor: "pointer",
      letterSpacing: 0,
      lineHeight: 1,
      textDecoration: "none",
      transition:
        "background 180ms var(--bm-ease-standard), " +
        "color 180ms var(--bm-ease-standard), " +
        "transform 180ms var(--bm-ease-standard), " +
        "box-shadow 220ms var(--bm-ease-standard), " +
        "border-color 180ms var(--bm-ease-standard)",
    },
    primary: {
      background: "linear-gradient(135deg, #6D91F2 0%, #4269D4 100%)",
      color: "#fff",
    },
    secondary: {
      background: "rgba(109,145,242,0.04)",
      color: "var(--bm-text)",
      border: "1px solid rgba(109,145,242,0.28)",
    },
    ghost: {
      background: "transparent",
      color: "var(--bm-accent)",
      padding: "14px 4px",
    },
  };

  const [hover, setHover] = useState(false);

  const hoverStyles = {
    primary: {
      transform: "translateY(-1px)",
      boxShadow: "0 18px 40px -14px rgba(109,145,242,0.75)",
    },
    secondary: {
      background: "rgba(109,145,242,0.10)",
      borderColor: "rgba(109,145,242,0.5)",
    },
    ghost: {
      color: "var(--bm-accent-hover)",
    },
  };

  const restingShadow = {
    primary:   { boxShadow: "0 10px 30px -14px rgba(109,145,242,0.45)" },
    secondary: {},
    ghost:     {},
  };

  const style = {
    ...bmBtnStyles.base,
    ...bmBtnStyles[variant],
    ...restingShadow[variant],
    ...(hover ? hoverStyles[variant] : {}),
  };

  const Tag = as === "a" ? "a" : "button";
  return (
    <Tag
      href={href}
      style={style}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      {...rest}
    >
      {children}
      {icon && <Icon name={icon} size={16} />}
    </Tag>
  );
}

function Pill({ children, variant = "soft", icon }) {
  const variants = {
    solid:   { background: "var(--bm-accent)", color: "var(--bm-canvas)", border: "1px solid transparent" },
    soft:    { background: "rgba(109,145,242,0.12)", color: "var(--bm-accent)", border: "1px solid rgba(109,145,242,0.28)" },
    neutral: { background: "var(--bm-surface)", color: "var(--bm-text-muted)", border: "1px solid var(--bm-hairline)" },
    success: { background: "rgba(95,226,176,0.1)", color: "#5FE2B0", border: "1px solid rgba(95,226,176,0.28)" },
  };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "6px 12px", borderRadius: 999,
      fontSize: 12, fontWeight: 500, lineHeight: 1,
      ...variants[variant],
    }}>
      {icon && <Icon name={icon} size={12} />}
      {children}
    </span>
  );
}

function Eyebrow({ children }) {
  return (
    <div style={{
      fontSize: 12, fontWeight: 600,
      letterSpacing: "0.1em", textTransform: "uppercase",
      color: "var(--bm-accent)",
    }}>{children}</div>
  );
}

Object.assign(window, { Icon, Button, Pill, Eyebrow });