const Button = ({ children, variant = "primary", size = "md", onClick, href }) => {
  const base = {
    fontFamily: "var(--jh-font-mono)",
    fontWeight: 500,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    borderRadius: 2,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    transition: "all 180ms cubic-bezier(0.2,0,0.1,1)",
    border: "1px solid",
    textDecoration: "none",
    borderBottom: "1px solid",
  };
  const sizes = {
    sm: { padding: "8px 14px", fontSize: 11 },
    md: { padding: "12px 22px", fontSize: 12 },
    lg: { padding: "16px 28px", fontSize: 13 },
  };
  const variants = {
    primary: { background: "var(--jh-fg)", color: "var(--jh-bg)", borderColor: "var(--jh-fg)" },
    amber:   { background: "var(--jh-amber)", color: "var(--jh-bg)", borderColor: "var(--jh-amber)" },
    ghost:   { background: "transparent", color: "var(--jh-fg)", borderColor: "var(--jh-rule-strong)" },
    "ghost-amber": { background: "transparent", color: "var(--jh-amber)", borderColor: "var(--jh-amber-soft)" },
  };
  const Tag = href ? "a" : "button";
  return (
    <Tag onClick={onClick} href={href} style={{ ...base, ...sizes[size], ...variants[variant] }}>
      {children}
    </Tag>
  );
};
window.Button = Button;

const Field = ({ label, type = "text", multiline, value, onChange, placeholder, help }) => {
  const [focused, setFocused] = React.useState(false);
  const Tag = multiline ? "textarea" : "input";
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{
        fontFamily: "var(--jh-font-mono)",
        fontSize: 10,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: "var(--jh-fg-2)",
      }}>{label}</span>
      <Tag
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        rows={multiline ? 4 : undefined}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{
          fontFamily: "var(--jh-font-mono)",
          fontSize: 13,
          background: "var(--jh-bg-sunken)",
          border: focused ? "1px solid var(--jh-amber)" : "1px solid var(--jh-rule-strong)",
          color: "var(--jh-fg)",
          padding: "10px 12px",
          borderRadius: 2,
          outline: "none",
          boxShadow: focused ? "0 0 0 2px rgba(184,137,58,0.2)" : "none",
          resize: multiline ? "vertical" : "none",
          width: "100%",
          boxSizing: "border-box",
          transition: "border-color 180ms cubic-bezier(0.2,0,0.1,1)",
        }}
      />
      {help && <span style={{
        fontFamily: "var(--jh-font-serif)",
        fontStyle: "italic",
        fontSize: 11,
        color: "var(--jh-fg-3)",
      }}>{help}</span>}
    </label>
  );
};
window.Field = Field;

const Tag = ({ children, color }) => (
  <span style={{
    fontFamily: "var(--jh-font-mono)",
    fontSize: 10,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    padding: "3px 10px",
    border: `1px solid ${color || "var(--jh-rule-strong)"}`,
    color: color || "var(--jh-fg-2)",
  }}>{children}</span>
);
window.Tag = Tag;

const Badge = ({ children, tone = "available" }) => {
  const colors = {
    available: "var(--jh-success)",
    booked: "var(--jh-fg-3)",
    alert: "var(--jh-error)",
  };
  return (
    <span style={{
      fontFamily: "var(--jh-font-mono)",
      fontSize: 10,
      letterSpacing: "0.16em",
      textTransform: "uppercase",
      padding: "4px 12px",
      borderRadius: 999,
      border: `1px solid ${colors[tone]}`,
      color: colors[tone],
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: colors[tone] }} />
      {children}
    </span>
  );
};
window.Badge = Badge;

const Eyebrow = ({ children, color }) => (
  <span style={{
    fontFamily: "var(--jh-font-mono)",
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: color || "var(--jh-amber)",
  }}>{children}</span>
);
window.Eyebrow = Eyebrow;