// apple-chrome.jsx — Shared Apple-ish chrome primitives used across cards.
// Provides: GlassCard, Pill, Eyebrow, FieldLabel.

function GlassCard({ dir, children, style = {}, padding = 18, radius, dark }) {
  const r = radius ?? dir.radius;
  return (
    <div style={{
      position: "relative",
      background: dark ? "rgba(28,30,38,0.55)" : dir.glassBg,
      WebkitBackdropFilter: "blur(28px) saturate(180%)",
      backdropFilter: "blur(28px) saturate(180%)",
      border: `0.5px solid ${dark ? "rgba(255,255,255,0.10)" : dir.glassBorder}`,
      borderRadius: r,
      boxShadow: dir.shadowGlass,
      padding,
      overflow: "hidden",
      ...style,
    }}>
      <div style={{
        position: "absolute", inset: 0, borderRadius: r, pointerEvents: "none",
        background: dir.highlight, opacity: dark ? 0.5 : 1,
      }} />
      <div style={{ position: "relative" }}>{children}</div>
    </div>
  );
}

function Pill({ dir, children, primary, onDark, size = "md", icon, style = {} }) {
  const padY = size === "lg" ? 14 : size === "sm" ? 8 : 11;
  const padX = size === "lg" ? 22 : size === "sm" ? 14 : 18;
  const font = size === "lg" ? 14 : size === "sm" ? 12 : 13;
  const bg = primary
    ? dir.accent
    : onDark ? "rgba(255,255,255,0.10)" : "rgba(255,255,255,0.65)";
  const color = primary ? dir.accentOn : onDark ? dir.ink : dir.ink;
  const border = primary
    ? "transparent"
    : onDark ? "rgba(255,255,255,0.16)" : "rgba(0,0,0,0.08)";
  return (
    <button style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      background: bg, color, border: `0.5px solid ${border}`,
      padding: `${padY}px ${padX}px`,
      fontFamily: dir.display, fontSize: font, fontWeight: 600,
      letterSpacing: "-0.005em", borderRadius: 999, cursor: "default",
      WebkitBackdropFilter: primary ? "none" : "blur(20px) saturate(180%)",
      backdropFilter: primary ? "none" : "blur(20px) saturate(180%)",
      boxShadow: primary
        ? `inset 0 0.5px 0 rgba(255,255,255,0.35), 0 8px 22px -8px ${dir.accent}88`
        : "inset 0 0.5px 0 rgba(255,255,255,0.6)",
      ...style,
    }}>
      {icon && <span style={{ display: "inline-flex" }}>{icon}</span>}
      {children}
    </button>
  );
}

function Eyebrow({ dir, color, children }) {
  const c = color || dir.accent;
  return (
    <div style={{
      fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.14em",
      textTransform: "uppercase", color: c,
      display: "inline-flex", alignItems: "center", gap: 8,
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: 999, background: c,
        display: "inline-block", boxShadow: `0 0 0 3px ${c}22`,
      }} />
      {children}
    </div>
  );
}

function FieldLabel({ dir, children }) {
  return (
    <div style={{
      fontFamily: dir.mono, fontSize: 9, letterSpacing: "0.14em",
      textTransform: "uppercase", color: dir.inkMuted, marginBottom: 4,
    }}>{children}</div>
  );
}

Object.assign(window, { GlassCard, Pill, Eyebrow, FieldLabel });