/* shared.jsx — palettes + Wordmark. Everything is attached to `window`
   so that each <script type="text/babel"> can see it. */

window.PALETTES = {
  editorial: {
    name: "Editorial Rickhouse",
    bg: "#F3EBDC",
    surface: "#ECE1CB",
    card: "#FFFFFF",
    ink: "#1B0E08",
    inkMuted: "rgba(27,14,8,0.62)",
    rule: "rgba(27,14,8,0.14)",
    accent: "#8C3A1F",
    accent2: "#C98A3B",
    display: "'Playfair Display', Georgia, serif",
    serif: "'Cormorant Garamond', Georgia, serif",
    sans: "'Inter Tight', system-ui",
    mono: "'JetBrains Mono', monospace",
    titleWeight: 500,
    titleTracking: "-0.02em",
    radius: 4,
  },
  minimal: {
    name: "Modern Minimal",
    bg: "#FAFAF6",
    surface: "#F1EEE6",
    card: "#FFFFFF",
    ink: "#141414",
    inkMuted: "rgba(20,20,20,0.58)",
    rule: "rgba(20,20,20,0.12)",
    accent: "#D4A574",
    accent2: "#2A2A2A",
    display: "'Inter Tight', system-ui",
    serif: "'Cormorant Garamond', Georgia, serif",
    sans: "'Inter Tight', system-ui",
    mono: "'JetBrains Mono', monospace",
    titleWeight: 600,
    titleTracking: "-0.03em",
    radius: 14,
  },
  vintage: {
    name: "Vintage Distillery",
    bg: "#1B0E08",
    surface: "#241510",
    card: "#2B1A12",
    ink: "#F3EBDC",
    inkMuted: "rgba(243,235,220,0.62)",
    rule: "rgba(243,235,220,0.12)",
    accent: "#E9B474",
    accent2: "#C98A3B",
    display: "'Cormorant Garamond', serif",
    serif: "'Cormorant Garamond', Georgia, serif",
    sans: "'Inter Tight', system-ui",
    mono: "'JetBrains Mono', monospace",
    titleWeight: 500,
    titleTracking: "0.01em",
    radius: 2,
  },
};

/* Base wordmark. The main HTML monkey-patches this so it can read the
   current brand name from window.__BRAND. */
window.Wordmark = function Wordmark({ palette, size = 22, inverted = false, style = {} }) {
  const fg = inverted ? palette.bg : palette.ink;
  return (
    <div style={{
      display: "inline-flex", alignItems: "baseline", gap: 1,
      fontFamily: palette.display, fontSize: size, fontWeight: palette.titleWeight,
      letterSpacing: palette.titleTracking, color: fg, lineHeight: 1, ...style,
    }}>
      <span>CrowdCask</span>
      <span style={{ fontStyle: "italic", opacity: 0.72, marginLeft: 1 }}>'d</span>
    </div>
  );
};

/* Tiny helper: a thin horizontal rule used across surfaces. */
window.Hairline = function Hairline({ color = "currentColor", opacity = 0.14, style = {} }) {
  return <div style={{ height: 1, background: color, opacity, ...style }} />;
};

/* Small pill / tag label. */
window.Pill = function Pill({ children, palette, tone = "accent", style = {} }) {
  const bg = tone === "accent" ? palette.accent : "rgba(0,0,0,0.06)";
  const fg = tone === "accent" ? "#FFF" : palette.ink;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "4px 10px", borderRadius: 999,
      fontFamily: palette.mono, fontSize: 10, letterSpacing: "0.12em",
      textTransform: "uppercase", background: bg, color: fg, ...style,
    }}>{children}</span>
  );
};

/* A small cask/barrel SVG used as hero art and empty states. */
window.__barrelIdCounter = 0;
window.BarrelArt = function BarrelArt({ size = 120, palette, style = {} }) {
  const stroke = palette.ink;
  const hoop = palette.accent;
  const id = React.useMemo(() => `cask-wood-${++window.__barrelIdCounter}`, []);
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" style={style}>
      <defs>
        <linearGradient id={id} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={palette.accent2} stopOpacity="0.95" />
          <stop offset="1" stopColor={palette.accent} stopOpacity="0.9" />
        </linearGradient>
      </defs>
      <ellipse cx="60" cy="26" rx="28" ry="8" fill={palette.accent2} opacity="0.9" />
      <path d="M32 26 C 26 50, 26 70, 32 94 L 88 94 C 94 70, 94 50, 88 26 Z"
        fill={`url(#${id})`} stroke={stroke} strokeOpacity="0.25" />
      <rect x="28" y="36" width="64" height="3" fill={hoop} opacity="0.85" />
      <rect x="26" y="56" width="68" height="3" fill={hoop} opacity="0.85" />
      <rect x="28" y="76" width="64" height="3" fill={hoop} opacity="0.85" />
      <ellipse cx="60" cy="94" rx="28" ry="6" fill={stroke} opacity="0.18" />
      <ellipse cx="60" cy="26" rx="28" ry="8" fill="none" stroke={stroke} strokeOpacity="0.25" />
    </svg>
  );
};